css 引入方式
定义在标签内<p style=“color: #DDDDDD;”>fang</p>
定义在<head><style></style></head>
在文档头引入<link href=“styles.css” rel=“stylesheet” type=“text/css” />
css样式
基本样式
p {color:red;}
h1, h2, h3 {color:red;}<!– #同时设置h1h2h3 –>
article p {color:blue;}<!– 当article是p的祖先时–>
span > h1{color:blueviolet;} <!– #当span是h1的父元素时 –>
h2 + p {color:red;}<!– #当p的前一个元素是h2时(必须是前一个) –>
h2 ~ a {color:red;} <!– #当p标签前有h2时(不一定是前一个) –>
h2 * {color:blue;} <!– #h2的所有子标签 –>
.specialtext {font-style:italic;}
类选择符
.fang{color:blue} # 类选择符
.qiang{font-size:420%;} # 类选择符
.fang.qiang{background: red} # 对同时选择 fang qiang的类生效
p.fang{background: yellow} # 对使用fang类的p标签生效
id选择符
示例:#.aaa{color:blue}
id选择符,跟类选择符用法一样
id选择符并多了一个页面内跳转的功能
id选择符自能使用一次,类选择符可以被多次使用
属性名选择符
属性值选择符
伪类
a:link {color:black;} 链接就在那儿等着用户点击
a:visited {color:gray;} 用户此前点击过这个链接。
a:hover {text-decoration:none;} 鼠标指针正悬停在链接上。
a:active {color:red;} 链接正在被点击(鼠标在元素上按下,还没有释放)
p:focus{color:red;} # 当p标签获得焦点时出发,focus能被所有标签使用
#tar:target {background:#000;} #当页内跳转时,跳转到的地方背景变成黑色<a href=“#tar”
>to tar</a>
=
结构化伪类
li:first-child {color:blue;} # li标签的第一个元素
li:nth-child(2) {color:blue;}# li标签的第二个元素
li:last-child {color:blue;} # li标签的最后第一个元素
</code>