1.Emmet语法之快速生成HTML标签
注意使用时不允许有空格
tab
补全键的利用:例如 div 然后tab 就会生成- 如果想要生成多个标签用
*
,例如div*3 就会生成 3个div标签 - 如果是父子级的标签,可以用
>
比如 ul>li - 如果是兄弟关系的标签就可以用
+
比如 ul>li+li 又比如div+p - 如果想生成带类名或id名的标签,直接写.demo 或则#two tab补全即可
- 如果想生成标签的类名有顺序用自增符号
$
- 如果想要在生成的标签内部写内容用
{
2.Emmet语法之快速生成css样式
这里简单举几个例子
1.ti2em 然后tab 就会生成text-indent:2em;
2.tdn 然后tab 就会生成 text-decoration: none;
3.h200 然后tab就会生成200像素的高度 height:200px;
4.w100 width: 100px;
3.Emmet语法之快速格式化成标准代码
vscode快捷键shift+alt+f,或则右键自己选择
也可以设置 当我们 保存页面的时候自动格式化代码:
1)文件 ------.>【首选项】---------->【设置】;
2)搜索emmet.include;
3)在settings.json下的【工作区设置】中添加以下语句:
“editor.formatOnType”: true,
“editor.formatOnSave”: true
4.css复合选择器
4.1后代选择器(较多)
选择父元素里面的子元素,该子元素包括儿子孙子…
简单来说就是是自己的孩子就行
语法:
元素1 元素2 {样式声明}
- 元素1和元素2中间用
空格隔开
- 元素1是父级,元素2是子级,最终选择的是
元素2
- 选择的元素2可以是儿子也可以是孙子,只要是元素1的后代即可
素1和元素2可以是任意基础选择器
4.2子选择器(较少)
选择父元素里面的子元素,只能选择自己的儿子!!!
语法
元素1>元素2 {样式声明}
- 用
>
隔开 - 只能是自己的儿子
元素1和元素2可以是任意的基础选择器
4.3并集选择器(较多)
选择多个选择器,为它们定义相同的样式
元素1,
元素2{样式声明}
- 各选择器通过
,
连接起来,一定要注意最后一个选择器不需要加逗号 - 约定的语法规范,并集选择器都喜欢竖着写
任何形式的选择器都可以作为并集选择器的一部分
。
4.4伪类选择器
向某些选择器添加特殊效果,比如给链接添加特殊效果,或选择第n个元素
其最大的特点就是用冒号(:)表示
比如:hover :first-child
4.4.1伪类选择器之链接伪类选择器
(较多)
写法 | 说明 |
---|---|
a:link | 选择所有未被点击过的链接 |
a:visited | 选择所有已被点击过的链接 |
a: hover | 选择鼠标经过的链接 |
a:active | 选择鼠标点击但未松开鼠标的链接 |
注意事项
- 为了确保生效,请按照LVHA顺序来声明,记忆法:lv包包hao
- 实际开发中常用的写法就两个,一个是正常,一个是经过
4.4.1伪类选择器之focus伪类选择器
(较少)
将获取光标的表单元素选择出来,注意要获得光标才可以,一般情况下input类的表单元素才能获取,主要针对表单元素来说
4.css的元素显示模式
4.1什么是元素的显示模式?
就是元素(标签)在网页中以什么样的方式来显示
一般分为块元素
和行内元素
4.2块元素
最大的特点就是独占一行,比如<h1>~<h6>、<p>、<div>
<ul>、<ol>、<li>其中<div>就是最典型的例子
- 特点:
①独占一行
②默认宽度为100%,窗口有多大宽度就有多大,100%铺满
③可以设置高度、宽度
④是一个盒子,可以放行内或则块元素,也就是任何标签都可以
注意
- 文字类的元素内不能使用块元素
例如:
p标签主要用于存放文字,因此 p 里面不能放块级元素,特别是不能放div
同理,h1~h6也是文字类的块标签,里面也不能放其他块级元素
4.3行内元素
最大的特点就是,一行内可以放多个,比如,a,strong,b,em,i,del,s,ins,u,span等,最典型的就是span
,
特点:
①一行可以放多个
②默认宽度就是文本内容有多少就占多宽
③不可以设置高度和宽度
④行内元素只能容纳文本或行内元素
注意:
链接里面不能再放链接
4.4行内块元素
在行内元素中有几个特殊的标签 ——<img />、<input />、<td>,
它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素
特点:
①:一行内可以放多个(行内特点)
②可以设置高宽(块元素特点)
③默认宽度是本身内容的大小
5.CSS显示模式的转换
一张图带你了解为甚么要显示模式转换,什么是显示模式转换
转换为块元素:display:block;
转换为行内元素:display:inline;(少用)
转换为行内块元素:display:inline-block;
5.1 案例:简洁版小米侧边栏 (上图)
思路:1.把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度
2. 鼠标经过a 给 链接设置背景颜色
5.2一个小技巧,让单行文字垂直居中显示
解决的方案:让文字的行高等于盒子的高度
行高<盒子高度就会偏上
行高>盒子高度就会偏下
5.css背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定
等
5.1背景颜色
background-color: 颜色;
/*background-color: transparent;*/默认值transparent,透明
5.2背景图片
background-image:none|url(url);
/*属性住可以是none或则是图片的url*/
例如:
background-image:url(image/a.jpg);
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号
5.3背景平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y
默认是平铺repeat,no-repeat是不平铺,repeat-x 沿x轴平铺,repeat-y 沿y轴平铺
5.4背景的位置
background-position: x y;
/*水平方向怎么样,垂直方向怎么样*/
- x和y可以是
方位名词
,也可以是精确的单位
- 方位名词:top | center | bottom | left | center | right 上中下左中右
- 参数是方位名词
- 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
- 参数是精确单位
- 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
- 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
- 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
常用的地方是哪里呢看图
background-position: center 50px;
/*让图片水平方向居中,垂直方向留50px*/
教你学会下载网页喜欢的图
案例1中*
案例2中:如果你要在body插入img标签的话,那么图片的显示就会如下图,靠左显示,如果你想图片居中显示,就要插入背景图片的方式
5.6背景图像的固定(背景附着)
background-attachment ,用于设置背景图片是否随着滚动条(或则内容)的滑动而动
background-attach: scroll | fixed
/*scroll 是背景图像随页面内容滚动 fixed 是背景图像固定*/
5.7背景复合写法
没有顺序,但一般约定:
background: 背景颜色 背景图片地址 背景是平铺 背景是固定 背景图片的位置
background: pink url(imag/a.jpg) no-repeat center top;
5.8背景颜色的透明
举个实际中应用的例子
baground:rgba(0,0,0,0.5);
/*前面的0,0,0代表背景色是黑色,最后一个参数0.5表示透明度是半透明*/
- 最后一个参数是透明度,取值范围是0~1,透明度为0背景颜色为0代表完全透明,为1背景颜色满色代表不透明