Css文字效果

時間 2019-11-12

標籤 css 文字效果欄目 CSS 简体版

原文原文鏈接

1.文字樣式：font-familycss

字體：sans-serif（字體醒目）；serif（筆畫的開始和結束有額外的修飾部分，易讀性較強）html

*頁面設計最好有多個備選字體api

2.文字大小：font-size瀏覽器

分絕對大小和相對大小，採用相對大小px,%,em（%，em相對於父標記而言，沒有設定父標記則用瀏覽器默認值）。字體

不一樣瀏覽器採用相對字體大小。ui

3.字體顏色：colorspa

span標記，能夠針對某些具體字體來作改變，行內元素.net

4.文字粗細：font-weight設計

5.文字斜體：font-stylecode

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。