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/

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

代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简洁版小米侧边栏</title><style>a {background-color: dimgray;text-decoration: none;text-indent: 2em;color: white;display: block;height: 50px;width: 200px;line-height: 50px;}a:hover {background-color: #ff6f00;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

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

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

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

三、CSS的背景

1、背景颜色

2、背景图片

3、背景平铺

默认平铺。

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

4、背景图片位置

（1）参数是方位名词

（2）参数是精确单位

x,y坐标的图解：

（3）参数是混合单位

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

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

6、背景复合写法

7、背景色半透明

8、总结

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

综合案例：五彩导航

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

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五彩导航</title><style>a {color: white;width: 130px;height: 60px;display: inline-block;background-color: aquamarine;text-align: center;line-height: 45px;text-decoration: none;}/* a:hover {color: darkgray;} */.one {background: url(images/bg1.png) no-repeat;}.nav .one:hover {background-image: url(images/bg5.png);}.two {background: url(images/bg3.jpg) no-repeat;}.three {background: url(images/bg22.png) no-repeat;}.four {background: url(images/bg5.png) no-repeat;}</style>
</head><body><div class="nav"><a href="#" class="one">五彩导航</a><a href="#" class="two">五彩导航</a><a href="#" class="three">五彩导航</a><a href="#" class="four">五彩导航</a></div>
</body></html>

四、CSS的三大特性

1、层叠性

2、继承性

（1）继承

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

（2）行高的继承

3、优先级

（1）权重

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

div {color: pink!important;
}

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

（2）权重叠加

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

其他例子如：

Day4

持续更新......

【web前端】CSS第二天相关推荐

WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
给你一份详细的web前端CSS布局指南，请查收
我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...
Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...
web前端学习第二周（21~45）
一.列表嵌套案例 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
web开发项目，web前端CSS全局样式，面试必问
前言表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据.但是在实际制作过程中,表格更多用在网页布局的定位上.很多网页都是以表格布局的.这是因为表格在文本和图像的位置控制方 ...
web前端---css基础
一.CSS技术 1.什么是CSS CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力. 主要是使用CSS属性来实现,最终可以将css代码和HTML网页代 ...

【web前端】CSS第二天

框架

一、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、优先级

【web前端】CSS第二天相关推荐

最新文章

热门文章

【web前端】CSS第二天

框架

一、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、优先级

【web前端】CSS第二天相关推荐

最新文章

热门文章

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