1. 基本语法：
selector {
property: value;
}
- 选择器（Selector）： 用于选择 HTML 元素的模式。
- 属性（Property）： 表示要设置的样式的特征。
- 值（Value）： 指定属性的具体设置。
2. 类型选择器：
选择 HTML 元素的类型，例如：
p {
color: blue;
}
3. ID 选择器：
选择具有特定 ID 的 HTML 元素，例如：
#header {
background-color: #333;
}
4. 类选择器：
选择具有特定类的 HTML 元素，例如：
.button {
font-size: 16px;
}
5. 后代选择器：
选择嵌套在其他元素内的元素，例如：
.container p {
margin-bottom: 10px;
}
6. 伪类和伪元素：
用于选择元素的特定状态或位置，例如：
a:hover {
text-decoration: underline;
}
p::first-line {
font-weight: bold;
}
7. 盒模型：
每个 HTML 元素都被视为一个矩形框，有内容区、内边距、边框和外边距。
.box {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
}
8. 浮动和清除：
用于实现页面布局中的元素浮动和清除。
.float-left {
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
9. Flexbox 和 Grid 布局：
强大的布局模型，用于实现灵活的页面布局。
.container {
display: flex;
justify-content: space-between;
}
10. 响应式设计：
使用媒体查询根据不同设备尺寸应用不同的样式。
@media screen and (max-width: 768px) {
/* 移动设备样式 */
body {
font-size: 14px;
}
}
以上总结了 CSS 的一些核心概念和常见用法。CSS 是一个强大的工具，通过合理的使用，可以实现丰富多彩的网页设计和布局。随着技术的发展，新的 CSS 特性和模块不断涌现，使得网页设计变得更加灵活和创新。
转载请注明出处：http://www.zyzy.cn/article/detail/4021/CSS