CSS的三种写法，你知道吗？

深碍√TFBOYSˉ_ 2022-02-22 23:46 311阅读 0赞

## CSS（层叠样式表） ##

**英文全称：Cascading Style Sheets**

*  CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
 *  CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

## CSS的三种写法 ##

我们既然知道了CSS用于渲染HTML 元素标签的样式，也就是HTML是CSS世界的基石。那么，CSS通过何种方式添加到HTML中发挥它的作用呢？引入CSS代码的写法有三种，我们一一道来。

1.  内联样式，在HTML元素中使用"style" 属性；
2.  嵌套样式 ，在HTML文档头部 head 区域使用 style 元素 来包含CSS代码；
3.  外联样式，使用外部 CSS 文件。

**《一》内联样式**

**当特殊的样式需要应用到个别元素时，就可以使用内联样式**。使用内联样式的方法是在标签中使用样式属性，样式属性可以是任何 CSS 属性。其作用范围是在当前标签内，使用较少

<body>
    <div style = "color:blue; font-size:15px">文章</div>
    <p>我是第一段文章内容</p> 
    <p>我是第二段文章内容</p> 
    <p>我是第三段文章内容</p> 
    </body>

**《二》嵌套样式**

**当单个文件需要特别样式时，就可以使用嵌套样式**。通过在 head 部分定义 style 标签书写嵌套样式，在 style 标签中可以使用标签选择器，类选择器，id选择器等去给标签设置属性。

<title>文章</title>
    <style>
           p{
           color: red;
           font-size: 30px;
           }
           div{
           font-size: 18px;
           }
     </style>
    
    ......
    
        <div>内容一</div> 
        <div>内容二</div> 
        <p>第一段</p> 
        <p>第二段</p>

**《三》外联样式**

**当样式需要被应用到很多页面的时候，将会使用外联样式**。通过更改一个文件来改变所以页面的样式。此时我们需要在head标签中引入link标签。href中为需要引入的css文件。

<head>
        <meta charset="utf-8" />
        <title>修改用户信息</title>
        <link href="Css/tableStyle.css" rel="stylesheet" />
    </head>

**另外**

1.  单独的css文件是以.css为后缀名的文件，在该文件内可以直接设置标签样式，不需要包在 style 标签里  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70]
2.  当我们想为某一个元素设置特殊样式的时候，可以将该元素写在 span /span 标签内，因为 span 标签没有特殊的语义，适合单独设置样式。

<span>
          <p style="color:green;margin-left:20px;">
          这是一个段落
          </p>
    </span>

## 小结 ##

**从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。除了文章以上所述情况外，大部分程序CSS代码都最终都是使用外联样式表。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70]: /images/20220223/f64134ed9cc04453b46e5f62d6f762aa.png