Emmet语法
Emmet语法前身是Zen coding , 它使用缩写, 来提高CSS / html的编写速度, VSCode中已经集成该语法..
快速生成HTML结构语法
- 生成标签, 直接输入标签名然后按tab键即可, 比如 按div 然后按tab就自动生成
- 在空白的html页面, 输入!按下tab自动生成html页面结构
- 如果生成多个相同的标签, 直接使用*n就可以了, 例如div*3, 就可以生成三个div
- 如果父子关系的标签, 可以用> 比如, ul > li
- 如果具有兄弟关系的标签, 使用+就可以了,, 例如div + p
- 如果生成带有类名的或者是id的, 可以直接写标签.类名, 或者是 标签#id, 然后回车就可以了.
- 如果生成的div类名是有顺序的, 可以使用自增符号 $
- 使用{} 来包含默认的文字
快速生成CSS样式
CSS基本采用间歇性时即可
- 比如w200 按 tab 可以生成 width: 200px;
- 比如lh26 按tab可以生成 line-height: 26px;
VSCode代码格式化
保存的时候自动格式化
下次保存文件后自动对齐
复合选择器
在CSS中, 可以根据选择器的类型, 把选择器分为基础选择器和符合选择器, 复合选择器是建立在基础选择器之上的 对基本选择器进行组合形成的.
- 复合选择器可以更准确, 更高效的选择目标元素(标签)
- 复合选择器是由多个基础选择器, 通过不同的方式组合而成
- 常用的复合选择器包括, 后代选择器, 子选择器, 并集选择器, 伪类选择器等等
后代选择器
后代选择器又称为包含选择器, 可以选择父元素里面的子元素, 其洗发就是把外层标签写在前面, 内层标签写在后面, 中间用空格分割, 当标签发生嵌套是, 内层标签, 就称为外层标签的后代.
例如:
<ul> <li>嘿嘿嘿</li> <li>嘿嘿嘿</li> <li>嘿嘿嘿</li> </ul> <ol> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ol>
现在有两个列表标签, 我们现在有需求 : 需要将ol中的li的属性改为color: red, 就可以使用后代选择器:
<style> ol li { color: red; } </style>
语法规范
注意:
- 元素1 和 元素2 之间使用空格隔开
- 元素1是父级, 元素2是子级, 最终的选择是元素2, 也就是子级标签
但是也许我们会遇到这种情况:
<ol> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ol> <ol> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ol>
也许会存在两个完全相同的标签, 他们的子标签也想同, 但是我想要将下面这个标签里面的子标签设置样式, 这个时候还可以使用上面的方法吗?
答案是当然不行的, 这样子也会把上面那个标签的子标签给设置样式了:
于是, 为了区分第一个ol和第二个ol, 我就就需要给第二个ol设置一个类, 然后使用后代选择器的方式来选择第二个ol:
<style> .test li { color: red; } </style> <ol> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ol> <ol class="test"> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ol>
另外一个例子:
<style> div div { color: red; } </style> <div> <p> <div> <p> <div> hahahaha </div> </p> </div> </p> <div> hahahha </div> </div>
子元素选择器
子选择器只能 选择作为某元素的最近一级子元素, 简单理解就是选亲儿子元素
举个例子:
<style> div>a { color: red; } </style> <div> <a href="#">我是儿子</a> <p> <a href="#">我是孙子</a> </p> </div>
解释: 子类选择器只会选择直属的亲儿子, 不会选择重孙标签
需要注意的是:
- 元素1 和 元素2 中间需要使用 大于号 隔开
- 元素1 是父级, 元素2 是子级, 最终选择的是元素2
- 元素2 必须是亲儿子, 其孙子, 重孙之类都不归他管, 我们可以直接叫他亲儿子选择器
选择器的练习
<style> .nav ul li a { color: red; } </style>
<style> .hot>a { color: red; } </style>
并集选择器
并集选择器可以选择多组标签, 同时给他们定义相同的样式, 通常用于集体声明.
并集选择器是各选择器通过英文逗号 , 连接而成, 任何形式的选择器都可以作为并集选择器的一部分.
需要注意的是:
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
有下面这个例子:
<div>熊大</div> <p>熊二</p> <span>光头强</span> <ul class="pig"> <li>小猪佩奇</li> <li>猪爸爸</li> <li>猪妈妈</li> </ul>
现在我有两个要求:
- 把熊大和熊二改成粉色
- 请把熊大和熊二改成粉色, 小猪佩奇一家改为粉色
第一个要求>>>
我们直接使用并集选择器, 将两个div和p标签一起选择
<style> div, p { color: pink; } </style>
第二个要求>>>
<style> div, p, ul li { color: pink; } </style>
- 最后一个选择器不需要加逗号
- 我们语法上规范习惯上将选择器竖着写(并集选择器)
伪类选择器
伪类选择器用于向某些选择器添加特殊效果, 比如给链接添加特殊效果, 或者选择第一个, 第n个元素, 伪类选择器书写最大的特点就是使用 冒号(:) 表示, 比如 :hover, : first-child
链接伪类如何使用
对于一个链接来说, 也就是一个a标签. 如下:
<a href="#">这是一个链接</a>
我们使用鼠标按下但是不弹开的时候会显示一个种红色:
但是如果我们要更改这种样式, 我们就必须使用到我们的链接伪类选择器, 设置如下:
一个案例:
a:link { color: black; text-decoration: none; } a:visited { color: gray; } a:hover { color: green } a:active { color: blueviolet; } </style> <a href="https://www.sogou.com/" target="_blank">这是一个链接</a>
注意事项
- 为了确保生效, 请按照LVHA的声明顺序; ink , visited, hover, active.
- 因为a链接在浏览器中具有默认样式, 所以我们在实际工作中, 都需要给链接单独指定样式
:focus 伪类选择器
焦点是光标, 一般情况下, 类表单元素才可以获取, 因此这个选择器也主要针对于表单元素来说.
下面是其语法格式:
例如这里有三个表单, 我点击第三个表单, 那么焦点就会到第三个表单身上()
复合选择器总结
CSS元素显示模式
了解CSS的元素显示模式, 可以让我们更好的进行页面布局
- 什么是元素显示模式
- 元素显示模式的分类
- 元素显示模式的转换
元素显示模式
作用: 网页的标签非常多, 在不同的地方会用到不同类型的标签, 了解他们的特点可以更好的布局我们的页面
元素显示模式, 总体来说, 就是元素(标签) 以上面方式进行显示, 比如div标签自己独占一行, span标签一行可以放多个
HTML元素分为两类:
- 块级元素
- 行内元素
块级元素
常见的块级元素有h1 ~ h6, p. div, ul, ol. li等, 其中div标签是典型的块级元素
块级元素的特点:
- 比较霸道, 自己独占一行
- 高度, 宽度, 外边距以及内边距可以自己控制
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子, 里面可以放行内或者块级元素
<div>比较霸道自己独占一行</div> 瑟瑟发抖
<div>比较霸道自己独占一行</div> 瑟瑟发抖 <style> div { width: 200px; height: 200px; background-color: pink; } </style>
注意:
- 文字类的元素不能使用块级元素
- p标签用于存放文字, 因此p标签里面不能放块级元素, 特别是div标签不能放
- 同理, h1 ~ h6 等都是文字类块级元素, 里面也不能放其他块级元素
行内元素
常见的行内元素, 如a, strong, em,i, del, ins, span等, 其中span是最典型的行内元素, 其他的地方也将行内元素称为内联元素.
特点, 一行可以放多个行内元素:
<i>hello world</i> <strong>hahahha</strong><i>hello world</i> <strong>hahahha</strong>
行内元素的特点:
- 相邻行内元素在一行上, 一行可以显示多个
- 高宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接a中不能再放链接
- a标签可以放块级元素, 但是给a转换一下块级模式会更安全
行内块元素
在行内元素中有几个特殊的标签>> img, input, td, 他们都具有块级元素和行内元素的特点, 有些资料称他们为行内块元素
行内块元素的特点:
- 相邻行内元素(行内块) 在一行上, 但他们之间会有空白缝隙, 一行可以显示多个(行内元素特点)
- 默认宽度就是他本身内容的宽度
- 高度, 行高, 外边距以及内边距都可以控制
元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度和高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度和高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 | |
