CSS总结1

2022-07-07 21:34:00 作者：互联网

css

层叠样式表^* (Cascading Style Sheets)

html 向网页上放内容--(超文本标记语言)

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>

TRANSLATE with x English TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签：总结,二级,标题,CSS,段落标记,选择器,css,属性
来源： https://www.cnblogs.com/0x-x0/p/16456165.html

Arabic	Hebrew	Polish
Bulgarian	Hindi	Portuguese
Catalan	Hmong Daw	Romanian
Chinese Simplified	Hungarian	Russian
Chinese Traditional	Indonesian	Slovak
Czech	Italian	Slovenian
Danish	Japanese	Spanish
Dutch	Klingon	Swedish
English	Korean	Thai
Estonian	Latvian	Turkish
Finnish	Lithuanian	Ukrainian
French	Malay	Urdu
German	Maltese	Vietnamese
Greek	Norwegian	Welsh
Haitian Creole	Persian