【CSS+DIV】設定文字效果
阿新 • • 發佈：2019-01-07
一、文字樣式
1、字型、大小、顏色、粗細、斜體
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>文字字型</title> <style> <!-- h2{ font-family:黑體, 幼圓; } p{ font-family:Arial, Helvetica, sans-serif; } p.kaiti{ font-family:楷體_GB2312, "Times New Roman"; } --> </style> </head> <body> <h2>立 春</h2> <p>自秦代以來，我國就一直以立春作為春季的開始。立春是從天文上來劃分的，而在自然界、在人們的心目中，春是溫暖，鳥語花香；春是生長，耕耘播種。在氣候學中，春季是指候（5天為一候）平均氣溫10℃至22℃的時段。</p> <p class="kaiti">作者: isaac</p> </body></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>文字大小</title> <style> <!-- p.inch{ font-size: 0.5in; } p.cm{ font-size: 0.5cm; } p.mm{ font-size: 4mm; } p.pt{ font-size: 12pt; } p.pc{ font-size: 2pc; } --> </style> </head> <body> <p class="inch">文字大小，0.5in</p> <p class="cm">文字大小，0.5cm</p> <p class="mm">文字大小，4mm</p> <p class="pt">文字大小，12pt</p> <p class="pc">文字大小，2pc</p> </body> </span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>文字顏色</title> <style> <!-- h2{ color:rgb(0%,0%,80%); } p{ color:#333333; font-size:13px; } p span{ color:blue; } --> </style> </head> <body> <h2>冬至的由來</h2> <p><span>冬至</span>過節源於漢代，盛於唐宋，相沿至今。《清嘉錄》甚至有“<span>冬至</span>大如年”之說。這表明古人對<span>冬至</span>十分重視。人們認為<span>冬至</span>是陰陽二氣的自然轉化，是上天賜予的福氣。漢朝以<span>冬至</span>為“冬節”，官府要舉行祝賀儀式稱為“賀冬”，例行放假。《後漢書》中有這樣的記載：“<span>冬至</span>前後，君子安身靜體，百官絕事，不聽政，擇吉辰而後省事。”所以這天朝庭上下要放假休息，軍隊待命，邊塞閉關，商旅停業，親朋各以美食相贈，相互拜訪，歡樂地過一個“安身靜體”的節日。</p> <p>唐、宋時期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在這天要到郊外舉行祭天大典，百姓在這一天要向父母尊長祭拜，現在仍有一些地方在<span>冬至</span>這天過節慶賀。</p> </body></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>文字粗體</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }
span.four{ font-weight:400; }
span.five{ font-weight:500; }
span.six{ font-weight:600; }
span.seven{ font-weight:700; }
span.eight{ font-weight:800; }
span.nine{ font-weight:900; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style>
</head>
<body>
<h1>文字<span>粗</span>體</h1>
<span class="one">文字粗細:100</span>
<span class="two">文字粗細:200</span>
<span class="three">文字粗細:300</span>
<span class="four">文字粗細:400</span>
<span class="five">文字粗細:500</span>
<span class="six">文字粗細:600</span>
<span class="seven">文字粗細:700</span>
<span class="eight">文字粗細:800</span>
<span class="nine">文字粗細:900</span>
<span class="ten">文字粗細:bold</span>
<span class="eleven">文字粗細:normal</span>
</body></span></pre><pre code_snippet_id="1929513" snippet_file_name="blog_20161014_6_7761193" name="code" class="html"><span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>文字斜體</title>
<style>
<!--
h1{ font-style:italic; } /* 設定斜體 */
h1 span{ font-style:normal; } /* 設定為標準風格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style>
</head>
<body>
<h1>文字<span>斜</span>體</h1>
<p class="one">文字斜體</p>
<p class="two">文字斜體</p>
</body></span>2、下劃線、頂劃線、刪除線
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>文字下劃線、頂劃線、刪除線</title>
<style>
<!--
p.one{ text-decoration:underline; } /* 下劃線 */
p.two{ text-decoration:overline; } /* 頂劃線 */
p.three{ text-decoration:line-through; } /* 刪除線 */
p.four{ text-decoration:blink; } /* 閃爍 */
-->
</style>
</head>
<body>
<p class="one">下劃線文字，下劃線文字</p>
<p class="two">頂劃線文字，頂劃線文字</p>
<p class="three">刪除線文字，刪除線文字</p>
<p class="four">文字閃爍</p>
<p>正常文字對比</p>
</body></span>3、英文字母大小寫
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>英文字母大小寫</title>
<style>
<!--
p{ font-size:17px; }
p.one{ text-transform:capitalize; } /* 單詞首字大寫 */
p.two{ text-transform:uppercase; } /* 全部大寫 */
p.three{ text-transform:lowercase; } /* 全部小寫 */
-->
</style>
</head>
<body>
<p class="one">quick brown fox jumps over the lazy dog.</p>
<p class="two">quick brown fox jumps over the lazy dog.</p>
<p class="three">QUICK Brown Fox JUMPS OVER THE LAZY DOG.</p>
</body></span>二、文字例項：模擬Google公司Logo
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>Google</title>
<style>
<!--
p{
font-size:80px;
letter-spacing:-2px; /* 字母間距 */
font-family:Arial, Helvetica, sans-serif;
}
.g1, .g2{ color:#184dc6; }
.o1, .e{ color:#c61800; }
.o2{ color:#efba00; }
.l{ color:#42c34a; }
-->
</style>
</head>
<body>
<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
</body></span>
三、CSS段落文字
1、水平、垂直對齊
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>水平對齊</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; } /* 左對齊 */
p.right{ text-align:right; } /* 右對齊 */
p.center{ text-align:center; } /* 居中對齊 */
p.justify{ text-align:justify; } /* 兩端對齊 */
-->
</style>
</head>
<body>
<p class="left">
這個段落採用左對齊的方式，text-align:left，因此文字都採用左對齊。<br>
床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="right">
這個段落採用右對齊的方式，text-align:right，因此文字都採用右對齊。<br>
床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="center">
這個段落採用居中對齊的方式，text-align:center，因此文字都採用居中對齊。<br>
床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="justify">
這個段落採用左對齊的方式，text-align:justify，因此文字都採用左對齊。床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。<br>李白
</p>
</body></span><span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>垂直對齊</title>
<style>
<!--
td.top{ vertical-align:top; } /* 頂端對齊 */
td.bottom{ vertical-align:bottom; } /* 底端對齊 */
td.middle{ vertical-align:middle; } /* 中間對齊 */
-->
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="top">垂直對齊方式，top</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="bottom">垂直對齊方式，bottom</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="middle">垂直對齊方式，middle</td>
</tr>
</table>
</body></span>2、行間距、字間距
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head>
<title>行間距</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt; /* 行間距，絕對數值，行間距小於字型大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行間距，相對數值 */
}
-->
</style>
</head>
<body>
<p class="one">秋分，我國古籍《春秋繁露、陰陽出入上下篇》中說：“秋分者，陰陽相半也，故晝夜均而寒暑平。”“秋分”的意思有二：一是太陽在這時到達黃徑180。一天24小時晝夜均分，各12小時；二是按我國古代以立春、立夏、立秋、立冬為四季開始的季節劃分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分時節，我國長江流域及其以北的廣大地區，均先後進入了秋季，日平均氣溫都降到了22℃以下。北方冷氣團開始具有一定的勢力，大部分地區雨季剛剛結束，涼風習習，碧空萬里，風和日麗，秋高氣爽，丹桂飄香，蟹肥菊黃，秋分是美好宜人的時節。</p>
<p class="third">秋季降溫快的特點，使得秋收、秋耕、秋種的“三秋”大忙顯得格外緊張。秋分棉花吐絮，菸葉也由綠變黃，正是收穫的大好時機。華北地區已開始播種冬麥，長江流域及南部廣大地區正忙著晚稻的收割，搶晴耕翻土地，準備油菜播種。</p>
</body></span>3、首行放大
<span style="font-family:KaiTi_GB2312;font-size:18px;"><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; /* 字型顏色 */
}
/*
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑體;
color:yellow;
}
p:first-line{
text-decoration:underline;
}*/
-->
</style>
</head>
<body>
<p><span>中</span>秋節是遠古天象崇拜</p>
<p>北宋，。</p>
</body></span>四、段落例項：百度搜索
<span style="font-family:KaiTi_GB2312;font-size:18px;"><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></span>