CSS第二天导读

CSS第二天导读

1、Emmet语法

1.1快速生成HTML结构语法

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

2. 若想要生成多个相同标签，加上*就可以，比如div*3就可以快速生成3个div

3. 若有父子级关系的标签，可以用>,比如 ul>li就可以

4. 若有兄弟关系的标签，用+即可，如div+p

5. 若生成带有类名或者id名字的，直接写.demo或#two按tab键即可

6. 若生成的div类名有顺序，可以用自增符号$

7. 若想要在生成的标签内部写内容，可以用{ }表示

1.2快速生成CSS样式语法

css基本采取简写形式即可

1. 如w200 按tab或者回车 即可生成 width：200px；

2. 如lh26 按tab或者回车 即可生成 line-height：26px；

1.3快速格式化代码

快捷键：shift+alt+f

1. 文件-->首选项-->设置

2. 搜索format on save打勾即可

2、CSS的复合选择器

2.1什么是复合选择器

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

2. 复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

2.2后代选择器

后代选择器又称为包含选择器

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素）

例如：

ul li { 样式声明 }

• 元素1和2中间用空格隔开

• 1是父级，2是子级，最终选择的是元素2

• 元素2可以是儿子，可以是孙子，只要是元素1的后代即可

• 1和2可以是任意基础选择器

2.3子选择器

子元素选择器(子选择器）只能选择作为某元素最近的一级子元素

元素1>元素2 { 样式声明 }

上述语法表示选择元素1里面的直接后代（子元素）元素2

例如：

div>p { 样式声明 }

• 元素1和2中间用大于号隔开

• 1是父级，2是子级，最终选择的是元素2

• 元素2可必须是亲儿子，其孙子、重孙子都不归它管，又名亲儿子选择器

2.4并集选择器

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

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

元素1,元素2 { 样式声明 }

上述语法表示选择元素1和元素2

例如：

ul,div { 样式声明 }

• 元素1和2中间用逗号隔开

• 逗号可以理解为和的意思

• 并集选择器通常用于集体声明

2.5伪类选择器

1. 伪类选择器用于向某些选择器添加特殊的效果，如给链接添加特殊效果，或选择第一个，第n个元素

2. 最大的特点是用冒号表示，如：hover、：first-child

3. 包括：链接伪类、结构伪类等

2.6链接伪类选择器

a:link    选择所有未被访问的链接
a:visited    选择所有已被访问的链接
a:hover    选择鼠标指针位于其上的链接
a:active    选择活动链接（鼠标按下未弹起的链接）

链接伪类选择器注意事项：

1. 为了确保生效，按照LVHA的顺序进行声明：link、visited、hover、active

2. 记忆法：love hate或者 lv包包hao

3. a链接在浏览器中具由默认样式，所以实际上需要给a链接单独指定样式

链接伪类选择器实际工作中的写法：

a {
    color: gray;
}
a:hover {
    color: red;
}

2.7focus伪类选择器

focus伪类选择器用于获得焦点的表单元素

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

input:focus {
    background-color: yellow;
}

3、CSS的元素显示模式

3.1什么是元素显示模式

1. 元素显示模式就是元素以什么方式进行显示

2. HTML元素一般分为块元素和行内元素两种类型

3.2块元素

常见的块元素有<h1>~<h6>,<div>,<ul>,<ol>,<li>,<div>等

块级元素的特点：

1. 自己独占一行

2. 高度、宽度、外边距和内边距都可以控制

3. 宽度默认是容器的100%

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

注意

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

3.3行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等

<span>标签是最典型的行内元素，又称为内联元素

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个

2. 高度、宽度直接设置是无效的

3. 默认宽度是它本身内容的宽度

4. 行内元素只能容纳文本或者其他行内元素

注意

• 链接里面不能再放链接

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

3.4行内块元素

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

又称为行内块元素

行内块元素的特点：

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

2. 默认宽度是它本身内容的宽度

3. 高度，行高，外边距以及内边距都可以控制

3.5元素显示模式转换

• 转换为块元素：display：block；

• 转换为行内元素：display：inline；

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

3.6一个截图工具的使用：snipaste

1. F1截图

2. F3桌面显示

3. 点击图片，alt取色，（按下shift切换取色模式）

4. 按下esc取消图片显示

3.7一个小技巧：单行文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

4、CSS的背景

4.1背景颜色

background-color: 颜色值；

一般情况下元素背景颜色默认值是transparent（透明）

4.2背景图片

background-image: none | url (url)

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对路径指定背景图像

4.3背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	背景图像不平铺
repeat-x	在横向上平铺
repeat-y	在纵向上平铺

4.4背景图片位置

background-position: x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位

参数值	作用
length	百分数|由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

1、参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致

• 若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

• 若参数是精确单位，那么第一个就是x坐标，第二个一定是y坐标

• 若只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

3、参数是混合单位

• 若指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

4.5背景图像固定（背景附着）

background-attachment: scroll | fixed 

参数值	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

4.6背景复合写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) repeat-x fixed top ;

4.7背景色半透明

background: rgba(0,0,0,0.3)；

• 最后一个参数是alpha透明度，取值范围在0~1之间

• 习惯把0.3的0省略掉，写为background： rgba（0，0，0，0.3）；

• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不影响

5、CSS的三大特性

3.1层叠性

层叠性原则：

• 样式冲突：就近原则，哪个离结构近，就执行哪个样式

• 样式不冲突，不会层叠

3.2继承性

css中的继承：子承父业

• 使用继承可以简化代码

• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color）

行高的继承性：

body {
    font: 12px/1.5 Microsoft YaHei ;
}

• 行高可以跟单位也可以不跟单位

• 若子元素没有设置行高，则会继承父元素的行高为1.5

• 此时子元素的行高是：当前元素的文字大小*1.5

• body行高1.5 优势是子元素可以根据自己文字的大小自动调整行高

3.3优先级

当一个元素指定多个选择器，就会有优先级的产生

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

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

选择器权重如下：

选择器	权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
！important 重要的	无穷大

优先级注意点：

1. 权重是由4组数字组成，但是不会有进位

2. 等级判断从左到右，若某一位数值相同，则判断下一位数值

3. 继承的权重为0，若该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：若是复合选择器，则会有权重叠加，需要计算权重。

• div ul li --------> 0.0.0.3

• .nav ul li --------> 0.0.1.2

• a:hover --------> 0.0.1.1

• .nav a --------> 0.0.1.1

结束语：希望大家在学习这条路上越走越远，见山见海见自己，加油！