CSS引入

CSS的引入有三种，三种的优缺点各不相同。

行内样式表

    <!-- 行内样式表 -->
    <!-- 相当于标签的一个属性 -->
    <!-- 只对当前标签生效 -->
    <!-- 优先级较高，会覆盖其他样式 -->
    <p style="color: blue;">这是段落1</p>

缺点 : 不能写太复杂的样式 .

内部样式表

    <!-- 内部样式表 -->
    <!-- 嵌入到html内部 -->
    <!-- 建议写道head里 -->
    <style>
        p {
            color: green;
        }
    </style>

优点 : 这样做能够让样式和页面结构分离

缺点 : 分离的还不够彻底 . 尤其是 css 内容多的时候

外部样式表

    <!-- 外部样式 -->
    <!-- 把写好的CSS样式写到head -->
    <link rel="stylesheet" href="pStyle.css">

/* 针对p标签的外部样式 */
p {
    color: red;
}

优点 : 样式和结构彻底分离了

缺点 : 受到浏览器缓存影响 , 修改之后 不一定 立刻生效

CSS选择器

选择器就是选中HTML标签的东西。可以分为两大类。选择器通常写到head中。

基础选择器

针对的都是单一类型的标签。

标签选择器

能够把同种类型的标签都选出来，但是不能差异化选择。

    <!-- 标签选择器 -->
    <style>
    p {
        color: red;
    }
    div {
        color: aqua;
    }
    </style>

    <p>这是一个p标签</p>
    <div>div标签1</div>

类选择器

差异化表示不同的标签

可以让多个标签的都使用同一个标签 .

    <!-- 类选择器 -->
    <style>
        .bule {
            color: blue;
        }
    </style>

    <style>
        .size{
            font-size: 50px;
        }
    </style>

    <p>这是一个p标签</p>
    <div>div标签1</div>
    <div class="bule size">div标签2</div>

ID选择器

CSS 中使用 # 开头表示 id 选择器

id 选择器的值和 html 中某个元素的 id 值相同

html 的元素 id 不必带 #

id 是唯一的 , 不能被多个标签使用 ( 是和类选择器最大的区别 )

    <!-- id选择器 -->
    <style>
        #green {
            color: green;
        }
    </style>

    <p>这是一个p标签</p>
    <div>div标签1</div>
    <div class="bule size">div标签2</div>
    <div class="blue">div标签3</div>
    <div id="green">div标签4</div>

通配符选择器

使用 * 的定义 , 选取所有的标签 .

    <!-- *选择器 -->
    <style>
        * {
            color: blueviolet;
        }
    </style>

复合选择器

通过上面的选择器相互组合构成复合选择器。

后代选择器

    <!-- 后代选择器 -->
    <!-- 写出想要选择的标签 -->
    <!-- 每个标签之前使用空格分隔 -->
    <!-- 选中的内部标签有子标签也会被选中 -->
    <style>
        ul li {
            color: red;
        }
    </style>

    <ul>
        <p>
            不会被选中
        </p>

        <li>
            aaa
        </li>
        <li>
            bbb
            <p>
                这个子标签就被选中了
            </p>
        </li>
        <li>
            ccc
        </li>
    </ul>

子选择器

    <!-- 子选择器 -->
    <!-- 只选下一个标签，不会选更深层次的标签 -->
    <style>
        ul>p {
            color: red;
        }
    </style>

    <ul>
        <p>
            只会选中这个
        </p>

        <li>
            aaa
        </li>
        <li>
            bbb
            <p>
                这个子标签不会被选中
            </p>
        </li>
        <li>
            ccc
        </li>
    </ul>