CSS3的使用

来源：互联网发布：c语言求1000以内素数编辑：程序博客网时间：2024/06/07 16:17

转载请标明出处：http://blog.csdn.net/wu_wxc/article/details/50927867
本文出自【吴孝城的CSDN博客】

CSS全称：层叠样式表（Cascading Style Sheets），就是一种用来改变内容外观的表现，例如文字的大小、颜色，或是一些背景图片，边框等等

在CSS中，

注释用

/*这里是要注释的语句*/

来注释

使用样式可以编写一次代码，多个地方使用

样式由“选择符”和“声明”组成，

声明由属性和值组成

选择符又称选择器，可以自己取名字

声明是在“{}”中的，属性和值之间用“:”分隔，有多条声明时，用“;”

如：

p{font-size:10px; color: red;font-family: "微软雅黑";font-weight: bold;font-style: italic;text-decoration: underline;text-decoration: line-through;text-indent: 2em;line-height: 20px;letter-spacing: 20px;word-spacing: 20px;text-align: center;}

px为像素

颜色由RGB，也就是R(red)、G(green)、B(blue)三原色组成

每一项取值0~255，也就是0%~100%

如：

h1{color: rgb(10%,20%,50%);}

也可将每一项的值转为十六进制00~ff

如：

h1{color: #00ff55;}

font-weight: bold; 粗体
font-style: italic; 斜体
text-decoration: underline; 下划线
text-decoration: line-through; 删除线
text-indent: 2em; 缩进
line-height: 20px; 行间距(行高)，不许使用负值
letter-spacing: 20px; 文字或字母间距
word-spacing: 20px; 单词间距
text-align: center; 块元素中的文字或图片剧中

元素内容与边框用padding-top:20px;之类设置，当只写padding:20px,20px,20px,20px;时，为上，右，下，左

元素与其他元素之间的边界用margin-top:20px之类来设置，当只写margin:20px,20px,20px,20px;时，为上，右，下，左

font-weight: ;属性设置文本的精细

其值有：

normal：默认值，定义标准字符

bold：粗体字符

bolder：更粗的字符

lighter：定义更细的字符

100~900：400等normal，700等bold

inherit：规定应该从父元素继承字体的粗细

white-space:;属性设置如何处理元素内的空白

其值有：

normal：默认，空白会被浏览器忽略

pre：空白会被浏览器保留,其行为方式类似Html中的 <pre> 标签

nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止

pre-wrap：保留空白符序列，但是正常地进行换行

pre-line：合并空白符序列，但是保留换行符

in-herit：规定应该从父元素继承 white-space 属性的值

visibility: ;设置元素是否可见

其值有：

visible：默认值，元素是可见的

hidden：元素不可见

collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"

inherit：规定应该从父元素继承 visibility 属性的值

overflow: ; 属性规定当内容溢出元素框时发生的事情

其值有：

visible：默认值。内容不会被修剪，会呈现在元素框之外

hidden：内容会被修剪，并且其余内容是不可见的

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

auto：处适配，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

inherit：规定应该从父元素继承 overflow 属性的值

最后的";"可以不要，建议写上，方便以后修改添加

CSS样式的使用可分为三种：内联式、嵌入式、外部式

内联式：就是把CSS样式代码直接写在Html标签中

<p style="font-size:20px; color:red">这里的文字大小将是20px，颜色为红色</p>

嵌入式：必须写在<style></style>之间，style一般写在<head></head>之间

如：

<style type="text/css">p{color: red;}</style>

style="text/css"是告诉浏览器这里面的文本内容(text)要当层叠样式(css)来解析

外部式：也称为外联式，就是把CSS代码单独写在一个外部文件里，文件扩展名为“.css”，使用<link>标签将css样式链接到Html文件内，

如：

<link href="my.css" rel="stylesheet" type="text/css" />

其中rel="stylesheet" type="text/css"是固定写法，不可修改

一般写在<head></head>标签中

三种样式写法的优先级：内联式>嵌入式>外部式

CSS选择器：标签选择器、类选择器、ID选择器、子选择器、通用选择器、伪类选择符、分组选择符

标签选择器：就是Html中的标签，如<html>、<body>、<a>、<p>、、<h1>、<img>等

类选择器：以英文“.”开头，名字任意，中文除外

如：

.myStyle{color: red;}

使用时用class="类选择器名"

如

<span class="mystyle">这里的文字为红色</span>

ID选择器：以"#"开头，名字任意，中文除外

如：

#myStyle{color: red;}

使用时用id="ID选择器名"

如

<span id="myStyle">这里的文字为红色</span>

类选择器和ID选择器的区别在ID选择器在一个Html文档中只能被使用一次，而类选择器可以被多次使用

类选择器可以为一个元素设置多个样式，而ID选择器不行

如：

.stress{color: green;}.bigSize{font-size: 20px;}

使用：

<span class="stress bigSize">字体为绿色，20px</span>

而不能用ID

如：

#stressID{color: green;}#bigSizeID{font-size: 20px;}

<span id="stressID bigSizeID">这个用法是错的</span>

子选择器：使用">"符号来指定标签元素的第一代子元素拥有样式

如：

.first>span{color: red;}

使用：

<p class="first">这个没有<span>第一个span里字体为红色<span>这是第二代，所以没有独立的样式</span><span>这也是第一代span，也有样式</span></span></p>

包含(后代)选择器：就是在多个选择器之间加空格，

如：

.first span{color: red;}

包含选择器与子选择器的区别：子选择器只作用于第一代后代，而包含选择器作用于所有后代

如：

.first li{border: 1px solid red;}

<ul class="first"><li>一</li><li>二</li><li>三</li></ul>

通用行径器：使用"*"来指定，功能最强大，作用于所有的html标签

如：

*{color: red;}

这样html中所有的文字都是红色的

伪类选择符：允许给html不存在的标签设置样式，如一个链接，在鼠标划过时，链接被点击，已选中等的颜色的改变

如：

/* 鼠标划过*/a:hover{color: red;}/* 已选中的链接*/a:active{color: #0000ff;}

使用：

<a href="http://www.dcloud.io/">HBuilder</a>

分组选择符：想在多个标签设置同一样式时，可以用分组选择符，

如：

h1, h2{color: red;}

这样h1和h2标签的字体都是红色

CSS的继承性：某些样式具有继承性，有些没有，如设置h1标签的字体是红色，那么h1标签下包括子元素文本都红色，像border这个标签就不具有继承性

权值：当一个元素使用了多个CSS样式时，到底使用哪个样式就要看它们的权值了，哪个权值高就用哪个

标签权值：1

类选择符权值：10

ID选择符权值：100

p{color: green;}/*权值1*/p span{color: white;}/*权值1+1=2*/.weight{color: red;}/*权值10*/p span .weight{color: yellow;}/*权值1+1+10=12*/#selete .weight p{color: blue;}/*权值100+10+1=111*/

继承的权值为0.1

当权值相同时，样式会用后面的覆盖前面的

如：

p{color: red;}p{color: yellow;}

<p>文字为黄色</p>

如果我们想权值相同的样式不被覆盖，可以使用"!important"，来设置，注意要写在";"之前

如：

p{color: blue !important;}p{color: red;}

<p class="first">这时显示的内容就是蓝色</p>

CSS3新增的内容
属性选择器

也是写在style里

[id*=div]{color: red;}

指ID元素包含div的就会采用样式，如id="mdivy"可换成class

[id^=div]{color: red;}

指id=""里的首字符为div的会采用，如id="divmy"可换成class

[id$=div]{color: red;}

指id=""里结束字符包含div的会采用，如id="mydiv"可换成class

如：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">[id$="div"]{color: red;}</style></head><body><div id="div1">无样式</div><div id="1div">有样式</div><div id="my">无样式</div></body></html>

结构性伪类选择器：

允许开发者根据文档的结构来指定元素的样式

first-line 就是在使用该样式的区域内的第一行使用该样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>p:first-line{color: red;}</style></head><body><p>第一行有样式<br />第二行没有样式</p></body></html>

first-letter

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>p:first-letter{color: red;}</style></head><body><p>第一个有样式<br />第二行没有样式</p></body></html>

如果是字母，则第一个字母有样式

before

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>p:before{content: "添加在前面";color: red;}</style></head><body><p>测试用的</p></body></html>

after

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>p:after{content: "添加在后面";color: red;}</style></head><body><p>测试用的</p></body></html>

root：根元素，会对整个页面产生影响，如果使用了body设置样式，那么body就只对内容部分添加样式，而root会对整个页面添加样式

<style>:root{background: blue;}</style>

not：排除功能

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>div *:not(h1){color: blue;}</style></head><body><div><h1>h1i被排除，没有样式</h1><h2>h2有样式</h2></div></body></html>

empty：在没有内容的区域将会添加样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>:empty{background-color: blue;}</style></head><body><table border="1"><tr><td></td><td>无样式</td></tr><tr><td>无样式</td><td></td></tr></table></body></html>

target：是设置页内跳转后跳转到的内容的样式

:target{}

first-child、last-child、nth-child()、nth-last-child()

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>/*第一个子标签*/li:first-child{color: red;}/*最后一个子标签*/li:last-child{background-color: greenyellow;}/*指定位置的标签*/li:nth-child(3){background-color: #19F8F8;}/*从后面数指定位置的标签*/li:nth-last-child(2){color: blue;}</style></head><body><ul><li>元素一</li><li>元素二</li><li>元素三</li><li>元素四</li><li>元素五</li><li>元素六</li></ul></body></html>

还有一个奇数和偶数的标签

例如：

/*even是正数，odd是奇数*//*正数偶数的li列表会有该样式*/li:nth-child(even){}/*倒数偶数的li列表会有该样式*/li:nth-last-child(even){}/*正数奇数的li列表会有该样式*/li:nth-child(odd){}/*倒数奇数的li列表会有该样式*/li:nth-last-child(odd){}

添加类型的标签：nth-of-type()、nth-last-of-type()，添加odd或even来选择
这种选择器会根据类型来选择，如只选择h1的偶数位。nth-of-type(even)

nth-child()

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><!--        nth-child()        括号里的值为一组多少项*n+这组中的第几项，最后一个如3n+3可以写成3n        --><style>li:nth-child(3n+1){background-color: greenyellow;}li:nth-child(3n+2){background-color: wheat;}li:nth-child(3n+3){background-color: cadetblue;}</style></head><body><ul><li>组一1</li><li>组一2</li><li>组一3</li><li>组二1</li><li>组二2</li><li>组二3</li><li>组三1</li><li>组三2</li><li>组三3</li></ul></body></html>

only-child：当只有一个子元素时使用

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>li:only-child{color: red;}</style></head><body><ul><li>一个元素</li></ul><ul><li>一个元素</li></ul><ul><li>两个元素</li><li>两个元素</li></ul></body></html><strong></strong>

通用兄弟元素选择器

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>/*这里的div是子元素div,用“~”隔开为兄弟元素h1*/div ~ h1{color: red;}</style></head><body><div><div><h1>元素</h1><h1>元素</h1></div><h1>元素</h1><h1>元素</h1><h1>元素</h1></div></body></html>

可用CSS对文字添加阴影

text-shadow:length length length color

第一个参数：正数是向右，负数是向左，px

第二个参数：正数是向下，负数是向上，px

第三个参数：模糊程度，值越大越模糊，px

第四个参数：阴影颜色

可用","分隔开设置多重阴影

1 0