Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。 快速生成HTML结构语法 快速生成CSS样式语法
tab
键即可 比如div
然后tab
键,就可以生成<div></div>
*
就可以了 比如div*3
就可以快速生成3个div
>
比如ul>li
就可以了+
就可以了 比如div+p
.demo
或者#two
tab
键就可以了$
CSS 基本采取简写形式即可
比如w200
按tab
可以生成width: 200px;
比如lh26px
按tab
可以生成line-height: 26px;
Vscode快速格式化代码:shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1)文件 ------.>【首选项】---------->【设置】;
2)搜索emmet.include;
3)在settings.json下的【工作区设置】中添加以下语句:
json 代码:
"editor.formatOnType": true,
"editor.formatOnSave": true
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签) 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
定义:
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
语法说明:
例子:
html 代码:
<style>
.red ul li a {
color: red;
}
</style>
<body>
<div class="red">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
</div>
</body>
上述语法表示选择ul
中li
中里面的所有a标签
(后代元素)。
定义:
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
(简单理解就是选亲儿子元素)
语法:
上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。
语法说明:
例子:
html 代码:
<style>
.red>a {
color: red;
}
</style>
</head>
<body>
<div class="red">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
</body>
定义:
并集选择器可以选择多组标签, 同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
上述语法表示选择元素1 和 元素2。
语法说明:
例子:
定义:
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
语法:
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover
、:first-child
。
定义:
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
语法:
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
伪类选择器 | 属性 |
---|---|
a:link | 没有点击过的(访问过的)链接 |
a:visited | 点击过的(访问过的)链接 |
a:hover | 鼠标经过的那个链接 |
a:active | 鼠标正在按下还没有弹起鼠标的那个链接 |
链接伪类选择器注意事项
:link-:visited-:hover-:active
love hate 或者 lv 包包 hao
a
链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。链接伪类选择器实际工作开发中的写法:
:focus
伪类选择器定义:
:focus
伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况<input>
类表单元素才能获取
例子:
定义:
元素显示模式就是元素(标签)以什么方式进行显示,比如
自己占一行,比如一行可以放多个。
作用:
网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
常见的块元素:
html 代码:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<div>
标签是最典型的块元素。
块级元素的特点:
注意:
文字类的元素内不能放块级元素
html 代码:
<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
常见的行内元素:
html 代码:
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
html 代码:
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
注意:
链接里面不能再放链接
特殊情况链接<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全.
常见的行内块标签:
html 代码:
<img />、<input />、<td>
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。
简单理解:
一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>
的触发范围。
转换方式
解决方案:
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
简单理解:
通过 CSS 背景属性,可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
样式名称:
background-color
定义元素的背景颜色
使用方式:
其他说明:
元素背景颜色默认值是transparent
(透明)
样式名称:
background-image
定义元素的背景图片
使用方式:
其他说明:
样式名称:
background-repeat 设置元素背景图像的平铺
使用方式:
样式名称:
background-position
属性可以改变图片在背景中的位置
使用方式:
参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
其他说明:
1、参数是方位名词
2、参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
样式名称:
background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动。
使用方式:
其他说明:
background-attachment
后期可以制作视差滚动的效果。
背景合写样式:
html 代码:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
使用方式:
CSS3 提供了背景颜色半透明的效果。
使用方式:
注意:
声明:本文由 小北(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。
还没有人喜爱这篇文章呢