-
【web前端】CSS第二天
CSS的第二天，这次之后大概又要过个好几天才能完成下一个知识的学习了，要准备考试了，好了，使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
目录
框架
一、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
持续更新......
-
相关阅读:
PowerDotNet平台化软件架构设计与实现系列（16）：财务平台
2022软考高项十大领域知识整理（四）-人力资源管理、干系人管理、采购管理
Kotlin或将超越Go？
开漏输出，推挽输出，开集输出
I/O接口
C++保姆级入门教程（9）—— 一维数组基础
Linux基本操作【下】
安全性归约（游戏）
str转wstr的三种方法和从网站获取json数据到数据随机提取，返回拼接字符串和动态数组
three.js场景三元素
- 原文地址：https://blog.csdn.net/qq_61768389/article/details/125417600