css文本和字体

文本和字体

Text color，对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

body { color:blue; }
h1 { color:#00ff00; }
h2 { color:rgb(255,0,0); }

文本的对齐方式

h1 { text-align:center; }
p.date { text-align:right; }
/* 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐 */
p.main { text-align:justify; }

文本的修饰

/* decoration属性主要用来设置文本的下划线 */
a { text-decoration:none; }
h1 { text-decoration:overline; }
h2 { text-decoration:line-through; }
h3 { text-decoration:underline; }

文本的转换

/* 全部大写 */
p.uppercase { text-transform:uppercase; }
/* 全部小写 */
p.lowercase { text-transform:lowercase; }
/* 单词首字母大写 */
p.capitalize { text-transform:capitalize; }

文本第一行缩进

p { text-indent:50px; }

设置字体

• 1.font-family 属性设置文本的字体系列
• 2.font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体
• 3.如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”

p { font-family:"Times New Roman", Times, serif; }

字体样式

p.normal { font-style:normal; }
p.italic { font-style:italic; }

字体大小

h1 { font-size:40px; }
h2 { font-size:30px; }
h3 { font-size:20px; }

用em来设置字体大小

• 1.1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
• 2.1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em。

h1 { font-size:2.5em; }
h2 { font-size:1.875em; }
p { font-size:0.875em; }

使用百分比和em组合

body { font-size:100%; }
h1 { font-size:2.5em; }
h2 { font-size:1.875em; }
p { font-size:0.875em; }

链接的四个状态

• 1.a:link - 未访问过得链接
• 2.a:visited - 用户已访问过的链接
• 3.a:hover - 当用户鼠标放在链接上时
• 4.a:active - 链接被点击的那一刻

a:link { color:#FF0000; }
a:visited { color:#00FF00; }
a:hover { color:#FF00FF; }
a:active { color:#0000FF; }

去除链接的下划线

a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }