HTML5配置與CSS3

by Vivid 10. 十月 2012 05:29

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N121012901
出刊日期:2012/10/10

在網站應用程式中,網站的配置(Layout)決定了吸睛程度,好的網站配置可以讓使用者更容易找到感興趣的網頁,不好的網站配置易導致網頁瀏覽不便,讓使用者望之卻步。除此之外,網站的配置也會影響到資料是否容易被搜尋,因此設計一個具備良好配置的網站是很重要的。HTML5的網頁可以利用Cascading Style Sheets 3 (CSS3)的新功能來進行配置,本文將介紹HTML5網站配置的新選擇,以及常用的CSS3選擇器。

使用div與CSS進行配置

在過去,我們很習慣使用HTML <Table>標籤來對網站的畫面進行配置,透過<TR>、<TD>的組合,讓網頁可以有多欄、多列的呈現,並方便進行UI項目對齊的動作。不過,在目前互動式網頁盛行的網頁上,應該儘可能地避免使用它來進行配置。

另一種替代<Table>標籤來進行網站畫面配置的選項是,使用<div>標籤,它代表網頁中的一個區塊。<div>中可以含<div>以巢狀的方式設計更複雜的頁面。<div>可以搭配CSS來做定位。例如我們可以設計如圖1的網頁:

clip_image002[8]

圖 1:使用div設計網站的配置。

使用的HTML如下:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link rel = "stylesheet" href = "Site.css" />
</head>
<body>

  <div style = "background-color: #0094ff;">
    <div>
      <img src = "images/top01.gif" />
      <header> .NET Magzine國際中文電子版雜誌 </header>
    </div>
  </div>
  <div style = "height: 100%">
    <menu style = "width: 150px; float: left; height: 100%">
      <a href = "#" style = "display: block">Home</a>
      <a href = "#" style = "display: block">本 站 簡 介</a>
      <a href = "#" style = "display: block">客 服 信 箱</a>
    </menu>
    <section style = "width: 400px; float: left;">
      .NET Magazine國際中文電子版是專注在介紹.NET 相關技術的電子性期刊
       <ol>
         <li>
           <h5>2012/07/04</h5>
           使用HTML5 撥放影片
         </li>
         <li >
           <h5>2012/7/18 </h5>
           使用HTML 5 File API(1)
         </li>
         <li>
           <h5>2012/8/1</h5>
           使用HTML 5 File API(2)
         </li>
       </ol>
    </section>
  </div>
</body>
</html>

 

使用的簡易CSS檔案如下:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #e2e2e2;
    border-top: 0px;
    color: #333;
    margin: 0;
    padding: 0;
    height: 100%;
}

menu {
    background-color: #efeeef;
    margin: 0px;
    padding: 0;
    padding-top: 10px;
}

section {
    padding-top: 10px;
}

footer {
    clear: both;
    background-color: #e2e2e2;
    height: 100px;
}

 

若不論頁面中呈現的選單項目,或文字內容,這網頁只使用到一些<div>和HTML5的新<menu>、<section>標籤,搭配CSS的浮動(float)屬性進行畫面的配置,讓畫面呈現兩欄的效果,左方是選單,右方是網頁內容。比起<table>、<tr>、<td>標籤的組合,少掉許多項目,這樣可以加快頁面下載速度,進而提升整體的執行效能。

 

使用CSS3 Multi-Column配置

CSS3提供許多協助網頁項目排版的語法,讓我們能夠更容易地規劃網頁的外觀。要定位HTML的項通常採用以下做法:

l 絕對定位:設定固定的水平與垂直座標。

l 相對定位:項目的位置相對於父項目的位置。

而W3C定義了CSS Multi-column Layout Module(http://www.w3.org/TR/css3-multicol/),提供一種新的網頁配置方式- Multi-Column,可以使用欄位(Column)來進行排版。欄位數量的多寡則依照實際的需求來定義,這對於尺寸與解析度多變的行動裝置來說相當地便利。以下是一個使用CSS3 Multi-Column定位的範例,設定DIV 中的內容以3欄的方式來呈現,參考圖2所示:

clip_image003[4]

圖 2:CSS3 Multi-Column配置。

這個範例使用的HTML內容如下所示:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <style type = "text/css">
    div {
      width: 300px;
      border: 1px solid black;
     
      column-count: 3; /* Opera */
      -moz-column-count: 3; /* Firefox */
      -webkit-column-count: 3; /* Safari and Chrome */
     
      column-gap: 10px; /* Opera */
      -moz-column-gap: 10px; /* Firefox */
      -webkit-column-gap: 10px; /* Safari and Chrome */
     
      column-rule-color: blue; /* Opera */
      -moz-column-rule-color: blue; /* Firefox */
      -webkit-column-rule-color: blue; /* Safari and Chrome */
     
      column-rule-style: dotted; /* Opera */
      -moz-column-rule-style: dotted; /* Firefox */
      -webkit-column-rule-style: dotted; /* Safari and Chrome */
     
      column-rule-width: 3px; /* Opera */
      -moz-column-rule-width: 3px; /* Firefox */
      -webkit-column-rule-width: 3px; /* Safari and Chrome */
    }

    h1, h2 {
      -webkit-column-span: all; /* Chrome */
      text-align:center;
    }
  </style>
</head>
<body>

<div>
    <h1>以HTML5 撥放影片</h1>
    HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
   <h2>Copyright by Vivid
   </h2>
  </div>
</body>
</html>

 

在範例中顯示文字內容的是一個<div>標籤,寬度(width) 300px,有外框,外框框線為黑色,實線,線寬1px。此<div>標籤內的文字自動分欄顯示。

column-count用來設定要顯示的欄位數量,以這個範例來說,設定為3,以3欄方式來顯示。範例中-moz開頭的屬性是給Firefox瀏覽器專用的;目前只有Opera瀏覽器支援column-count語法;而-webkit開頭的屬性是給Safari或Chrome瀏覽器使用的。目前的ie 10瀏覽器尚不支援此屬性。

若要同時設定coumn-width與coumn-count,可以使用更簡單的語法coumns,例如以下CSS語法,設定coumn-count為3欄;coumn-width為90px;:

 

-moz-columns:90px 3;
-webkit-columns:90px 3;

 

 

column-gap則是用來設定兩欄之間的空隙,例如範例中設定為10px。

clip_image004[4]

圖 3:column-gap則是用來設定兩欄之間的空隙。

column-rule-color用來定義兩欄之間分隔線的顏色,例如本範例設定分隔線為藍色。column-rule- style用來定義兩欄之間分隔線的樣式,例如本範例設定分隔線為虛線。column-rule- width用來定義兩欄之間分隔線的寬度,例如本範例設定分隔線為3px。

column-rule-color、column-rule- style與column-rule- width可以改用簡寫的column-rule語法,例如將上述的範例修改為:

 

column-rule:  3px dotted blue; /* Opera */
-moz-column-rule:  3px dotted blue; /* Firefox */
-webkit-column-rule: 3px dotted blue; /* Safari and Chrome */

column-span可以跨欄呈現資料,例如範例中的h1與h2項目,其CSS設定了column-span值為all,表示跨所有欄呈現h1與h2。你也可以設定成一個數值,如1代表跨一欄。

 

h1,h2 {   
      -webkit-column-span: 1; /* Chrome */     
}

除了Chrome瀏覽器,大部分的瀏覽器並不支援「1」的設定,在Chrome瀏覽器看起來的畫面如圖4所示:

clip_image005[4]

圖 4:column-span: 1。

使用Flexible Box配置

我們利用範例來解釋Flexible Box配置的方式,參考以下HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    #Parent {
      display: -moz-box;
      display: -ms-box;
      display: -webkit-box;
      width: 100%;
    }

    #Child1 {
      -moz-box-flex: 1;
      -ms-box-flex: 1;
      -webkit-box-flex: 1;
      width: 100px;
      background-color: #ffd800;
    }

    #Child2 {
      -moz-box-flex: 3;
      -ms-box-flex: 3;
      -webkit-box-flex: 3;
      width: 200px;
      background-color: #00ff21;
    }
  </style>
</head>
<body>
  <h1>以HTML5 撥放影片</h1>
  <div id="Parent">
    <div id="Child1">
      HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
    </div>
    <div id="Child2">
      HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
    </div>
  </div>
</body>
</html>

 

 

這個範例執行起來,畫面如下圖所示:

clip_image006[4]

圖 5:Flexible Box。

在這個範例中網頁下方的兩個DIV區塊是包在一個名為Parent的DIV標籤之中。雖然名為Child1與Child2的DIV項目在CSS中設定的寬度分別為100px與200px,但實際上它們的寬度會根據瀏覽器的大小與box-flex設定的比例動態計算出來。假設目前父DIV的總寬度是804,兩個子DIV的寬度分別為226與578:

clip_image008[4]

圖 6:子項目寬度分配。

Parent的CSS設定寬度為100%。在CSS語法中,Child1與Child2的寬度分別為100與200px。實際上Child1與Child2的寬度卻是226與578。使用Flexible Box配置的話,父DIV項目實際寬度比CSS中定義的Child1+Child2寬度還多出來的部分,將會依照flex的比率來分配。計算方式如下:

在CSS中Child1與Child2的總寬度為300px:

100 + 200 = 300 px

要分配的寬度 = Parent實際寬度- (Child1寬度+ Child2寬度):

804 - 300 = 504 px

要分配的總flex比例 = 1 + 3 = 4

Child1實際寬度 = 100 + ( 504/4 ) *1 = 226

Child2實際寬度 = 200 + ( 504/4 )*3 = 578

 

CSS3-Attribute Selector

CSS3新增許多選取器(Selector),有些是取經於相當流行且廣受使用的jQuery Framework。以下介紹CSS3新增的attribute 選取器,說明如下。

 

[attribute^=value]

選取HTML Element,其Attribute的值以value開始。例如以下範例,選取div,若id屬性是以Child字串開始的,則將背景顏色設為「#00ff21」:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <style type = "text/css">
    div[id^="Child"] {
      background-color: #00ff21;
    }
  </style>
</head>
<body>
  <h1>以HTML5 撥放影片</h1>
  <div id = "Parent">
    <div id = "Child1">
      HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
    </div>
    <div id = "Child2">
      HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
    </div>
  </div>
</body>
</html>

此程式執行的結果如下圖所示,id為Child1與Child2的Div標籤都會套用綠色的背景:

clip_image009[4]

圖 7:[attribute^=value]

[attribute$=value]

選取HTML Element,其Attribute的值以value結尾。例如以下範例,選取div,若id屬性是以1字串結束的,則將背景顏色設為「#00ff21」:

 

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <style type = "text/css">
    div[id$="1"] {
      background-color: #00ff21;
    }
  </style>
</head>
<body>
  <h1>以HTML5 撥放影片</h1>
  <div id = "Parent">
    <div id = "Child1">
      HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整
合,讓我們更容易進行操控影片或音樂的撥放。
    </div>
    <div id="Child2">
      HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯
示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
    </div>
  </div>
</body>
</html>

 

 

執行結果如下圖,只有id為Child1的div項目被選取:

clip_image010[4]

圖 8:[attribute$=value]

[attribute*=value]

選取HTML Element,其Attribute的值包含value。例如以下範例,選取div,若id屬性值包含了「Child」字串,則將背景顏色設為「#00ff21」:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <style type = "text/css">
    div[id*="Child"] {
      background-color: #00ff21;
    }
  </style>
</head>
<body>
  <h1>以HTML5 撥放影片</h1>
  <div id = "Parent">
    <div id = "Child1">
      HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
    </div>
    <div id = "Child2">
      HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
    </div>
  </div>
</body>
</html>

執行結果如下圖,只有id為Child1與Child2的div項目都會被選取:

clip_image011[4]

圖 9:[attribute*=value]

CSS3- structural pseudo-classes

CSS3新增了許多structural pseudo-classes選取器,可以更有彈性地選取HTML項目。以下介紹常用的structural pseudo-classes選取器:

:nth-child()

選取父項目的第n個子項目。舉例來說,參考以下範例,將選取class為Child的div標籤,其父div標籤(parent)的第二個子項目:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <style type = "text/css">
    div[class="Child"]:nth-child(2) {
      background-color: #00ff21;
    }  
  </style>
</head>
<body>
  <h1>以HTML5 撥放影片</h1>
    <div class = "Parent">
        <div class = "Child">
            HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地。
        </div>
        <div class = "Child">
            video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
        </div>
        <div class = "Child">
            HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。
        </div>
        <div class = "Child">
            這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
        </div>
    </div>
</body>
</html>

 

 

則可以取得以下執行結果:

clip_image012[4]

圖 10::nth-child()

:nth-child(odd)

若修改上例,改用nth-child(odd)選取器,則可以選取父div項目(parent)下的奇數子項目:

 

<style type="text/css">
    div[class="Child"]:nth-child(odd) {
      background-color: #00ff21;
    }  
  </style>

 

 

則可以取得以下執行結果:

clip_image013[4]

圖 11::nth-child(odd)

:nth-child(even)

同樣地,我們可以利用:nth-child(even)取得父div項目(parent)下偶數的子項目:

 

<style type="text/css">
    div[class="Child"]:nth-child(even) {
      background-color: #00ff21;
    }  
  </style>

 

 

則可以取得以下執行結果:

clip_image014[4]

圖 12::nth-child(even)。

:nth-child(an+b)

我們可以套用an+b公式來計算出要選取的項目,其中a表示迴圈的次數;b代表offset。以下範例,offset為0,取得上例父div項目下,2的倍數之子項目:

 

<style type="text/css">
  div[class="Child"]:nth-child(2n+0) {
    background-color: #00ff21;
  }  
</style>

以下為執行結果:

clip_image015[4]

圖 13::nth-child(2n+0)。

以下範例offset為1,則是從第一個開始選取,後續每隔兩個便選取之:

<style type="text/css">
  div[class="Child"]:nth-child(2n+1) {
    background-color: #00ff21;
  }  
</style>

以下為執行結果:

clip_image016[4]

圖 14:nth-child(2n+1)。

Offset也可以從負數開始,例如以下使用nth-child(2n-1),得到的執行結果上圖(圖13)一致:

<style type="text/css">
        div[class="Child"]:nth-child(2n-1) {
            background-color: #00ff21;
        }
    </style>

 

 

: first-child

選取第一個子項目。以下範例選取class="Child"的div標籤,其父div標籤的第一個子項目:

<style type="text/css">
  div[class="Child"]:first-child {
    background-color: #00ff21;
  }  
</style>

以下為執行結果:

clip_image017[4]

圖 15:: first-child。

: last-child

選取最後一個子項目。以下範例選取class="Child"的div標籤,其父div標籤的第一個子項目:

 

<style type="text/css">
    div[class="Child"]:last-child {
      background-color: #00ff21;
    }  
  </style>

 

 

以下為執行結果:

clip_image018[4]

圖 16:: last-child。

: not

反向選取,以下範例選取class="Child"的div標籤,非父div標籤第一個子項目的所有項目:

 

<style type="text/css">
  div[class="Child"]:not(:last-child) {
    background-color: #00ff21;
  }  
</style>

以下為執行結果:

clip_image019[4]

圖 17:: not。

:root

選取文件的根節點,例如以下範例選取HTML節點:

<style type="text/css">
    :root {
      background-color: #00ff21;
    }  
  </style>

執行的結果參考如下:

clip_image020[4]

圖 18::root。

總結

在過去,大量使用table標籤來設計網頁的配置,在Web 2.0之後,大部分的網站為了效能與設計的彈性,而改用div標籤。在HTML5開始流行的現在,則建議使用HTML5新增的標籤,再搭配div。

Tags:

.NET Magazine國際中文電子雜誌 | HTML | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List