day52

（1）CSS
（2）CSS引入方式
（3）CSS选择器
（4）CSS三大特性

<!--
一 什么是CSS
CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。

样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等

层叠属于CSS的三大特性之一，我们将在后续内容中介绍

表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

二 为何要用CSS
在没有CSS之前，想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性，这么做的缺点是：
#1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果
#2、代码耦合度高：HTML语义与样式耦合到一起
#3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改
于是CSS应运而生，很好地解决了以上三个问题
-->

<!--css的引入方式-->
<!--
1、行内式
2、嵌入式
3、外链式
优先级：行内式>嵌入式=外链式     （嵌入式和外链式互为覆盖效果）
-->

<!--CSS选择器-->
<!--
https://www.cnblogs.com/linhaifeng/articles/9005117.html
id选择器
类选择器
标签选择器
通配符选择器
后代选择器、兄弟选择器
交集与并集
序列选择器
属性选择器
伪类选择器
伪元素选择器
-->

<!--
CSS三大特性
继承性
层叠性
优先级
-->

CSS引入方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <!--优先级：行内式>嵌入式=外链式     （嵌入式和外链式互为覆盖效果）-->

    <!--嵌入式-->
    <style>
        p {
            color: #ff3f3e;
        }
    </style>

    <!--外链式-->
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<p>hello</p>

<!--行内式-->
<p style="color: chartreuse;">HELLO</p>


</body>
</html>


CSS选择器
https://www.cnblogs.com/linhaifeng/articles/9005117.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <!--id选择器-->            <!--根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性-->
<!--    <style>-->
<!--        #p2 {-->
<!--            color: aqua;-->
<!--        }-->
<!--    </style>-->

    <!--类选择器-->            <!--作用：根据指定的类名称，在当前界面中找到对应的标签，然后设置属性-->
<!--    <style>-->
<!--        .p1 {-->
<!--            color: #ff3f3e;-->
<!--        }-->
<!--        .p2 {-->
<!--            font-size: 30px;-->
<!--        }-->
<!--        .p3 {-->
<!--            text-decoration: underline;-->
<!--        }-->
<!--    </style>-->

    <!--标签选择器-->
<!--    根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性-->
<!--        <style>-->
<!--        p {-->
<!--            color: red;-->
<!--        }-->
<!--        </style>-->

    <!--通配符选择器-->
<!--    作用：选择所有标签-->
<!--    <style>-->
<!--        * {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->


    <!--后代选择器-->
<!--    ①-->
<!--    作用：找到指定标签的所有后代（儿子，孙子，、、、）标签，设置属性-->
<!--    <style>-->
<!--        div p {-->
<!--            color: #ff3f3e;-->
<!--        }-->
<!--    </style>-->
<!--    ②-->
<!--    作用：找到指定标签的所有特定的直接子元素，然后设置属性（只能为子代，不能是孙代及以后）-->
<!--    <style>-->
<!--        div>p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
<!--    ③组合选择器：-->
<!--    <style>-->
<!--        div ul p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->


    <!--兄弟选择器-->
<!--    ①-->
<!--    作用：选定紧跟其后的那个标签（仅选择‘+’后面的标签，且两个标签必须相邻）-->
<!--    <style>-->
<!--        div+p {-->
<!--            color: #ff3f3e;-->
<!--        }-->
<!--    </style>-->
<!--    ②-->
<!--    作用：给指定选择器后面的所有选择器中的所有标签设置属性（不需相邻）-->
<!--    <style>-->
<!--        div~p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->


    <!--交集与并集-->
<!--    并集。作用：给所有满足条件的标签设置属性-->
<!--    <style>-->
<!--        div,h1 {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
<!--    交集。作用：给所有选择器选中的标签中，相交的那部分标签设置属性-->
<!--    <style>-->
<!--        div.box2 {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->


    <!--序列选择器-->
<!--同级别-->
<!--:first-child                   同级别的第一个（ p:first-child 必须是在同级别中第一个，必须是p标签）-->
<!--:last-child                    同级别的最后一个-->
<!--:nth-child(n)                  同级别的第n个-->
<!--:nth-last-child(n)             同级别的倒数第n个-->

<!--    <style>-->
<!--        p:first-child {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->

<!--同级别同类型-->
<!--:first-of-type                    同级别同类型的第一个-->
<!--:last-of-type                    同级别同类型的最后一个-->
<!--:nth-of-type(n)                    同级别同类型的第n个-->
<!--:nth-last-of-type(n)            同级别同类型的倒数第n个-->

<!--其他-->
<!--:only-child                      同级别的唯一一个（p:only-child 该级别下只能有一个标签而且是p标签）-->
<!--:only-of-type                    同级别同类型的唯一一个（p:only-of-type 该级别下的p标签只能有一个）-->


    <!--属性选择器-->
<!--    根据指定的属性名称找到对应的标签，然后设置属性-->
<!--    格式：[属性名] 、其他选择器[属性名] 、[属性名=值] 、[属性名^=值] 、[属性名$=值] 、[属性名*=值]-->
<!--    例1：找到所有包含id属性的标签-->
<!--        [id]-->
<!--    例2：找到所有包含id属性的p标签-->
<!--        p[id]-->
<!--    例3：找到所有class属性值为part1的p标签（完全匹配）-->
<!--        p[class="part1"]-->
<!--    例4：找到所有href属性值以https开头的a标签-->
<!--        a[href^="https"]-->
<!--    例5：找到所有src属性值以png结果的img标签-->
<!--        img[src$="png"]-->
<!--    例6：找到所有class属性值中包含part2的标签-->
<!--        [class*="part"] -->
<!--    例7：先找到input标签，再筛选出类型为text的标签-->
<!--        input[type="text"]-->

<!--    <style>-->
<!--        [x] {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->


    <!--伪类选择器-->

    <style>
        /*1.没有访问的超链接a标签样式*/
        a:link {
            color: red;
        }

        /*2.鼠标悬浮时的样式*/
        a:hover {
            color: chartreuse;
        }

        /*3.鼠标按住不动时的样式*/
        a:active {
            color: blue;
        }

        /*4.访问之后的样式*/
        a:visited {
            color: yellow;
        }
        /*5.input输入框获取焦点时样式：*/
        input:focus {
            outline: none;
            background-color: #eee;
        }
    </style>


    <!--伪元素选择器-->
    <style>
        /*对p标签首字母修改*/
        p:first-letter {
            font-size: 30px;
        }

        /*用于在元素的内容前面插入新内容。*/
        p:before {
            content: "*";
            color: red;
        }

        /*用于在元素的内容后面插入新内容。*/
        p:after {
            content: "$";
            color: blue;
        }
    </style>


</head>
<body>
<p id="p2">GOOD</p>
<p class="p1 p3">hello</p>
<p class="p1 p2">hello</p>
<p class="p2 p3">hello</p>
<p>第一层</p>
<ul>
    <li>
        <ul>
            <li>
                <p>我在第五层</p>
            </li>
        </ul>
    </li>
</ul>

<div>
    <ul>
        <li>
            <p>组合选择器</p>
        </li>
    </ul>
</div>
<div>
    <p>后代选择器</p>
</div>
<p>兄弟选择器</p>
<div>
    并集
</div>
<h1>并集</h1>
<div class="box2">交集</div>


<p x="111">x属性</p>

<a href="http://www.bilibili.com">BBBBBBB</a>

</body>
</html>


CSS三大特性
继承性：
#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，称为继承性
#2、注意：
    1、只有以color、font-、text-、line-开头的属性才可以继承
    2、a标签的文字颜色和下划线是不能继承别人的
    3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
        ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景：
    通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

层叠性：
#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果
#2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了

优先级：
#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
#2、优先级
    整体优先级从高到底：行内样式>嵌入样式>外部样式
    行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级
1、大前提：直接选中 > 间接选中(即继承而来的)
2、如果都是间接选中，那么谁离目标标签比较近，就听谁的
3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5、优先级之!important
（1）作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
（2）注意：
    1、!important只能用于直接选中，不能用于间接选中
    2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
    3、!important必须写在属性值分号的前面
6、优先级之权重计算
（1）强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级
（2）计算方式
      #1、id数多的优先级高
      #2、id数相同，则判定类数多的优先级高
      #3、id数、class数均相同，则判定标签数多的优先级高
      #4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高

 

posted @ 2020-09-17 21:56  板鸭没有腿  阅读(116)  评论(0)    收藏  举报