HTML文本样式

（此为从学习视频中摘抄，如有雷同，纯属巧合）

1. 长度单位

   像素 px
   *像素是我们在网页中使用的最多的一个单位，
   * 一个像素就相当于我们屏幕中的一个小点，
   * 我们的屏幕实际上就是由这些像素点构成的
   * 但是这些像素点，是不能直接看见
   * 不同的显示器一个像素的大小也不相同，
   * 显示效果越好越清晰，像素就越小，反之像素越大
   百分比%
   *也可以将单位设置为一个百分比的形式，
   * 这样浏览器将会根据其父元素的样式来计算该值
   * 使用百分比的好处是，当父元素的属性值发生变化时，
   * 子元素也会按照比例发生改变
   * 在我们创建一个自适应的页面时，经常使用百分比作为单位
   em
   *em和百分比类似，它是相对于当前元素的字体大小来计算
   *1em=1font-size
   * 使用em时，当字体大小发生改变时，em也会随之改变
   * 当设置字体相关的样式时，经常会使用em
   例：

			.box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			.box1{
				font-size: 100px;
				width: 1em;
				height: 50%;
				background-color: yellow;
			}

2. 颜色的单位

   *在CSS可以直接使用颜色的单词来表示不同的颜色
   * 红色：red
   * 蓝色：bule
   * 绿色：green
   * 也可以使用RGB值来表示不同的颜色
   * 所谓的RGB值指的是通过Red Green Bule三原色
   *通过这三种颜色的不同浓度，来表示出不同的颜色
   *例子：rgb（红色的浓度，绿色的浓度，蓝色的浓度）；
   * 颜色的浓度需要一个0-255之间的值， 255表示最大，0表示没有
   *浓度也可以采用百分数来设置，需要一个0%-100%之间的数字
   *使用百分数最终也会转换为0-255之间的数
   *0%表示0
   * 100%表示255
   * 也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
   * 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
   * 每组表示一个颜色，第一组表示红色的浓度，范围00-ff
   * 第二组表示绿色的浓度，范围00-ff
   *第三组表示蓝色的浓度，范围00-ff
   *语法：#红色绿色蓝色
   *十六进制：
   *00-ff
   * 00表示没有，相当于rgb中的0
   * ff表示最大，相当于rgb中的255
   * 红色#ff0000
   * 像这种两位两位重复的颜色， 可以简写
   * 比如：#ff0000可以写成#f00
   * #abc #aabbcc
   例：

			.box1{
			 	width: 200px;
			 	height: 200px;
			 	/*background-color: rgb(161,22,55);*/
			 	/*background-color: rgb(100%,50%,50%);*/
			 	background-color: #abc;
			 }

3. 字体的样式

   设置字体颜色，使用color来设置文字的颜色
   例：color: red;

   设置文字大小,一般默认的文字大小都是16px
   font-size设置的并不是文字本身的大小
   在页面中，每个文字都是处在一个看不见的框中
   我们设置的font-size实际上是设置格的高度，并不是字体的大小
   一般情况下，文字都要比这个格要小一些，也有时会比格大，
   根据字体不同，显示效果也不同
   例：font-size: 20px;

   通过font-family可以指定文字字体
   当采用某种字体时，如果浏览器支持则使用该字体
   如果字体不支持，则使用默认字体
   该样式可以同时指定多个字体，多个字体之间使用,分开
   当采用多个字体时，浏览器会优先使用前边的字体，
   如果前边没有在尝试下一个
   例：font-family: arial,微软雅黑;

   浏览器使用的字体默认就是计算机中的字体，
   如果计算机中有，则使用，如果没有就不用

   在开发中，如果字体太奇怪，用的太少了，尽量不用
   有可能用户的电脑没有，就不能达到想要的效果

4. 字体的分类

   在网页中将字体分成5大类：
   serif （衬线字体）
   sans-serif （非衬线字体）
   monospace （等宽字体）
   cursive （草书字体）
   fantasy （虚幻字体）
   可以将字体设置为这些大的分类，当设置为大的分类以后，
   浏览器会自动选择指定的字体并拥有样式
   一般会将字体的大分类，指定为font-family中的最后一个字体
   例：font-family: arial,微软雅黑,华文彩云,serif;

5. 字体的其他样式

   font-style可以用来设置文字的斜体
   可选值：
   normal，默认值，文字正常显示
   italic，文字会以斜体显示
   oblique,文字会以倾斜的效果显示
   大部分浏览器都不会对倾斜和斜体做区分，
   也就是说我们设置italic和oblique的效果一样
   一般只会使用italic
   例：font-style: italic;

   font-weight可以用来设置文本的加粗效果
   可选值：
   norma，默认值，文字正常显示
   bold,文字加粗显示
   该样式也可以指定100-900之间的9个值，
   但是由于用户的计算机往往没有这么多级别的字体，所以不能达到想要的效果
   也就是200有可能比100粗，300有可能比200粗，但是也有可能一样粗
   例：font-weight: bold;

   font-variant可以用来设置小型大写字母
   可选值：
   normal，默认值，文字正常显示
   small-caps,文本以小型大写字母显示
   小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些
   例：font-variant:small-caps ;

   在CSS中还为我们提供了一个样式叫font
   使用该样式可以同时设置字体相关的所有样式
   可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
   使用fonr设置字体样式时，斜体 加粗 小型大写字母，没有顺序要求，甚至可写可不写，
   如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
   大小必须是倒数第二个样式

   实际上使用简写属性也会有一个比较好的性能
   例：font: italic small-caps bold 60px 微软雅黑;

6. 行间距

   在CSS中并没有提供一个直接设置行间距的方式
   我们只能通过设置行高来间接的设置行间距，行高越大间距越大
   使用line-height来设置行高
   行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
   网页中的文字实际上也是写在一个看不见的线中，而文字会默认在行高中垂直居中显示
   行间距=行高-字体大小

   通过设置line-height可以间接的设置行高，
   可以接收的值：
   1.直接接收一个大小
   2.可以指定一个百分数，则会相对于字体去计算行高
   3.可以直接传一个数值，则行高会设置字体大小相应的倍数
   例：line-height: 1.5;

   对于单行文本来说，可以将行高设置为和父元素的高度一致，
   这样可以使单行文本在父元素中垂直居中
   例：.box{
               width: 200px;
               height: 200px;
               background-color: #bfa;
               line-height: 200px;
               }

   在font中也可以指定行高
   在字体大小后可以添加/行高，来指定行高，这值是可选的，如果不指定则会使用默认值
   例：

			.p2{
				font: 30px "微软雅黑";
				line-height: 50px;
			}

7. 文本样式

   text-transform可以用来设置文本的大小写
   可选值：
   none，默认值，该怎么显示，不做任何处理
   capitalize，单词的首字母大写,通过空格来识别单词
   uppercase，所有字母都大写
   lowercase，所有字母都小写
   例：text-transform: lowercase;

   text-decoration可以用来设置文本的修饰
   可选值：
   none，默认值，不添加任何修饰，正常显示
   underline，为文本添加下划线
   overline，为文本添加上划线
   line-through，为文本添加删除线
   例：text-decoration: line-through;

   超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
   如果需要去除超链接的下划线，则需要将该样式设置为none

   letter-spacing可以指定字符间距
   例：letter-spacing: 10px;

   word-spacing可以设置单词之间的距离
   实际上就是设置词与词之间空格的大小
   例：word-spacing: 20px;

   text-align用来设置文本的对齐方式
   可选值：
   left，默认值，文本靠左对齐
   right，文本靠右对齐
   center，文本居中对齐
   justify，两端对齐
   通过调整文本之间的空格的大小，来达到一个两端对齐的目的
   例：text-align: justify;

   text-indent用来设置首行缩进
   当给它指定一个正值时，会自动向右侧缩进指定的像素
   如果为它指定一个负值，则会向左移动指定的像素
   通过这种方式可以将一些不想显示的文字隐藏起来
   这个值一般都会使用em作为单位
   例：text-indent: 2em;