CSS-常见样式

学习目标

掌握常见样式的写法

一、列表样式

• 修改列表样式

/*去掉默认的符号。这个常用*/ ul, ol { list-style: none; } /*列表方形符号*/ ul { list-style: square; } /*符号在盒模型内*/ ul { list-style: inside; /*outside*/ 以前面那个点开始计算，也就是序号 } /*可以用图形符号*/ ul { list-style: url(https://i.loli.net/2019/11/08/4vriKTQR6sXnFBW.png) }

二、背景样式

2.1、background

默认情况下，背景区域覆盖内容+内边距+边框

2.2、background-color

用于设置背景色background-color: rgba(0, 0, 0, 0.3);

2.3、background-image

设置一张或者多张背景图片 .content { background-image: url(../images/bg.png); } .header { background-image: linear-gradient(#ddd, #fff); /* 渐变背景 */ }

2.4、background-repeat

控制背景图片的重复方式

background-repeat: no-repeat; 不重复background-repeat: repeat; 水平和垂直都重复background-repeat: repeat-x; 水平重复background-repeat: repeat-y; 垂直重复

2.5、background-position

设置背景图的位置background-position: center; / top、left、right、bottom、bottom 50px right 100px/**CSS Sprites（精灵图、雪碧图）是指将多张图片（一般是小图标）合成一张大图，不同元素共 用这张大图作为背景图，并给这些的元素设置相应的 background-position 值，在达到预期显示效 果的同时，减少 HTTP 请求数的一种前端优化手法。这是早期实现图标的方式，现在已被icon font 和 svg font取代精灵图在线生成网站 https://csssprites.com

2.6、background-属性合并简写

• 属性合并简写 • 多重背景

.box{ background: #ccc url(images/bg.png) center no-repeat; } .box{ background: #ccc url(images/bg.png) center no-repeat, #ccc url(images/bg2.png) 20px 20px no-repeat; }

2.7、background-size

用于设定背景图片的大小。IE9 以下不支持background-size: cover; 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。background-size: contain; 缩放背景图片以完全装入背景区，可能背景区部分空白。background-size: 100px 80px; 设置背景到固定尺寸，图片可能会失真

2.8、 CSS3 background-clip

属性用于设置元素背景区域覆盖的范围。border-box 覆盖至边框的最外围padding-box 覆盖至内边距的最外围content-box 仅覆盖元素内容区域参考： https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

小练习 • 使用background实现如下效果 ü http://js.jirengu.com/rifur

• 推荐资源

图床 https://sm.ms图片Sprites https://csssprites.com图片压缩 https://tinypng.com/

三、边框样式

3.1、border

• 用法

border: 1px solid red; • solid 实线 • dotted 点线 • dashed 虚线 .list { border: 1px solid #ddd; } .list > .item { border-bottom: 1px solid #ddd; /* 下边框 */ }

3.2、border-radius

设置圆角 .box{ border-radius: 4px; border-radius: 4px 8px 16px 32px; /*左上 右上 右下 左下*/ } 实现圆形 • 宽高相等，border-radius为宽高的一半以上 .box{ width: 100px; height: 100px; border-radius: 50%; border-radius: 50px; }

• border应用

实现三角形 .box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; } 实现半圆 .box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; border-right-color: red; }

• border应用

实现三角形 .box { width: 0; height: 0; border: 50px solid transparent; border-top-color: red; } 实现椭圆 .box { width: 100px; height: 200px; background: red; border-radius: 50%; } 实现扇形 .box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; } 实现半圆 .box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; border-right-color: red; }

四、表格样式

4.1、table

• border-collapse

用于设置表格边框是分开还是合并。 • collapse 合并 • separate 分开 table { border-collapse: collapse; }

行高 line-height • 设置行盒的高度

也就是一行文字占据的垂直空间

• line-height: 1.5; 当前元素font-size的1.5倍。该倍数会继承给孩子。 推荐的用法。 • line-height: 20px; 占据高度固定值 • line-height: 150%; 当前元素font-size的1.5倍。会计算具体值，把具体值继承给孩子。

body { font: 14px/1.4 Arial; }

注意：文字占据的高度不是由font-size决定的，而是由line-height决定的

五、对齐（了解）

vertical-align • 用处

设置inline、inline-block、table-cell元素垂直对齐方式父元素的基线由父元素最后一个行盒的基线决定，如果父亲为空那基线 就是下margin • baseline 使元素的基线与父元素的基线对齐 • middle 使元素的中部与父元素的基线加上父元素x高度的一半对 齐。 • top 使元素及其后代元素的顶部与整行的顶部对齐。 • bottom 使元素及其后代元素的底部与整行的底部对齐