-
字体属性(font---复合属性:由多个属性组成的集合)
- font-size: 字体大小
- 值:
- 英文单词:small,large
- 百分数
- 数字+单位(px): 推荐使用
- 注意:
- 网页中默认字体大小是16px
- 网页中默认最小字体大小是12px
- 字体大小16px: 文字宽和高都是16px(自己理解的)
- 设置字体一般使用偶数(推荐,浏览器方便解析)
- 值:
- font-weight: 字体粗细
- 值:
- 英文单词: bold,bolder(加粗)
- 数字: 100-900
- 注意:
- 在网页中只能看到两种状态:加粗(600-900)正常(100-500)
- bold == 700,bolder == 900
- 通常在设置加粗中
- font-weight:bold;
- font-weight:700;
- 值:
- font-style: 字体样式
- 值:
- normal : 正常的字体
- italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
- oblique : 倾斜的字体
- 注意:
- 适用于英文单词
- 值:
- font-family: 字体名称
- 注意:
- 通常链接的都是本机中的字体
- 默认字体是微软雅黑
- font-family:”微软雅黑”,”黑体”,”宋体”; 首先查看是否有微软雅黑有就使用,没有就查找黑体……如果都没有就使用浏览器默认字体
- 使用的字体是中文要加上引号
- 注意:
- color: 字体颜色
- 值:
- 英文单词: red,blue,yellow
- 16进制值: 以#开头
- RGB值或RGBA值: a-alpha—透明度(0---1)
- 值:
- line-height: 设置行与行之间的间距
- 值:
- 数字: 代表当前字体大小的倍数
- 百分数: 当前字体大小的百分之几
- 数字+单位(px)
- 注意:
- 上一行文本的中线到下一行文本的中线的距离
- 项目中通常字体的行高设置为1.5倍
- 值:
- 字体复合属性设置方式
- 语法:font:font-style font-weight font-size/line-height font-family;
- 注意:
- 设置字体复合属性是具有先后顺序
- 每个属性值之间用空格隔开
- 其他的可以不用设置,但font-size和font-family必须设置
- 项目中很少使用复合属性,使用单个属性
-
文本属性(text)
- letter-spacing: 文字间距
- word-spacing: 词间距(英文单词之间的间距)
- text-align: 文本水平对齐
- 值:
- left: 左对齐(默认)
- center: 居中对齐
- right: 右对齐
- justify: 两端对齐(英文段落)
- 注意:
- 不能直接在行内元素上面设置对齐方式,只能在它最近的父级元素设置
- 值:
- vertical-align: 垂直对齐
- 值:
- top: 顶端对齐
- middle: 中部对齐
- bottom:底端对齐
- 注意:
- 单行文本垂直居中:line-height=height
- 值:
- text-indent: 首行缩进
- 值:
- 数字+单位(px,em,rem…)
- 百分数
- 单位:
- px: 像素(网页中最小的单位)
- em: 相对值(相当于当前框内的字体大小)
- 百分数:相对值(相对于父级元素width的百分之几)
- 值:
- white-space: 是否换行
- 值:
- normal: 默认处理方式(无论有多少空格只保留一个空格,不保留换行符)
- pre: 保留空格和换行符
- nowrap:只保留一个空格,不保留换行符,除非遇到br (强制性放在一行)
- 值:
- text-overflow: 文本溢出标识
- 值:
- clip: 不显示省略标记(…),而是简单的裁切
- ellipsis: 当对象文本溢出时显示省略标记(…)
- 注意:
- 单独使用看不到效果,结合其他属性一起用
- text-overflow:ellipsis;white-space:nowrap;overflow:hidden(溢出隐藏)
- 项目中溢出产生省略号不是使用css实现,可以用js或者后台语言实现
- 单独使用看不到效果,结合其他属性一起用
- 值:
- text-transform: 改变英文大小写
- 值:
- none: 默认值
- capitalize: 单词首字符大写
- uppercase: 设置大写
- lowercase: 设置小写
- 值:
- text-decoration: 文本描述
- 值:
- none: 默认值(什么线都没有)
- underline: 下划线
- line-through:贯穿线(删除线)
- overline: 上划线
- 值:
-
文本效果
- text-shadow: 文本阴影
- 值:
- <length>①: 阴影水平偏移值。可以为负值
- <length>②: 阴影垂直偏移值。可以为负值
- <length>③: 阴影模糊值。不允许负值
- <color>: 设置对象的阴影的颜色。
- 值:
- word-wrap: 文本换行
- 值:
- normal: 允许内容顶开或溢出指定的容器边界
- break-word: 在边界内换行,单词内部断开
- 值:
-
背景(background)
- background: 背景属性(复合属性)
- background:color image repeat position/size
- background-color: 背景颜色
- 英文单词: red,blue,yellow
- 16进制值: 以#开头
- RGB值或RGBA值: a-alpha—透明度(取值:0-1)
- background-image: 背景图片
- background-image:url(“”);
- background-repeat: 是否平铺
- repeat: x轴y轴都平铺(默认值)
- repeat-x: x轴平铺
- repeat-y: y轴平铺
- no-repeat: 不平铺
- background-position: 背景定位
- background-position:x轴(px,百分数) y轴(px,百分数);
- 可以用方位:top,center,left,right,bottom
注意:如果只设置一个值代表x轴上的值,y轴默认居中;如果只设置一个方位则另一个方位居中。
- background-size 背景尺寸
- width: 宽
- height: 高
- cover: 按照最远边等比例放大
- contain: 按照最近边等比例放大
- 如果只设置一个值则代表宽度,高度等比例缩放
- background-attachment: 设置背景图片固定或随着页面滚动
- scroll: 默认。背景图像会随着页面其余部分的滚动而移动。 (绑定到body上)
- fixed: 当页面的其余部分滚动时,背景图像不会移动。(绑定到HTML标签上)
- background-clip
- border-box: 从border区域(不含border)开始向外裁剪背景。
- padding-box: 从padding区域(不含padding)开始向外裁剪背景。
- content-box: 从content区域开始向外裁剪背景。
- background-origin
- padding-box: 默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片。
- border-box : 决定background-position起始位置从border的外边缘开始显示背景图片。
- content-box: 决定background-position起始位置从content的外边缘padding的内边缘)开始显示背景图片。
- 多背景图
- background-image:url(“url”) no-repeat center,url(“url”);
- 减小图片的大小,增加访问速度