<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

    <listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

      <address id="jxdzp"></address>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

          訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

          網頁制作CSS中常用的單位

          深山行者個人網站 2007/11/24 22:12:02 深山行者 字體: 瀏覽 6508

          一、長度單位

            長度單位是Web頁設計中最常用的一個單位。一個排列無序、雜亂無章的頁面不可能給人們留下什么好的印象。于是,在設計的時候需要為元素的位置、尺寸精確地定義一些值,以使其達到預期的效果。

                CSS的主要功能之一就是CSS定位,這個定位的概念即包括位置的定位,也包括尺寸的定位。無論哪一種,都需要使用長度單位,不然,精確定位就無從談起。

            在CSS中,長度是一種度量尺寸,用于寬度、高度、字號、字和字母間距、文本的縮排、行高、頁邊距、貼邊、邊框線寬以及許許多多的其他屬性。

            1.定義長度

            在Dreamweaver 中要定義長度,首先應該在所選擇的選項后面的文本框中寫符號部分,這個符號可以是“+”(正號),表示正長度值,也可以是“-”(負號),表示負長度值。如果不寫符號,那么默認值是“+”。在符號后緊接著是一個數值,這個數值可以是整數,也可以是小數。然后再在該選項的長度單位下拉列表框中選擇一種長度單位。長度單位一般是一個由兩個字母組成的單位縮寫,例如cm,pt,em等。

            2.絕對長度單位

            網頁定義上常常使用的絕對長度值由厘米(cm)、毫米(mm)、英寸(in)、點(pt)、派卡(pc)等等。

            單位 英寸(in) 厘米(cm) 毫米(mm) 磅(pt) 派卡(pc)

            英寸 1.0 2.54 25.4 72 6

            派卡 0.16667 0.4233 4.233 12 1.0

            厘米 0.3937 1 10 28.3464 4.7244

            毫米 0.03937 0.1 1.0 2.83464 0.47244

            磅 0.01389 0.0352806 0.352806 1.0 0.83333

            絕對長度值的使用范圍比較有限,只有在完全知道外部輸出設備的具體情況下,才使用絕對長度值。也就是說,絕對長度值最好用于打印機輸出設備,而在僅僅作為屏幕顯示時,使用絕對長度值意義不大,應該盡量使用相對長度值。

            3.相對長度值

            每一個瀏覽器都有其自己默認的通用尺寸標準,這個標準可以由系統決定,也可以由用戶按照自己的愛好進行設置。因此,這個默認值尺寸往往是用戶覺得最適合的尺寸。于是使用相對長度值,就可以是需要定義尺寸的元素按照默認大小為標準,相應地按比例縮放。這樣就不可能產生難以辨認的情況。其實,百分比單位以及關鍵字都能產生相類似的效果。

            CSS還支持下列三種長度的相對單位:em(當前字體中字母M的寬度)、ex(當前字體中字母X的高度)、px(一個象素的大小)。

            使用em和ex的目的就是為所給的字體設置合適的寬度,而沒有必要知道字體有多大,在顯示時,可通過比較當前字體中的M和X來確定。字體越大,所對應的em和ex也就越大。

            以象素為單位的長度是相對于顯示器上的象素(或許為方形)的高度和寬度。影像的寬度和高度經常是以象素給出的。象素測量法通常不是個好方法。首先,象素的大小依分辯率變化較大,大多數用戶都會將顯示器設置成盡可能高的分辯率,從而導致象素太小,而無法閱讀。

            二、百分比單位

            在Dreamweaver 中要使用百分比,首先應該在所選擇的選項后面的文本框中寫符號部分,這個符號可以是“+”(正號),表示正長度值,也可以是“—”(負號),表示負長度值。如果不寫符號,那么默認值是“+”。在符號后緊接著是一個數值,符號后面可以輸入任意值,但是由于在某些情況下,瀏覽器不能處理帶小數的百分數,因此最好不用帶小數的百分比。然后再在該選項的長度單位下拉列表框中選擇“%”。

            百分比總是相對于另一個值來說的。那個值可以是長度單位或是其他的。每一個可以使用百分比值單位指定的屬性同時也自定義了這個百分比值的參照值。大多數情況下,這個參照值是此元素本身的字體大小。

            三、顏色單位

            大量地使用圖片可能會使網頁富有生氣。但是,每一個上過網的人都有為等待一個圖片而焦急不安的經歷。其實,適當地在不同的部位使用不同的顏色,也能起到類似圖片的效果,把讀者的注意力吸引到關鍵的部分,然而,下載網頁的時間卻大幅度地減少了。

            color屬性用來定義一個元素的前景顏色,在大多數情況下,這個元素中所包含的使文本對象。使用color屬性同時還可以用來決定一個元素邊框的顏色。通用的定義顏色的語法是:color:顏色值。

            定義顏色值最簡單也最直接的方法是使用百分比值。在這種情況下,紅、綠、藍顏色值的等級用百分比數來確定。格式是:color:rgb(R%,G%,B%)。使用百分比值來指定顏色還有一個好處是它能夠聲明一組真正的數字,不論它的值是多少。

            指定顏色的另一種方法是使用范圍在0~255之間的整數來設置。格式是color:rgb(128,128,128)。

            定義顏色的第三種方法是使用十六進制數組定義顏色。這種定義的方法對于經常進行程序設計的人來說比較熟悉。定義顏色時使用三個前后按順序排列的十六進制數組表示,例如“#FC0EA8”。這種定義的方式就是形如#RRGGBB的格式。即在紅、綠、藍的位置上添上需要的十六進制值。

            四、URL單位

            URL單位和鏈接的地址有關。所謂URL就是“Uniform Resource Locator”的簡寫,鏈接是網頁的靈魂。通過鏈接的方式可以使各個網頁之間聯接起來,使網站中眾多的頁面構成一個有機整體,使訪問者能夠在各個頁面之間跳轉。鏈接可以是一段文本,一幅圖像或其他網頁元素,當在瀏覽器中用鼠標單擊這些對象時,瀏覽器可以根據其指示載入一個新的頁面或者跳轉到頁面的其他位置。

            在創建鏈接的過程中,路徑是非常重要的。Dreamweaver 中有兩種路徑:絕對路徑和相對路徑,其中相對路徑可分為和根目錄相對的路徑及和文當相對的路徑。

            絕對路徑時含服務器協議(在網頁上通常是http://或ftp://)的完全路徑。絕對路徑包含的是精確位置而不用考慮源文檔的位置。但是如果目標文檔被移動,則鏈接無效。創建對當前站點以外文件的鏈接時必須使用絕對路徑。

            和根目錄相對的路徑總是從當前站點的根目錄開始。站點上的所有可以公開的文件都存放在站點的根目錄下。和根目錄相對的路徑使用斜杠告訴服務器從根目錄開始。例如,/ Dreamweaver /index.html將鏈接到站點根目錄Dreamweaver文件夾的index.html文件。如果要在內容經常被移動的環境中鏈接文件,那么使用和根目錄相對的路徑往往是最佳的方法。在使用與根目錄相對的路徑時,包含鏈接的文檔在站點內移動,鏈接不會中斷。但是,和根目錄相對的路徑和適合于本地查看站點,在這種情況下,可以使用和文檔相對的路徑。

                注意:當在瀏覽器中按照本地方式預覽文件時,和根目錄相對的路徑所鏈接的內容不會出現。這是因為瀏覽器不能像服務器那樣識別站點根目錄,要預覽和根目錄相對的路徑所鏈接的內容,必須將文件放置到遠程服務器并從那里進行查看。

            和文檔相對的路徑是指和當前文檔所在的文件夾相對的路徑。例如文檔test.swf在文件夾Flash中,它指定的就是當前文件夾內的文檔?!?test.swf指定的則是當前文件夾上級目錄中的文檔;而/test/test.swf指定是 Flash文件夾下test文件夾中的test.swf文檔。和文檔相對的路徑通常是最簡單的路徑,可以用來鏈接總是和當前文檔在同一文件夾中的文件。

            注意:在創建和文檔相對的路徑之前必須保存新文件,因為在沒有定義起始點的情況下,和文檔相對的路徑是無效的。在文檔保存之前,Dreamweaver 會自動使用以File://開始的絕對路徑。

          后一頁:關于css
          相關閱讀
          微信公眾號回復圖片消息或用客服接口推送圖片消息
          從空格談起--關于CSS模塊化設計
          深山留言板5.0新版
          asp截取字符串:根據右邊第一個點(.)去掉擴展名
          旅行社網站模板默認風格13
          劉瀏家俱
          CSS或js實現行間交替背景色效果
          深山旅行社網站管理系統 v1.3發布
          共有0條關于《網頁制作CSS中常用的單位》的評論
          發表評論
          正在加載評論......
          返回頂部發表評論
          呢 稱:
          表 情:
          內 容:
          評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
          驗證碼: 驗證碼 
          網友評論聲明,請自覺遵守互聯網相關政策法規。

          您發布的評論即表示同意遵守以下條款:
          一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
          二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
          三、本站對您所發布內容擁有處置權。

          更多信息>>欄目類別選擇
          百度小程序開發
          微信小程序開發
          微信公眾號開發
          uni-app
          asp函數庫
          ASP
          DIV+CSS
          HTML
          python
          更多>>同類信息
          jquery設置或獲取修改classname
          利用css3.0寫出一個音樂播放的唱片碟盤的效果
          利用css中的scale()實現放大縮小效果
          利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數字讓背景色透明
          css背景使用base64編碼或者將base64編碼放在img圖片標簽中
          利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉
          更多>>最新添加文章
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          Android移動端自動化測試:使用UIAutomatorViewer與Selenium定位元素
          抖音直播音掛載小雪花 懂車帝小程序
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
          python通過代碼修改pip下載源讓下載庫飛起
          python里面requests.post返回的res.text還有其它的嗎
          更多>>隨機抽取信息
          png顯示叉號的解決辦法(IE無法顯示PNG格式圖片的解決辦法)
          FLASH中加入LOADING的最簡便方法
          實現windows關機效果代碼
          靜態生成
          Python拼接字符串的幾種方式
          深山旅行社網站管理系統 v1.7
          88国产精品视频一区二区三区