| 字体属性 |
| font-family |
使用字体家族,浏览器会按照字体顺序查找可用字体,如果都找不到,就采用默认字体 |
| font-size |
字体大小可以用比例或者像素px表示,如果设置inherit表示继承父类的字体 |
| font-weight |
设置字的粗细,可以设置100-900粗细值,具体是什么效果,需要看字体文件的支持程度,此外还可以指定bold,bolder,normal,light等 |
| color |
表示文字的颜色(不是其他颜色比如背景色),可以用文字,RGB或者#6位16进制数字表示,还可以用rgba来指定颜色和透明度 |
| 文本属性 |
| text-align |
设置文本的水平对齐方式,默认是左对齐,可以设置为right靠右,center居中和justify两端对齐 |
| text-decoration |
设置文本的装饰效果,none表示去掉装饰效果,可以增加上划线,下划线,删除线,blink闪烁文本,也可以设定继承.最常用的是去掉a标签的下划线 |
| text-indent |
设置首行缩进,凡是表示大小的东西,都可以用百分比,像素,cm等方式表示.要看页面是如何设置的 |
| 背景属性 |
| background-color |
设置背景颜色.内联元素的背景就是自己的宽度,而块级默认是填满整个盒子外框的内部区域的 |
| background-image |
设置图片的url,以使用背景图片 |
| background-repeat |
结合背景图片来使用,默认为repeat,平铺图片,可以repeat-x,repeat-y仅水平或者垂直重复,no-repeat不重复.重复背景可以用很小的一块背景去填充整个页面背景,而没有必要采用一张大背景图 |
| background-position |
这个是设置背景图片的起始位置,详细看这里 |
| background-attachment |
设置背景图片是否随着页面滚动 |
| 边框属性 |
| border-color |
设置边框的颜色 |
| border-style |
设置边框的样式 |
| border-width |
设置边框的粗细 |
| border-radius |
设置边角的曲度,可以将直角边框改成圆角边框 |
| 单独设置 |
上边的这些属性,都可以单独应用在一边上,通过border-bottom/top/left/right来对一个边框指定样式 |
| 定位属性 |
| display |
这是个非常重要的属性,设置为none,该元素不会显示,也不会占用任何页面空间.设置为block,表示显示为块级元素,之后可以对其设置宽和高,如果设置的宽度小于页面宽,默认靠左,右边会用margin来填满.设置为inline表示显示为行内元素,此时设置元素的width、height、margin-top、margin-bottom和float属性等都不起作用.设置为inline-block则同时具有两种特点.在盒子模型的时候还会解释 |
| margin |
margin也是盒模型非常重要的元素,用以控制外边距,一般可以按照上右左下的顺序用margin来写,上下居中对其一般用margin: 0 auto |
| padding |
内填充,用法和margin一样,其他定位属性都非常重要,需要单独来讲 |
在浏览器中,每一个标签实际展现,都是一个盒子.CSS盒模型是页面排版的关键要素.如果是内联元素,是无法设置width和height的.对于块级元素,如果设置的width小于页面宽度,是会自动用右边距填充,因为这个因素,所以可以用两侧margin为auto来实现块级元素的居中.如果让内联元素想居中,可以用块级元素包含,然后对其设置左右margin.
如果标签嵌套,上一个标签内的element的部分,就是被嵌套标签的边框以内的部分,这也是要记住的一点.