【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/
此处插一个小案例:(简洁版小米侧边栏)
代码如下:
<!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网页代 ...
最新文章
- python界面设计实例-Python GUI项目实战:主窗体的界面设计与实现
- thinkphp 视图模型 两个字段映射同一个表
- MyEclipse6.5安装SVN插件的方法--在线安装
- 十分钟计算机说课稿,足球十分钟说课稿范文(精选3篇)
- vue.js php,vue.js去哪下载
- 2019年税收分类编码_通过分析112,654个编码测试,我们了解了2019年开发人员的招聘趋势...
- navicate连接远程数据库
- ES6的Promise -- 逻辑执行的顺序
- 特征值,特征向量,特征多项式
- Java学习笔记之设计模式(2)工厂模式
- 无线通信学习笔记(三)
- latex 显示黑色的点命令 black dot.
- winpe加载raid_为WinPE添加RAID卡驱动的几种步骤
- 滴水课后作业(6-10)
- windows安装IIS服务
- SAP HR 常用函数*持续更新中...
- java对字符串编码转换_处理字符串编码转换java类详解
- 开发者十条途径【转】
- 超级好的截图工具HprSnap
- 转载:P值(P-value),“差异具有显著性”和“具有显著差异”
热门文章
- python turtle隐藏画笔_Turtle库学习--画笔控制 绘图状态
- 用python解析抖音视频
- python读取文件错误解决办法
- 如何给视频去水印?视频里面的水印怎么去掉?
- 跨时钟域(CDC)设计方法之多bit信号篇(一)
- 关于shiro的IllegalArgumentException以及Access denied for user 'root'@'localhost'异常的一点发现
- SDK项目开发基本流程——TBD Workflow(二)
- IDEA设置自动导入包方法
- 前端如何提交文件,不使用form表单提交方式提交文件,JS提交文件
- Chrome 灭霸打响指彩蛋动画 Android实现