CSS级联样式表常用术语总结
1. 术语概述
- CSS: Cascading Style Sheet（层叠样式表），用来控制网页的样式。
- 选择器: 用来选择文档中需要应用样式的元素，如类选择器、ID选择器、通配符选择器等。
- 属性: 用来描述元素的特征，如颜色、大小、边距等。
- 声明: 由选择器和属性构成，用来定义样式。
- 优先级: 表示样式的重要程度，如!important关键字、行内样式、ID样式、类样式、标签样式等。
- 盒模型: CSS中的图文布局模型，由margin（外边距）、border（边框）、padding（内边距）、content（内容）构成。
2. 示例说明
示例1：CSS选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器示例</title>
<style>
h1 {
color: red;
background-color: yellow;
}
p {
font-size: 18px;
}
#intro {
font-style: italic;
}
.special {
border: 1px solid green;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS选择器示例</h1>
<p>这是一个段落。</p>
<p id="intro">这是另一个段落。</p>
<p class="special">这是一个特殊的段落。</p>
</body>
</html>
在上述示例中，h1、p、#intro和.special分别是不同的选择器，表示对应的元素。在样式声明中，分别设置了color、background-color、font-size、font-style、border和text-align等属性，来改变元素的样式。这些属性合在一起构成了一个样式声明。
示例2：盒模型
<!DOCTYPE html>
<html>
<head>
<title>盒模型示例</title>
<style>
.box {
width: 240px;
height: 120px;
margin: 20px;
border: 1px solid black;
padding: 10px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box">这是一个盒子。</div>
</body>
</html>
在上述示例中，使用.box选择器对一个div元素进行样式设置。该元素的宽度为240px，高度为120px。margin、border和padding分别表示元素的外边距、边框和内边距。盒子的背景颜色为gray。这些属性合在一起表示一个盒模型，用于控制元素的布局和样式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS(Cascading Style Sheet)级联样式表常用术语总结 - Python技术站
微信扫一扫 
支付宝扫一扫 