1 文本类型 font-family

- 设置文本类型的时候后面的属性值表示字体字体必须要在当前的电脑中有下载相应的字体包

- 在浏览器中中文汉字默认的字体类型是微软雅黑

- 属性值可以是中文也可以是英文

- 中文:属性可以不加引号规范是需要加引号的

- 英文:有多个英文单词需要加引号,只有一个英文单词可以不加引号

2 加粗属性 font-weight & 倾斜属性 font-style

加粗和倾斜的标签 b、strong、i、em

css属性

1.加粗属性 font-weight

- 常规属性值 100~900之间的整百数 100~500表示正常字体 600~900表示加粗字体

- 法定属性值 bold 加粗的 bolder 更粗的

- 重点:normal 正常的不想用加粗标签的效果只想要标签而已

2.倾斜属性 font-style

- italic 倾斜的

- oblique 更倾斜的

- normal 正常的

3 文本行高属性 line-height

原理:基线对齐

- 重要的情况: 容器的高度 = 行高的高度使文本在垂直方向居中显示

- 容器的高度 > 行高的高度文本会在上面显示

- 容器的高度 < 行高的高度文本会在下面显示

注意:单行文本和多行文本

4 复合属性

复合属性/简写方式

- 文本大小 font-size

- 文本颜色 color

- 文本类型 font-family

- 文本加粗 font-weight

- 文本倾斜 font-style

- 文本行高 line-height

属性:font

属性值:font-weight font-style font-size/line-height font-family

- font-weight和font-style可以互换位置没有需求可以不写

- font-size和line-height是固定的不可以互换位置

- font-family必须得写默认为微软雅黑

水平方向属性 text-align

属性值:left right center justify 两端对齐

5 文本修饰属性 text-decoration

- underline 下划线

- overline 上划线

- line-through 删除线

- none 无没有清除下划线

首航缩进 text-indent

- 常规的属性值数值+单位 100px/em

- 可以使用正值也可以使用负值

- 针对第一行文本

字间距中文汉字 letter-spacing

词间距英文单词 word-spacing

6 列表属性的设置

1.改变列表的符号样式 list-style-type

- 默认值 disc 实心圆

- circle 空心圆

- square 实心方块

- none 无清除列表的默认符号列表的符号是有兼容问题的在某些低版本中符号是显示不出来的

2.使用图片作为列表的符号 list-style-image

- url()

3.设置默认符号的位置 list-style-position 定位

- inside

- outside 默认值

4.重点: list-style：none

7 边框属性

边框属性

- 边框的宽度 border-width

- 数值+单位

- 边框的样式 border-style

- solid 实线 dashed 虚线 dotted 点线 double 双实线

- 边框的颜色 border-color

- 文本颜色

复合写法: border:border-width border-style border-color

属性值: border-width border-style border-color

需求: 前端方向默认是顺时针的 top、right、bottom、left

- 改变某一个方向上的边框颜色 border-方向值-color

- 改变某一个方向上的所有样式 border-方向值

- 某些标签自带边框需要清除边框 border-方向值:none

8 三角形的制作

<style>

div{

width: 0;

height: 0;

border: 50px solid red;

border-top-color: green;

border-right-color: pink;

border-bottom-color: black;

border-top-color: blue;

border-top: none

}

</style>

4 文本属性&列表属性&边框属性