-
css的样式规则
selector{property1: value1;property2: value2;…}
其中selector是一个CSS的选择器,property为一个CSS的属性;
例如:
(1).标签为div的字体为红色,字体为16px:
div{color: red;font-size: 16px}
(2).id值为div的字体为红色,字体为16px:
#div{color: red;font-size: 16px}
(3)class值为div的字体为红色,字体为16px:
.div{color: red;font-size: 16px} -
在HTML文档中应用CSS
1.内联样式:通过HTML标签style属性来设置标签的样式,例:<div style="color: red;font-size: 16px;">Hello World</div>
2.内嵌样式:在HTML5文档的head标签体中增加一个style标签,将CSS设置集中在style的标签体中定义,例:
<head> <style> div{ color: red; font-size: 16px; } </style> </head>
3.链接样式:将CSS样式定义在一个或多个以CSS为拓展名的外部样式文件中,使用link标签将外部样式表文件链接到HTML5页面中,这个在HTML5中是常见的样式应用,例:
<link href="divcss.css" rel="stylesheet" />
-
CSS选择器(重点)
1.标签选择器:标签选择器指的是用HTML的标签名作为选择器,所有标签名都可以作为标签选择器使用,它用于为页面中某一种标签指定统一的CSS样式,但这也是缺点,不能实现同一种标签所设计的差异化。div{color: red;font-size: 16px;}
2.id选择器:id选择器使用"#"进行标识,后面紧跟HTML标签的id属性值,一张页面中的HTML标签的id属性值是唯一的,所以这种选择器设计的样式只能针对HTML页面中某一个具体的标签。
#divcss{color: red;font-size: 16px;} <div id="divcss"> CSS挺简单的? </div>
3.类选择器:类选择器使用". "进行标识,后面紧跟HTML标签中的class属性值。它最大的优势是可以为具有相同class属性的HTML标签设置相同的样式。
.classdiv{color: red;font-size: 16px;} <div class="classdiv">class相同</div> <p class="classdiv">class相同</p>
4.限定式选择器:限定式选择器由两个选择器构成,其中第一个为标签选择器,第二个为类选择器或id选择器,中间是没有空格的。
div#divcss{....} //为id属性为"divcss"的div标签设计样式 p.classdiv{....} //为class属性为"classdiv"的p标签设计样式
5.后代选择器:后代选择器是用来选择HTML标签元素的后代的,其写法是把父标签的选择器写在前面,后代标签的选择器写在后面,两者之间有一个空格。
div p{.....} //为div标签中的p标签设计样式
div #divcss{....} //为div标签中的id属性为divcss的子标签设计样式
p .classdiv{....} //为p标签中class属性为classdiv的子标签设计样式
6.并集选择器:并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全或部分相同,就可以使用并集选择器为它们定义相同的CSS样式。
h1,p,div #divcss,.classdiv{....} //h1,p标签,id属性为divcss的div标签,class属性为classdiv的标签
7.通配符选择器:通配符选择器用*号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的HTML标签元素。
8.其他选择器:对应特殊需求
选择器 | 例子 | 描述 |
---|---|---|
element>element | div>p | 选择父元素为div标签的p标签(p标签必须是div标签的直接子元素) |
element>element | div+p | 选择紧跟在div标签后面的p标签 |
element1~element2 | p~ul | 选择有相同的父元素中位于p元素之后的所有ul元素 |
[attribute] | input[name] | 选择所有包含name属性的input标签 |
[attribute=value] | input[name=“jiang”] | 选择name属性为"jiang"的input标签 |
[attribute^=value] | input[name^=“ji”] | 选择name属性以"ji"开头的input标签 |
[attribute$=value] | input[name$=“g”] | 选择name属性以"g"结尾的input标签 |
[attribute*=value] | input[name*=“jiang”] | 选择name属性包含"jiang"的input标签 |
:link | a:link | 选择所有未被访问的超链接 |
:visited | a:visited | 选择所有已被访问的超链接 |
:active | a:active | 选择所有活动链接 |
:hover | div:hover | 选择鼠标悬停的div标签 |
:focus | input:focus | 选择所有获取焦点的input标签 |
:first-letter | p:first-letter | 选择p段落中的首字母 |
:first-line | p:first-line | 选择p段落中的首行 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的p标签 |
:last-child | p:last-child | 选择属于父元素的最后一个子元素的p标签 |
:before | p:before{content: “测试” ;} | 在每个p标签的内容之前插入文字“测试” |
:after | p:after{content: “测试” ;} | 在每个p标签的内容之后插入文字“测试” |
:first-of-type | div p:first-of-type | 选择div标签中的第一个p标签 |
:last-of-type | div p:last-of-type | 选择div标签中的最后一个p标签 |
:nth-child(n) | li:nth-child(2) | 选择属于其父元素的第二个li标签 |
:nth-last-child(n) | li:nth-last-child(2) | 选择属于其父元素的倒数第二个li标签 |
:empty | div:empty | 选择没有子元素的div标签 |
:not | li:not(:last-child) | 选择除去最后一个li元素的其他所有li标签 |