1 背景相关属性
(背景颜色和背景图片可以同时存在,背景图片会盖住背景颜色)
background 复合属性:颜色、图片、图片的重复方式、图片的位置、是否固定
background-color 颜色
background-image 图片 url(路径)
背景图片如果比元素本身大,则只显示元素本身大小的的背景图片,从背景图片的左上角开始加载,超区的不显示,背景图片如果比元素本身小,则会水平垂直平铺,直到铺满整个元素的区域。
background-repeat repeat默认值,no-repeat不平铺,repeat-x 水平平铺,repeat-y 垂直平铺
background-position 图片的位置,值1(水平) 值2(垂直)
可以是具体的数值,正值向右向下,负值向左向上
可以是具体的方向值:Left right center top bottom center (如果水平垂直方向都市center可以缩写成一个)
可以设置百分比值
background-attachment 图片是否固定 scroll 滚动,默认值 fixed固定
2 网页中的图片
- 1 html的img的插入图片
- 2 css的背景图片
- 区别 1 背景图片不能右击图片另存为去下载图片,插入额图片可以
- 2 背景图片可以添加文字和插入图片,插入的图片不可以
- 网页中所支持的图片格式
- jpg 普通图片 png 可以支持背景透明
- GIF 可以支持背景透明和动画
- svg 放大放小不失真
3 logo的优化
以背景图片的形式添加logo图片,在这个标签中添加对应的文字
如何隐藏文字(一般用h1标题)
- 1 设置font-size:0
- 2 line-height足够大让文字溢出,overflow:hidden
- 3 height:0 ,padding-top:图片高度 ,overflow:hidden
- 4 text-indent :负值要足够大
4 精灵图(雪碧图)
将页面中有规则的小图标放在一张图片上,利用背景图片的移动性来实现,精灵图必须是以背景图片出现在页面的
精灵图的优势
1 减小图片的体积,提高页面加载速度,提高用户体验
2 减少向服务器的请求次数,减少网络带宽占有
5 精灵图的种类
- 1 水平精灵图 宽度定死
- 2 垂直精灵图 高度定死
- 3 定点精灵图 宽度、高度都定死
注意事项:不是所有的图片都可以用作精灵图,必须是背景图片,精灵图不要过大,最好不要超过100kb
6 display 元素类型的转换属性
元素的分类 (区别)
1 块级元素可以设置宽度和高度,行内元素不可以,行内元素宽高是内容的宽高
2 块级元素独占一行自上而下排列,行内元素自左向右在一排显示,宽度不够自动换行
3 块级元素和行内元素都遵循盒子模型设置,但行内元素的某些属性不能正常显示,一般块级元素作为其他内联元素的盒子使用
常用的块级元素:div h1 h2 h3 h4 h5 h6 ul ol li dl dt dd table form
常用的行内元素:span a b strong i u em s ins del sup sub img input
注意:块级元素可嵌套块级元素,但h标签之间不能相互嵌套,h标签和p标签之间不能相互嵌套。
7 元素类型的转换
- block:块元素(如果元素添加了float属性,相当于给元素添加了display:block)
- inline:行内元素
- inline-block:行内块元素,此元素支持vertical-align属性,img input select textarea
- list-item:列表元素li
- table-cell:表格元素中的td和th
- none 隐藏
- 伪类选择器 :hover 鼠标悬停