HTML基础知识——CSS样式表、样式属性、格式与布局详解

CSS样式表

CSS（Cascading Style Sheets），即层叠样式表，是一种用来描述文档（特别是网页）样式的语言。CSS样式表通常包含一系列的规则（rules），每个规则由一个选择器和一组样式属性构成。

以下是一个简单的CSS规则：

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

这个规则中，h1为选择器，color和font-size为样式属性，red和24px为样式属性值。

样式属性

CSS中有很多样式属性可以控制元素的外观和布局。以下是一些常用的样式属性：

color: 字体颜色
background-color: 背景颜色
font-size: 字体大小
font-weight: 字体粗细
text-align: 文字对齐方式
width: 元素宽度
height: 元素高度
margin: 外边距
padding: 内边距
border: 边框
display: 元素显示方式

格式与布局

CSS不仅可以控制元素的样式，还可以控制它们的布局。以下是一些常用的布局样式属性：

float: 元素浮动
position: 定位方式
top, bottom, left, right: 定位偏移量
z-index: 层次顺序
display: 元素显示方式

示例说明

示例一：控制文字颜色、大小和对齐方式

<!DOCTYPE html>
<html>
<head>
    <title>示例一</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>这是一段文字</p>
</body>
</html>

这个HTML代码包含了一个<p>段落元素，使用CSS样式表中的规则控制了该元素的字体颜色为蓝色，字体大小为18像素，文本居中对齐。

示例二：使用flex布局

<!DOCTYPE html>
<html>
<head>
    <title>示例二</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }
        .item {
            width: 80px;
            height: 80px;
            background-color: red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

这个HTML代码包含了一个.container和三个.item元素，使用CSS样式表中的规则将.container设置为flex布局，使用justify-content和align-items属性控制居中对齐。.item元素设置固定的宽度、高度、背景颜色，使其形成一个等距间隔的三个方块布局。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML基础知识——css样式表,样式属性,格式与布局详解 - Python技术站