学习内容
文字属性
font-weight--设置字体粗细
属性值: 100-900 整百数值,不带单位 大于500字体加粗,小于500字体变细 500默认值
bold bolder 加粗 lighter 字体变细 normal 不加粗
font-size--文字大小
属性值: 数值+px rem em vw vh 第四周移动端单位
1.一般设置偶数,不设置奇数值;
2.浏览器默认文字大小为16px;
3.浏览器支持的最小文字大小为12px;
font-family--文字字体
默认值:微软雅黑 (windows系统)
属性值是中文,需要用双引号包裹;
由多个英文单词组合的,需要双引号包裹
当有多个属性值的时候,逗号隔开多个属性值,先生效第一个,字体库里没有再生效第二个,以此类推,都没有显示默认字体
font-style--文字倾斜
属性值: italic 倾斜 normal 不倾斜 (默认值)
文本属性
text
1.文本水平方向对齐方式: text-align
属性值: left 左 (默认) center 中 right 右
2.垂直方向对齐方式: vertical-align
属性值: top上 middle 中 bottom 下 baseline 基线 (默认值) 下周二
3.行高: 每一行之间的距离 line-height
属性值: 数值+px rem em vw vh %
line-height不设置单位时,默认是em
单行文本时,行高等于容器的高度时 line-height=height,文字垂直方向对齐
line-height 可以当做高度去使用
4.文本首行缩进 text-indent
属性值: 数值+px rem em vw vh %
5.文本修饰: text-decoration 三条线
属性值: underline 下划线
line-through 删除线
overline 上划线
none 去掉线条
复合属性: 一个属性名有多个不同属性值,属性值之间用空格隔开 (减少代码量)
文字的复合属性
font: 加粗 倾斜 大小/行高 字体
大小和字体不能省略
大小/行高 字体顺序不能错
补讲:
字间距: letter-spacing: 数值+单位
单词间距: word-spacing: 数值+单位
列表属性
list-style-type: 设置列表项目符号类型
square 方块 circle 空心圆 disc 实心圆 none 去掉列表项目符号 decimal 有序列表的数字
list-style-position: 项目符号位置
outside 外侧 (默认) inside 内侧
list-style-image: 以图片作为项目符号类型
url(路径)
复合属性: list-style: 类型 位置
背景属性
背景颜色: background-color
属性值: 颜色的三种表示方式
背景图片: background-image
url(路径)
背景图片平铺: background-repeat
no-repeat: 不平铺 repeat-x: 水平方向平铺 repeat-y: 垂直方向平铺 repeat 都平铺 (默认值)
背景图片位置: background-position: 值1 值2 (值1代表水平方向;值2表示垂直方向)
属性值: a.英文单词 left right top bottom center
b.数值+px 只有一个值的时候,只代表水平方向偏移量,垂直方向默认居中
可以为负值,反方向移动
背景图片大小: background-size: 值1 值2 (值1代表背景图片的宽;值2表示背景图片高)
属性值: 1.数值+百分比
2.数值+单位
3.cover: 等比例放大图片,直到铺满 (图片会出现裁剪效果)
contain: 等比例放大图片,当填满某个方向时结束 (会出现留白)
背景图的固定: background-attachment
fixed: 固定永远固定在可视窗口的某个位置 scroll: 滚动
背景复合属性: background: red url(img/imgo1.jpg) no-repeat left bottom;
顺序不做要求,属性值个数不做要求
边框属性
边框: border
1.边框线型: border-style
属性值: solid 实线 dashed 虚线 dotted 点线 double 双实线 none 去掉边框
2.边框粗细: border-width
属性值: 数值+px 默认3px
3.边框颜色: border-color
属性值: 三种写法 默认文字颜色 transparent
复合属性: border: 线型 颜色 粗细 (线型不能省略!) 顺序不做要求
4.单独设置某一方向上的边框
border-方位词 (top bottom left right)
5.单独设置某一方向上的边框样式
border-方位词-样式