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>
