CSS(2)

CSS(2)

1. Emment语法

1.1快速生成CSS样式语法

1.比如 w200 按tab 可以生成 width:200px;
2.比如 Ih26 按tab 可以生成 line-height:26px;

2.CSS的复合选择器

2.1后代选择器：元素1 元素2 {样式声明}

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

2.2子选择器：元素1 > 元素2 {样式声明}

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

2.2并集选择器：元素1,元素2 {样式声明}

选择元素1和元素2

2.3伪类选择器

2.3.1超链接伪类选择器

​ ：link用来表示没访问过的链接

​ ：visited用来表示访问过的链接(因为隐私的原因只能修改颜色)

​ ：hover 用来表示鼠标移入的状态

​ ：active 用来表示鼠标点击

        a:link{
            color: aqua;
        }
        a:visited{
            color: red;
        }

        a:hover{
            color: black;
            font-size: 60px;
        }

        a:active{
            color: blue;
        }

超链接伪类选择器在实际开发中经常使用的方法:

        a{
            color: gray;//未移入时
        }
        a:hover{
            color: red;//移入时
        }

2.3.1focus伪类选择器

用于获得焦点的表单元素

        input:focus{
            background-color: yellow;
        }

3.CSS的元素显示模式

3.1元素的显示模式

1. 可以更好的布局我们的网页

2. 元素显示模式就是元素(标签)以什么方式进行显示，比如<div>独占一行，<span>可以一行好几个

3. HTML元素一般分为块元素和行内元素俩种类型

3.2元素显示模式的分类

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽高	它本身内容的宽度	容纳文本或其他行内元素
行内快元素	一行可以放多个行内块元素	可以设置宽高	它本身内容的宽度

3.3元素显示模式的转换

一个模式需要另一个模式的特性

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

eg：想要增加链接<a>的触发范围

a{
    width: 500px;
    height: 100px;
    display: block;
}

单行文字垂直居中的代码

让文字的行高等于盒子的高度height: 100px; line-height: 100px;

a{
    width: 500px;
    height: 100px;
    line-height: 100px;
    display: block;
}

4.CSS的背景

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

4.1背景颜色

 background-color: 颜色值;

4.2背景图片

background-image: url(url);

4.3背景平铺

注意：背景图片会压住背景颜色

1. 背景不平铺：background-repeat: no-repeat;
2. 背景沿x轴平铺：background-repeat: repeat-x;
3. 背景沿y轴平铺：background-repeat: repeat-y;

4.3背景照片位置

background-position:x y;

参数方位名词：

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

参数是精确单位：

• 如果只指定一个数值，那么这个数值一定是x坐标，另一个默认垂直居中

4.4背景颜色半透明

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

5.CSS的三大特性

5.1层叠性

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

5.2继承性

• 子标签会继承父标签的样式

5.3优先级

• 省略