2018-12-24 字体的分类,行间距,文本的样式,盒子模型,边框,内边距,外边距,外边距的重叠

1.字体分类
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
2.斜体和粗体
font-style:italic指定斜体
font-style:normal指定非斜体
font-weight:bold指定粗体
font-weight:normal指定非粗体
3.小型大写字母
font-variant:small-caps
字体属性的简写
font:粗体 斜体 小型大写 大小/行高 字体
这里前边的粗体,斜体和小型大写顺序可以无所谓,也可以不写,但大小和字体必须写且必须写到后两个
4.行间距
line-height用于设置行高,行高越大行间距越大
行间距 = line-height - font-size
5.大写化
text-transform用于将元素中的字母全都变成大写
text-transform:uppercase大写
text-transform:lowercase小写
text-transform:capitalize首字母大写
text-transform:none正常
6.文本的修饰
text-decoration用于给文本添加各种修饰。
可选值:
underline
overline
line-through
none
7.字母间距和单词间距
letter-spacing用于设置字符间的间距
word-spacing用于设置单词间的间距
8.对齐文本
text-align:left 左对齐
text-align:right 右对齐
text-align:justify 两边对齐
text-align:center 居中对齐
9.首行缩进
text-indent用于设置首行缩进
该样式需要指定一个长度,并且只对第一行生效
10.盒子模型
一个盒子可分为以下几个部分:
content内容区
子元素都存放于内容区
如果没有设置内边距和边框,测内容区大小默认和盒子大小一致
通过width和height两个属性可以设置内容区的大小
width和height属性只适用于块元素
padding内边距
使用padding属性可以设置元素的内边距
如:
padding:10px 20px 30px 40px
这样可以设置元素上、右、下、左四个方向的内边距
padding:10px 20px 30px
这样可以设置元素上、左右、下四个方向的内边距
padding:10px 20px
这样可以设置元素上下、左右四个方向的内边距
padding:10px
这样可以同时指定元素上右下左四个方向的内边距
同时css中还提供了padding-top,padding-right,padding-bottom,padding-left分别用于指定四个方向的内边距
border边框
可以使用border属性设置盒子的边框:
border:1px red solid;
这样的样式指定了边框的宽度,颜色和样式
也可以使用border-top/right/bottom/left分别指定上右下左四个方向的边框
边框的样式有:
none无边框
dotted点线
dashed虚线
solid实线
double双线
groove槽线
ridge脊线
inset凹边right
outset凸边
margin外边距
使用margin属性可以设置外边距
用法和padding类似,同样也提供了四个方向的margin-top/right/bottom/left
margin:0 auto;可以使元素居中

你可能感兴趣的:(2018-12-24 字体的分类,行间距,文本的样式,盒子模型,边框,内边距,外边距,外边距的重叠)