web前端（三）-CSS

目录

Emmet语法

1、快速生成HTML结构语法。

2、快速生成CSS样式语法。（采取简写的形式）

3、快速格式化代码

css复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

CSS元素的显示模式

块元素

行内元素

行内块元素

元素显示模式总结

元素显示模式转换

---

Emmet语法

它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。

1、快速生成HTML结构语法。

生成标签，直接输入标签名称按tab键即可。比如div然后tab键，就可以生成<div></div>

如果要生成多个相同的标签，加上*就可以了，比如div*3即可快速生成3个div

如果有父子级关系的标签，可以用>比如ul>li就可以了

如果有兄弟级关系的标签，可以用+比如div+p就可以了

如果生成带有类名或者id名字的，直接写.demo或者#demo tab键就可以了

如果生成的div类名是有顺序的，可以用自增符号$

如果想要在生成的标签写内容，可以用{}表示

2、快速生成CSS样式语法。（采取简写的形式）

比如w200按tab键可以生成width：200px；

比如ln26按tab键可以生成line-height：26px；

3、快速格式化代码

右键格式化文档，shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码：

（1）文件-首选项-设置

（2）搜索emmet.include；

（3）在setting.json下的（用户）中添加以下语句：

        "editor.formatOnType": true,

        "editor.formatOnSave": true

只需要设置一次即可，以后都可以自动保存格式化代码。

css复合选择器

复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成。

复合选择器可以更准确、更高效的选择目标元素（标签）

复合选择器由两个或者多个基础选择器，通过不同的方式组合而成的。

常用的复合选择器：后代选择器，子选择器，并集选择器，伪类选择器。

后代选择器

称为包含选择器，元素1和元素2之间需要用空格隔开。元素1和元素2可以是任何基础选择器。

元素1 元素2 {样式声明}
ul li {样式声明}/*选择ul里面所有的li标签元素*/

子选择器

只能选择作为某元素最近一级子元素，简单理解就是亲儿子元素。

元素1> 元素2 {样式声明}
div >p {样式声明}/*选择div里面所有最近一级p标签元素*/

并集选择器

可以选择多组标签，同时为他们定义相同的标签，通常用于集体声明。

并集选择器是各选择器通过英文逗号（,）连接而成的，任何选择器都可作为并集选择器的一部分。

元素1, 元素2 {样式声明}
ul,div{样式声明}/*选择ul和div标签元素*/

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊小效果，或选择第一个，第n个元素。

用冒号（:）表示。

链接伪类选择器

            a:link /* 选择所有未被访问的链接 */

            a:visited  /* 选择所有已被访问的链接 */

            a:hover  /* 选择鼠标指针位于其上的链接 */

            a:active  /* 选择活动链接（鼠标按下未弹起的链接） */

注意事项：按LVHA顺序声明

foucus伪类选择器

用于获取焦点的表单元素

焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

  input:focus{
            background-color: #fff;
        }

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近的一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接有关	较多	重点记住a{}和a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

CSS元素的显示模式

什么是元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行

html元素一般分为块元素和行内元素两种类型。

块元素

<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等都属于块元素

特点：

• 比较霸道，字体独占一行
• 高度、宽度、外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素

文字类的元素不能使用块级元素。<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放div，同理，<h1>-<h6>等都是文字块级标签，不能放其他块级元素。

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<span>标签是最典型的行内元素。

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

链接里面不能再放链接，特殊情况下，链接<a>可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素

<img/><input/><td>同时具备块元素和行内元素的特点

特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个

默认宽度就是它本身内容的宽度（行内元素特点）

高度、行高、外边距以及内边距都是可以控制（块级元素特点）

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器及可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其它行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解，一个模式的元素需要另外一个模式的特性。

比如想要给<a>增加触发范围。把行内元素转换成块元素：display：block；把块级元素转换为行内元素：display：inline；转换为行内块：display：inline-block；

一个小工具的使用，snipaste（Snipaste - 截图 + 贴图）

常用快捷方式：

• f1可以截图，同时测量大小，设置箭头，书写文字等
• f3在桌面置顶显示
• 点击图片，alt可以取色，按下shift可以切换取色模式
• 按下esc取消图片显示