目录
- 1. div 和 span
- 2. 什么是CSS？
- 3. CSS 引入方式
- 3.1 内部样式表
- 3.2 外部样式表
- 3.3 行内样式
- 4. 选择器
- 4.1 标签选择器
- 4.2 类选择器
- 4.3 id 选择器
- 4.4 通配符选择器
- 5. CSS 基础属性
- 6. 谷歌浏览器调试工具
正文开始。
1. div 和 span
在学习 CSS 之前，我们先学习两个重要的标签div和span，它们是无语义的布局标签，用来布局网页，划分网页区域，将网页模块化。
- div：独占一行，俗称“大盒子”。
- span：不换行，俗称“小盒子”。
2. 什么是CSS？
CSS（Cascading Style Sheets）是一种用于描述网页表现的样式表语言。
CSS可以静态地修饰网页，也可以与JavaScript等脚本语言结合，动态地修改网页中元素的样式。CSS能够精确控制网页中元素的位置和排版，支持各种字体和字号样式，并允许编辑网页对象和模型的样式。它使得网页内容与表现相分离，提高了网页的可读性和可维护性，同时也加快了网页的下载和加载速度。CSS可以应用于多种媒体，如屏幕、打印和移动设备等
3. CSS 引入方式
3.1 内部样式表
CSS 代码写在 style 标签里面，style 标签写在 head 标签里。
<title>111</title>
<style>
/* 选择器{} */
p{/* CSS 属性*/color:red;
}
<style><p>..</p>
3.2 外部样式表
- CSS 代码写在单独的 CSS 文件中
- 在 HTML 使用 link 标签引入
<link rel=“stylesheet” href=“./my.css”>
3.3 行内样式
- 配合 JavaScript 使用
<div style=“CSS 属性”></div>
4. 选择器
用来查找标签，设置样式
基础选择器有：
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
4.1 标签选择器
标签选择器：使用标签名作为选择器，选中同名标签设置相同样式。例如：p，h1，div，img…
<html>
<head><title>标签选择器</title><style>p {color:red;}</style>
</head>
<body><p>这是 p 标签的内容</p>
</body>
</html>
4.2 类选择器
类选择器：查找标签，差异化设置标签的显示效果。
步骤：
- 定义类选择器（.类名）
- 使用类选择器（class=“类名”）
<style>/*定义类选择器*/.red {color: red;}
</style><div class=“red”>这是 div 标签的内容</div>
<p class=“red”>这是 p 标签的内容</p>
4.3 id 选择器
id 选择器：查找标签，差异化设置标签的显示效果
使用场景：一般配合 JavaScript 使用，很少用来设置 CSS 样式
步骤：
- 定义 id 选择器（#id名）
- 使用 id 选择器（id=“id名”）
<style>/*定义 id 选择器*/#red {color: red;}
</style><div id=“red”>这是 div 标签的内容</div>
使用规则：
- 同一个 id 选择器在一个页面只能使用一次。
4.4 通配符选择器
通配符选择器：查找页面所有标签，设置相同样式。
写法：*，不需要调用，浏览器自动查找页面所有标签，设置相同样式。
* {color: red;
}
5. CSS 基础属性
| 属性 | 描述 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景颜色 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体倾斜 |
| line-height | 行高1 |
| font-family | 字体族2 |
| font | 字体复合属性3 |
| text-indent | 文本缩进 |
| text-align | 对齐方式 4 |
| text-decoration | 修饰线 |
| color | 颜色 |
代码样例：
<style>/* 宽度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color: red;/* 字体大小：属性必须有单位，谷歌浏览器默认16px */font-size: 30px;/* 字体粗细 */font-weight: 200;font-weight: normal;font-weight: bold;/* 字体不倾斜 */font-style: normal;/* 字体倾斜 */font-style: italic;/* 行高：设为指定像素 */line-height: 20px;/* 行高：设为指定字号倍数 */line-height: 2;/* 字体族 */font-family: 楷体;/* 复合属性 */font: italic 700 30px 楷体；/* 文本缩进：px以像素为单位；em以字号为单位 */text-indent: 20px;text-indent: 2em;/* 文本左对齐（默认对齐） */text-align: left;/* 文本居中对齐 */text-align: center;/* 文本右对齐 */text-align: right;/* 修饰线：无修饰线 */text-decoration: none;/* 修饰线：下划线 */text-decoration: underline;/* 修饰线：删除线 */text-decoration: line-through;/* 修饰线：上划线 */text-decoration: overline;/* 颜色：英文单词 */color: red;/* 颜色：RGB表示法 r,g,b分别表示红绿蓝，取值0-255 */color: rgb(r,g,b);/* 颜色：RGBA表示法 r,g,b分别表示红绿蓝；a表示透明度，取值0-1 */color: rgba(r,g,b,a);/* 颜色：十六进制表示法，两两一组，若同组中相同，可简写为一个 */color: #RRGGBB;
</style>
6. 谷歌浏览器调试工具
作用：检查、调试代码；帮助开发人员找到代码问题。
如何打开？
- 在浏览器窗口内任意位置点击鼠标右键，菜单中选择“检查”
- 快捷键F12
这是调试窗口的界面
使用查看工具可以指定某一标签来进行检查，这里我们查看一下页面中的标签。
完。
行高 ＝ 文本高度 ＋ 上间距 ＋ 下间距 ↩︎
font-family 属性值可以书写多个字体名，每个字体名用逗号隔开，执行顺序是从左向右依次查找，属性的最后设置一个字体族名，字体族名有：无衬线字体、衬线字体。 ↩︎
符合属性：一个属性对应多个值的写法，每个属性值之间使用空格隔开。顺序为：是否倾斜、是否加粗、字号/行高、字体。其中字号和字体值必须书写。 ↩︎
修改文本的对齐方式本质是修改的文本內容，而不是改变标签。 ↩︎
