目标
能使用emmet语法
能够使用CSS复合选择器
能够写出伪类选择器的使用规范
能够说出元素有几种显示模式
能够写出元素显示模式的相互转换代码
能够写出背景图片的设置方式
能够计算CSS权重
目录
目录
0. Emmet语法
Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。
0.1 快速生成HTML结构语法
1. 生成标签直接输入标签名按tab键即可 比如div 然后tab,就可以生成<div></div>
2. 如果想要生成多个相同的标签 加上*就可以了 比如div*3就可以快速生成3个div
3. 如果有父子级关系的标签,可以用> 比如ul>li就可以了
4. 如果有兄弟关系的标签,就可以用+就可以了,比如div+p
5. 如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
6. 如果生成的div类名是有顺序的,就可以用增符号$
7. 如果想要在生成的标签内部写内容可以用{}
0.2 快速生成CSS样式语法
CSS基本采取简写的形式即可。
1. 比如 w200 按tab键可以生成width:200px
2. 比如 lh26 按tab键 可以生成line-height:26px
0.3 快速格式化代码
1. CSS复合选择器
1.1 什么是复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上的,对基本选择器进行组合形成的。
1. 复合选择器可以更准确、更高效的选择目标元素(标签)
2. 复合选择器是由两个或多个基础选择器,通过不同的方式组合形成的
3. 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
1.2 后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
1. 元素1和元素2 中间用空格隔开
2. 元素1 是父级,元素2 是子级,最终选择的是元素2
3. 元素2可以是儿子,也可以是孙子等,只要是元素1 的后代即可
4. 元素1 和元素2 可以是任意基础选择器
1.3 子选择器(重要)
子元素选择器 (子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法:
1. 元素1和元素2中间用大于号隔开
2. 元素1是父级,元素2是子级,最终选择的是元素2
3. 元素2必须是亲儿子,其孙子、重孙之类的都不归他管。你也可以叫他亲儿子选择器
1.4 并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
1. 元素1和元素2中间用逗号隔开
2. 逗号可以理解为和的意思
3. 并集选择器通常用于集体声明
1.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点使用冒号(:)表示,比如::hover、:first-child。
因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
1.6 链接伪类选择器
1. 链接伪类选择器注意事项。
(1)为了确保生效,请按照LVHA的循顺序声明:link- :visited- :hover- :active。
(2)记忆法:love hate或者lv包包hao。
(3)因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
2. 链接伪类选择器实际开发中的写法。
1.7 :focus伪类选择器
:focus伪类选择器用于获得焦点的表单元素。
焦点就是光标,一般情况下<input>类表单元素才能获取,因为这个选择器也主要针对于表单元素来说。
1.8 复合选择器总结
2. CSS元素显示模式
了解元素显示模式可以更好的让我们的布局页面。
2.1 什么是元素显示模式
作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>.
HTML元素一般分为块元素和行内元素两种类型。
2.2 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
2.3 行内元素
2.4 行内块元素
2.5 元素显示模式总结
2.6 元素显示模式的转换
2.6 一个小工具的使用 snipaste
案例:简洁版小米侧边栏
2.7 一个小技巧 单行文字垂直居中的代码
2.8 单行文字垂直居中的原理
3. CSS背景
通过CSS背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
3.1 背景颜色
3.2 背景图片
3.3 背景平铺
3.4 背景图片位置
3.5 背景图像固定(背景附着)
3.6 背景复合写法
3.7 背景色半透明
3.8 背景总结
综合案例:五彩导航