CSS引入方式、选择器

css的引用方式

内联样式
<!-- 内联样式 
    所有标记 有公共的html属性 style 值为css的内容
    <标记 style="css属性名:属性值;css属性名:属性值;">内容</标记>
    缺点:html和css混淆在一起，单个设置样式麻烦
    -->
    <h1 style="color: red; 一级标题</h1>
    <p>段落标记</p>
    <p>段落标记</p>
    <p>段落标记</p>
    <h2>二级标题</h2>
    <h2 style="color: blue">二级标题</h2>
    <h2>二级标题</h2>
    <h3 style="三级标题</h3>
内嵌样式（嵌入样式
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* ctrl+/   css注释  style标签中只能写css的内容 */
      /* 
      css语法：
        选择器{
          属性名:属性值;
          属性名:属性值;
        }
      */
​
      h2 {
        color: aqua;
        
      }
      p {
        
      }
    </style>
  </head>
  <body>
    <!-- html注释 -->
    <h1>一级标题</h1>
    <p>段落标记</p>
    <p>段落标记</p>
    <p>段落标记</p>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
  </body>
</html>
外联样式（链接样式）

实现了html和css的分离

  • 单独新建css文件，index.css

  • 在html页面引入css文件

    css/index.css

    /* 此处只能写css的内容
     选择器{
      属性名:属性值;
      属性名:属性值;
     }
    */
    ​
    h1 {
      color: red;
    }
    p {
      color: yellow;
    }
    h2 {
      color: blueviolet;
    }

    html页面引入

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入css文件  rel不能省略 -->
        <link href="./css/index.css" rel="stylesheet" />
      </head>
      <body>
        <h1>一级标题</h1>
        <p>段落标记</p>
        <p>段落标记</p>
        <p>段落标记</p>
        <h2>二级标题</h2>
        <h2>二级标题</h2>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
      </body>
    </html>

     

选择器

元素(标签)选择器
 <!-- 内嵌样式 -->
    <style>
      /* 元素 (标签)选择器：以标签名作为选择器
       给所有的h2标签添加样式
      */
      h2 {
        color: red;
      }
      p {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <p>段落标记</p>
    <p>段落标记</p>
    <p>段落标记</
id选择器

id的值唯一的，每一个标签都有id属性，id属性是公共的属性

<style>
      /* 2使用id选择器添加样式
#id值{属性名:属性值;}
*/
      #one {
        color: red;
      }
      #two {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <!-- 1:给标签添加id属性，id的值自定义并且唯一 -->
    <h2>二级标题</h2>
    <h2 id="one">二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2 id="two">二级标题</h2>
    <p>段落标记</p>
    <p>段落标记</p>
    <p>段落标记</p>
  </body>
类选择器

每个标签共有的属性class

语法

<style>
  .类名{
      color:red;
  }
</style>
​
<p class="类名">段落标记</p>
//多个类样式之间用空格隔开
<p class="类名1 类名2">段落标记</p>
复合选择器
后代选择器

后面的选择器是前面选择器的后代，选择器之间用空格隔开

.out .inner p {
  color: palevioletred;
}
<div class="out">
      <div>
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
    </div>
子代选择器

后面选择器是前面选择器的儿子，选择器之间用 > 隔开

.out > .one > .inner {
  width: 100px;
  height: 100px;
  
}
   <div class="out">
      <div class="one">
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
      <p>段落标记</p>
      <div class="inner">inner</div>
    </div>
群集选择器
<style>
      /* .one {
        color: red;
      }
      .two {
        color: red;
      }
      和下面的是等价的
      
      */
​
      .one,
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">sssssss</div>
    <div class="two">two</div>
  </body>

优先级

引入方式的优先级

内联样式优先级最高， 内嵌样式 和外联样式使用的是就近原则

选择器的优先级

!important >id选择器(100)> 类选择器(10)>元素选择器(1)

<style>
      /* !important >id选择器(100)> 类选择器(10)>元素选择器(1) */
      .main {
        color: red;
      }
​
      #one {
        color: blue;
      }
​
      div {
        color: yellow !important;
      }
    </style>
  </head>
  <body>
    <div id="one" class="main">我是div标记</div>
  </body>
复合选择器优先级
<style>
      /*11  */
      .one p {
        color: red;
      }
​
      /* 21 */
      .one > .active > p {
        color: yellow;
      }
​
      /* 1 */
      p {
        color: blue;
      }
​
      /* 11 */
      .active > p {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div class="active">
        <p>我是p标记</p>
      </div>
    </div>
  </body>

类和id的区别

  • 类名和id属性值的区别

    • 类名相当于名字，可以重复，一个标签可以有多个class类名

    • id相当于身份证，不可重复，一个标签只能有一个id属性值

  • 书写区别

    • 类选择器以 .开头

    • id选择器以#开头

  • 开发

    类选择器用的最多

    id选择器一般和js结合使用

通配符选择器

找到页面中所有的标签，设置样式

语法

*{
    属性名:属性值
}

代码

 * {
        margin:0；
   }
posted @ 2022-08-02 22:45  YBYZ  阅读(28)  评论(0)    收藏  举报