1.CSS基础选择器
基础选择器是由 单个选择器组成的,包括:标签选择器、类选择器、id选择器 和 通配符选择器。
1.1 标签选择器
标签选择器(元素选择器)是指用 HTML标签名称 作为选择器,按标签名称分类,为页面中 某一类 标签指定统一的CSS样式。
语法:
p {
color: red
}
div {
backgroundColro
}
1.2 类选择器
单独一个或者某几个标签,可以使用类选择器。类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点 “.”来表示。
语法:
<div class='container'>
加油!
</div>
<style>
.container{
backgroundColor: pink
}
</style>
注意:
- 类选择器使用 “.” 进行标识,后面紧跟类名
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字、中文等命名,尽量使用英文字母表示
1.3 类选择器 - 多类名
我们可以给一个标签指定 多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签,简单理解就是一个标签有多个名字。
1.3.1 多类名的使用方式
<style>
.red {
color: red
}
.font35 {
font-size: 35px
}
</style>
<div class='red font35'>刘德华</div>
注意:
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
1.3.2 多类名开发中的场景
- 可以把一些标签元素相同的样式(共同部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 从而节省CSS代码,统一修改也非常方便
1.4 id选择器
id选择器可以为标有特定的id的HTML元素指定特定的样式。
语法:
<!-- id选择器以 # 来定义 -->
#id名 {
属性1: 属性值1
}
注意:id属性只能在每个HTML文档中出现一次。
1.5 id 和类选择器区别
- 类选择器可以有多个名字
- id好比身份证,是唯一不可重复的
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用
1.6 通配符选择器
在CSS中,通配符选择器使用 “*” 定义,它表示选取页面中所有元素(标签)。
语法:
* {
属性1: 属性值1
}
注意:
- 通配符选择器不需要调用,自动就给所有的元素使用样式
- 特殊情况才使用
* {
margin: 0;
padding: 0;
}
1.7 基础选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如 p、div | 不能差异化选择 | 较多 | p { color: red} |
类选择器 | 可以选出 1个 或 多个 标签 | 可以根据需求选择 | 非常多 | .nav { color: red } |
id选择器 | 一次只能选择 1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav { color: red } |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * { color: red } |
注意:
- 每个基础选择器都有使用场景,都需要掌握
- 如果是修改样式,类选择器是使用最多的
1.8 伪类选择器
伪类选择器用于向某些选择器添加特殊效果。比如给链接添加特殊效果,比如可以选择第1个,或第n个元素。
1.8.1 链接伪类选择器
- link:未访问的链接
- :visited:已访问的链接
- :hover:鼠标移动到链接上
- :active:选定的链接(点击别松开鼠标)
注意:写的时候尽量按照lvha的顺序。
a {
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover {
color: red;
}
1.8.2 结构(位置)伪类选择器
- :first-child:选取属于其父元素的首个子元素
- :last-child:选取属于其父元素的最后一个子元素
- :nth-child(n):匹配属于其父元素的第N个子元素,不论元素的类型,从第一个元素开始计数
- :nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
// 选择所有的偶数
li:nth-child(even){
color: red
}
// 选择所有的奇数
li:nth-child(odd){
color: red
}
// 选择所有(n从1开始)
li:nth-child(n){
color: red
}
// 选择所有(n从最后一个开始)
li:nth-last-child(n){
color: red
}
1.8.3 目标伪类选择器
:target
目标伪类选择器,选择器用于选取当前活动的目标元素。
:target {
color: red
}
2. CSS字体属性
CSS Fonts(字体)属性用于定义 字体系列、大小、粗细、和文字样式(如斜体)。
2.1 font-family 设置字体系列
CSS使用 font-family 属性定义文本的字体系列。
p { font-family: "微软雅黑" }
div { font-family: Arial, "Microsoft Yahei", "微软雅黑" }
注意:
- 各个字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组,加引号
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:body { font-family: ‘Microsoft YaHei’, tahama, arial, ‘Hiragino Sans GB’ }
2.2 字体大小
CSS使用 font-size 属性定义字体大小。
p { font-size: 20px }
注意:
- 谷歌浏览器默认字体大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给body指定整个页面文字的大小
2.3 字体粗细
CSS使用 font-weight 属性设置文本字体的粗细。
p { font-weight: bold }
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100 - 900 | 400等同于normal,而700等同于bold。注意:这个数字后面不跟 单位 |
2.4 文本样式
CSS使用 font-style 属性设置文本的风格。
p { font-style: normal }
属性值 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style:normal |
italic | 浏览器会显示斜体的字体样式 |
注意:平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
2.5 字体复合属性
字体属性可以把以上文字样式综合来写,这个可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family
}
注意:
- 使用font属性时,必须按上面语法格式中的顺序书写,不能更换书顺序,并且各个属性间以 空格 隔开
- 不需要设置的属性可以省略(取默认值),但 必须保留 font-size 和 font-family属性,否则font属性将不起作用
2.6 字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 通常用的单位是 px像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700 或者 bold,不加粗是 normal 或者 400 记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是 italic,不倾斜是 normal,工作中我们常用的是 normal |
font | 字体连写 | 字体连写是有顺序的,不能随意换位置。其中 字号和字体 必须同时出现 |
注意:
- 字体符合属性如何写?里面有什么注意细节?
- 如果让加粗的文字不加粗显示,让倾斜的文字不倾斜?
3. CSS文本属性
CSS Text(文本)属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
3.1 文本颜色
color 属性用于定义文本颜色。
div { color: red }
表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0) 或 rgb(100%, 0%, 0%) |
注意:开发中最常用的是16进制。
3.2 对齐文本
text-align 属性用于设置元素内文本内容的 水平对齐方式。
div { text-align: center }
属性值 | 解释 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
3.3 装饰文本
text-decoration 属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。
div { text-decoration: underline }
属性值 | 描述 |
---|---|
none | 默认。没有装饰线(最常用) |
underline | 下划线。链接 a 自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
3.4 文本缩进
text-indent 属性用来指定文本的第一行的缩进,通常是将 段落的的首行缩进。
div { text-indent: 10px }
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
p { text-indent: 2em }
em 是一个相对单位,就是当前元素 { font-size } 1个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
3.5 行间距
line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
3.6 文字阴影
text-shadow:给文字添加阴影效果。
- h-shadow:必需。水平阴影的位置。允许负值。
- v-shadow:必需。垂直阴影的位置。允许负值。
- blur:可选。模糊的距离。
- color:可选。阴影的颜色。
3.6 文本属性总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 我们通常用 十六进制,比如 而且是简写形式 #fff |
text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进 2个字的距离,text-indent:2em |
text-decoration | 文本修饰 | 记住下划线 underline,取消下划线 none |
line-height | 行高 | 控制行与行之间的距离 |
4. CSS的引入方式
4.1 CSS的三种样式表
按照 CSS样式的书写的位置(或者引入的方式),CSS样式表可以分为三大类:
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(链接式)
4.1.1 内部样式表
内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个style标签中。
- style标签理论上可以放在HTML文档中的任何地方,但一般会放在文档的head标签中。
- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是并没有实现结构与样式的分离
4.1.2 行内样式表
行内样式表(内联样式表)是 在元素标签内部的style属性中设定CSS样式。适用于修改简单的样式。
- style其实就是标签的属性
- 在双引号中间,写法要符合CSS规范
- 可以控制当前的标签设置样式
- 不推荐大量使用
4.1.3 外部样式表
核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML中。
- 新建一个后缀名位 .css的样式文件,把所有的CSS代码都放入到此文件中
- 在HTML页面中,使用 link标签引入此文件
<link rel = "stylesheet" herf = "css文件路径">
4.2 CSS引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
5. Emmet 语法
5.1 快速生成 HTML 结构语法
- 生成标签 直接输入标签名 俺
tab
键即可 比如 div 然后 tab 键,就可以生成 - 如果想要生成多个相同标签,加上
*
就可以了 比如 div*3 就可以快速生成 3 个div - 如果有父子关系的标签,可以用
>
比如 ul > li 就可以了 - 如果有兄弟关系的标签,用
+
就可以了 比如 div + p - 如果生成带有类名或者 id 名字的,直接写
.demo
或者#two
tab键就可以了 - 如果生成的 div 类名是由顺序的,可以用自增符号
$
- 如果想要在生成的标签内部写内容可以用
{ }
表示
5.2 快速格式化代码
Vscode 快速格式化代码:shift + alt + f
也可设置 当我们 保存页面的时候自动格式代码:
1)文件 ----------> 【首选项】 -------------->【设置】;
2)搜索 emmet.include
;
3)在 setting.json 下的【用户】中添加以下语句:
"editor.formatOnType":true,
"editor.formatOnSave":true,
只需要设置一次即可,以后都可以自动保存格式化代码。
6. CSS 的复合选择器
6.1 什么是复合选择器
在 CSS 中,可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
- 复合选择器可以更准确,更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
6.2 后代选择器(重要)
后代选择器 又称为 包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用 空格
分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2 { 样式声明 }
上述语法表示 选择元素 1 里面的所有元素 2 (后代元素)。
例如:
ul li { 样式声明 } /* 选择 ul 里面所有的 li 标签元素 */
- 元素 1 和元素 2 中间用 空格隔开
- 元素 1 是父级,元素 2 是子级,最终选择的是 元素 2
- 元素 2 可以是儿子,也可以是孙子等,只要是元素 1 的后代即可
- 元素 1 和元素 2 可以是任意基础选择器
6.3 子选择器(重要)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选 亲儿子 元素。
语法:
元素1 > 元素2 { 样式声明 }
例如:
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
- 元素 1 和元素 2 中间用 大于号 隔开
- 元素 1 是父级,元素 2 是子级,最终选择的是 元素2
- 元素 2 必须是 亲儿子,其孙子、重孙之类都不归他管,你也可以叫他亲儿子选择器
6.4 并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器 通过英文逗号 ,
连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素 1, 元素 2 { 样式声明 }
例如:
ul,div{ 样式声明 } /* 选择 ul 和 div 标签元素 */
- 元素 1 和 元素 2 中间用 逗号隔开
- 逗号可以理解为
和
的意思 - 并集选择器通常用于集体声明
6.5 伪类选择器
伪类选择器 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是 用冒号(:)表示,比如 :hover、:first-child。
因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
6.5.1 链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接(鼠标按下未弹起的链接) */
链接伪类选择器注意事项:
- 为了确保生效,请按照
LVHA
的顺序声明 :link – :visited – :hover – :active。 - 记忆法:love hate 或者 lv 包包 hao。
- 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际开发中的写法:
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了 红色 */
}
6.7 :focus 伪类选择器
:focus
伪类选择器 用于选取获得焦点的表单元素。
焦点就是光标,一般情况 类表单元素才能获取,因此这个选择器也主要对于表单元素来说。
input:focus {
background-color: yellow;
}
6.8 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是 空格 .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是 大于 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是 逗号 .nav,.header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{ } 和 a:hover 实际开发的写法 |
:focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
7. 元素性质
7.1 块级元素
每个块级元素通常都会独占一整行或多行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构搭建。
块级元素特点:
- 高度、行高、外边距及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其它块元素
7.2 行内元素
行内元素占有独立的区域,仅仅靠自身的字体大小和尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。常见行内元素有a、strong、b、i、span、s、ins等,其中span最常见。
行内元素的特点:
- 和相邻行内元素在一行上
- 高、宽无效,但水平方向的padding和margin可以设置,垂直方向无效
- 默认宽度就是它本身的宽度
- 行内元素只能容纳文本或其它行内元素
注意:
- p标签里不能放块级元素,同理还有h1,h2等,他们都是文字类块级标签,里面不能放其它元素
- 链接里面不能再放链接
7.3 行内块元素
在行内元素中有几个特殊的标签:img、input、td,可以设置他们宽高和对齐属性,有些资料可能会称他们为行内块元素。
行内块元素特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙
- 默认宽度就是他本身内容的宽度
- 高度、行高、外边距及内边距都可以控制
7.4 标签显示模式转换 display
块转行内:display:inline
行内转块:display:block
块、行内元素转换为行内块:display:inline-block
8. 背景
8.1 背景颜色和图片
CSS可以添加背景颜色和图片,以及来进行图片设置。
- background-color:背景颜色
- background-image:背景图片地址
- background-repeat:是否平铺
- background-position:背景位置
- background-attachment:背景固定还是滚动
- 背景的合写(复合属性):background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
8.2 背景附着
语法:
background-color: scroll | fixed
参数:
- scroll:背景图像是随对象内容滚动
- fixed:背景图像固定
说明:设置或检索背景图像是随对象内容滚动还是固定的。
8.3 背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0
8.4 背景透明
CSS3支持背景半透明的写法格式是:
background: rgba(0, 0, 0, 0.3)
最后一个参数是alpha透明度,取值范围是0~1之间。
注意:背景半透明是指盒子半透明,盒子里面的内容不受影响。同样,可以给文字和边框透明,都是rgba的格式来写。
8.5 背景缩放
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动web开发中做屏幕适配应用非常广泛。
其参数设置如下:
- 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
- 设置为cover,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏
- 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域
8.6 多背景
以逗号分隔可以设置多背景,可用于自适应布局,做法就是用逗号隔开就好了。
- 一个元素可以设置多重背景图像
- 每组属性间使用逗号分隔
- 如果设置的多重背景图之间存在交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上
- 为了避免背景图将图像盖住,背景色通常都定义在最后一组上
background: url(test1.jpg) no-repeat scroll 10px 20px/50px 60px,
url(test1.jpg) no-repeat scroll 10px 20px/70px 60px,
url(test1.jpg) no-repeat scroll 10px 20px/110px 60px #aaa;
8.7 凹凸文字效果
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff
}
div:last-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff
}
</style>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>