(一)字体属性 font
1.字体大小 font-size
默认字体大小为16px
最小的字体读大小为12px
9pt=12px 12pt=16px
2.字体加粗 font-weight
属性值: normal(100-500)默认正常 bold (600-900)加粗 bolder更加粗
3.字体倾斜 font-style
属性值: normal 默认正常 italic倾斜
4.字体家族 font-family
中文字体或者多个单词组成的字体要加双引号.
多个字体家族用逗号隔开
5.字体颜色 color
属性值: 英文单词 十六进制
十六进制表示:#000000 前两个0红色,中间两个0绿,后面两个0蓝色
每一位的取值为0-9 a b c d e f
(二)文本属性 text
1.设置文本大小写 text-transform (转换大小写)
属性值:none默认不转换 lowercase全部小写 uppercase全部大写 capitalize首字母大写
2.文本修饰 text-decoration (一般导航删除下划线)
属性值;none默认不修饰 underline下划线 overline 上划线
line-though删除线
3.首行缩进 text-indent
单位:em 以当前字体大小为基准
可以取负值
4.字间距 letter-spacing
5.词间距 word-spacing(以空格作为分隔符)
6.文本在容器中的水平对齐方式 text-align
*属性值: left默认左边 center中间 right右边
text-justify自动跳转(英文两端对齐)(只支持IE)
7、行内元素在垂直方向的对齐方式 vertical-align
属性值:baseline 默认基线对齐 middle中线对齐 英文有 顶线,中线,基线底线
一般用在图片与文字垂直居中对齐
(三)列表属性 list-style
1.列表样式类型 list-style-type1
属性值:disc实心圆 circle空心圆 square方块 none去掉
2.列表样式图片 list-style-image:url(“”)
3.列表样式位置 list-style-position
属性值: outside 默认列表样式在li内容外面 inside在内容里面
总属性值:list-style: 1||2 3 ; (1,2选其一)可以缺省值
用的最多 list-style:none; (去除列表圆点)
(四)边框属性border
1.边框宽度 borber-width
2.边框样式 border-style
*属性值: solid 实线 dashed虚线 dotted点线 double 双线
3.边框颜色 borber-color
总属性:border:1 2 3 ;
1 | border: 3px dotted red; 边框大小为3px红色的电线 |
border-方位(top、bottom、left、right): 1 2 3
border-方位-分属性
1 | border-left: 5px solid yellow; 左边边框线为5px黄色实线 |
(五)背景属性background
1.背景颜色 background-color
2.背景图片 background-image:url(“”);
当容器尺寸大于背景图片尺寸时会重复平铺满整个容器
当容器尺寸小于背景图片尺寸时会被裁减会丢失一部分
当容器尺寸等于背景图片尺寸时刚好放下
3.背景平铺 background-repeat
属性值: repeat 平铺 no-repeat不平铺
repeat-x水平方向平铺 repeat-y垂直方向平铺
4.背景图片在容器中的定位 background-position: 水平方向 垂直方向;
属性值:数值(往右为正、往下为正)、方位(left \ center\ right \ top\ center \bottom)
5.背景图片的固定 background-attachment
属性值: scroll 默认滚动 fixd固定
总属性 :background:1 2 3 4 5; 分属性要写在总属性后面
(六) 浮动float
属性值:left左浮动 right:有浮动 none默认不浮动 特点: (1)浮动的元素会脱离标准流 (标准流:从左往右,从上往下) 但文本不会脱离文本流
* (2) 浮动的元素相当于行内块级元素(一行显示多个、可以设置宽高)
* (3)当浮动的元素换行摆放,垂直方向的位置会参考上一个元素的最低点
(七)line-height 行高
1.单行文本若想实线在容器中垂直居中,将line-height大小设成height大小。
2..单行文本若想实线在容器中垂直居中,以上。将line-height<height,以下。则设成line-height>height
3.同一段文本,测量line-height时,从上一行文本的最顶端到下一行文本的最顶端,就是line-height