day06
CSS规则由两部分构成：选择器，声明
CSS选择器
标签选择器
以HTML标签作为选择器
类选择器
为HTML标签添加class属性
通过类选择器来为具有此class属性的元素设置CSS样式
可对不同类型元素的同一个名称的类选择器设置不同的样式规则：p.red{} and h1.red{}
同一个元素可以设置多个类，之间有空格隔开
ID选择器
为HTML标签添加ID属性
通过ID选择器来为具有此ID的元素设置CSS规则
全局选择器
所有标签设置样式
群组选择器
集体统一设置样式
后代选择器
使用后代选择器，之间用空格隔开
class与id的值是区分大小写的
伪类选择器
伪类选择器定义特殊状态下的样式
无法用标签，id，class及其它属性实现
链接伪类
:link 未访问状态
:visited 已访问状态
:hover 鼠标悬浮状态
:active 激活状态
注意写的顺序：:link>:visited>:hover>:active
案例：
css_selectors.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*h1,#three,p.special{font-size: 50px} p{color: red;} .special{color: blue;} .one{text-decoration: underline;} #two{color:green;} *{background-color: black;}*/ .classred{color: red;} p em{color: blue;} h1.special em{color: orange;} em{color: :red;} </style> </head> <body> <h1 class="special"><em>CSS</em>是什么</h1> <p><em>CSS</em>层叠样式</p> <p class="special one">用于定义HTML内容再浏览器中的显示样式</p> <p><em>CSS</em>样式由选择器和声明组成</p> <div> <h1 id="two"><em>CSS</em>使用方法</h1> <ul id="three"> <li>行内样式</li> <li>内部样式</li> <li>外部样式</li> <li>导入式</li> </ul> <h1><em>CSS</em>选择器</h1> <ul> <li>标签选择器</li> <li>ID选择器</li> <li>类选择器</li> <li>后代选择器</li> </ul> </div> </body> </html>
css_selectors1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*a:link{color: red;} a:visited{color: black;} a:hover{color: green;} a:active{color: gray;}*/ p.a:link{color: #123123;} p.a:visited{color: #213543;} p.a:hover{color: #64f433} p.a:active{color: red;} p:hover{font-size: 50px;} p:active{font-size: 30px;} </style> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <br> <p><a href="http://www.baidu.com" target="_blank">百度</a></p> <p>wefdfadf</p> </body> </html>