亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

      考試首頁 | 考試用書 | 培訓(xùn)課程 | 模擬考場 | 考試論壇  
        當(dāng)前位置:設(shè)計(jì)制作 > CSS/HTML > 文章內(nèi)容
        

      5日精通CSS層疊樣式表(第2日)

       [ 2016年10月7日 ] 【

      2.1 第2日
      歡迎進(jìn)入串接樣式表第2天的課程,昨天我們已經(jīng)學(xué)習(xí)了如何使用及在網(wǎng)頁中加入串接樣式表,今天我們將深入學(xué)習(xí)串接樣式表每一項(xiàng)精彩絕倫的特點(diǎn)。
      今天我們主要學(xué)習(xí)字體,即如何控制字號,字模及加入特殊效果。想想如果只用HTML標(biāo)簽?zāi)隳茏龅竭@些嗎?接著往下讀。
      今天要學(xué)習(xí)的CSS特點(diǎn)包括:
      字模系列
      字號
      字重
      字體風(fēng)格
      字體參數(shù)
      文字變形
      文字修飾
      字體
      現(xiàn)在開始!

      2.2 按照字體名稱調(diào)用字體
      第1個(gè)問題:你如何指示瀏覽器顯示你希望的字體?僅僅在字模后面鍵入字體的名稱就行了嗎?
      很可惜,事情還不是這么簡單,字體在各個(gè)操作平臺之上叫的名稱可能會有變化。
      比如,Courier在MAC機(jī)上叫做COurier New。在一臺機(jī)器上可能叫Italic的字體在另一臺機(jī)器上可能就叫做Oblique。你仔細(xì)研究
      之后會發(fā)現(xiàn)更多的這樣的例子。
      所以,我們稱呼一種字體的名稱并不一定就是計(jì)算機(jī)對這種字體的名稱。而你必須確定使你所用的字體名稱就是計(jì)算機(jī)所以的字體名稱。
      那么你怎么確定計(jì)算機(jī)對一種字體的確切名稱是什么呢?這取決于于計(jì)算機(jī)所用的操作平臺。
      Windows的用戶:使用應(yīng)用軟件比如word中的字體菜單中所列出的確切的字體名稱。
      Mac機(jī)用戶:不要相信應(yīng)用軟件給你列出的字體名稱。而應(yīng)該打開你的system
      folder,按照其中對字體的拼寫在你的樣式表中使用字體名稱。
      字模系列
      字模系列就是CSS中稱呼一種字體的名稱屬
      性。其基本語法如下:
      H2 {"gill sans", "new
      baskerville", serif }
      行內(nèi)加入的CSS規(guī)則,使用單引號:
      <P>Text
      goes here.</P>
      如果你將CSS規(guī)則的說明組合在一起,而其中又包含字模系列,將字模系列列在最后,例:
      H2 { color: red; margin:
      10px;FONT
      FACE>標(biāo)簽時(shí)將擁有更大的靈活性。

      2.3 對字號的控制
      利用HTML你只能<FONT SIZE=X?>設(shè)定7種字號,很令人沮喪,是吧?但等你看完本頁之后,你將會發(fā)出一聲長長的WOOOOOOOOOOOW!
      字號
      使用font-size 屬性,你可以對文字的尺寸進(jìn)行無限的控制。
      確定這的3種基本方法:
      Points, ems, pixels, 及其它單位
      關(guān)鍵字
      比例參數(shù)
      Points, Ems, Pixels, 及其它單位
      樣式表可以識別許多種確定一種要素尺寸的不同單位:
      第1種, points:
      P { font-size: 16pt }
      這條代碼告訴瀏覽器以16 points(點(diǎn))的尺寸顯示<P>。
      Points是確定文字尺寸非常好的單位,因?yàn)樗谒械臑g覽器和操作平臺上都適用。你唯一需要留意的就是在缺省設(shè)置下,PC機(jī)中顯示的字要比MAC機(jī)中顯示的大一些。
      如果這一點(diǎn)對你來說很重要的話,你可以利用javascript識別不同人所使用的操作平臺,然后根據(jù)不同的平臺鏈接相應(yīng)的CSS文件。若想學(xué)習(xí)制作方法,請點(diǎn)擊learnhow。
      Points, like all other units, work as small or as
      big as you want (that was 8
      points and 80 points, respectively).
      以上語句采用CSS font-size屬性制作。如果你的瀏覽器不支持這種屬性,請點(diǎn)擊這里查看顯示效果。
      下一個(gè)單位,EM:
      P { font-size: 20pt }
      B { font-size: 1.5em }
      em 是和point相同的距離單位。在樣式表中,em指母體要素的尺寸。所以,在上例中,所有包含在<P>中的<B>的文字的尺寸將是30points(因?yàn)?lt;B>中的找是母體字號(20pt)的1.5倍。
      但是,瀏覽器對em不是很支持,所以你還是最好用point單位。
      下一個(gè)單位,pixels:
      P { font-size: 20px }
      從網(wǎng)頁設(shè)計(jì)的角度來說,pixel(象素)是一個(gè)非常熟悉的單位,它最大的優(yōu)點(diǎn)就在于所有的操作平臺都支持pixel單位(而對于其它的單位來說,PC機(jī)的文字總是顯得比MAC機(jī)中大一些。
      而其不利之處在于,當(dāng)你使用pixels單位時(shí),網(wǎng)頁的屏幕顯示不穩(wěn)定,字體時(shí)大時(shí)小,甚至有時(shí)根本不顯示,而points
      單位則沒有這種問題。
      其它單位:如果上述單位仍然不符合你的要求,請?jiān)囋囘@些單位:
      in (英寸)
      cm (厘米)
      mm (毫米)
      pc (打字機(jī)字型尺寸單位)
      ex (x-height)
      關(guān)鍵字
      如果你不喜歡使用這些單位,你還可以選擇以關(guān)鍵字說明文字尺寸,例:
      P { font-size: large }
      有7種關(guān)鍵字,相對應(yīng)于<FONTSIZE>中所用的數(shù)字參數(shù):
      xx-small
      x-small
      small
      medium
      large
      x-large
      xx-large
      利用這些參數(shù),Web瀏覽器可以自由決定每一種關(guān)鍵字所適合的尺寸。例如:在Netscape
      Communicator中x-large的尺寸為28points,而在IE 4(windows及MAC)中為24points,而在Win
      95下的IE 3中為18points。
      還要兩種相對尺寸關(guān)鍵字:
      smaller
      larger
      smaller參數(shù)告訴瀏覽器將當(dāng)前文字在關(guān)鍵字規(guī)格基礎(chǔ)上“縮小一級”,例如,如果large字號的文字應(yīng)用smaller參數(shù),則其字號變成了midium尺寸。larger參數(shù)的作用類似。
      (注意:IE 3不支持smaller或larger參數(shù)。)
      比例參數(shù)
      設(shè)定文字尺寸的第3種辦法就是使用比例參數(shù),例:
      P { font-size: 15pt }
      B { font-size: 300% }
      這些規(guī)則的含義為:使所有包含在<P>中的的<B>文字的尺寸為<P>尺寸設(shè)定值的3倍,即45
      points。比例參數(shù)常用于從母體要素繼承的參數(shù)值。
      瀏覽器對比例參數(shù)比較挑剔,所以你必須經(jīng)常測試。
      有了這么多的選擇是不是很讓人高興呢?由于有了font-size屬性,我們能夠隨意調(diào)整文字的尺寸,如同以下的例子所示:(每一個(gè)字母i都比前一個(gè)大5pt)

      首頁 1 2 3 尾頁
      將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動訪問考試網(wǎng) | 復(fù)制本頁地址,傳給QQ/MSN上的好友 | 申請鏈接 | 意見留言 TOP
      關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
      Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved