跟着该视频学习,记录笔记:【黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day4 内容梳理:
目录
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像素:
<!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的格式类似下图:
比较推荐下列的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>标签染蓝;
2)类选择器(常用)
类选择器,可以单独选中一个标签(单类名)或某几个标签(多类名)。
注意:
- 类选择器使用”.”(英文点号)进行标识,后面紧跟类名(自己命名类名,要避开常用的标签名)
- 长名称可以使用中横线来连接,比如.red-font
- 尽量使用英文字母来命名,不要使用中文或纯数字
①单类名
单类名选择器的语法:
先给目标对象加上class属性,然后再更改属性值。
<head>
.类名 {
属性1: 属性值1;
属性2: 属性值2;
……
}
</head>
<body>
<标签名 class=”类名”>标签内容 </标签名>
</body>
注意,类名前有个很小的点,如下图,不要忘加了:
比如我要将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>
②多类名
单类名选择器的语法:
先给目标对象加上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>
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>
特殊情况下才使用通配符选择器,比如清楚所有元素标签的内外边距:
* {
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都改成红色:
<!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>,把后者改成红色:
<!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属性,然后再定向查找,比如:
2)子选择器(重要)
子选择器只能选择某元素的最近一级子元素。就类似数据结构中与某节点直接相连的子节点。
子选择器的语法:
元素1 > 元素2{
样式声明;
}
比如选择div里面所有最近的一次p标签元素:
div > p{
样式声明;
}
3)并集选择器
并集选择器可以同时选择多组标签并为它们定义相同的样式,通常用于集体声明。
并集选择器的语法:
元素1 , 元素2{
样式声明;
}
另外,任何形式的选择器都可以作为被并集选择器选上的元素。
(1)情况1:选上标签作为元素
比如不动ol标签,同时选中div和p标签并改为红色:
<!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标签并改为蓝色:
<!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标签统一指定)。
- 实际开发中,一般就区分“未点击的标签”和“点击过的标签”:
下面会逐个试验link、visited、hover、active四个属性。
(1)a:link
将未被选择过的链接都设置为紫色
(2)a:visited
将点击后的链接都设置为橘黄色
(3)a:hover
鼠标悬停在链接上的时候,将链接变色为绿的。
(4)a:active
当鼠标按下链接且未松手的时候,将颜色变为天蓝色。
②focus伪类
focus伪类用于选取被光标选中的表单元素。和其他伪类选择器一样都是为了获取元素,只不过focus伪类是只针对于<input>类的表单元素。
focus伪类的语法格式类似:
input:focus{
background-color:yellow;
}
比如设置三个text表单,光标选中哪个,就把哪个的背景颜色变为天蓝色:
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>
实际开发中,更提倡用数字表示加粗,比如:
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>
(2)不按顺序的情况:
比如把字体大小和字体系列换个位置,会发现字体设置不成功。
另外,用复合属性的时候,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%) |
文本对齐
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>
文本装饰
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>
文本缩进
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>
行间距
line-height属性用于设置行间距(行高)。
比如:
p {
line-height: 26px;
}
要注意的是,行间距由上行间距、文本高度、下行间距共同组成,如下图:
引入方式
按照CSS样式引入的方式(或叫书写的位置),CSS样式表可以分为三大类:
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
内部样式表 | 部分做到了结构和样式相分离 | 没有彻底分离结构和样式 | 较多 | 控制一个页面 |
行内样式表 | 书写方面,可更改特定标签 | 结构和样式混在一起写 | 很少 | 控制一个标签 |
外部样式表 | 完全做到了结构和样式相分离 | 需要引入样式文件 | 最多 | 控制多个页面(都可导入同一个CSS文件) |
(1)内部样式表
内部样式表是在HTML页面内部的一个<style>标签中设定CSS的样式,可以修改所有标签的样式。
内部样式表格式比如:
<style>
div{
color: red;
font-size: 12px;
}
</style>
例子:
需要注意的是,理论上<style>标签可以出现在任何位置,不过一般把它放在<head>标签里。
(2)行内样式表
行内样式表是直接元素标签的内部写个style属性,设定CSS的样式。这适合修改简单的样式,或者特定标签。
行内样式表格式比如:
<p style=“color: red; font-size: 30px;”>这是红色的、大字体的一句话</p>
style属性记得要用英文双引号括起来。
由于仅能控制当前的标签样式,而且书写起来较为繁琐,所以不推荐大量使用。对当前元素添加简单样式的时候可以使用。
(3)外部样式表(重要)
外部样式表是把样式单独写到CSS文件中,之后再把CSS文件引入到HTML文件中使用。
分为两步:
- 新建个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
- 在HTML页面的head标签中,通过<link>标签引入CSS文件,格式类似:
<link rel=”stylesheet” href=”CSS文件路径”>
比如利用外部样式表改变字体颜色和大小:
由于我把CSS文件和HTML创建在了同一文件层级,所以直接写CSS文件名称即可。
若CSS文件处于更高层级,则需要写”../CSS文件名”;
处于更低层级则写”文件夹名/CSS文件名”。
属性 | 作用 |
rel | 定义当前文档与被链接文档之间的关系,在这里需要制定为”stylesheet”来表示被链接的文档是一个样式表文件。 |
href | 定义所链接上的文件的URL,最好是相对路径而非绝对路径(详情可参考Day2 超链接标签) |
调试方式
我的默认浏览器设的是chrome,就以它为例展示一下调试工具。
点击“检查”后会出现下图的内容,可以在这个页面直接编辑页面效果。
不过要注意,在这个页面修改代码不会影响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键
(6)自增符号:$
生成多个demo的同时,demo的序号自增。
格式:
.demo$ *数量
比如生成5个demo:
②快速生成CSS结构语法
采取简写形式然后按tab键即可。
比如输入w200再按tab键,可生成width: 200px;
或者输入lh26再按tab,可生成line-height: 26px;
或者输入tac再按tab,可生成text-align: center;