源代码
参考

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	百分数\| 由浮点数字和单位标识符组成的长度值
position	top\| 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;
}

<body><div><p><!-- 会继承父元素的红色 -->栗子哈哈哈        </p></div>
</body>

利用继承可以降低CSS代码的复杂性.

3.3 CSS优先级(重点)

权重计算公式

选择器	权值
继承或者*	0,0,0,0
元素标签(span、div、p…)	0,0,0,1
类或伪类(.calss, a:hover)	0,0,1,0
id选择器( #id)	0,1,0,0
style=""	1,0,0,0
!important	无穷大

css --- [学习笔记]背景图片小结 css三大特性相关推荐

css怎样让背景图片居中,CSS让背景图片居中显示的方法
当我们的背景图片写成: background: url("images/titleborder.png") no-repeat; 时,表示背景图片不重复,位置会默认为在div中居于 ...
python基础学习笔记13：面向对象的三大特性
1.面向对象有哪些特性面向对象的三大特性:封装性.继承性.多态性 2.Python中的封装在Python代码中,封装有两层含义: 把现实世界中的主体中的属性和方法书写到类的里面的操作即为封装 cl ...
CSS学习笔记（四）CSS字体属性
属性描述 font 简写属性.作用是把所有针对字体的属性设置在一个声明中. font-family 设置字体系列. font-size 设置字体的尺寸. font-size-adjust 当首选字体 ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记-—学会用PS切图和取色—day03(基本用法)
CSS学习系列文章目录 HTML和CSS学习笔记--day01 HTML.CSS学习笔记--day02 css4.2.4参考手册.zip(免费下载) 文章目录 CSS学习系列文章目录一.PS测量图片 ...
怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
HTML及CSS学习笔记 13 - 背景
本文是HTML及CSS课程的第十三课.主要介绍和页面背景相关的CSS样式属性,如背景颜色.背景图片.背景图片平铺方式等等文章目录一.web中的图片 1.web中常见的图片格式 1.1.JPEG 1 ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...

css --- [学习笔记]背景图片小结 css三大特性

1. 行高(line-height)

2. CSS 背景(background)

2.1 背景颜色(color)

2.2 背景图片(image)

2.3 背景平铺(repeat)

2.4 背景位置(position)重点

2.4.1 栗子

2.4.2 小结

2.5 背景附着

2.6 背景简写

2.7 背景透明(CSS3)

3. CSS三大特性

3.1 CSS层叠性

3.2 CSS继承性

3.3 CSS优先级(重点)

css --- [学习笔记]背景图片小结 css三大特性相关推荐

最新文章

热门文章