从零开始的前端生活( •̀ ω •́ )y ————CSS篇（上）
引言
亲爱的未来网页造型师，欢迎来到CSS的魔法世界！在这里，你可以把丑陋的网页丑小鸭变成优雅的白天鹅——当然，如果你像我刚开始学习时那样，也可能一不小心把白天鹅变成...呃...穿花裙子的霸王龙。
CSS就像网页的化妆师，HTML负责骨架，JavaScript负责动作，而CSS就是那个能让你的网页从"理工男格子衫"变身"时尚博主街拍"的神秘力量。不过别担心，就算你现在的CSS水平还停留在"把所有文字变成亮粉色加闪烁效果"的阶段（求你别这样），这篇文章也能带你走上正轨。
准备好你的代码编辑器，让我们开始这场既会让你抓狂头发，又会让你忍不住炫耀的CSS冒险吧！记住，每个CSS大师都曾经是个把margin和padding搞混的小白——是的，包括正在写这篇文章的我（把margin和padding搞混的小白）。
CSS定义
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。（美化内容）
通过使用 CSS 我们可以大大提升网页开发的工作效率！
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。
使用CSS前只是黑色文字！
使用CSS后可改变文字颜色！
调整字号：font-size: px; 多少px就是多大，这里以30px举例-->font-size: 30px;
属性名和属性值成对出现（例：color：red;）叫做键值对
CSS 引入方式
- 内部样式表：学习使用
- CSS 代码写在style标签里面
- 外部样式表：开发使用
- CSS代码放在单独的CSS文件中（.css）
- 在HTML使用link单标签引入（
<link rel = "stylesheet"href="./my.css">）(rel 是关系，值是stylesheet（样式表，css就是样式表）)
- 行内样式：配合JavaScript使用
- CSS写在标签的style属性值里
<div style="color:red;font-size:20px">这是div标签</div>
- CSS写在标签的style属性值里
外部样式表举例
link引入外部样式表
行内样式举例
选择器
作用：查找标签，设置样式。
基础选择器：
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
标签选择器
标签选择器：以标签名作为选择器 → 选中同名标签设置相同的样式
例如：p,h1,div,a,img
<style>
p{
color:red;
}
例
类选择器
作用：查找标签，差异化设置标签的显示效果。
步骤
- 定义类选择器 → .类名
- 使用类选择器 → 标签添加class="类名"
<style>
/* 定义类选择器 */
.red{
color：red；
}
/* 使用类选择器 */
<div class = "red">这是div标签</div>
例
一个类选择器可以给多个标签使用，一个标签也可使用多个类选择器
建议：类名见名知意，使用英文命名，多个单词-链接
id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式。
步骤：
- 定义id选择器 → #id名
- 使用id选择器 → 标签名添加id="id名"
<style>
/* 定义id选择器 */
#red{
color:red;
}
</style>
/* 使用id选择器 */
<div id="red">这是div标签</div>
规则一个id选择器在一个页面只能使用一次
通配符选择器
作用：查找页面所有标签，设置相同样式。 通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。
*{
color:red;
}
一个通配符选择器让所有标签都变蓝了
画盒子
CSS新属性
- width ：宽度
- height：高度
- background-color：背景色
使用类选择器进行
字体修饰属性
| 描述 | 属性 |
|---|---|
| 字体大小 | font-size |
| 字体粗细 | font-weight |
| 字体倾斜 | font-style |
| 行高 | line-height |
| 字体族 | font-family |
| 字体复合属性 | font |
| 文本缩进 | text-indent |
| 文本对齐 | text-align |
| 修饰线 | text-decoration |
| 颜色 | color |
字体大小
- 属性名：font-size
- 属性值：文字尺寸，PC端网页最常用的单位px
（谷歌，edge浏览器字体大小默认为16px）
字体粗细
font-weight
| 数字 | （开发使用） |
|---|---|
| 正常 | 400 |
| 加粗 | 700 |
| 关键字 | |
|---|---|
| 正常 | normal |
| 加粗 | bold |
字体样式（是否倾斜）
作用：清除文字默认的倾斜效果 属性名：font-style 属性值
- 正常（不倾斜）：normal
- 倾斜：italic
让em标签不倾斜让div倾斜
行高
作用：设置多行文本的间距
属性名：line-height
属性值
- 数字+px
- 数字（当前标签font-size属性值的倍数）
测量行高：从一行文字的最顶（最底）测量到下一行文字的最顶（最底）（实际为这行文字+上间距+下间距（上下间距均为两行间空隙的一半））
使用数字+px改变行高
使用数字改变行高
行高-垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值（只适用于单行文字）
字体族
属性名：font-family
属性值：字体名
font-family：楷体
书写多个字体名时，各个字体名用逗号隔开，执行顺序是从左向右依次查找（找到即按此种执行，然后不再继续查找，若都没有即默认字体）
- font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体（sans-serif）
- 例如 → font-family：楷体，sans-serif;
font复合属性
使用场景：设置网页文字公共样式
作用：用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性之间用空格隔开。
font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
字号和字体值必须书写，否则font属性不生效
/* 文字倾斜、文字加粗、字体大小60px、行高三倍、楷体 */
文本缩进
属性名：text-indent
属性值：
- 数字+px
- 数字 + em（推荐：1em=当前标签字号大小）此方法常用
如果缩进两个字大小
文本对齐方式
作用：控制内容水平对齐方式 属性名：text-align
| 属性值 | 效果 |
|---|---|
| left | 左对齐（默认） |
| center | 居中对齐 |
| right | 右对齐 |
| 居中对齐（居中的是文字不是标签的位置）（最常用） | |
右对齐
水平对齐方式-图片
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
文本修饰线
属性名：text-decoration
| 属性值 | 效果 |
|---|---|
| none | 无 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
文字颜色
属性名：color 属性值
| 颜色表示方法 | 属性值 | 说明 | 使用场景 |
|---|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green... | 学习测试 |
| rgb表示法 | rgb（r，g，b） | r，g，b表示红绿蓝三原色，取值0-255 | 了解 |
| rgba表示法 | rgba（r，g，b，a） | a表示透明度，取值0-1，越小越透明 | 开发使用，实现透明色 |
| 十六进制表示法 | #RRGGBB（每两位分别表示红绿蓝三原色，十六进制） | #000000，#ffcc00，简写：#000，#fc0 | 开发使用（从设计稿复制） |
| rgb | |||
rgba
十六进制表示法
调试工具 - 浏览器
作用：检查、调试代码；帮助程序员发现代码问题、解决问题
- 打开调试工具
- 浏览器窗口→鼠标右键→检查
- F12
- 使用调试工具
写错时浏览器的提醒
可把√点掉查看去掉之后的效果
以上就是CSS（上）的全部内容啦，敬请期待之后的讲解吧！
