• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 如何在網(wǎng)頁制作時使用CSS定義文本樣式(二)

        定義粗體

        網(wǎng)站建設(shè)時,CSS使用font-weight屬性來定義字體粗細,該屬性用法如下:

        font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

        font-weight屬性取值比較特殊,其中normal關(guān)鍵字表示默認值,即正常的字體,相當(dāng)于取值為400。bold關(guān)鍵字表示粗體,相當(dāng)于取值為700,或者使用<b>標(biāo)簽定義的字體效果。bolder(較粗)和lighter(較細)相對于normal字體粗細而言。

        另外在制作網(wǎng)頁時也可以設(shè)置值為100、200、300、400、500、600、700、800、900,它們分別表示字體的粗細,是對字體粗細的一種量化方式,值越大就表示越粗,相反就表示越細。

        【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<body>標(biāo)簽中輸入以下內(nèi)容:

        <p>明月幾時有? 文字粗細是normal</p>

        <h1>明月幾時有?文字粗細是700</h1>

        <div>明月幾時有? 文字粗細是bolder</div>

        <p class="bold">明月幾時有? 文字粗細是bold</p>

        在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,分別定義段落文本、一級標(biāo)題、<div>標(biāo)簽包含字體的粗細效果,同時定義一個粗體樣式類。

        p { font-weight: normal }     /*等于400*/

        h1 { font-weight: 700 }       /*等于bold*/

        div{ font-weight: bolder }    /*可能為500*/.

        bold { font-weight:bold; }   /*加粗顯示*/設(shè)置字體的粗細提示:設(shè)置字體粗細也可以稱為定義字體的重量。對于中文網(wǎng)頁設(shè)計來說,一般僅用到bold(加粗)、normal(普通)兩個屬性值即可。

        定義斜體

        制作網(wǎng)頁的時候,CSS使用font-style屬性來定義字體傾斜效果,該屬性用法如下:font-style : normal | italic | oblique其中,normal表示默認值,即正常的字體;italic表示斜體;oblique表示傾斜的字體。italic和oblique兩個取值只能在英文等西方文字中有效。

        【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<head>標(biāo)簽內(nèi)添加<styletype= "text/css">標(biāo)簽,定義一個內(nèi)部樣式表,輸入下面樣式,定義一個斜體樣式類。

        .italic 

        {font-size:24px;    

        font-style:italic;                             /*斜體*/}

        然后在<body>標(biāo)簽中輸入一行段落文本,并把斜體樣式類應(yīng)用到該段落文本中。

        <p>設(shè)置<span class="italic">文字斜體 

        </span></p>

        定義下劃線

        CSS使用text-decoration屬性來定義字體下劃線、刪除線和頂劃線效果,該屬性用法如下:text-decoration : none || underline || overline || line-through || blink其中,none表示默認值,即無裝飾字體;un-derline表示下劃線效果;line-through表示刪除線效果,overline表示頂劃線效果;blink表示閃爍效果。

        【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<head>標(biāo)簽內(nèi)添加<styletype= "text/css">標(biāo)簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,定義3個裝飾字體樣式類。

        .underline {text-decoration:underline;}           /*下劃線樣式類*/

        .overline {text-decoration:overline;}             /*頂劃線樣式類*/

        .line-through {text-decoration:line-through;}     /*刪除線樣式類*/

        然后在<body>標(biāo)簽中輸入3行段落文本,并分別應(yīng)用上面的裝飾類樣式。

        <p class="underline">設(shè)置下劃線</p>

        <p class="overline">設(shè)置頂劃線</p>

        <p class="line-through">設(shè)置刪除線</p>

        定義大小寫

        CSS使用font-variant屬性來定義字體大小效果,該屬性用法如下:font-variant : normal | small-caps其中,normal表示默認值,即正常的字體;small-caps表示小型的大寫字母字體。

        【示例1】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<head>標(biāo)簽內(nèi)添加<styletype= "text/css">標(biāo)簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,定義一個類樣式。

        .small-caps {/*小型大寫字母樣式類*/     font-variant:small-caps;}

        然后在<body>標(biāo)簽中輸入一行段落文本,并應(yīng)用上面定義的類樣式。

        <p class="small-caps">font-variant </p>

        注意:font-variant僅支持英文為代表的西文字體,中文字體沒有大小寫效果區(qū)分。如果設(shè)置了小型大寫字體,但是該字體沒有找到原始小型大寫字體,則瀏覽器會模擬一個。例如,可通過使用一個常規(guī)字體,并將其小寫字母替換為縮小過的大寫字母。

        【拓展】CSS還定義了一個text-transform屬性,該屬性也能夠定義字體大小寫效果。不過該屬性主要定義單詞大小寫樣式,用法格式如下:text-transform : none | capitalize | uppercase | lowercase其中,none表示默認值,無轉(zhuǎn)換發(fā)生;capi-talize表示將每個單詞的第一個字母轉(zhuǎn)換成大寫,其余無轉(zhuǎn)換發(fā)生;uppercase表示把所有字母都轉(zhuǎn)換成大寫;lowercase表示把所有字母都轉(zhuǎn)換成小寫。

        【示例2】新建一個網(wǎng)頁,保存為test.html,在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,定義3個類樣式。

        .capitalize {/    text-transform:capitalize;          /*首字母大寫*/}

        .uppercase {    text-transform:uppercase;          /*全部大寫*/}

        .lowercase {    text-transform:lowercase;         /*全部小寫*/}

        然后在<body>標(biāo)簽中輸入3行段落文本,并分別應(yīng)用上面定義的類樣式。

        <p class="capitalize">

        text-transform:capitalize;</p>

        <p class="uppercase">

        text-transform:uppercase;

        </p><p class="lowercase">

        text-transform:lowercase;</p>

        分別在IE和Firefox瀏覽器中預(yù)覽,則會發(fā)現(xiàn):IE認為只要是單詞就把首字母轉(zhuǎn)換為大寫;而Firefox認為只有單詞通過空格間隔之后,才能夠成為獨立意義上的單詞,所以幾個單詞連在一起時就算作一個詞。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>