css基础知识(文本属性)

四、伪类选择器

①未点击时

a:link{
	color: black;
	}

②点击时

a:visited{
		color: blue;
		}

③鼠标悬停时

a:hover{
	color:red;
}

④点击后

a:active{
	color:green;
		}

<div>
	<a href="#">积分系统</a>
</div>

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

五、css文本属性

1、字体*
（1）、字体大小

	font-size: 12px/2em/200%;
/* 2em:父元素字体大小的两倍
	200%:父元素字体大小的两倍
	2em:只用来设置字体大小，若设置宽高则大小为字体的两倍
 */

（2）、字体系列

	font-family:"楷体","Helvetica Neue",sans-serif;

注：加双引号的情况：中文，多个英文单词组成的字体，使用字体的前提是系统里有此字体，若没有就使用sans-serif(非衬线体)或serif(衬线体)
（3）、字体粗细和字体样式
①粗细
font-weight:normal=500/bold/100/200-900
bold：加粗
②样式

	font-style:normal/italic;/**斜体/

（4）、行高:元素最下面到另一行元素最下面的距离，基线之间的距离

	line-height:40px;
	height:40px;

当行高值和元素的高度一致时，内容则垂直居中。
（5）、字体 颜色

	color:red/rgb(255,0,0)/#ff0000;

2、对齐方式
（6）、对齐方式/文本缩进
①水平方向：text-alight:right/center/left(默认)
适用于块级元素、内联元素需要使用块元素包裹起来整体移动
②文本缩进

	text-indent:20px;
	text-indent:2%;/*宽度的2%*/
	text-indent:2em;/*父元素字体大小的2倍*/

3、格式处理
（7）、空白处理
①

	white-space:pre;
	<pre>Hello Word!     Hello Word! </pre>

pre：保留原格式输出
注：(wite-space:pre;)若设置pre，则任意回车，空白都当做一个空格来出理。
②white-space:pre-wrap;
效果和①中的pre一样
③white-space:pre-line;/取消空白，保留换行/
④white-space:nowrap;/不换行使内容显示为一行/
（8）、换行和断行

	word-wrap: break-all;/*断行 会把单词截断*/
	word-wrap: break-word;/*换行 单词充满在换行*/

4、文本修饰
（9）、文本阴影

	text-shadow: 1px 1px gold,1.2px 1.2px indianred,……;/*设置立体*/
	text-shadow: 1px 1px 1px black;/*水平方向 垂直方向 模糊值*/

（10）、下划线

	text-decoration: overline;/*上划线*/
	text-decoration: line-through;/*中划线*/
	text-decoration: underline;/*下划线*/
	text-decoration: overline underline line-through; /*三条线一起加 划线*/ 

5、高级设计
(11)、溢出

	overflow: hidden; /* 省略*/
	text-overflow: clip; /*修剪掉*/ 
	 white-space: nowrap;/*一行显示*/
	text-overflow: ellipsis;/* 省略号*/	

/* 1、2配合使用，多出的部分Hier省略掉。
	配合使用，多出的用省略号代替134*/	

（12）、光标

cursor:pointer;
	/* pointer:小手，a标签默认小手，可点击
		move:可移动
		help:帮助?
		wait:加载中(圆圈)
		crosshair:十字线，截图
	 */
user-select: none;/*不能复制*/