学习目标
- 掌握常见样式的写法
一、列表样式
• 修改列表样式
/*去掉默认的符号。这个常用*/
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 使元素及其后代元素的底部与整行的底部对齐