1. 程式人生 > >精通CSS+DIV網頁樣式與佈局 CSS文字效果

精通CSS+DIV網頁樣式與佈局 CSS文字效果

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               

       上篇文章,小編簡單的介紹了一下CSS的一些基本語法,學習內容不是很複雜,都是CSS的一些入門知識,但是萬丈高樓平地起,搭好地基,高樓大廈不在話下,學習任何課程,都必須從基礎開始,一步一個腳印,踏實堅定的往下走,今天這篇博文,小編主要簡單總結一下CSS的文字效果,首先,我們來看一張圖:

         

        接下來,小編會隨著上面圖示的脈絡,一一進行講解,都是一下簡單的知識,有興趣的小夥伴,可以動手和小編一起來實現以下程式碼例項。

        文字的字型

        在CSS中,我們採用了font-family來控制文字的字型,接著,我們來看一個例子,以及執行效果:

        

<html><head
>
 <title>文字字型</title><style><!--h2font-family:黑體, 幼圓;}pfont-family:Arial, Helvetica, sans-serif;}p.kaitifont-family:楷體_GB2312, "Times New Roman";}--></style>   </head>
<body> <h2>送別</h2> <p>長亭外,古道邊,芳草碧連天。晚風拂柳笛聲殘,夕陽山外山。天之涯,地之角,知交半零落。一瓠濁酒盡餘歡,今宵別夢寒。長亭外,古道邊,芳草碧連天。問君此去幾時來,來時莫徘徊。天之涯,地之角,知交半零落。人生難得是歡聚,惟有別離多。</p> <p class="kaiti">作者: 李叔同</
p></body></html>
           效果如下:

        

        分析上面的這段程式碼,我們先看h2裡邊,有“font-family:黑體,幼圓;"這個的意思是:h2標記的裡邊,若是有黑體就用黑體,沒有黑體就用幼圓,下面的P標籤和作者也是一樣,效果如上圖所示。

        文字的大小

        學習完了文字的字型,我們來看一下文字的大小,例子程式碼以及執行效果如下:

        

<span style="font-size:18px;"><html><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></html></span>
        效果如下:

        

        上面的小例子,一共採用了無行來做對比,第一行.05in,第二行0.5cm,第三行4mm,第四行12pt,第五行2pc,從上面的程式碼我們可以看出來CSS控制文字大小是通過font-size來實現的。

        文字的顏色

        例子的程式碼和執行效果如下所示:

        

<span style="font-size:18px;"><html><head> <title>文字顏色</title><style><!--h2{ color:rgb(0%,0%,80%); }pcolor:#333333font-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></html></span>
       執行效果如下所示:

       

       文字顏色的表示方法有很多種,看h2裡邊的color:rgb(0%,0%,80%),採用了百分比來顯示,P標誌採用了十六進位制來表示,span標誌則直接是blue。

       文字的粗細

       我們繼續看文字的另外一個效果:粗細效果,我們為了一一顯示文字的粗細,採用了非常多行來進行對比,例子程式碼和執行效果如下所示:

       

<span style="font-size:18px;"><html><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></html></span>
        執行效果如下:

        

       100、200、300、400都沒有太大的區別,一直到500開始,他們的顯示效果跟bold粗體是一樣的,而100~400在直觀上看跟normal是一樣的。

        文字斜體

        文字的斜體,在CSS中控制斜體是通過font-style來控制的,如果是italic則表示是斜體,normal則表示是常規的。我們看例子程式碼以及執行效果:

        

<span style="font-size:18px;"><html><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></html></span>

        執行效果如下:

       
       下劃線,頂劃線,刪除線

       例子程式碼和效果如下所示:

       

<span style="font-size:18px;"><html><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></html></span>

        執行效果如下:

        
        從上面的程式碼我們很明顯的可以看出,text-decoration的屬性裡邊,通過underline、overline、line-through、blink.進行效果顯示。

        英文字母大小寫

        例子程式碼和執行效果如下所示

        

<span style="font-size:18px;"><html><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></html></span>

        執行效果如下:

        
       text-transform屬性裡邊,capitalize(單詞首字母大寫)、uppercase(全部大寫)、lowerca(全部小寫)。我們的效果圖進行了很好的對比。我們通過一個簡單的例項來模擬google公司的logo,例子程式碼和執行效果如下所示:

        

<span style="font-size:18px;"><html><head> <title>Google</title><style><!--pfont-size:80pxletter-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></html></span>

        執行效果如下:

        

       小編寄語:該博文,小編主要介紹了CSS的文字效果,包括文字的字型,文字的大小, 文字的顏色,文字的粗細,文字斜體,下劃線、頂劃線、刪除線,以及英文字母的大小寫,這些知識都是基本的CSS設定文字的一些知識,不難,關鍵就在於多動手,多實踐,CSS讓我們的介面活了起來,動了起來,BS學習,未完,待續......           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述