1. 选择器(Selectors):
选择器用于选择要样式化的 HTML 元素。常见的选择器有:
- 元素选择器: 通过元素的名称选择元素。
p {
/* 样式规则 */
}
- 类选择器: 通过元素的类名选择元素。
.highlight {
/* 样式规则 */
}
- ID 选择器: 通过元素的 ID 选择元素。
#header {
/* 样式规则 */
}
- 属性选择器: 通过元素的属性选择元素。
input[type="text"] {
/* 样式规则 */
}
2. 声明块(Declaration Block):
声明块包含一个或多个声明,每个声明定义了一个样式属性和其对应的值。声明块由花括号 {} 包围。
/* 声明块开始 */
p {
color: blue;
font-size: 16px;
}
/* 声明块结束 */
3. 声明(Declaration):
声明由属性和值组成,用冒号 : 分隔。每个声明以分号 ; 结尾。
p {
/* 属性: 值 */
color: blue;
font-size: 16px;
}
4. 注释:
CSS 中的注释以 /* 开始,以 */ 结束。
/* 这是一个注释 */
p {
color: red; /* 这也是一个注释 */
}
5. 多个选择器和声明:
可以将多个选择器和声明组合在一起。
/* 多个选择器 */
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
/* 多个声明 */
p {
color: green;
margin: 10px;
}
以上是 CSS 的基本语法结构。深入学习时,你会遇到更多高级的 CSS 特性和语法,如伪类、伪元素、媒体查询、过渡、动画等。CSS 的语法简洁而灵活,通过实践和掌握常用选择器和属性,你将能够更好地样式化和布局网页。
转载请注明出处:http://www.zyzy.cn/article/detail/12518/CSS