CSS总结1

2022-07-07 21:34:00 阅读：200 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

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

ICode9