html-css字体、文本属性

CSS的单位

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
CSS中的单位是必须要写的，因为它没有默认单位。

绝对单位

1. in=2.54cm=25.4mm=72pt=6pc。
2. 各种单位的含义：
   • in：英寸Inches (1 英寸 = 2.54 厘米)
   • cm：厘米Centimeters
   • mm：毫米Millimeters
   • pt：点Points，或者叫英镑 (1点 = 1/72英寸)
   • pc：皮卡Picas (1 皮卡 = 12 点)

相对单位

px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

css样式中，常见的字体属性有以下几种：

p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体*/
	font-variant: small-caps;  /*小写变大写*/
}

如何让单行文本垂直居中

1. 如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。
2. 如果想让多行文本垂直居中，还需要计算盒子的padding：将盒子的高度减去文本的高度，然后将结果除以2，以得到顶部和底部需要的padding值。

vertical-align: middle; 属性

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
1. baseline：默认值，元素放置在基线上，即文本的底部与行内元素的基线对齐
2. top：元素顶部与包含它的行的顶部对齐。
3. bottom：元素底部与包含它的行的底部对齐。
4. text-top：元素顶部与父元素的字体顶部对齐。
5. text-bottom：元素底部与父元素的字体底部对齐。
6. sub：元素基线与父元素字体的下标基线对齐。
7. super：元素基线与父元素字体的上标基线对齐
代码举例：

vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

字号、行高、字体三大属性

1. 字号(文本大小)：

	font-size:14px;

2. 行高：

	line-height:24px;

3. 字体：（font-family就是“字体”，family是“家庭”的意思）

	font-family:"宋体";

4. 是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
5. 格式：font: 加粗 字号/行高/ 字体
6. 举例：

	font: 400 14px/24px "宋体";

7. 在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写 100至900 这样的数字。normal的值相当于400，bold的值相当于700。

文本属性

1. CSS样式中，常见的文本属性有以下几种：

• letter-spacing: 0.5cm ; 单个字母之间的间距
• word-spacing: 1cm; 单词之间的间距
• text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
• color:red; 字体颜色
• text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
• text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

列表属性

ul li{
	list-style-image:url(图片地址) ;  /*列表项前设置为图片*/
	margin-left:80px;  /*公有属性*/
}

overflow属性：超出范围的内容要怎么处理

overflow属性的属性值可以是：

• visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
• hidden：不显示超过对象尺寸的内容。
• auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。（常用）
• scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。（常用）

鼠标的属性 cursor

• 让鼠标放在那个标签上时，光标显示手状
• 代码如下：

p:hover{
	cursor: pointer;
}

滤镜

• 滤镜：设置图片为灰白效果

	<img src="3.jpg" style="filter:gray()">