一、文本属性
width
height:
min-width | min-height
max-width |max-height
字体颜色
color:值;
值:单词。
十六进制:简写(两两相同时,一般为3位)。
rgb():数字(0~255 用,隔开)、百分比。
英文大小写转换
text-transform:uppercase/lowercase/capitalize;
文本对齐
text-align:left/center/right;
(针对行内、行内块级元素,块级元素使用这个属性无效)
文本缩进
text-indent:数值;
单位:
px:像素
em:倍数(字体大小的倍数)
%:百分比
行高
line-height:数值;
注:当height、line-height取值相同时,有垂直居中的效果。但是只针对单行文本。
文本装饰
text-decoration:none(默认)/underline/overline(上划线)/line-through(删除线);
垂直居中
vertical-align:top/middle/bottom;
注:一般结合 display:table-cell; 来使用。
设置图片和文字的对齐
单词间距:word-spacing
单词字母间的间距:letter-spacing
二、字体属性
复合属性:(要遵守一定的顺序)
font:[font-style] [font-weight] [font-size] [font-family]
字体风格:
font-style:normal/italic(斜体);
字体的粗细:
font-weight:数值;
字体大小:
font-size:值; 默认单位是px
字体类型:
font-family:值;
值可指定多个字体,用逗号分隔,从前向后适应
三、背景属性
复合属性:(遵守一定顺序)
background:background-color|background-image|background-repeat|background-attachment|background-position
可省略其中的项,省略的项目,系统会实用其默认值
背景颜色:
background-color:值;
背景图片:
background-image:url("");
背景的重复:
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
背景固定:
background-attachment:fixed(相对于窗体固定)|scroll(默认,相对于元素固定);
背景的定位:(除固定值外,也可以使用像素与百分比)
background-position:left|center|right top|bottom;
值为正,分别向右,向下
注意:background-position(精灵图实现)需与background-repeat结合使用。
四、列表属性
复合属性:(遵守一定顺序)
list-style:list-style-image|list-style-position|list-style-type;
项标记类型:
list-style-type:none|disc|circle|square;
在何处放置列表标记:
list-style-position:outside(列表标记项放置在文本以外)|inside(列表标记项放置在文本以内);
用图片作为列表项的标记:
list-style-image:url("");
五、边框属性
上、右、下、左
复合属性:
border:border-width|border-style|border-color;
边框宽度:
border-width:值;
边框样式:
border-style:dotted(点线)|dashed(虚线)|solid|double;
边框颜色:
border-color:值;
width:值; 值:100px、%、em、rem、vh、vw
height:值;(内容很少设置高度,一般是由内容撑大的)
六、盒子属性
边框:
border:值;
外边距:
margin:值;
内边距:
padding:值;
上下左右内边距:
padding-top:值;
padding-bottom:值;
padding-left:值;
padding-right:值;
注:垂直方向上的margin有合并问题,水平方向上的则没有。