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技术站
微信扫一扫 
支付宝扫一扫 