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