HTML/CSS/JS学习笔记 Day4（CSS--C1 选择器&声明）
跟着该视频学习，记载笔记：【黑马步伐员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358Day4 内容梳理：
目录
CSS 1. 选择器&声明
1.0 概述
1.1 选择器
基础选择器
1）标签选择器
2）类选择器（常用）
①单类名
②多类名
3）id选择器
4）通配符选择器。
复合选择器
1）后代选择器（告急）
2）子选择器（告急）
3）并集选择器
4）伪类选择器
①链接伪类
②focus伪类
1.2 声明
字体属性
字体系列
字体大小
字体粗细
笔墨样式
复合属性
文本外观
文本颜色
文本对齐
文本装饰
文本缩进
行间距
引入方式
（1）内部样式表
（2）行内样式表
（3）外部样式表（告急）
调试方式
快捷键 tab
快速生成HTML结构语法
快速生成CSS结构语法
CSS 1. 选择器&声明
1.0 概述
CSS（Cascading Style Sheets），也叫层叠样式表。和HTML一样是标志语言而非编程语言。
由于HTML只关注内容的语义而不关注网站外观，再加上用HTML做网站样式会导致代码痴肥和繁琐，所以需要用CSS来美化网页。
比如，把一句话的颜色从黑改为红，并把笔墨像素改为36像素：
https://i-blog.csdnimg.cn/direct/69d68353b6274491ab9d00ebd6fd5ddb.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式</title>
<style>
p {
color: red;
font-size: 36px;
}
</style>
</head>
<body>
<p>这句话是红色的。</p>
</body>
</html>
CSS主要由两部分构成：选择器、声明（一条或多条）。
CSS主要在<head></head>标签之间编辑，而HTML主要在<body></body>标签之间编辑，二者互不打扰。
CSS的格式类似下图：
https://i-blog.csdnimg.cn/direct/d41beb97ae2e4e1ea325919573efbe8d.png
比较推荐下列的CSS撰写格式，便于更清晰地阅读代码：
[*]一行只放一个属性，属性之间用英文分号隔开。
[*]拼写发起采取全小写的格式，特别情况除外。
[*]选择器（或称为标签）和大括号之间保存一个空格。
1.1 选择器
选择器的作用就是选择标签。按照不同的需求，选出特定的标签。
其中，选择器可分为两大类：基础选择器、复合选择器。
基础选择器
基础选择器是由单个选择器构成的。
可再细分为四类：标签选择器、类选择器、id选择器、通配符选择器。
基础选择器
作用
特点
使用情况
用法
标签选择器
可选出雷同标签。
（比如所有的<p>）
无法差别化选择
较多
标签名{
属性1: 属性值1;
……
}
类选择器
可选出一个或多个标签。
可根据需求选择
非常多
.类名{
属性1: 属性值1;
……
}
id选择器
一次只能选择一个标签。
ID属性只能在每个HTML文档中出现一次
一样平常和JS搭配
#id名{
属性1: 属性值1;
……
}
通配符选择器
选择所有的标签。
选择了太多标签，有部分不需要
特别情况使用
*{
属性1: 属性值1;
……
}
1）标签选择器
标签选择器，指的是用HTML标签的名称作为选择器。
作用：把页面中的某一类标签全部选中，然后为其指定统一的CSS格式。
优点：能快速为一类标签设置统一样式。
缺点：无法差别化设置，只能对选择的某一类的全部标签进行设置。
标签选择器的语法：
标签名 {
属性1: 属性值1;
属性2: 属性值2;
……
} 比如，分别以<p>和<div>标签区分性别，然后把<p>标签染蓝;
https://i-blog.csdnimg.cn/direct/8fd2b14d1a544850ae9337165d9b318e.png
https://i-blog.csdnimg.cn/direct/78680788795b4815869bc039bb96427c.png
2）类选择器（常用）
类选择器，可以单独选中一个标签（单类名）或某几个标签（多类名）。
注意：
[*]类选择器使用”.”（英文点号）进行标识，后面紧跟类名（自己命名类名，要避开常用的标签名）
[*]长名称可以使用中横线来毗连，比如.red-font
[*]尽量使用英笔墨母来命名，不要使用中文或纯数字
①单类名
单类名选择器的语法：
先给目标对象加上class属性，然后再更改属性值。
<head>
.类名 {
属性1: 属性值1;
属性2: 属性值2;
……
}
</head>
<body>
<标签名 class=”类名”>标签内容 </标签名>
</body>
注意，类名前有个很小的点，如下图，不要忘加了：
https://i-blog.csdnimg.cn/direct/dfca18d784d246a799c3b3040adf9131.png
比如我要将p标签的男A、div标签女A都改为红色字体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
.redFont {
color: red;
}
</style>
</head>
<body>
<p class="redFont">男A</p>
<p>男B</p>
<p>男C</p>
<div class="redFont">女A</div>
<div>女B</div>
<div>女C</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/f2244b95ce5f4bd989cc7c3c89a2f58d.png
②多类名
单类名选择器的语法：
先给目标对象加上class属性，然后再更改属性值。
<head>
.类名1 {
属性1: 属性值1;
……
}
.类名2 {
属性1: 属性值1;
……
}
</head>
<body>
<标签名 class=”类名1 类名2”>标签内容 </标签名>
</body>
在标签的class属性中写类名，多个类名之间必须用空格隔开。
比如把“123”和“789”设置为红色，并把“123”和“456”设置为35px：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名 类选择器</title>
<style>
.red {
color: red;
}
.bold {
font-size: 35px;
}
</style>
</head>
<body>
<p class="red bold">123</p>
<p class="bold">456</p>
<p class="red">789</p>
</body>
</html>
https://i-blog.csdnimg.cn/direct/db7cbd266b0c45e4b9919df75e07f40b.png
3）id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
使用方式类似“类选择器”，都是在标签的属性中添加一些内容，然后使用CSS对这些被选中的内容进行处理。
id选择器的语法：
#id名 {
属性1: 属性值1;
属性2: 属性值2;
……
}
Id选择器和类选择器的区别：
（1）id选择器是“#id名”，类选择器是“.类名”。
（2）如果有标签已经调用了某id名，其他标签不能再使用这个id名。而类选择器定义的标签可被多次使用。
id选择器就像是人的身份证号，只能你使用；而类选择器就比如人的名字，多个人可以重名，你也可以有多个名字。
4）通配符选择器。
通配符选择器使用“*”来定义，体现选中页面中的所有元素（标签）。
通配符选择器的语法：
* {
属性1: 属性值1;
属性2: 属性值2;
……
}
比如把“123”“456”“789”都改为红色的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>p标签：123</p>
<div>div标签：456</div>
<span>span标签：789</span>
<ul>
<li>ul-li标签：101112</li>
</ul>
</body>
</html>
https://i-blog.csdnimg.cn/direct/103c80311cdb4d718d8c4b58c997073d.png
特别情况下才使用通配符选择器，比如清楚所有元素标签的表里边距：
* {
margin: 0;
padding: 0;
}
复合选择器
复合选择器是多种基础选择器以不同方式组合而成的，可以更准确且高效地选择目标元素。
范例
作用
特性
符号&用法
后代选择器
用来选择后代元素
无论是直接包含还是层叠嵌套式包含，都可以选中
较多
空格
比如 元素1 元素2
子选择器
选择离当前标签迩来一级的元素
只选中迩来一级的元素
少
大于号
比如 元素1>元素2
并集选择器
选择雷同样式的元素
可用于集体声明
较多
逗号
比如 元素1,元素2
链接伪类选择器
选择不同状态的链接
跟链接相干
较多
冒号
focus伪类选择器
选择被光标选中的表单
跟表单相干
少
input:focus
1）后代选择器（告急）
后代选择器又称为“包含选择器”，可以选择父元素里面的子元素。
写法是把外层标签写在前面，内层标签写在后面，中心用空格分隔。
后代选择器的格式：
<style>
元素1 元素2 {
color: red;
}
</style>
需要注意的是，只有元素2是元素1的子元素（只要被元素1包含着就行，可多层嵌套），才能使用后代选择器。
（1）情况1：元素2被元素1直接包含
比如给ul和ol标签里各写两个li，把ul的li都改成红色：
https://i-blog.csdnimg.cn/direct/63fbefff05e5496cb48995ce55e57014.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<!-- 目标：把ul里的li都选上，改为红色 -->
<style>
ul li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>这是ul里的第一个li</li>
<li>这是ul里的第二个li</li>
</ul>
<ol>
<li>这是ol里的第一个li</li>
<li>这是ol里的第二个li</li>
</ol>
</body>
</html>
（2）情况2：元素2通过嵌套被元素1包含
比如给ul标签里写两个li、一个包含在li里的<p>，把后者改成红色：
https://i-blog.csdnimg.cn/direct/d1852638258a4a009a5042ce8444fccb.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<!-- 目标：把ul里的li都选上，改为红色 -->
<style>
ul li p {
color: red;
}
</style>
</head>
<body>
<ul>
<li>这是ul里的第一个li</li>
<li>这是ul里的第二个li</li>
<li>
<p> 这是ul里的li里的p </p>
</li>
</ul>
</body>
</html>
纵然嵌套了多层，也可以定向找到。
另外，当存在多组类似的标签（比如两组都用了ul标签），可以给标签加class属性，然后再定向查找，比如：
https://i-blog.csdnimg.cn/direct/c3fb0225839a4d40b013967d522da344.png
2）子选择器（告急）
子选择器只能选择某元素的迩来一级子元素。就类似数据结构中与某节点直接相连的子节点。
子选择器的语法：
元素1 > 元素2{
样式声明;
}
比如选择div里面所有迩来的一次p标签元素：
div > p{
样式声明;
}
3）并集选择器
并集选择器可以同时选择多组标签并为它们定义雷同的样式，通常用于集体声明。
并集选择器的语法：
元素1 , 元素2{
样式声明;
}
另外，任何形式的选择器都可以作为被并集选择器选上的元素。
（1）情况1：选上标签作为元素
比如不动ol标签，同时选中div和p标签并改为红色：
https://i-blog.csdnimg.cn/direct/8b0025893b1348b2a4aad2268176c70a.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<!-- 目标：把ul里的li都选上，改为红色 -->
<style>
div,
p {
color: red;
}
</style>
</head>
<body>
<div>这是div标签，应该变为红色</div>
<p>这是p标签，也应该变为红色</p>
<ol>
<li>这是ol里的li，不变颜色</li>
</ol>
</body>
</html>
（2）情况2：选上其他选择器作为元素
比如有div、p、两组ol-li标签，同时选中div和第二组ol-li标签并改为蓝色：
https://i-blog.csdnimg.cn/direct/8b5442623cac4c23904fead210d8ef92.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<!-- 目标：把ul里的li都选上，改为红色 -->
<style>
div,
.blue-ol li {
color: blue;
}
</style>
</head>
<body>
<div>这是div标签，应该变为蓝色</div>
<p>这是p标签，不变色</p>
<ol>
<li>这是普通ol里的li，不变色</li>
</ol>
<ol class="blue-ol">
<li>这是变色ol里的li，会变成蓝色</li>
</ol>
</body>
</html>
4）伪类选择器
伪类选择器用于向某些选择器添加特别的效果，或者选择第n个元素。
伪类选择器最大的特点是用冒号体现。
伪类选择器有许多种类，比如链接伪类、结构伪类等等，其中最常用的是链接伪类选择器。
①链接伪类
代码
作用
a:link
选择所有未被访问的链接
a:visited
选择所有已被访问的链接
a:hover
选择鼠标指针位于其上的链接
a:active
选择运动链接（鼠标按下未弹起的链接）
需要注意的是，冒号后没有空格，否则会报错。
注意：
[*]为了确保链接伪类能够见效，要按照link、visited、hover、active的顺序来声明。
[*]因为链接在欣赏器中具有默认样式，所以为了克制欣赏器差别，最幸亏现实操作中给链接单独指定样式（也就是给特定标签指定，而不消body标签统一指定）。
[*]现实开辟中，一样平常就区分“未点击的标签”和“点击过的标签”：
https://i-blog.csdnimg.cn/direct/bff611caf4694f8faff111078e882d17.png
下面会逐个试验link、visited、hover、active四个属性。
（1）a:link
将未被选择过的链接都设置为紫色
https://i-blog.csdnimg.cn/direct/6b0014f964e84951a4807f24cb53e6ff.png
https://i-blog.csdnimg.cn/direct/0b45cbbed8754ab184b17a9924aa8ddb.png
（2）a:visited
将点击后的链接都设置为橘黄色
https://i-blog.csdnimg.cn/direct/d9e1aa68ab754d968c0a445a7097f28b.png
https://i-blog.csdnimg.cn/direct/8333290f8722407b848e14e6caa2964b.png
（3）a:hover
鼠标悬停在链接上的时间，将链接变色为绿的。
https://i-blog.csdnimg.cn/direct/f76191060ecf41d285d19018b2120052.png
https://i-blog.csdnimg.cn/direct/add0580ecf0545f1a1bf1aa4192158a0.png
（4）a:active
当鼠标按下链接且未放手的时间，将颜色变为天蓝色。
https://i-blog.csdnimg.cn/direct/b22b28cf2dc14200b034a60fc1b93a28.png
https://i-blog.csdnimg.cn/direct/64d764dec24544ff8770ba73d8a3f3b9.png
②focus伪类
focus伪类用于选取被光标选中的表单位素。和其他伪类选择器一样都是为了获取元素，只不过focus伪类是只针对于<input>类的表单位素。
focus伪类的语法格式类似：
input:focus{
background-color:yellow;
}
比如设置三个text表单，光标选中哪个，就把哪个的背景颜色变为天蓝色：
https://i-blog.csdnimg.cn/direct/2d2c6019734b492fa7cd31c005afeceb.png
https://i-blog.csdnimg.cn/direct/f7bab3833177491f98e919bac2a53b26.png
1.2 声明
字体属性
CSS Fonts属性用于定义字体的系列、大小、粗细、笔墨样式（如斜体）。
字体属性
含义
注意要点
font-family
字体系列
现实工作中，按照团队的约定来写字体
font-size
字体大小
通常用的单位是px（像素）
font-weight
字体粗细
加粗是700或bold，正常字体是normal或400
（字体粗细的数字无需带单位，而字体大小的数字需要带px）
font-style
笔墨样式
斜体是italic，正常字体是normal
font
复合属性
字体连写是有固定顺序的，弄错了顺序就会导致字体设置失败。
其他属性可以不写，但用复合属性时肯定要写font-size和font-family。
字体系列
CSS使用font-family属性来定义文本的字体系列。
比如：
p { font-family: ‘微软雅黑’;}
div { font-family: Arial, ‘Microsoft Yahei’, ‘微软雅黑’;} 补充：
[*]都是用单引号把字体系列括起来。
[*]某些电脑可能不具备有些字体，所以可以协商多个字体，中心用英文逗号隔开。电脑会依次查抄有无该字体，有则用，没有则查抄下一个。
字体大小
CSS使用font-size属性来定义文本字体的大小。
比如：
p { font-size: 20px;} px是像素，是网页最常用的单位。谷歌欣赏器默认的字体大小是16px，不同欣赏器默认表现的字号不同，所以我们最好设置一个明白的大小，不要用网站默认的大小。
字体粗细
CSS使用font-weight属性来定义文本字体的大小。
比如：
h4 { font-weight: bold;}
p { font-weight: light;} 比如把三句话分为改为normal、lighter、bold：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体系列</title>
<style>
.FontLight {
font-weight: lighter;
}
.FontBold {
font-weight: bold;
}
</style>
</head>
<body>
<p>这是一句话</p>
<p class="FontLight">这也是一句话</p>
<p class="FontBold">这还是一句话</p>
</body>
</html> https://i-blog.csdnimg.cn/direct/82f8b3bb0cb749eab8fa4118f6baec2f.png
现实开辟中，更提倡用数字体现加粗，比如：
p { font-weight: 700; } 这个要和改变字体大小相区分，字体大小是数字后需要加px，而改变字体粗细是只写数字。其中，正常字体粗细对应着font-weight: 400;
笔墨样式
CSS使用font-style属性来设置文本的风格。
比如：
p { font-style: italic;} 属性值
作用
normal
默认值，欣赏器会表现尺度的字体样式 font-style: normal;
italic
斜体 font-style: italic
复合属性
当要设定的属性较多时，可以写成以下的方式，更节约代码：
body {
font: font-style font-weight font-size font-family;
} 上述属性是按肯定顺序分列的，不能随意更改。
（1）按顺序的情况
比如给一句话加上斜体、粗体、16px自豪、微软雅黑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体的复合属性</title>
<style>
p {
/* 格式 font: font-style font-weight font-size font-family */
font: italic 700 16px 'Microsoft yahei';
}
</style>
</head>
<body>
<p>这是一句话。</p>
</body>
</html> https://i-blog.csdnimg.cn/direct/46975a91ca904c9989b9211563046d21.png
（2）不按顺序的情况：
比如把字体大小和字体系列换个位置，会发现字体设置不成功。
https://i-blog.csdnimg.cn/direct/d5442d2861c346cea1887d97d6011e72.png
https://i-blog.csdnimg.cn/direct/4261d130443d4afdb4dbdf0d9e4bb4b8.png
另外，用复合属性的时间，font-size和font-family都不可省略，除此之外的其他属性可以省略不写。
文本外观
CSS Text属性可以定义文本的外观（颜色、对齐文本、装饰文本、文本缩进、行间距等等）。
属性
含义
注意要点
color
文本颜色
通常使用十六进制的方式来体现颜色
text-align
文本对齐
有三种对齐方式，靠左、居中、靠右
text-indent
文本缩进
通常用相对字距em来首行缩进两个字的隔断
text-decoration
文本装饰
下划线underline、上划线overlline、无线none
line-height
行间距
行间距=上行间距+字体高度+下行间距
文本颜色
color属性用于定义文本的颜色。
比如：
div {
color: red;
}
体现方式
属性值
预先设置好的颜色值
比如red，green，blue
十六进制（用得最多）
比如#FF0000F、#29D794
RGB代码
比如rgb(255,0,0)或rgb(100%,0%,0%)
https://i-blog.csdnimg.cn/direct/b45ce764e47348949c763386d14db32d.png
https://i-blog.csdnimg.cn/direct/dfc9f29f568f44009039bf6fdc3ba092.png
https://i-blog.csdnimg.cn/direct/cda9d92f8aad48bea45e49db76188bbf.png
文本对齐
text-align属性用于设置元素内文本内容的对齐方式，仅限于程度对齐。
比如：
div {
text-align: center;
}
属性值
表明
left
左对齐（默认值）
right
右对齐
center
居中对齐
比如下列三句话分别是靠左对齐、居中对齐、靠右对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本对齐</title>
<style>
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
</style>
</head>
<body>
<p class="left">这是靠左对齐的一句话。</p>
<p class="center">这是居中对齐的一句话</p>
<p class="right">这是靠右对齐的一句话</p>
</body>
</html>
https://i-blog.csdnimg.cn/direct/7c4cf9bf65cd45f3b18cf0654ecaa74c.png
文本装饰
text-decoration属性用于添加文本的装饰（下划线、删除线、上划线等等）。
比如：
div {
text-decoration: underline;
}
属性值
描述
none
默认值，没有装饰线。（最常用）
underline
下划线，链接自带下划线。（常用）
overline
上划线。（几乎不消）
line-through
删除线。（不常用）
比如用四句话来分别展示效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本装饰</title>
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
</style>
</head>
<body>
<p>这句话不带装饰线。</p>
<p class="underline">这句话带下划线</p>
<p class="overline">这一句话带上划线</p>
<p class="line-through">这句话带删除线</p>
</body>
</html>
https://i-blog.csdnimg.cn/direct/398d2672f6fa4c0f87dac69649c16ff1.png
文本缩进
text-indent属性用于指定文本第一行的缩进，通常是将段落的首行进行缩进。
有两种设置缩进的方式，一种是设置缩进多少个像素（px），另一种是设置缩进相对单位的大小（em）。
像素缩进比如：
div {
text-indent: 10px;
}
相对单位缩进比如：
div {
text-indent: 2em;
}
em是相对单位，就是当前元素的一个笔墨的大小。如果用的是中文，1em就是一个中笔墨距；英文则是一个英笔墨距
比如用两句话来比较一下，一句缩进，另一句不缩进：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本装饰</title>
<style>
.text-indent {
text-indent: 2em;
}
</style>
</head>
<body>
<p>这句话不会缩进。</p>
<p class="text-indent">这句话会向右缩进两个字距的大小。</p>
</body>
</html>
https://i-blog.csdnimg.cn/direct/aece4a86197a4aec9964d57ebe4b1604.png
行间距
line-height属性用于设置行间距（行高）。
比如：
p {
line-height: 26px;
}
要注意的是，行间距由上行间距、文本高度、下行间距共同构成，如下图：
https://i-blog.csdnimg.cn/direct/0085d2b1dcf946ca8466a92e53f388a4.png
引入方式
按照CSS样式引入的方式（或叫书写的位置），CSS样式表可以分为三大类：
样式表
优点
缺点
使用情况
控制范围
内部样式表
部分做到了结构和样式相分离
没有彻底分离结构和样式
较多
控制一个页面
行内样式表
书写方面，可更改特定标签
结构和样式混在一起写
很少
控制一个标签
外部样式表
完全做到了结构和样式相分离
需要引入样式文件
最多
控制多个页面（都可导入同一个CSS文件）
（1）内部样式表
内部样式表是在HTML页面内部的一个<style>标签中设定CSS的样式，可以修改所有标签的样式。
内部样式表格式比如：
<style>
div{
color: red;
font-size: 12px;
}
</style>
例子：
https://i-blog.csdnimg.cn/direct/1a4f83a9add3425984a1890c2724902a.png
https://i-blog.csdnimg.cn/direct/014a07e57736411b93f25b5b967691bd.png
需要注意的是，理论上<style>标签可以出如今任何位置，不过一样平常把它放在<head>标签里。
（2）行内样式表
行内样式表是直接元素标签的内部写个style属性，设定CSS的样式。这得当修改简朴的样式，或者特定标签。
行内样式表格式比如：
<p style=“color: red; font-size: 30px;”>这是红色的、大字体的一句话</p> https://i-blog.csdnimg.cn/direct/7a3a4777cffa4ef3b1f841e461d53566.png
style属性记得要用英文双引号括起来。
由于仅能控制当前的标签样式，而且书写起来较为繁琐，所以不推荐大量使用。对当前元素添加简朴样式的时间可以使用。
（3）外部样式表（告急）
外部样式表是把样式单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用。
分为两步：
[*]新建个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
[*]在HTML页面的head标签中，通过<link>标签引入CSS文件，格式类似：
<link rel=”stylesheet” href=”CSS文件路径”>
比如使用外部样式表改变字体颜色和大小：
由于我把CSS文件和HTML创建在了同一文件层级，所以直接写CSS文件名称即可。
若CSS文件处于更高层级，则需要写”../CSS文件名”；
处于更低层级则写”文件夹名/CSS文件名”。
https://i-blog.csdnimg.cn/direct/d27fc3969c2f43a78ea582f65aa3409a.png
https://i-blog.csdnimg.cn/direct/03fd3429dbea4d709167fd9d7917f521.png
https://i-blog.csdnimg.cn/direct/1850c6ab18674037b7b8393d7b4bfdbc.png
属性
作用
rel
定义当前文档与被链接文档之间的关系，在这里需要制定为”stylesheet”来体现被链接的文档是一个样式表文件。
href
定义所链接上的文件的URL，最好是相对路径而非绝对路径（详情可参考Day2 超链接标签）
调试方式
我的默认欣赏器设的是chrome，就以它为例展示一下调试工具。
https://i-blog.csdnimg.cn/direct/ecad9bb42e8b4d4eadbce4634af256c6.png
点击“查抄”后会出现下图的内容，可以在这个页面直接编辑页面效果。
https://i-blog.csdnimg.cn/direct/20c63d08b19b4d60b5146a7e9a6263b5.png
不过要注意，在这个页面修改代码不会影响VS Code的代码。这个页面的作用更偏向模仿。所以纵然修改了，也得回VS Code把改动加上。
快捷键 tab
Emmet语法
Emmet使用缩写来提高HTML和CSS的编写速率，在VS Code中已经集成了该语法。
如今主要应用于两方面：（1）快速生成HTML结构语法（2）快速生成CSS样式语法
①快速生成HTML结构语法
（1）生成标签：直接输入标签名，然后按tab键即可。
比如输入div然后按tab键，可以生成<div></div>
（2）生成多个雷同标签：输入标签“*数目”再按tab
比如输入div*3再按tab，生成：
<div></div>
<div></div>
<div></div> （3）生成有包含关系的标签：用>即可
比如想要生成：
<ui>
<li></li>
</ui> 只需要输入ul>li然后点tab键。
（4）生成同级标签：用+即可
比如想要生成：
<div></div>
<p></p> 只需要输入div+p然后点击tab键
（5）生成带有类名或id名的内容：
直接写.demo或#two然后点击tab键
https://i-blog.csdnimg.cn/direct/55fe5763aef14c999e056beff30e456c.png
https://i-blog.csdnimg.cn/direct/3ff03eee763547a6b9f684825e33260f.png
（6）自增符号：$
生成多个demo的同时，demo的序号自增。
格式：
.demo$ *数量 比如生成5个demo：
https://i-blog.csdnimg.cn/direct/a66812050fb94280a4970a0c3c99b78a.png
https://i-blog.csdnimg.cn/direct/0eba54a903fd429a862622a10c700aa9.png
②快速生成CSS结构语法
采取简写形式然后按tab键即可。
比如输入w200再按tab键，可生成width: 200px;
或者输入lh26再按tab，可生成line-height: 26px;
或者输入tac再按tab，可生成text-align: center;
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]