`标签)的文字颜色设置为红色,字体大小设置为16像素:
```css
p {
color: red;
font-size: 16px;
}
```
### 三、选择器
选择器是CSS中最重要的部分之一,它决定了哪些HTML元素会被选中并应用样式。常见的选择器类型包括:
1. **元素选择器**:直接使用HTML标签名作为选择器,如`p`、`h1`、`div`等。
2. **类选择器**:以`.`开头,后面跟类名,如`.class-name`。
3. **ID选择器**:以`#`开头,后面跟ID名,如`#id-name`。
4. **属性选择器**:用`[attribute]`表示,如`[data-attribute]`。
5. **伪类选择器**:用`:`表示,如`:hover`、`:active`、`:focus`等。
### 四、CSS常用属性
CSS提供了丰富的属性来控制网页的外观和格式化。以下是一些常用的CSS属性:
1. **颜色**:`color`、`background-color`等。
2. **字体**:`font-family`、`font-size`、`font-weight`、`line-height`等。
3. **布局**:`width`、`height`、`margin`、`padding`、`border`、`display`等。
4. **背景**:`background-image`、`background-color`、`background-repeat`、`background-position`等。
5. **动画**:`transition`、`transform`、`animation`等。
### 五、CSS样式表的组织方式
在实际开发中,我们通常会将CSS代码放在单独的文件中,并通过``标签将其引入到HTML文档中。此外,为了更好地组织和管理代码,我们可以使用CSS预处理器(如Sass、Less等)或CSS框架(如Bootstrap、Bulma等)。
### 六、CSS注意事项
在使用CSS时,我们需要注意以下几点:
1. **优先级**:CSS的优先级是根据选择器的类型和权重来确定的。内联样式具有最高优先级,然后是ID选择器,接着是类选择器、属性选择器和元素选择器。使用`!important`可以强制覆盖优先级较高的样式,但应谨慎使用,以免破坏代码的稳定性。
2. **盒模型**:CSS的盒模型包括内容区域、内边距、边框和外边距四个部分。理解并正确使用盒模型对于实现复杂的布局至关重要。
3. **响应式设计**:随着移动设备的普及,响应式设计变得越来越重要。通过使用媒体查询(`@media`),我们可以根据不同的屏幕尺寸和分辨率应用不同的样式规则。
总之,CSS是Web开发中不可或缺的一部分。掌握CSS的基础知识和技巧对于实现美观、易用的网页至关重要。