CSS背景
CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: 1.background-color 属性定义了元素的背景颜色。 2.background-image 属性描述了元素的背景图像. 3.background-repeat 背景图像 - 水平或垂直平铺,no repeat ,没有平铺 4.background-position 属性改变图像在背景中的位置 为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center;其次,可以使用长度值,如 100px 或 5cm;最后也可以使用百分数值。 图像放置关键字最容易理解的作用就像其名字的意义。例如,top left 使图像放置在元素内边距区的左上角。只要保证不超过两个关键字:一个对应水平方向,另一个对应垂直方向,那么你可以设置位置关键字以任何顺序出现。如果只有一个关键字,则会默认另一个关键字为 center。 百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,你可以按照下面的代码进行设置: background-position:50% 50%; 长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角。 5.background-size 属性设置图片的大小 background-size: cover; 图片等比例缩放,会铺满整个元素 background-size: contain; 图片等比例缩放,不会铺满整个元素 -webkit-background-size: 400px 200px; background-size: 400px 200px; 设置宽高
6.background-attachment: fixed; 设置背景图片固定定位,参照的是浏览器窗口,背景图片会铺满整个浏览器窗口
背景- 简写属性 body {background:#ffffff url('img_tree.png') no-repeat right top;}
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.背景颜色的简写属性为 "background" 属性值的顺序为:background-color; background-image; background-repeat; background-attachment; background-position
注意:如果元素没有设置高度(height),那么元素的高度由内容来撑开 想要实现body的高度和浏览器的窗口一样高,如下: body,html { height: 100%; }
CSS精灵图
把网站或网页所需要的小图标放在一张大图片上面,这个大图片就是精灵图 下图为百度首页的一张精灵图:
作用:避免加载图片时都需要进行网络请求,减轻了服务器的压力 方法: 1.使用一个无语义化的行内元素作为背景图片的载体 2.选中元素,然后添加背景相关的样式 a)设置元素的宽高 b)设置背景图片 c)设置背景图片不允许平铺 d)设置背景图片的位置 3.现实开发中,精灵图已经被字体图标替代了,字体图标占用字节少,类似矢量图,还可以当初文本设置图标颜色 4.字体图标库推荐:阿里巴巴矢量图标库
CSS 文本属性
1.color文本的颜色 可使用颜色名称、RGB、十六进制数来指定颜色。 2.opacity用来设置透明度,默认值为1,1为不透明,0为完全透明。 p{ opacity: 0;} 隐藏一个元素 ,完全不显示,但是会占空间,只是看不到。 3.font字体设置 属性名|说明|参数说明 ---|:--:|---: font-family|字体名称|例如:Arial,"微软雅黑","宋体" font-size|字体大小|例如:18px,2em font-style|字体风格|normal(缺省),italic, oblique font-weight|字体粗细|normal(缺省),bold或数值。 4.text-align文本对齐属性规定元素中的文本的水平对齐方式,只能设置块级元素内文本的水平对齐方式。 属性值|描述| ---|:--:| left|把文本排列到左边。默认值:由浏览器决定。| right|把文本排列到右边。| center|把文本排列到中间。| justify|实现两端对齐文本效果。| 5.text-decoration字体装饰
6.line-height行高 line-height 属性设置行间的距离(行高),属性值可以为数值也可以为百分比。line-height妙用:设置文字居上下中展示
CSS列表属性
列表属性主要针对的是ul和ol类型的列表。 1 list-style-type list-style-type 列表样式,类型属性值可以为: disc (缺省值,黑圆点);circle (空心圆点) ;square (小黑方块);none (无列表项标记,针对无序列表)