广州传业建设有限公司网站,网站开发成本核算及账务处理,html网站搭建,上海网页设计高端定制源代码 参考 1. 行高(line-height)
目标
理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用 使用行高实现单行文字垂直居中能会测量行高
2. CSS 背景(background)
目标 理解 - 背景的作用css 背景图片和插入图片的区别 应用 通过 css 背景…源代码 参考 1. 行高(line-height)
目标
理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用 使用行高实现单行文字垂直居中能会测量行高
2. CSS 背景(background)
目标 理解 - 背景的作用css 背景图片和插入图片的区别 应用 通过 css 背景属性,给页面元素添加背景样式 能设置不同的背景图片位置
2.1 背景颜色(color)
语法:
background-color: 颜色值; 默认的值是 transparent 透明的2.2 背景图片(image)
语法:
background-image: none | url (url);参数作用none无背景图(默认的)url使用绝对或相对地址指定背景图像
background-image: url(images/demo.png);小技巧: 我们提倡背景图片后面的地址,url 不要加引号
2.3 背景平铺(repeat)
默认平铺
background-repeat: reapet; // 默认值不平铺
background-repeat no-repeat;水平平铺
background-repeat: repeat-x;竖直平铺
background-repeat: repeat-y;2.4 背景位置(position)重点
语法
background-position: length | length
background-position: position || position参数值length百分数| 由浮点数字和单位标识符组成的长度值positiontop| center | bottom | left | center | right
2.4.1 栗子
让图片靠右上角
.bg {width: 800px;height: 600px;background-color: pink;background-image: url(../lib/pics/1.jpg);background-repeat: no-repeat;background-position: right top;
}让图片水平居中 垂直方向距离上侧 10px
background-position: center 10px;超大背景图片的位置一般是水平居中,垂直靠上
background-position: center top;小图片左侧对齐盒子
background-position: 5px center;2.4.2 小结
background-position: 第一个参数是 x 方向,第二个参数是 y 方向可以使用精准词(px、%)和描述词(center、right、left)
2.5 背景附着
关键代码
background-attachment: sroll(默认) || fixed说明: 设置为fixed之后,背景图片将不会随着页面的滚动而滚动.
2.6 背景简写
background: 属性的值的书写顺序推荐写成如下:
background: transparent url(image.jpg) repeat-y scroll center top;2.7 背景透明(CSS3)
通常是一个遮挡块,用来遮挡另一块当鼠标移动到上面的时候,会增加其透明度.提高用户体验
.alhpa{width: 300px;height: 300px;background: rgba(0, 0, 0, 0.3)
}一般默认透明度
3. CSS三大特性
目标:
理解 能说出css样式冲突采取的原则能说出哪些常见的样式会有继承 应用 能写出CSS优先级的算法能会计算常见选择器的叠加值
3.1 CSS层叠性
概念: 所谓层叠性是指: 多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置在同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 原则: 重复的就近继承不重复的就层叠
3.2 CSS继承性
子标签会继承父标签的
div {color: red;
}bodydivp!-- 会继承父元素的红色 --栗子哈哈哈 /p/div
/body利用继承可以降低CSS代码的复杂性.
3.3 CSS优先级(重点)
权重计算公式
选择器权值继承或者*0,0,0,0元素标签(span、div、p…)0,0,0,1类或伪类(.calss, a:hover)0,0,1,0id选择器( #id)0,1,0,0style1,0,0,0!important无穷大
