<output id="jbxdv"></output>

      1. 如何在網頁制作時使用CSS定義文本樣式(一)

        • 2019-07-29 16:28:57
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        制作網站時,字體樣式涉及文字型體效果,包括字體類型、字體大小、字體顏色等基本效果,還包括字體粗細、下劃線、斜體、大小寫等特殊效果。文本樣式主要涉及文本排版效果?!?/span>

        定義字體類型

        CSS使用font-family屬性來定義字體類型,另外使用font屬性也可以定義字體類型。   

        ?font-family是字體類型專用屬性,用法如下:

        font-family : namefont-family : ncursive | 

        fantasy | monospace 

        | serif | sans-serif

        name表示字體名稱,可指定多種字體,多個字體將按優先順序排列,以逗號隔開。在網頁設計時,如果字體名稱包含空格,則應使用引號括起。第二種聲明方式使用所列出的字體序列名稱,如果使用fantasy序列,將提供默認字體序列。   

        ?font是一個復合屬性,該屬性能夠設置多種字體屬性,用法如下:

        font : font-style || font-variant || font-weight || font-size || line-height || 

        font-familyfont : caption | icon | menu | message-box | small-caption | status-bar屬性值之間以空格分隔。

        font屬性至少應設置字體大小和字體類型,且必須放在后面,否則無效。前面可以自由定義字體樣式、字體粗細、大小寫和行高,詳細講解將在后面內容中分別介紹。

        【示例】啟動Dreamweaver,新建一個網頁,保存為test.html,在<body>標簽內輸入一行段落文本。

        <p>定義字體類型</p>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義網頁字體的類型。

        body {    font-family:Arial, Helvetica, 

        sans-serif;       /*字體類型*/}

        p {/* 段落樣式 */    font:14px "黑體";                              

        /*14像素大小的黑體字體*/}

        中文網頁字體一般多定義為宋體類型,對于標題或特殊提示信息,如果需要特殊字體,則建議采用圖像形式來間接實現。原因在網頁設計時是中文字體類型比較少,通用字體類型就更少了,字體的表現力比較弱,即使存在各種藝術字體,但是恐于藝術字體的應用范圍窄,很少被設計師用來作為網頁字體使用。

        定義字體大小

        CSS使用font-size屬性來定義字體大小,該屬性用法如下:

        font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

        其中,xx-small(最?。?、x-small(較?。?、small(?。?、medium(正常)、large(大)、x-large(較大)、xx-large(最大)表示絕對字體尺寸,這些特殊值將根據對象字體進行調整。

        larger(增大)和smaller(減少)這對特殊值能夠根據父對象中字體尺寸進行相對增大或者縮小處理,使用成比例的em單位進行計算。

        length可以是百分數,或者浮點數字和單位標識符組成的長度值,但不可為負值。其百分比取值是基于父對象中字體的尺寸來計算,與em單位計算相同。

        【示例】啟動Dreamweaver,新建一個網頁,保存為test.html,在<body>標簽中輸入以下內容:

        <div>     

        <p class="p1">明月幾時有?  0.6in</p>     

        <p class="p2">明月幾時有?  0.8em</p>     

        <p class="p3">明月幾時有?  2cm</p>     

        <p class="p4">明月幾時有?  16pt</p>     

        <p class="p5">明月幾時有?  2pc<

        /p></div>在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,分別設置各個段落中的字體大小。div{font-size:20px;}                  /*以像素為單位設置div標簽字體大小*/

        .p1{ font-size: 0.6in; }              /*以英寸為單位設置字體大小*/

        .p2{ font-size: 0.8em; }              /*以父級字體大小為參考設置大小*/

        .p3{ font-size: 2cm ; }               /*以厘米為單位設置字體大小*/

        .p4{ font-size: 16pt; }               /*以點為單位設置字體大小*/

        .p5{ font-size: 2pc; }                /*以皮卡為單位設置字體大小*/

        當前文章標題:如何在網頁制作時使用CSS定義文本樣式(一)

        當前URL:http://www.freenetsites.com/news/wzzz/3062.html

        上一篇:如何在網頁設計時設置格式和列表

        下一篇:如何在網頁制作時使用CSS定義文本樣式(二)

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>