CSS语法
2017-01-18 本文已影响5人
毛毛虫灾害
选择器（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>
