1、CSS简介
1.1 HTML的局限性
HTML很单纯，只做结构只关注内容。可以做简单的样式，比如：文本居中、边框大小等等，但是会比较繁琐和臃肿。这时就需要用CSS来只做样式，实现样式和结构分离。
1.2 CSS——网页的美容师
- CSS，层叠样式表（Cacading Style Sheets），有时称为CSS样式表或级联样式表。
- CSS也是标记语言。
- CSS主要设置HTML页面的文本的样式（字体、字号、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS美化HTML，让HTML更漂亮。
- CSS最大价值：让HTML只做结构，CSS只做样式即结构（HTML）与样式（CSS）相分离。
1.3 CSS语法规范
选择器 {
样式声明语句
}
p {
color: red;
}- 选择器是用于指定CSS样式的HTML标签
- 花括号{ }内是设置该对象的具体样式
- 花括号内的属性名和属性值以“键值对”的形式存在。
- 每一条样式声明语句写完之后一定一定一定要加 分号；
1.4 代码风格
（非强制，符合开发书写方式）
1、样式风格书写
紧凑式
p{color:red;}展开式👏（推荐）
p {
color: red;
}2、样式大小写
大写
P {
COLOR:RED;
}小写 👏（推荐）
p {
color: red;
}3、空格规范
p {
color: red;
}- 选择器和花括号之间一个空格
- 属性名和属性值之间一个空格
2、CSS基础选择器
2.1 CSS选择器的作用
选择器（又叫选择符）根据需求选择标签用的
选择器（选对人）格式声明（做对事）
2.2 选择器分类
- 基础选择器：标签选择器、类选择器、id选择器、通配符选择器
- 复合选择器：（后序）
2.3 标签选择器
直接HTML标签作为选择器，选择页面中全部的这个标签名的标签。缺点：不能差异化选择标签。
语法
标签名 {
属性名:属性值;
属性名:属性值;
}p {
color: red;
}2.4 类选择器
（口诀：样式点定义 结构类调用 一个或多个 开发最常用）
语法
.类名 {
属性名: 属性值;
属性名: 属性值;
}<head>
<title>CSS第一次总结</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div class="red">我的文字是红色</div>
</body>
- 类名是自己起的名字，不能是标签名。
- 类名可以用-来分割长的类名
- 不要使用纯数字、纯中文命名，尽量使用英文来命名
- 命名尽量有意义
（这里面是用了CSS引入方式的内嵌式，在head标签里面加style标签，将CSS代码写到style标签里面，适合新手使用，下一篇博客第5部分了介绍CSS代码引入的其他方式）
2.4 类选择器——多类名
我们可以给一个标签指定多个类名，从而达到更多被选择的目的。这些类名都可以选出这个标签。
（一个标签的class属性有多个值，但是写在一起）两个或两个以上的类名比较常用
a.使用方式
<div class="red font20">我的文字既是红色又是20像素</div>- 在class属性中写多个类名
- 多个类名之间用空格分隔开
b.多类名使用场景
减少耦合性
- 标签可以有公共的类也可以有属于自己的类
- 节省CSS代码，统一修改也方便
用div标签实现以下图像
<head>
<title>CSS第一次总结</title>
<style>
.red {
background-color: blue;
}
.green {
background-color: red;
}
.box {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>2.5 id选择器
（口诀：样式#定义，结构调用用id，只能调用一次，别人切勿使用）
#id名 {
属性名:属性值;
属性名:属性值;
}<head>
<title>CSS第一次总结</title>
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<p id="pink">我的文字是粉色</p>
</body>
id选择器与类选择器的区别：
类选择器 好比人的名字 可以重名，每个标签都有权利设置
id选择器 好比人的身份证号 不可以重复，只能让一个标签设置
2.6 通配符选择器
在CSS中，通配符选择器用*定义，表示选中页面中所有元素的标签
* {
属性名:属性值;
属性名:属性值;
}不需要在任何标签设置，自动给所有的元素设置样式
特殊情况使用（后面介绍）
2.7 基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 选出所有这个标签名的标签 | 不能差异化选择 | 较多 | div {} |
| 类选择器 | 选出一个或多个标签 | 可以根据需求设置 | 非常多 | .red{} |
| id选择器 | 只能选出一个标签 | 每个id的属性值只能在每个HTML文档出现一次，不可以重复 | 一般与js搭配使用 | #pink{} |
| 通配符选择器 | 选出所有标签 | 选择全部，统一设置 | 特殊情况使用 | * {} |
3、字体属性
3.1字体系列
语法
p {
font-family: "楷体";
}- 设置字体的属性是font-family
- 提倡字体用英文。中文也可
- 多个单词或多个文字表示的字体名称要用双引号或单引号引起来。如："Microsoft YaHei" "楷体"
- 如果font-family属性值写多个，并用逗号隔开，表示让浏览器首先选用第一个字体，不兼容再选后面的。
- 实际开发中，要注意字体的侵权问题
- 实际工作按团队约定来写
- 最常见的写法：设置字体大多数用标签选择器，一般用body这样可以选中全部的文字
3.2 字体大小
语法
p {
font-size: 16px;
}- 设置字体大小的属性是font-size
- px(像素)是网页中最常用的单位，一定记得加单位
- 不同浏览器可以默认字体的字号不一样，为了让我们的网页在不同的浏览器显示一样，可以选择统一设置字体大小
- 标签标题比较特殊，在用body标签选择器设置字体大小后，并不会改变标题的字体带下单独指定文字大小
<head>
<title>CSS第一次总结</title>
<style>
body {
font-size: 20px;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
<p>我是段落</p>
</body>
3.3 字体粗细
语法
p {
font-weight: 属性值;
}| 属性值 | 意义 |
|---|---|
| normal | 正常大小 |
| bold | 加粗 |
| bolder | 更粗 |
| lighter | 加细 |
| inherit | 继承父元素的字体粗细 |
| 100 200 300 ...900 | 400是normal 700是bold 不用加单位 更常用！👏 |
- 如果一段文字中的某几个文字很重要可以用HTML标签<strong></strong>来加粗文字
- 标题标签使标题默认加粗，可以不加粗
- 实际开发中，更习惯用数字表示字体粗细
3.4 文字样式
主要针对斜体
语法
.italic {
font-style: italic;
}| 属性值 | 意义 |
|---|---|
| normal | 正常 |
| italic | 斜体 |
开发中很少把字体变成倾斜，大多数是把倾斜的字体变成不倾斜。
3.5 字体复合属性
语法
.zonghe {
font: font-style font-weight font-size/line-height font-family;
}依次是文字样式 字体粗细 字体大小/行间距 字体
.zonghe {
font: normal 400 30px/50px 'Microsoft Yahei';
}
- 不能随意颠倒顺序
- 各个属性用空格隔开
- 文字样式（font-style）和字体粗细（font-weight）行高(line-height) 都可以省略
- 字体大小和字体样式不可以省略
一旦违反上面任何一条 整行代码都不会执行
4、文本属性
4.1 文本颜色
语法
.red{
color: #000000;
}| 属性值类别 | 属性值 |
|---|---|
| 预定义的颜色 | red green pink...（一些已经定义好的用英文单词作为属性值） |
| 十六进制（最常用） | #FF0000（红色） |
| RGB代码（red green blue） | rgb(255,0,0) |
VScode里面将鼠标放在颜色上面可以自己选颜色。
4.2 对齐文本
语法
.center{
text-align: center;
}设置对齐文本的属性名是 text-align，属性值一共有4个
| 属性值 | 意义 |
|---|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
4.3 装饰文本
语法
p {
text-decoration: line-through;
}设置上下划线以及删除线用text-decoration，属性值有4个
| 属性值 | 意义 |
|---|---|
| none | 不装饰文本 |
| underline | 下划线 |
| overline | 上划线（很少使用） |
| line-through | 删除线 |
所以说链接的下划线也可以去掉（就是说一些默认的样式可以通过这些属性去掉）
这里可以使用 标签选择器 让所有的链接都没有下划线
4.4 文本缩进
语法
p {
text-indent: 2em;
}| 属性值单位 | 意义 |
|---|---|
| em | 相对单位，2em 表示向左缩进2个当前文字大小的距离 |
| px | 像素，正数向左缩进，负数向右缩进（可能导致文字看不见） |
4.5 行间距
语法
p {
font-size: 16px;
line-height: 20px;
}行间距=上间距+文字高度+下间距
4.6 文本属性总结
| 文本属性 | 属性名 | 意义 |
|---|---|---|
| 文本颜色 | color | 设置文本的颜色，属性值有三种表示方式 |
| 文本对齐当时 | text-align | 设置文本的对齐方式 ，left right center justify |
| 装饰文本 | text-decoration | 设置文本的上下划线以及删除线 overline underline line-through none |
| 文本缩进 | text-indent | 设置首行缩进 有两个单位 px和em(相对单位) |
| 行间距 | line-height | 设置行间距=上间距+文本高度+下间距 调整行之间的距离 |
（笔记和资源是根据b站pink老师视频所讲内容并稍加自己的理解记录整理的：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili）
3652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
