CSS语法

作者: 毛毛虫灾害 | 来源:发表于2017-01-18 10:45 被阅读5次

PHP从入门到精通，018第三章CSS之CSS的基本语法（DAY
css基本语法与页面应用
7 - CSS
CSS入门
「CSS」语法
w3cshcool CSS笔记 - 草稿
CSS 教程
前端 (2)
SASS基础篇
css3属性background-size的学习总结及兼容解决

选择器（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>