详解CSS的结构与层叠以及格式化

CSS的结构

CSS（层叠样式表）是一种用于定义HTML或XML文件中如何样式化元素的语言。CSS采用选择器和声明块的结构，将样式应用于文档的具体元素。

CSS选择器定义了要应用样式的元素，而属性值则定义了应用的样式，这些属性值存储在声明块中。

声明块有以下结构：

selector {
    property: value;
    property: value;
    ...
}

selector：指定要应用样式的元素
property：样式属性的名称
value：用于该属性的样式值

示例：

h1 {
    color: blue;
    font-size: 24px;
}

在上面例子中， h1 是选择器， color 与 font-size 是属性名， blue 和 24px 是值。这个声明块定义了在HTML文件中所有的

元素都将被样式为蓝色，并使用24px的字体大小。

层叠

当多个CSS规则应用于同一元素时，如何决定最终应用哪个规则的样式？这就需要通过层叠规则来解决。

当多个声明块时，将按照以下方式进行层叠：

来源：与选择器匹配的样式表中定义的样式优先级更高。
特异性：较特殊的选择器将覆盖较一般的选择器。
重要性：使用!important声明属性的声明具有更高的优先级。

示例1：来源

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="custom.css">
</head>
<body>
    <h1 style="color: green;">标题</h1>
</body>

在这个例子中， custom.css 中定义的样式将被应用于

，但内联样式声明 color: green; 会覆盖它，使文本呈现为绿色。

示例2：特异性

<head>
    <style>
        h1 {
            color: red;
        }
        .special h1 {
            color: blue;
        }
        #header h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>普通标题</h1>
    <div class="special">
        <h1>特殊标题</h1>
    </div>
    <div id="header">
        <h1>页眉标题</h1>
    </div>
</body>

在这个例子中，第一个选择器

会被红色着色，但是，第二个选择器 .special h1 选择了

中的

，它将被着蓝色。但是，由于第三个选择器 #header h1 是最特殊的选择器，因此页眉标题将以绿色显现。

格式化

CSS样式并不仅仅影响元素的外观。通过定义元素的排版（如显示位置、盒尺寸、边距和填充）和交互行为（如鼠标悬停时的样式）等，还可以在网页中控制布局。

盒模型

每个HTML元素都是一个矩形。CSS盒模型描述了这个矩形的构成，这个矩形由以下部分构成：

content box：元素的实际内容。
padding box：围绕内容的填充区域。
border box：围绕内部区域的边框区域。
margin box：围绕边框的额外区域。

示例：盒模型

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 5px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>盒模型示例</div>
</body>

这个例子演示了一个具有200px x 200px的内容盒，由于设置了20px填充和5px边框，因此内容区域的实际大小变为160px x 160px。此外，由于外边距设置为10px，因此在内容区域周围有间距。

定位和浮动

在CSS中，通过使用 position 属性可以控制元素在文档树中的位置。5种定位方案如下：

static：元素被设置为默认的定位方式。这样的元素会依据文档流在页面上排列。
relative：元素相对于自己原来在正常的文档流中的位置进行定位（不影响其余元素布局）。
absolute：元素从正常文档流中移除，并相对于最近的已定位祖先元素定位。
fixed：元素相对于视口定位。
sticky：元素在滚动时固定在视口内，直到滚动到某个阈值。然后，它固定在阈值与它的边距之间。

示例：定位

<head>
    <style>
        #div1 {
            position: relative;
            left: 50px;
            top: 100px;
        }
        #div2 {
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            height: 100px;
        } 
    </style>
</head>
<body>
    <div id="div1">相对定位</div>
    <div id="div2">绝对定位</div>
</body>

在这个例子中，对于 div1 使用了相对定位，使用了 left 和 top 属性向右和向下移动了50px和100px。对于 div2 使用了绝对定位，被从正常文档流中移除，然后从顶部的右側开始，通过 right 和 top 属性进行放置在右上角。

浮动可以让元素向左或向右浮动，而不影响其他元素的布局。元素比较小，与包含它的元素相比有多余的空间时，常用于简单的布局。

示例：浮动

<head>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
        }
        #div2 {
            width: 300px;
            height: 200px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="div1">红色div</div>
    <div id="div2">蓝色div</div>
</body>

在这个例子中， div1 和 div2 元素设置了float属性。 div1 向左浮动， div2 向右浮动，被浮动的元素将尽可能地靠近其左侧或右侧的元素。由于两个元素都是浮动的，并且在文档中完成了左右放置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解CSS的结构与层叠以及格式化 - Python技术站