CSS  层叠  样式  表

HTML是骨架，CSS是衣服

 

CSS引入方法：

　　1.写在标签里面 style = 

　　2.在head中通过style标签定义

　　3.把样式写在css文件中，在html文件中通过link标签导入

 

CSS语法：

　　选择器{样式1;样式2}

 

CSS查找标签的方式(选择器)：

　　1.基本选择器：

　　　　1.标签   p

　　　　2.ID选择器   #i1

　　　　3.类选择器(常用)　.c1

　　2.通用选择器：

　　　　.*

　　3.组合选择器(常用)：

　　　　1.后代选择器  #d1  p

　　　　2.儿子选择器 #d1 > p

　　　　3.毗邻选择器 #d1 + p　　# 同级，往下找一个

　　　　4.弟弟选择器 #d1 ~ p　　# 同级下面所有

　　4.属性选择器：

　　　　[s9] {color:red}

　　　　[s9 = "hao"] {color:green} 

　　　　s9 ^= "hello"　　# 以hello开头

　　　　s9 $= "hello"　　# 结尾

　　　　s9 *= "hello"　　# 包含

　　　　s9 ~= "hello"　　# 一个值是hello(值用空格分隔)

分组和嵌套：

　　1.分组，用逗号分隔

　　　　div,p           #d1,p

　　2.嵌套，多种选择器混合使用　

 

优先级：

　　1.内联样式(直接在标签里写style的)优先级最高

　　2.选择器一样的情况下，谁靠近标签谁生效

　　3.内联权重1000，ID权重100，类选择器10，元素选择器1，权重计算不进位

　　4. !important 强制生效，慎用

　　div#d1　　# 是div标签而且id是di的，权重101

　　div.c1　　# 是div标签而且是c1类的，权重11，注意不带空格

 

伪类/元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a {
            font-size: 48px;
        }

        a:link {
            color: yellow;
        }

        a:visited {
            color: green;
        }

        a:hover {
            color: purple;
        }

        a:active {
            color: deeppink;
        }

        input:focus {
            outline: 0;
            background-color: gray;
        }

        p:first-letter {
            font-size: 48px;
            color: purple;
        }

        .c1:before {
            content: "*";
            color: red;
        }

        .c1:after {
            content: "[?]";
            color: blue;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">百度</a>

<input type="text">

<p>在苍茫的大海上，狂风卷积着乌云</p>
<p class="c1">在苍茫的大海上，狂风卷积着乌云</p>
<p class="c1">在苍茫的大海上，狂风卷积着乌云</p>
<p class="c1">在苍茫的大海上，狂风卷积着乌云</p>

</body>
</html>