前端 CSS 样式书写与选择器基础知识

1.CSS介绍

CSS是Cascading Style Sheet的缩写，中文意思为"层叠样式表"，它是网页的装饰者，用来修饰各标签排版(大小、边距、背景、位置等)、改变字体的样式(字体大小、字体颜色、对齐方式等)。

2.CSS书写位置

2.1 样式表特征

层叠性:多组不同的css样式可以共同作用于同一个元素
继承性:有些css样式会自动从父元素传给子元素大部分文字样式属性都会被继承
优先级: 显示哪个样式,浏览器默认样式和继承下来的样式优先级最低

2.2 行内样式

借助了所有标签都有的属性style，为当前的元素添加样式声明。

html 复制代码

<标签名 style="样式声明">

CSS样式声明: 由CSS属性和值组成

CSS属性：希望给HTML标签设置的样式名字
值：使用值来控制某个属性显示的效果

html 复制代码

style="css属性名:值;css属性名:值;"

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 书写位置:
   1.行内样式/内联样式:通过style属性直接写在标签中
   语法:<标签名 style="样式声明">  样式声明:css属性和属性值组成-->

    <p style="font-weight: bold;">学习前端</p>
    <p style="color: red;">学习CSS</p>
   
</body>
</html>

运行结果：

2.3 内嵌样式

借助于style标签，在HTML文档中嵌入 CSS 样式代码，可以实现 CSS 样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML中匹配元素并应用样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* css代码 */
    p{
      color: green;
    } 
    div{
    font-size: 40px;
    }
  </style>
</head>
<body>
  <!-- 

   2.内嵌样式/内部样式:通过style标签来写,style标签放在head标签中
   语法:<style>
    选择器{
    css属性名:值;
    css属性名2:值;
    }
  </style>
   选择器:选择元素(标签) -->

    <p>学习前端</p>
    <p>学习CSS</p>
    <div>666</div>
    
</body>
</html>

运行结果：

2.4 外链样式表

创建外部样式表文件后缀使用 .css ，在HTML文件中使用<link> 标签引入外部样式表

html 复制代码

<!-- rel：引入文件资源类型    href：引入文件资源的路径  -->
 <link rel="stylesheet" href="外部样式表的地址">

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./outpre.css"> 

</head>
<body>
  <!-- 书写位置:
  
   3.外部样式:新建一个样式文件(后缀名为.css)
   引入样式文件:link标签(写在head标签中)
   rel:文件的类型
   href:css文件的路径(相对路径,和img标签中的相对路径同理)
   -->

   <p>学习前端</p>
   <p>学习CSS</p>
   <div>666</div>
</body>
</html>

运行结果：

3.CSS简单选择器

3.1 标签选择器

一个完整的HTML文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      color: aqua;
    }
    div{
      color: red;
    }
  </style>
</head>
<body>

  <!-- css选择器:用了查找元素
   简单选择器:
   1.标签选择器:通过标签名找到某个元素  可以选中页面中的所有这个标签名的元素
   语法:标签名{
              属性:值
              } -->

   <p>p标签</p>
   <div>容器标签</div>

</body>
</html>

运行结果：

3.2 类选择器

类选择器可以根据标签的 class 属性，找到具体的HTML标签。类选择器的定义需要用到一个英文的句号**'.'**，后面紧跟 class 属性的值。

命名规范：

类名应该反映元素的用途或内容，而不仅仅是样式。这有助于提高代码的可读性。
推荐使用连字符而不是驼峰命名法来分隔单词，因为连字符在HTML和CSS中更为普遍。
类名不应以数字开头。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text-box {
    font-size: 20px; /* 设置字体大小 */
    }
    .text-red {
    color: red; /* 设置文本颜色为红色 */
    }
    .text-green {
    color: green; /* 设置文本颜色为绿色 */
    }
    </style>
   
</head>
<body>
<!-- css选择器:用了查找元素
   
   2.class选择器(类选择):通过类名找到具体某个标签
   语法:.类名{
              属性:值
              }
    类名可以不唯一(可以重复),允许不同的标签,使用相同的类名
    一个元素可以有多个类名,类名之间空格隔开
   -->

  <div class="text-red">红色</div>
  <div class="text-green">绿色</div>
  <div class="text-box text-red">红色</div>
</body>
</html>

运行结果：

3.3 ID选择器

ID选择器用来找到HTML文档中具有指定ID属性的标签，ID选择器的定义需要用到井号#，后面紧跟ID 属性的值。ID选择器的使用方式和类选择器的使用方式是非常像，但是ID选择器的主要作用是结合js用于确定页面上的唯一元素。单个标签不允许拥有多个id名，同页面中不存出现重复的id名(id重名会影响 js代码获取标签)。并不是主要用来设置css的。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
    #qq2{
      color: purple;
      font-size: 30px;
    }
    
  </style>
</head>
<body>
  <!-- css选择器:用了查找元素
  
   3.id选择器:通过类名精准找到某个标签,主要用来结合js确定页面的唯一元素
   语法:.类名{
   语法:#id名{
              属性:值
              }
    id名具有唯一性(不能重复),会影响js获取代码
  -->

   <div id="qq2">带有id的容器标签</div>
   <div>容器标签</div>
</body>
</html>

3.4 通配符选择器

通配符选择器用星号*表示，它不匹配某个特定的HTML元素，而是匹配 HTML文档中的每个元素。我们通常使用通用选择器来清除HTML元素中默认的内外边距。通配符选择器在开发中不会使用，一般我们页面的标签的样式不会长的都完全一样。在平常的练习去除标签默认的 margin 和 padding 。

html 复制代码

<style>
    * {margin: 0;
       padding: 0;
      }
</style>

4.复杂选择器

两个或两个以上的选择器配合使用

4.1 交集选择器

找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
交集选择器中的选择器之间是紧挨着的，没有东西分隔

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p.one{
        color: red;
        }
    </style>
</head>
<body>
 <!-- 复杂选择器
  1.组合选择器(交集选择器):两个或者两个以上的选择器配合使用,两个选择器之间紧密相连
  语法:选择器1选择器2{
  }
  例如:p.one{
  }
  需求:只要学习两个字改变颜色,但是不添加任何东西
  注意:标签选择器和类选择器一起使用的时候,标签在前,类在后 -->

    <p class="one">学习</p>
  <div>
    <span class="one">认真学习</span>
    <p>认真学习前端</p>
  </div>
</body>
</html>

运行结果：

4.2 后代选择器

在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子......）中，找到满足选择器2的标签，设置样式

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one p {
            color: orange;
        }
</head>
<body>

    <!-- 2.后代选择器:选择所有后代,选择器之间空格隔开
  语法:选择器1 选择器2{
    属性:值;
}
    找到选择器1的所有后代(直接后代,间接后代),在这些后代中找到满足选择器2的标签 -->

    <div id="one">
        <p>111</p>
        <p>333
            <span>222</span>
        </p>
        <div>
            <p>666</p>
        </div>
        <span>444</span>
    </div>
    <div id="two">555</div>
</body>

</html>

运行结果：

4.3 子代选择器

在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>     
        #one>p {
            color: green;
        } 
    </style>
</head>

<body>
   

    <!-- 3.子代选择器:选择所有直接后代,选择器之间>隔开
  语法:选择器1>选择器2{
	属性:值;
}
  找到选择器1的所有直接后代,在这些后代中找到满足选择器2的标签 -->

    <div id="one">
        <p>111</p>
        <p>333
            <span>222</span>
        </p>
        <div>
            <p>666</p>
        </div>
        <span>444</span>
    </div>
    <div id="two">555</div>

</body>

</html>

运行结果：

222虽然不属于子代，但由于继承性仍会变色

4.4 相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>    
        .three+p {
            color: green;
        }
        .four+p {
            color: red;
        }

</head>
<body>
 
    <!-- 4.相邻兄弟选择器:匹配某个元素后面紧邻的元素,这两个元素拥有同一个父级并且不存在嵌套关系
  语法:选择器1+选择器2{
    属性:值;
} -->
    <div id="one">
        <p class="three">111</p>
        <p>222</p>
        <p>555</p>
        <p class="four">333</p>
        <p>666
            <span>444</span>
        </p>
    </div>


</body>

</html>

运行结果：

4.6 通用兄弟选择器

通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .two~p {
      color: blue;
      margin: 0;
    }
        
    </style>
</head>
<body>
    
    <!-- 5.通用(所有)兄弟选择器:匹配某个元素后面的所有兄弟,兄弟不需要紧邻,这些元素拥有同一个父级并且不存在嵌套关系
  语法:选择器1~选择器2{
    属性:值;
} -->
    <div id="one">
        <p>111</p>
        <p class="two">222</p>
        <div>333</div>
        <p>444
            <span>555</span>
        </p>
        <span>666</span>
        <p>777</p>
        <div>
            <p>888</p>
        </div>
    </div>

</body>
</html>

运行结果：

4.5 分组选择器

结构：选择器1,选择器2 {css属性名:属性值;}
同时选择多组标签，设置相同的样式
并集选择器中的每组选择器之间通过 , 分隔
选择器中的每组选择器通常一行写一个，提高代码的可读性

html 复制代码

  <style>
        p,
        h1,
        h2,
        h3,
        div,
        span {
            padding: 0;
            margin: 0;
        }
  </style>

5.层叠性与优先级

**层叠性：**所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖。多个选择器给同一个标签设置不同的样式，会共同作用在标签上。

**优先级：**如果同一个标签被多个选择器赋予了相同的属性且值不一样时，会按照选择器的优先级来决定以哪个样式为准

!important > 行内 > id选择器 > 类选择器 > 标签 > 继承
先比较级别，级别一样比较各级别选择器出现的次数
当两个选择器权重一样时，以最后出现的为准

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #red{
      color: red;
    }
    p{
      color: green !important;
      font-size: 20px ;
    }
    .blue{
      color: blue;
    }
  </style>
</head>
<body>
  <!-- 选择器优先级:页面通过选择器查找元素时的速度来决定的,速度越快,优先级越高,以权重来表示
   各类选择器的权重大小：
   通配符:0
   标签:1
   类:10
   id:100
   行内:1000
   !important:10000
   选择器权重越大,优先级越高
   
   复杂选择器,选择器权重是所有选择器权重之和
   并集选择器以每个选择器单独的权重为准,不进行相加
   强制提升优先级  !important
   写在分号里面,和样式属性之间空格隔开
   !important > 行内 > id选择器 > 类选择器 > 标签  > 继承

    -->
  <p id="red" class="blue" style="color: purple; font-size: 40px ;">我爱中国</p>
  <div id="red" class="blue" style="color: purple; font-size: 20px;">I love china</div>
</body>
</html>

运行结果：

前端 CSS 样式书写与选择器 基础知识

1.CSS介绍

2.CSS书写位置

2.1 样式表特征

2.2 行内样式

2.3 内嵌样式

2.4 外链样式表

3.CSS简单选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

3.4 通配符选择器

4.复杂选择器

4.1 交集选择器

4.2 后代选择器

4.3 子代选择器

4.4 相邻兄弟选择器

4.5 分组选择器

5.层叠性与优先级

前端 CSS 样式书写与选择器基础知识