CSS总结1

CSS

层叠样式表* (Cascading Style Sheets)

作用：美化页面

 

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>

类和id的区别

  • 类名和id属性值的区别

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

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

  • 书写区别

    • 类选择器以 .开头

    • id选择器以#开头

  • 开发

    类选择器用的最多

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

posted on 2022-07-07 21:18  7891asdf156  阅读(33)  评论(0)    收藏  举报

导航