字体大小
font-size
浏览器默认16px,视图默认12px
pt:px=3:4
1em=16px 0.75em=12px
medium=16px/12pt/1em(常规大小)
font-size:0(可以不带像素)
文本颜色
color:rgb(0,0,0)或color:#
rgba 全透明 a的取值范围(0-1)
白色#fff 黑色#000 黄色#ff0 红色#f00
文本字体
font-family
1、常用微软雅黑
2、改变浏览器默认字体
3、多个字体时,首先显示字体1,不存在就显示字体2,以此类推
4、中文字体或多个英文单词字体要用双引号括起来,单个英文单词字体不用
文字加粗
font-weight
bolder/bold/normal(常规)
数字为100-900,没有单位,数字越大越粗
文字倾斜
font-style
italic 斜体字
oblique 倾斜的文字
水平对齐
text-align
left/center/right
justify两端对齐
1、对横着的标签、纯数字和字母以及不换行的文字无效果
2、对英文单词和行内元素以及行内块元素有效果
行高
line-height
1、line-height:20px(给像素):固定的行间距
2、line-height:20(不带像素):字号大小的20倍
3、line-height:500%(给百分号):行间距比当前字体高度大5倍
字号大小+行距=行高(文字顶端到下一行文字顶端的距离)
1)去掉文字默认的上下间距,行高=字号大小
2)单行文本直接给了行高,数值包括文字默认上下间距,且居中
3)有高有行高
行高=高,文字垂直居中
行高>高,文字靠下
行高<高,文字靠上
文本修饰
text-decoration:none/underline/overline/line-through
说明:
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
首行缩进
text-indent:value
说明:
1、text-indent可以取负值;
2、text-indent属性只对第一行起作用。
字间距
letter-spacing:value
控制英文字母或汉字的字距。
词间距
word-spacing:value;
控制英文单词词距。
文本流控制
layout-flow:horizontal/vertical-ideographic;
说明:
1、horizontal:自左向右
2、vertical-ideographic:自上而下
列表样式 list-style-type:disc(实心圆) cirde(空心圆) square(实心方块) list-style-type = list-stlye 去掉列表样式
用图作列表样式 list-style-image:url
定义列表符号位置 list-style-position:outside(外边) inside(里边)
背景颜色 background-color
背景图引入 background-image:url
背景图平铺 background-repeat:no-repeat(不平埔)repeat-x(横向)repeat-y(纵向)
背景图定位 background-position:left/center/right+数值(水平)
bottom/center/top+数值(垂直)
滚动条 background-attachment:scroll(滚动) fixed(固定)
背景图显示范围:由元素的大小决定背景图显示多少
1、元素大小>背景图,默认下背景图在容器中平铺
2、元素大小<背景图,默认下,容器有多大,背景图就显示多少
3、元素大小=背景图 ,默认下背景图完全显示
同一个元素里,插入两个背景图,用(,)隔开