【web前端】CSS第二天

CSS的第二天，这次之后大概又要过个好几天才能完成下一个知识的学习了，要准备考试了，好了，使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

目录

框架

一、Emmet语法

1、快速生存HTML结构语法

2、快速生成CSS样式语法

3、快速格式化代码

 二、CSS的复合选择器

1、什么是复合选择器

2、后代选择器

​3、子选择器（子元素选择器）

4、并集选择器

5、伪类选择器

6、总结

​ 二、CSS的元素显示模式

1、什么是元素显示模式

​2、块元素

 ​3、行内元素

 4、行内块元素

 5、总结

6、CSS的元素显示模式转换

 7、一个小工具的使用snipaste

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

 9、单行文字垂直居中的原理

 三、CSS的背景

1、背景颜色

2、背景图片

3、背景平铺

4、背景图片位置

5、背景图像固定（背景附着）

 6、背景复合写法

7、背景色半透明

8、总结 

 四、CSS的三大特性

1、层叠性

2、继承性

3、优先级

---

框架

一、Emmet语法

1、快速生存HTML结构语法

第五点的解释：默认为div标签

2、快速生成CSS样式语法

3、快速格式化代码

上述 不适用与新版vscode，新版vscode操作如下：

文件->首选项->设置->搜索format on save->打勾

 

 二、CSS的复合选择器

1、什么是复合选择器

2、后代选择器

 3、子选择器（子元素选择器）

4、并集选择器

 并集选择器约定的语法规范：并集选择器喜欢竖着写。

5、伪类选择器

（1）链接选择器 

 注意:冒号左右都无空格。

 （2）focus伪类选择器 

6、总结

 二、CSS的元素显示模式

1、什么是元素显示模式

 2、块元素

  3、行内元素

 4、行内块元素

 5、总结

6、CSS的元素显示模式转换

 

 7、一个小工具的使用snipaste

 snipaste官网下载地址：

Snipaste - 截图 + 贴图https://zh.snipaste.com/

此处插一个小案例：（简洁版小米侧边栏）

 

代码如下： 

    
    
    
    
    



    手机 电话卡
    电视 盒子
    笔记本 平板
    出行 穿戴
    智能 路由器
    健康 儿童
    耳机 音响

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

其实这也不算什么小技巧啦，学的时候大概就能想到可以这样用了。

 9、单行文字垂直居中的原理

 三、CSS的背景

1、背景颜色

2、背景图片

 

3、背景平铺

 默认平铺。 

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

4、背景图片位置

（1）参数是方位名词

（2）参数是精确单位

 x,y坐标的图解：

（3）参数是混合单位

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

5、背景图像固定（背景附着）

 

 6、背景复合写法

7、背景色半透明

8、总结 

 背景图片：实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

综合案例：五彩导航

 

代码如下：（有的图标功能只写了一个的，其他的同理） 

    
    
    
    
    



    

        五彩导航
        五彩导航
        五彩导航
        五彩导航
    

 四、CSS的三大特性

1、层叠性

2、继承性

（1）继承

 注意：是某些样式，不是全部。

（2）行高的继承

3、优先级

（1）权重

 其中!important的使用:(类似如下)

div {
    color: pink!important;
}

大小有点像二进制的比较，但是这里不能像二进制一样进位。

 （2）权重叠加

权重虽然会叠加，但是永远不会有进位。

其他例子如：

 

 Day4

持续更新......