对CSS认识的第二天

学习内容

1.Emmet语法

         

（1）快速生成HTML结构语法

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

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

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

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

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

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

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

        （2）快速生成CSS样式语法

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

                ② 比如lh26 按tab 可以生成 line-height：26px；

        （3）快速格式化代码

                首先选择文件-->首选项-->设置；然后搜索emmet.include；然后选择用户里的settings.json中编辑

将以下两行代码加上去

                "editor.formatOnType" : true,

                "editor.formatOnSave";: true

        快捷键 Shift+Alt+F

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

2.复合选择器

• 复合选择器可以更准确、更高效的选择目标元素(标签）
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

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

3.CSS的元素显示模式

   元素显示模式就是元素以什么方式进行显示，一般分为块元素和行内元素两种类型。

  元素显示模式转换

• 转换为块元素：display:block;

• 转换为行内元素:display:inline;

• 转换为行内块：display:inline-block;

 （1）块元素

        常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素

        特点：

                ① 比较霸道，自己独占一行

                ② 高度，宽度、外边距以及内边距都可以控制.

                ③ 宽度默认是容器（父级宽度)的100%

                ④ 是一个容器及盒子，里面可以放行内或者块级元素

        注意：

                ① 文字类的元素内不能使用块级元素

                ② <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

                ③ <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

  （2）行内元素

        常见的行内元素有<a>、<strong>、<b>、<em>、ci、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

        特点：

                ① 相邻行肉元素在一行上，一行可以显示多个

                ② 高、宽直接设置是无效的

                ③ 默认宽度就是它本身内容的宽度

                ④ 行内元素只能容纳文本或其他行内元素

        注意：

                ① 链接里面不能再放链接

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

   （3）行内块元素

          特点：

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

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

                ③ 高度，行高、外边距以及内边距都可以控制(块级元素特点)

4.CSS的背景

   背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

  

5.CSS的三大特性

 （1）层叠性

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

• 样式不冲突，不会层叠

（2）继承性

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性

• 子元素可以继承父元素的样式

（3）优先级

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

• 权重叠加

        如果是复合选择器，则会有权重叠加，需要计算权重

        div ul li------>0,0,0,3

        nav ul li ----->0,0,1,2

        ahover -----> 0,0,1,1

        .nav a ------>0,0,1,1

选择器权重如下表示：

选择器	选择器权限
继承或者*	0.0.0.,0
元素选择器	b.oo,1
类选择器，伪类选择器	0.0,1,0
ID选择器	0.1,0.,0
行内样式 style=-	1.0,0,0
!important重要的	无穷大

        注意：

                ① 权重是有4组数字组成但是不会有进位。

                ② 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推..

                ③ 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

                ④ 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000,!important无穷大.

学习成果

 制作一个简单的小侧边框栏如图

通过学习CSS背景制作一个五彩导航的案例如下

功能：鼠标放上面可以变换另一种颜色