1. 长度单位
(1) 像素：
- 一个像素就相当于屏幕中的一个小点。
- 我们的屏幕实际上就是由这些像素点构成的。
- 不同的显示器一个像素的大小也是不同的。显示效果越清晰，像素就越小。
(2) 百分比
- 将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变。
- 在我们创建一个自适应的页面时，经常使用百分比作为单位。
(3) em
- em 和百分比类似，只是 em 是相对于当前元素的字体大小来计算的。
- 1 em = 1font-size
- 当设置字体相关的样式时，经常会使用em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
background-color: red;
}
.box1{
font-size: 30px;
width: 10em;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class ="box1"> </div>
</div>
</body>
</html>结果：
box1的width相当于10*30px
2. 颜色单位
在css中可以直接使用颜色的单词来表示不同风格的颜色，也可以使用RGB值来表示不同的颜色。
- RGB值指通过Red,Green,Blue三原色的不同浓度，来表现不同的颜色。
- rgb(红色的浓度，绿色的浓度，蓝色的浓度)
- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
- 浓度也可以采用百分比来设置，需要0%-100%之间的数字。0%表示没有，100%表示没有
- 不过使用百分数最终也会转换为0-255之间的数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
/* background-color: red;*/
/*background-color: rgb(255,0,0);*/
background-color: rgb(100%,0%,0%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>3. 字体的分类
- serif (衬线字体)
- sans-serif (非衬线字体) 常用
- monosapace (等宽字体) 常用
- curisive (草书字体)
-
fantasy (虚幻字体)
可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用模式。
一般将字体的大分类，指定为font-family中的最后一个字体。<style type="text/css"> p{ font-family: arial, 微软雅黑，serif; } </style>如上所示，将大分类放在最后一个，字体按顺序依次应用。
4. 字体样式
(1) font-style 设置文字的斜体
- 可选值：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜显示 - 大部分浏览器对斜体和倾斜不做区分
-
一般只用italic
font-style: italic;
(2) font-weight设置文本的加粗效果
-
可选值：
normal 默认值，文字正常显示
bold 文字加粗显示font-weight: bold;
(3) font-variant 设置小型大写字母
- 可选值：
normal 默认值，文字正常显示
small-caps 文字以小型大写字母显示 -
小型大写字母： 将所有的字母以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些
font-variant: small-caps;
(4) font
- 在css中还为我们提供了一个样式叫font。使用该样式可以同时设置字体相关的所有样式，将字体的样式值，统一写在font样式中，不同的值之间使用空格隔开。
- 使用font设置字体样式时，斜体 加粗 小型大写字母，没有顺序要求，甚至可写可不写/如果不写则使用默认值，但是要求文字的大小和字体必须写。而且，字体必须是最后一个样式，大小必须是倒数第二个样式。
-
实际上简写也能提高解析性能。
font: small-caps bold italic 50px "微软雅黑";
5. 行高line-height
在CSS中没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接设置行间距。行高越大，行间距越大。
- 网页中的文字实际上是写在一个看不见的线中，而文字会默认在行高中垂直居中显示。
- 行间距 = 行高 - 字体大小
-
通过设置line-height可以间接设置行高
可以接收的值：* 直接接收一个大小 * 可以指定一个百分数，则会相对于字体去计算行高 * 可以直接传一个数值，则行高会设置字体大小相应的倍数。 - 在font 中也可以指定行高。在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定，会使用默认值。
.p{
line-height: 60px;
font: 30;
}
.p1{
font: 30;
line-height: 60px;
}注意以上写法的区别， 最后的会覆盖之前的设置。
6. 文本样式
(1) text-transform 设置文本的大小写
- none 默认值， 该怎么显示就怎么显示
- capitalize 单词的首字母大写，通过空格来识别单词
- uppercase 所有的字母都大写
- lowercase 所有的字母都小写
text-transfer: lowercase;(2) text-decoration 设置文本的修饰
- none 默认值，不添加任何修饰，正常显示
- underline 为文本添加下划线
- overline 为文本添加上划线
- line-through 为文本添加删除线
text-decoration: line-through;- 注意： 超链接会默认添加下划线，也就是说超链接的text-decoration默认值是underline。如果需要去除超链接的下划线则需要将该样式设置为none
a{
text-decoration: none;
}(3) letter-spacing 指定字符间距
(4) word-spacing 设置单词之间的距离
- 实际上就是设置词与词之间空格的大小
(5) text-align 设置文本的对齐方式
- left 默认值，文本靠左对齐
- right 文本靠右对齐
- center 文本据居中对齐
- justify 两端对齐，通过调整文本间空格的大小，达到两端对齐的目的。
text-align: justify;(6) text-indent 设置首行缩进
- 当给它指定一个正值时，会自动向右侧缩进指定的像素
- 当给它指定一个负值时，会自动向左侧缩进指定的像素，通过这种方式可以将一些不想显示的文字隐藏起来
text-indent: -100px;/*首行向左缩进100像素*/- 这个值一般使用 em 作为单位,一个em 相当于一个字体大小
- 默认一个字的像素为16px
.p1{
font-size: 20px;
text-indent: 2em;
/*首行缩进两个字体大小，不受字体大小的改变而改变*/
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。