Appearance
CSS基础语法（入门第一步）
3.1 CSS语法结构：选择器 + 声明块
CSS的基本语法结构由两部分组成：选择器和声明块。
语法结构
css
选择器 {
属性1: 值1;
属性2: 值2;
/* 更多属性... */
}通俗比喻：「找人+穿衣」
- 选择器：就像是在人群中找到特定的人（元素）
- 声明块：就像是给这个人穿上特定的衣服（样式）
例如：
css
/* 找到所有h1元素，给它们穿上蓝色、居中、32px大小的衣服 */
h1 {
color: blue;
text-align: center;
font-size: 32px;
}3.2 声明块的规则：属性 + 值
声明的格式
每个声明由属性和值组成，中间用冒号（:）分隔，每个声明以分号（;）结束。
常见属性和值
| 属性 | 描述 | 示例值 |
|---|---|---|
| color | 文字颜色 | red, #ff0000, rgb(255, 0, 0) |
| font-size | 字体大小 | 16px, 1em, 100% |
| background-color | 背景颜色 | blue, #0000ff, rgb(0, 0, 255) |
| width | 宽度 | 200px, 50%, auto |
| height | 高度 | 100px, 50%, auto |
注意事项
- 大小写不敏感：CSS属性和值不区分大小写，但建议使用小写
- 空格：属性和值之间需要有空格
- 分号：每个声明必须以分号结束
- 花括号：声明块必须用花括号包围
3.3 CSS注释的写法
单行注释
使用 /* */ 包围注释内容：
css
/* 这是一个单行注释 */
h1 {
color: blue; /* 这是行内注释 */
}多行注释
对于较长的注释，可以使用多行注释：
css
/*
这是一个多行注释
可以写很多内容
解释CSS代码的作用
*/
h1 {
color: blue;
font-size: 32px;
}注释的作用
- 解释代码：说明代码的作用和逻辑
- 暂时禁用代码：可以将不需要的代码注释掉
- 提高可读性：使代码结构更清晰
3.4 新手必知：CSS代码规范与命名习惯
代码规范
- 缩进：使用2个空格作为缩进
- 换行：每个属性单独占一行
- 空格：属性和值之间、选择器和花括号之间都要有空格
- 大小写：使用小写字母
- 分号：每个声明都要以分号结束
命名习惯
- 类名和ID：使用语义化的名称
- 连字符：使用连字符（-）分隔单词，如
nav-bar - 避免使用数字：除非必要，否则不要在类名中使用数字
- 避免使用特殊字符：只使用字母、数字和连字符
示例
css
/* 好的代码规范 */
.nav-bar {
background-color: #333;
color: white;
padding: 10px;
}
/* 不好的代码规范 */
.navBar{background-color:#333;color:white;padding:10px}3.5 随堂练习：给HTML页面文字设置颜色和大小
练习目标
创建一个HTML页面，使用CSS设置不同元素的文字颜色和大小。
练习步骤
- 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字样式练习</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<h1>标题</h1>
<h2>副标题</h2>
<p>这是一个段落。</p>
<p class="highlight">这是一个高亮段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>- 添加CSS样式：
css
/* 设置标题样式 */
h1 {
color: #333;
font-size: 28px;
}
h2 {
color: #666;
font-size: 20px;
}
/* 设置段落样式 */
p {
color: #444;
font-size: 16px;
}
/* 设置高亮段落样式 */
.highlight {
color: #ff6600;
font-size: 18px;
font-weight: bold;
}
/* 设置列表样式 */
ul {
color: #555;
}
li {
font-size: 14px;
}- 运行页面：在浏览器中打开文件，查看效果
练习扩展
- 尝试使用不同的颜色值（十六进制、RGB、英文）
- 尝试使用不同的字体大小单位（px、em、%）
- 尝试添加其他文字样式，如字体、粗细、对齐方式