cssday2

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%铺满
  
  ③可以设置高度、宽度
  
  ④是一个盒子，可以放行内或则块元素，也就是任何标签都可以
  注意

1. 文字类的元素内不能使用块元素
   例如：
   
   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 上中下左中右

1. 参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

• 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
• 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
  

3. 参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 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背景颜色满色代表不透明

综合案例