Css文字效果
1.文字样式:font-family
字体:sans-serif(字体醒目);serif(笔画的开始和结束有额外的修饰部分,易读性较强)
*页面设计最好有多个备选字体
2.文字大小:font-size
分绝对大小和相对大小,采用相对大小px,%,em(%,em相对于父标记而言,没有设定父标记则用浏览器默认值)。
不同浏览器采用相对字体大小。
3.字体颜色:color
span标记,可以针对某些具体字体来做改变,行内元素
4.文字粗细:font-weight
5.文字斜体:font-style
normal,italic,oblique
6.上下划线,删除线:text-decoration
blink闪烁,ie不支持,ff可以
7.英文字母大小写:text-transform
capitalize首字母大写;uppercase大写;lowercase小写
8.段落对齐方式
水平:text-align;垂直:vertical-align,对于文字本身而言,该属性对于块级元素不起作用,对于表格有用。
9.行间距:line-height 字间距:letter-spacing
10.首字放大:float和span,通过span标签对首字进行特殊的样式控制,然后float:left突出显示
伪类:first-letter,也可以实现类似首字放大,但该属性的文字对一些其他的CSS样式支持的不好,不推荐使用。
例子:百度搜索内容显示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>百度搜索页面</title> 6 <style type="text/css"> 7 body{ 8 margin:0px; 9 padding:0px;} 10 p{ 11 margin:0px; 12 font-family:Arial, Helvetica, sans-serif;} 13 p.title{ 14 padding-bottom:0px; 15 font-size:16px;} 16 p.content{ 17 padding-top:3px; 18 font-size:13px; 19 line-height:18px;} 20 p.link{ 21 font-size:13px; 22 padding-bottom:25px; 23 color:#008000;} 24 span.search{ 25 color:#c60a00;} 26 span.quick{ 27 color:#666666; 28 text-decoration:underline;} 29 p.title span.search{ 30 text-decoration:underline;} 31 32 </style> 33 </head> 34 35 <body> 36 <p class="title"><a href="#">中国<span class="search">春节</span>网欢迎您</a></p> 37 <p class="content">在中国传统的节日中,最热闹。最受人们重视的节日是<span class="search">春节</span>。<span class="search">春节</span>,是农历的元旦,是... 送压岁钱是潮汕春节习俗中重要的一项,长辈要分钱给后辈,能挣钱的后辈也要送...</p> 38 <p class="link">www.chunjie.net.cn 2012-11-08 - <span class="quick">百度快照</span></p> 39 </body> 40 </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。