HTML&CSS学习笔记 -- CSS（二）
学习资料：
尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）
一、 列表
1 无序列表
<ul></ul>
使用li在ul中创建一个一个的列表项，一个li就是一个项
通过type属性修改无序列表的项目符号：
- 可选值：
- disc：默认值，是实心圆点
- square：实心方点
- circle：空心的圆
注意：默认的项目符号我们一般都不使用，因为不同的浏览器显示结果不同。
-
去掉项目符号
在css里面设置：
ul{list-style:none} -
如果需要设置项目符号，则可以采用为li设置背景图片的方式来实现。
2 有序列表
有序列表和无序列表类似，只不过它使用ol代替ul，使用有序的序号作为项目符号
-
type属性，可以指定序号的类型
可选值：
- 1：默认值，使用阿拉伯数字
- a/A：采用小写或大写的字母
- i/I：采用小写或大写的罗马数字
3 定义列表
用来对一些词汇或内容进行定义，使用dl创建
dl标签中有两个子标签：
-
dt：被定义的内容 -
dd：对定义的内容的描述，可有多个描述
列表之间可以嵌套，无序套有序，有序套无序。
二、单位
1 长度单位
像素px
- 像素是我们在网页中使用最多的一个单位
- 一个像素就相当于我们屏幕中的一个小点
- 我们的屏幕就是由这些像素点构成的
- 但是这些像素点是不能直接看见
- 不同显示器一个像素的的大小也不同
- 显示效果越好越清晰，像素就越小，反之像素越大
百分比
- 也可以将单位设置一个百分比的形式
- 浏览器根据父级元素的样式来计算该值
- 好处：当改变父级元素的值时，子级元素会自动按照比例变化
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
- 和百分比类似，它是相当于当先元素的字体大小来计算的
- 1em = 1 font-size
- 使用em时，当字体发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
2 颜色单位
颜色单词
在css找那个可以直接使用颜色单词来表示颜色，比较麻烦
RGB值
-
所谓的RGB值指的是通过红绿蓝三原色
-
通过这三种颜色的不同浓度来表示出不同的颜色
-
语法：rgb(红色的浓度，绿色的浓度，蓝色的浓度)
-
颜色的浓度需要一个0-255之间的值表示，0最浅，255最深
-
浓度也可以通过百分比来设置，0-100%
十六进制
- 原理与第二种方法
RGB值原理一样 - 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
- 语法：#第一组二位数字第二组二位数字第三组二位数字
- 00表示没有，相当于rgb的0
- ff表示最大。相当于rgb的100
三、字体样式
1 字体大小
-
font-siz:像素值，浏览器文字默认大小：16px -
font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的，我们设置的font-size实际是设置格的高度，并不是字体的大小 - 一般情况下文字都要比这个格要小一些，也有时比格大，根据字体的不同，显示效果也不同
2 文字字体
-
font-family:字体名字 -
当采用某种字体时，如果浏览器支持则使用该字体，不过字体不支持，则使用默认字体
-
该样式可以同时指定多个字体：
font-family:arial,微软雅黑 -
多个字体之间使用
,隔开 -
当采用多个字体时，浏览器会优先使用前面的字体，如果前面没有适合的再尝试下一个
-
浏览器使用的字体默认是计算机中的字体，如果计算机中有，则使用，没有就不使用。
-
计算机中的字体存储位置：
C:/Windows/Fonts -
字体分类
- serif：衬线字体
- sans-serif：非衬线字体
- monospace：等宽字体
- cursive：草书字体
- fantasy：虚幻字体
这些是字体的大分类，当设置为这些分类后，浏览器会自动选择指定的字体并应用样式。
- 一般将字体的大分类指定为font-family中的最后一个字体
3 斜体
-
font-style
设置文字的斜体
值：
- normal：默认值，文字正常显示
- italic：斜体
- oblique：倾斜，与italic效果一样
4 文字粗细
-
font-weight
设置文本的粗细
值：
- normal：正常
- bold：加粗
- bolder：更粗
- lighter：更细
- 100-900之间的九个值：
- 但是由于一般用户计算机中没有这么多级别的字体，所以不是每个数值都有对应的粗细
4 小型大写字母
-
font-variant
可以用来设置小型大写字母
值：
- normal：默认，正常显示
- small-caps：文本以小型大写字母显示
5 font属性
-
font
在css中还为我们提供了一个样式叫font
- 使用该样式可以同时设置字体相关的所有样式
- 语法：
font: 样式一 样式二 样式三 ... - 不同样式之间用空格隔开
- 例：
font: italic small-caps bold 60px - 顺序要求：斜体、加粗、大小字母没有顺序要求，甚至可写可不写；如果不写则使用默认值，但是要求文字的大小各字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
6 文字大小写转变
-
text-transform
-
设置文字大小写
值：
- none：默认值，不作任何处理
- capitalize：单词首字母大写，通过空格来识别空格
- uppercase：所有字母大写
- lowercase：所有字母小写
-
7 文本修饰
-
text-decoration
-
文本修饰，给文件添加效果
值：
- none：默认值，不添加修饰
- underline：添加下划线
- overline：添加上划线
- line-through：添加删除线
-
去除超链接默认的下划线
a元素的默认text-decoration值为underline，因此会自带下划线
要想去除要设置其text-decoration：
a{text-decoration:none)
-
四、段落样式
1 行间距
css中并没有直接设置行间距的参数，我们只能通过设置行高line-height开简介设置行间距，行高越大行间距就越大。
单倍行距：
p {
font-size:20px;
font-height:40px;
}
值：
- 像素大小
- 百分数，相对于字体去设置行高，单倍行距：
font-height:200% - 整数：字体的倍数，单倍行距：
font-height:2
在font参数中也可以设置行高
-
语法：
`font: 字体大小/行高
2 字间距和词间距
- letter-spacing
- 字间距
- word-spacing
- 词间距
3 文本对齐
-
text-align
-
设置对齐方式
值：
- left：文本靠左对齐
- right：文本靠右对齐
- center：文本居中对齐
- justify：两端对齐
4 首行缩进
-
text-indent
缩进两字：
- text-indent:32px
- text-indent:2em，跟随字体大小
-
也可以为负值：可以将一些不想显示的文字显示起来
