第三节：样式、选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_43220836/article/details/126946397

第三节：样式、选择器

文章目录

1、样式介绍

样式简介：

样式-CSS css用户渲染HTML元素标签的样式，CSS是在HTML 4 开始使用，是为了更好的渲染HTML元素而引入的，CSS可以通过一下三种方式添加到HTML中：

内联样式：内联样式又叫内部样式，在HTML元素中使用style 属性
内部样式表：在HTML文件头部 <head></head> 区域中使用<style></style> 元素来包含CSS。
外部引用：使用外部CSS文件。

推荐： $推荐使用外部引用文件\color{#ff0000}{ 推荐使用外部引用css文件}$ ，使用外部连接的优势在于方便二次开发，方便后期维护。为了方便介绍，我们后续文档中使用内部样式，方便介绍案例。

2、样式使用

行内样式

起始标签内部属性style=‘’样式1，样式2 . . .“ 样式写法：属性名：属性值。
内部样式
在head标签里面一对style标签内部样式写法：
<style>
  选择器{
      属性名1:属性值1;
      属性名2:属性值2;
  }
</style>
3.外部样式

在head标签里面由link标签引入 :

<!doctype html>
<!--文档类型声明 HTML网页-->
<html>
<!--根标签-->

<head>
    <!--整个网页的基本信息 浏览器搜索引擎抓取-->
    <meta charset="UTF-8">
    <!--字符编码 国际编码-->
    <meta name="Keywords" content="xiaoge-education">
    <!--网站关键字 浏览器搜索-->
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <!--网站描述信息-->
    <title>01-常用标签</title>
    <!--网站的标题-->

    <style>
        /* 内部样式 */
        a {
            display: block;
            height: 50px;
            line-height: 50px;
            background-color: #555;
            color: red;
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>

<!--网页的展示部分-->

<body>
    <!-- 行内样式 -->
    <a href="#" style="color:blue;">相对路径 基于当前文件</a>
    <a href="#">相对路径 基于当前文件</a>
    <a href="#">相对路径 基于当前文件</a>

    <!-- 
        外部样式：外部样式将style标签中的内容独立到一个新的css文件中 使用link导入当前页面即可
        style.css 中内容：
        
            a {
            display: block;
            height: 50px;
            line-height: 50px;
            background-color: #555;
            color: red;
            text-decoration: none;
        }
        html中导入
        eg:<link rel="stylesheet" href="style.css">

     -->
</body>

</html>

3、选择器

选择器：

id和class选择器 如果html中需要设置css 需要在元素中设置id 或class 选择器。
标签名：{样式}

class类名起始标签内部设置属性class=“名称” 样式写法：.class类名{样式表} 不同元素之间的类名名称是可以相同的，不具有唯一性

id名起始标签内部设置属性id=“名称” 样式写法：#id名{样式表} 在同一个 $中名称不可以相同\color{#FF0000}{DOM中id名称不可以相同}$ ，具备唯一性。
选择器取名规范：
注意事项

不能是拼音
不能单独某一个英文字母
不能使用单独的数字
不能以数字开头
不能出现汉字
禁止广告类命名,包括英文单词广告
下划线是不能使用的 _

规范取名

英文单词,见名知意
连字符- , cls-title
数字结尾 title1
扩展
html + css 没有大小写区分，大写和小写都不会有影响，

javascript 严格区分大小写
案例
比如同一个样式在不同语音中使用：
	背景颜色：css代码：background-color,js代码：backgroundColor

<!--文档类型声明 HTML网页-->
<!doctype html>
<!--根标签-->
<html>

<!--整个网页的基本信息 浏览器搜索引擎抓取-->

<head>
    <!--字符编码 国际编码-->
    <meta charset="UTF-8">
    <!--网站关键字 浏览器搜索-->
    <meta name="Keywords" content="xiaoge-education">
    <!--网站描述信息-->
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <!--网站的标题-->
    <title>03-选择器</title>

    <style>
        /* 标签选择器 */
        p {
            color: aqua;
            font-size: 50px;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }

        /* id选择器 */
        #id-txt {
            background-color: yellowgreen;
            font-size: 50px;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }

        /* class 选择器 */
        .class-txt {
            background-color: pink;
            font-size: 50px;
            text-align: center;
        }
    </style>

</head>

<!--网页的展示部分-->

<body>
    <!-- 标签选择器使用 -->
    <p>这个是标签选择器的样式</p>
    <!-- id选择器使用 -->
    <p id="id-txt">这个是ID选择器的样式</p>
    <!-- class选择器应用 -->
    <p class="class-txt">这个是class选择器的样式</p>
</body>

</html>

4、组合选择器

后代选择器：
由外到内一层一层的写中间空格隔开
dev ul li{....}
子元素选择器:
> 选中的是此标签的儿子级别元素,选不到子元素后面的后代元素
dev > ul > li{...}
相邻元素选择器:
+ 代码解析是从第一个 ,样式展示是从第二个
dev ul li + li{...}
兄弟元素选择器:
~ 只能选择同级别后面的制定元素(相同标签名类名…)
dev ul ~ .cls-name{....}

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        .wrap {
            border: 1px solid pink;
        }

        /* 后代选择器： */
        .wrap ul li {
            color: pink;
        }

        /* 子元素选择器 */
        .wrap1 {
            border: 1px solid red;
        }

        .wrap1>ul>li {
            color: red;
        }

        /* 相邻元素选择器 */
        .wrap2 {
            border: 1px solid blue;
        }

        .wrap2 ul+p {
            color: blue;
        }

        /* 兄弟元素选择器 */
        .wrap3 {
            border: 1px solid aqua;
        }

        .wrap3 ul~p {
            color: aqua;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <ul>
            <li>后代选择器</li>
            <li>后代选择器</li>
            <li>后代选择器</li>
        </ul>
    </div>
    <hr>
    <div class="wrap1">
        <ul>
            <li>子元素选择器</li>
            <li>子元素选择器</li>
            <li>子元素选择器</li>
        </ul>
    </div>
    <hr>
    <div class="wrap2">
        <ul>
            <li>相邻元素选择器</li>
        </ul>
        <p>相邻元素选择器</p>
        <p>相邻元素选择器</p>
    </div>
    <hr>
    <div class="wrap3">
        <ul>
            <li>兄弟元素选择器</li>
        </ul>
        <p>兄弟元素选择器</p>
        <p>兄弟元素选择器</p>
    </div>
</body>

</html>

5、选择器优先级

选择器优先级:
单个选择器比较: ID名选择器 > class类名选择器 > 标签名选择器

组合选择器
同类型选择器,个数越多优先级越大
出现class类名选择器,只能去比较class类名选择器个数,不受标签名选择器个数影响
出现ID名选择器,只能比较id选择器的个数,不受类名选择器和标签选择器影响

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        #txt {
            color: red;
        }

        .tit1 .tit2 li p .name {
            color: blue;
        }

        #txt1 .name {
            color: green;
        }
    </style>

</head>

<body>
    <div class="tit1">
        <ul class="tit2">
            <li>
                <p>
                    <span class="name" id="txt">选择器优先级</span>
                </p>
            </li>
        </ul>
    </div>
    <div class="tit1" id="txt1">
        <ul class="tit2">
            <li>
                <p>
                    <span class="name" id="txt">选择器优先级</span>
                </p>
            </li>
        </ul>
    </div>
</body>

</html>

6、样式的优先级

优先级

当标签中属性满足多个样式属性时生效的样式优先级，被覆盖的样式将不会生效
行内样式 > 内部样式
行内样式 > 外部样式
外部样式 = 内部样式导入时谁的样式在前谁被覆盖 $后面覆盖前面\color{#0000ff}{后面覆盖前面}$

style.css
.cls-txt{
  color:blue;
}

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        .name {
            color: red;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <p class="name" style="color: blue;">行内样式 > 内部样式</p>
    <p class="txt" style="color: blue;">行内样式 > 外部样式</p>
    <p class="txt name"> 外部样式 = 内部样式 导入时谁在后面就会覆盖前面的</p>
</body>

</html>

7、权重

权重

选择器的最终目的就是精确选择元素，最好的方法就是选择器组合写法：组合写法的方法能够准确的选中元素。选择器组合写法：后代选择器，内嵌关系，右外到内两两之间用空格隔开。例如：div ul li{…}
标签选择器权重 < class选择器权重 < ID选择器权重

注意：

每个选择器都有对应的权重，权重值越大，优先级越高。优先级高的选择器样式会覆盖掉优先级低的选择器的样式；
当权重相同的时候，遵循就近原则，哪个选择器最后定义，就采用哪个选择器的样式；
相同属性中带有!important的优先级最高；（!important的作用：可以提高权重和优先级）；
继承的优先级最低，字体的继承都可以继承，颜色（color）的继承除了超链接（a）以外都可以继承。当元素自身设置相同的属性，就可以把继承的样式给覆盖掉；
继承的概念：在父元素上设置的某些属性在子元素上可以起作用；
继承的作用：a.可以解决为什么元素没有设置样式，但是样式发生了改变的问题；
属性都可以继承

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        /* 标签选择器 */
        p {
            color: red;
        }

        /* class 选择器 */
        .txt {
            color: pink;
        }

        /* id 选择器 */
        #txt {
            color: blue;
        }
    </style>


</head>

<body>
    <p id="txt" class="txt">选择器权重测试</p>
    <!-- 最终字体显示的颜色是 blue -->
</body>

</html>