”深入CSS“学习笔记

一.CSS选择器

1. 通用选择器
   通用选择器可以设置所有的HTML标签使用同一种样式，基本语法如下：

<!--通用选择器-->
* {属性：属性值;}

        实例如下：

* {
    margin:0px;
    padding:0px;
    border:0px;
}

2. 标签选择器
   标签选择器可以设置页面中所有的某个标签使用同一种样式，基本语法如下：

<!--标签选择器-->
标签名称 {属性：属性值;}

        实例如下：

p {
    font-family:黑体;
    font-size:12px;
    color:green;
}

3. 类选择器
   类选择器为一类网页元素定义相同的样式,基本语法如下:

<!--类选择器-->
.类选择器名称 { 属性 : 属性值;}

        实例如下：

.font01{
    color:green;
    }
.font02{
    color:red;
    }
    
<p class=".font01">class属性是被用来引用类选择器的属性</p>
<p class=".font02">class属性是被用来引用类选择器的属性</p>
<h1 class=".font01">class属性是被用来引用类选择器的属性</p>

4. id选择器
   id选择器和类选择器一样用于特殊元素,但id选择器只能用一次，基本语法如下：

#id选择器名称 { 属性 : 属性值;}

        实例如下：

#green {
    color:green;
    }
#red {
    color:red;
    }
    
<p id="red">这段文字是红色的</p>
<p id="green">这段文字是绿色的</p>

5. 伪类选择器
   CSS伪类用于向某些选择器添加特殊的效果。包括:first-child、:link、:visited、:hover、:active、:focus、:lang等，但是由于不同的浏览器支持不同的伪类，因而没有一个统一的标志，许多的伪类并不常用到，其中有一组伪类是所有浏览器都支持的，超链接伪类，包括:link、:visited、:hover、:active。
           实例如下：

a:link {color:#FF0000} /* 未访问的链接热点颜色*/
a:visited {color:#00FF00} /* 已访问的链接热点颜色 */
a:hover {color:#FF00FF}   /* 当已有鼠标悬停在链接上热点颜色 */
a:active {color：#0000FF} /* 被激活瞬间的链接热点颜色 */