一、文本样式:
font_size用来指定文字的大小
font-family 可以指定标签中文字使用的字体,也可以同时指定多个字体
一般来说只有用户计算机中安装了我们指定的字体时,它才会显示,否则这行代码是没有意义的
字体分类:
serif(衬线字体)
sans-serif(非衬线字体)
monospace(草书字体)
fantasy(虚幻字体)
斜体和粗体:
1. font-style用来指定文本的斜体
指定斜体:font-style:italic
2.指定非斜体;font-style;normal
font-weight用来指定文本的粗体
指定粗体:font-weight:bold
指定非粗体;font-weight:normal
小型大写字母:
font-variant属性可以将字母类型设置为小型大写。在该样式中,字母看起来像是稍微小了尺寸的大写字母
font-variant:samll-caps
字体属性的简写:
font可以一次性同时设置多个字体的样式
语法:font: 加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺序无所谓,也可以不写,但是大小和字体必须写且必须写到后两个
行间距:
line-height 用于设置行高,行高越大则行间距越大
行间距 = line-height-font-size
大写化:
text-transfrom样式用于将元素中的字母全都变成大写
大写:text-transform:uppercase
小写: text-transform:lowercase
首字母大写:text-transform:capitalize
正常:text-transform:none
文本的修饰
text-decoration属性,用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条
可选值:
underline
overline
line-through
none
字母间距和单词间距:
letter-spacing用来设置字符之间的间距
word-spacing用来设置单词之间的间距
这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。
对齐文本:
text-aligh用于设置文本的对齐方式
可选值:
left: 左对齐
right:r右对齐
justify:两边对齐
center:居中对齐
首行缩进
text-indent用来设置首行缩进
该样式需要指定一个长度,并且只对第一行生效
二、盒子模型:
一 个盒子我们分成几个部分
内容区(content)
内边距(padding)
边框(border)
外边框(margin)
内容区:
通过width和height两个属性可以设置内容区的大小
width和height属性只适用于块元素
内边距:
使用padding属性来设置元素的内边距
例如:
padding:10px 20px 30px 40px
这样设置元素的上、右、下、左四个方向的内边距
边框:
可以在元素周围创建边框,边框是元素可见框的最外部
可以使用border属性来设置盒子的边框
边框的样式:
none(没有边框)
dotted(点线)
dashed(虚线)
solid(实线)
double(双线)
groove(槽线)
ridge(脊线)
inset(凹边)
outset(凸边)
外边距:
外边距是元素边框与周围元素相距的空间
使用margin属性可以设置外边距
当将左右外边距设置为auto时,预览器会将左右外边距设置为相等,可以使元素居中