一、字体
- 加斜
加斜
em主要表示语气上的强调，在浏览器中默认使用斜体显示
加斜
i标签中的内容会以斜体显示
- 加粗
加粗字体
strong表示强调的内容，比em更强烈，默认使用粗体显示
b标签中的内容会以粗体显示
加斜字体
- 小号字体
这里的内容会比父元素少一些
比如：合同中的小字，网站的版权声明都可以放到small
- 书名号
《静夜思》李白
- 引用
短引用，浏览器还会默认加上引号
长引用（块级引用）
- 上下标和删除线
上标
下标
删除线
- 插入和显示代码
插入的内容，会有下划线显示
if True:
print("ddddd")
二、列表
- 无序列表
-
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号，可选值：
disc：默认值，实心的圆点
square：实心的方块
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
-
- 有序列表
-
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型，可选值：
1，默认值，使用阿拉伯数字
a/A，采用小写或大写字母作为序号
i/I，采用小写或大写的罗马数字作为序号
ol也是块元素
- 定义列表
-
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表，它有两个子标签
dt：被定义的内容
dd：对定义内容的描述
-
注意！！！：三种列表可以随意嵌套使用
三、颜色单位
- 颜色单词表示
- rgb调色
- 十六进制调色
* 可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每组表示一个颜色
* 第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：#ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc #aabbcc
四、字体单位
像素px
- 像素是我们在网页中使用得最多的一个单位
一个像素就相当于屏幕中的一个小点
我们的屏幕实际上就是由这些像素点构成的
但是这些像素点是不能直接看见的
- 不同显示器一个像素的大小也不相同
显示效果越好、越清晰，像素就越小，反之像素越大
百分比%
- 也可以将单位设置为一个百分比的形式
这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
五、字体样式
- 可以通过color选择字体颜色 font-size选择字体大小
- 通过font-family选择字体样式
/*
通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用“,”分开
当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有，再尝试下一个
六、字体分类
| 字体 | 名称 |
|---|---|
| 衬线字体 | serif |
| 非衬线字体 | sans-serif |
| 草书字体 | cursive |
| 等宽字体 | monospace |
| 虚幻字体 | fantasy |
可以将字体设置为这些大的分类，浏览器会自动选择指定的字体，并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
衬线字体：我是一段文字，ABCDEFGabcdefg
非衬线字体：我是一段文字，ABCDEFGabcdefg
等宽字体：我是一段文字，IHABCDEFGabcdefg
草书字体：我是一段文字，ABCDEFGabcdefg
虚幻字体：我是一段文字，ABCDEFGabcdefg
七、字体其他样式
| 字体 | 名称 | 可选值 |
|---|---|---|
| 斜体 | italic | normal,oblique |
| 粗体 | weight | normal,bold |
| 小型大写字母 | variant | normal,small-caps |
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式
可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
八、行间距
在CSS中并没有直接提供设置行间距的方式，我们只能通过设置行高来间接的设置，行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学用的单线本，单线本是一行一行的，线与线之间的距离就是行高
网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
通过设置line-height可以间接的设置行高
可以接收的值：
1.直接接收一个大小
2.可以指定一个百分数，则会相>对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数
九、文本的样式
| 字体样式 | 名称 | 可选值 |
|---|---|---|
| 大小写 | text-transform | (none默认)（capitalize 首字母大写）（uppercase所有字母大写）（lowercase所有字母小写） |
| 文本修饰 | text-decoration | (none默认)（underline添加下划线）（overline 添加上划线）（line-though添加删除线 |
| 对齐方式 | text-align | (left默认)（right文本右对齐）（cente居中对齐）（justify两端对齐） |
letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小
text-indent用来设置首行缩进
这个值一般都会使用em作为单位
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来
十、盒子模型
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定