精通CSS+DIV网页样式与布局——CSS文字效果
一、文字樣式
???????? 1.1字體
???????? ?font-family:黑體;
???????? 1.2字體大小。
???????? font-size: 0.5px;
???????? 1.3字體顏色。
???????? color:#333333;
???????? 1.4文字粗細(xì)。
???????? font-weight:bold;
???????? 1.5文字斜體，下劃線，刪除線，頂劃線。
???????? text-decoration:underline; ?????????????? /* 下劃線 */
???????? text-decoration:overline; ????????????????? /* 頂劃線 */
???????? text-decoration:line-through; ????????? /* 刪除線*/
???????? font-style:italic;???????? /* 設(shè)置斜體 */
二、段落
???????? 2.1 段落實(shí)例——百度搜索結(jié)果
???????
<html> <head> <title>段落實(shí)例:Baidu搜索</title> <style> <!-- p{margin:0px;font-family:Arial; /* 定義所有字體 */ } p.title{padding-bottom:0px;font-size:16px; } p.content{padding-top:3px; /* 標(biāo)題與內(nèi)容的距離 */font-size:13px; /* 內(nèi)容的字體大小 */line-height:18px; } p.link{font-size:13px;color:#008000; /* 網(wǎng)址顏色 */padding-bottom:25px; } span.search{color:#c60a00; /* 關(guān)鍵字顏色 */ } span.quick{color:#666666; /* 快照顏色 */text-decoration:underline; /* 快照下劃線 */ } p.title span.search{text-decoration:underline; /* 標(biāo)題處關(guān)鍵字的下劃線 */ } --> </style></head> <body><p class="title"><a href="#">中國(guó)<span class="search">春節(jié)</span>網(wǎng)</a></p><p class="content">歡迎光臨中國(guó)<span class="search">春節(jié)</span>網(wǎng),您現(xiàn)在的位置是中國(guó)<span class="search">春節(jié)</span>網(wǎng)首頁(yè)! "年"獸的傳說(shuō) 熬年的傳說(shuō) 萬(wàn)年創(chuàng)建歷法說(shuō) 中國(guó)古代歷法發(fā)展 <span class="search">春節(jié)</span>:傳統(tǒng)和現(xiàn)代 元宵燈節(jié)源于何時(shí)? 猜燈謎的來(lái)由 十二生肖的源流、排列與信仰 祭灶 掃塵 貼春聯(lián) 年畫(huà) 倒貼福字 除夕夜 ...</p><p class="link">www.chunjie.net.cn/ 46K 2006-12-18 - <span class="quick">百度快照</span></p><p class="title"><a href="#">喜迎2004<span class="search">春節(jié)</span>_TOM新聞</a></p><p class="content">?<span class="search">春節(jié)</span>流行三類(lèi)“拜年短信”:猴、祝福、個(gè)性 ?<span class="search">春節(jié)</span>期間電視節(jié)目早知道(1月19日-1月25日) ?猴年賀歲:短信 彩信...?TOM游戲與大家同過(guò)快樂(lè)<span class="search">春節(jié)</span> 一起來(lái)玩免費(fèi)網(wǎng)游! ?“對(duì)對(duì)聯(lián) 賀新春” 玩樂(lè)吧強(qiáng)檔推薦 許個(gè)愿吧 ?<span class="search">春節(jié)</span>聽(tīng)覺(jué)搜爆-...</p><p class="link">news.tom.com/hot/2004year/ 82K 2004-1-25 - <span class="quick">百度快照</span></p><p class="title"><a href="#"><span class="search">春節(jié)</span> 我把money獻(xiàn)給你_阿里巴巴</a></p><p class="content">編者按:新年、<span class="search">春節(jié)</span>、情人節(jié),一年中時(shí)尚男女血拼的最佳時(shí)節(jié)。商家借節(jié)造勢(shì),推出的攬客“花招”也是層出不窮…… 新春最受歡迎的開(kāi)...?<span class="search">春節(jié)</span>期間:這些生意好賺錢(qián)(一)(圖)01/20 ?鼎大祥“紅腰帶吉祥褲”銷(xiāo)售紅火01/18 <span class="search">春節(jié)</span> 這些生意好...</p><p class="link">info.china.alibaba.com/news/subject/v3000 ... 33K 2006-12-10 - <span class="quick">百度快照</span></p> </body> </html>
?
??????????? 效果圖：
?
?
2.2垂直對(duì)齊
vertical-align:top; ????????????????????? /* 頂端對(duì)齊 */
vertical-align:bottom; ?????????????? /* 底端對(duì)齊 */
vertical-align:middle; ??????????????? /* 中間對(duì)齊*/
???????????
???????????? 2.3首字母放大
?????????????????
<html> <head> <title>首字放大</title> <style> <!-- body{background-color:black; /* 背景色 */ } p{font-size:15px; /* 文字大小 */color:white; /* 文字顏色 */ } p span{ /*首字的樣式*/font-size:60px; /* 首字大小 */float:left; /* 首字下沉 */padding-right:5px; /* 與右邊的間隔 */font-weight:bold; /* 粗體字 */font-family:黑體; /* 黑體字 */color:yellow; /* 字體顏色 */ } --> </style></head> <body><p><span>這</span>幾天提高班里裝windows8的人很多，大家都想趕時(shí)髦弄上windows8嘗嘗鮮，我也想弄但是好多人裝了windows8以后還得把所有軟件重新裝，我現(xiàn)在的電腦是windows7，我有一個(gè)移動(dòng)移動(dòng)硬盤(pán)。</p> </br> </br> <p>我想也就是嘗嘗鮮沒(méi)有必要大刀闊斧的重裝系統(tǒng)吧這樣的話(huà)如果覺(jué)得windows8用的不習(xí)慣我還得重新刪了重新裝windows7我就想要不我裝在我的移動(dòng)硬盤(pán)里面。我就上網(wǎng)找了很多資料一開(kāi)始我</p> </body> </html>
?
?????????????????
?????????????? 效果圖：
???????????????
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/iplus/archive/2012/12/29/4490445.html
總結(jié)
以上是生活随笔為你收集整理的精通CSS+DIV网页样式与布局——CSS文字效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [结对2]必应缤纷桌面软件测试报告
- 下一篇： Microsoft Accelerato