chunyu_project/media/learn/courses/13/chapters/53.md

CSS 选择器与样式

学习目标

• 理解 CSS 的作用
• 掌握 CSS 选择器
• 学会使用常见样式属性

CSS 语法

选择器 {
    属性名: 值;
    属性名: 值;
}

选择器类型

选择器	说明	示例
元素选择器	选中所有该元素	p { }
类选择器	选中 class 属性	.box { }
ID 选择器	选中 id 属性	#header { }
后代选择器	选中后代元素	div p { }

常用属性

.box {
    color: #333;
    font-size: 16px;
    background-color: #f5f5f5;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
}

动手练习

1. 为之前的 HTML 页面添加样式
2. 使用不同选择器设置样式
3. 实现一个卡片组件