选择器(selector):使用选择器来选择需要添加样式的标签。
CSS属性(property):给选择的标签添加什么样式。例如, 字体大小,颜色,背景.....
CSS值(value):添加样式的具体值。12px , 红色,背景图片....
a{
font-size:24px;
color:#F00;
}
标签选择器
作用: 选择同名的标签
div{
font-size:24px;
color:#F00;
}
注意:
1)选择到所有同名的标签
类选择器
作用: 选择同类的标签
.c1{
font-size:24px;
color:#F00;
}
注意:
1)选择的标签必须有class的属性。同类的标签使用同名
2)当一个标签同时被标签选择器和类选择器选择,那么类选择器优先!!!
id选择器
作用: 选择一个标签
#d1{
font-size:24px;
color:#0F0;
}
注意:
1)选择的标签必须有id属性。
2)在同一个html页面中,建议不要出现两个同名的id属性的标签,后面使用javascript代码选择标签的时候,getElementById("id属性值")
3)id选择器的优先级最高!
并集选择器
.c1,#d1{
font-size:24px;
color:#0F0;
}
作用: 当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容。
交集选择器
div里面的span标签
.c1 span{
font-size:24px;
color:#0F0;
}
<body>
<div class="c1">div1的内容<span>div内部的内容</span></div>
</body>
作用: 选择某个选择器中的子标签。
通用选择器
*{
font-size:24px;
color:#0F0;
}
作用: 选择所有的标签
伪类选择器
作用:控制标签在不同状态下的样式。
标签有四种状态:
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活(按下但没有松开)的状态
visited: 已经被访问过的状态(鼠标点下且松开)
注意:
1)在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有
效的。
正确顺序: link visited hover active
<style type="text/css">
/*使用link伪类控制--没有访问过的状态*/
a:link{
font-size:24px;
color:#F00;
}
/*使用visited伪类控制--已经被访问过的状态(鼠标点下且松开)*/
a:visited{
font-size:24px;
color:#CCC;
text-decoration:none;
}
/*使用hover伪类控制-鼠标经过的状态*/
a:hover{
font-size:24px;
color:#00F;
text-decoration:none;
}
/*使用active伪类控制--鼠标激活(按下但没有松开)的状态*/
a:active{
font-size:24px;
color:#0F0;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="01.css入门.html">超链接</a>
</body>
</html>