網頁製作必學技巧之用CSS美化你的網頁

來源:互聯網
上載者:User
css|技巧|網頁

  現在我們設計網頁已經離不開CSS,使用CSS可以美化我們的網頁,這已經是大家所共知的了!

  CSS是“Cascading Style Sheets”的縮寫,譯為樣式表。HTML允許我們利用CSS來實現風格的顯示,舉個簡單的例子:我們可以使用<b>標籤來使頁面的字型加粗。如:

  <b>網頁教學網加粗字型顯示</b>

  如果你使我們使字型顯示為紅色、宋體、並且加粗顯示我們可以使用下面的代碼:

  <font color="#FF0000" face="宋體"><strong>網頁教學網字型示範</strong></font>

  這時我們觀察上面的代碼時我們發現網頁中的元素比較多了,當我們自己編寫時可能顯得很淩亂,這時我們該想有沒有一種方法使用的代碼比較少,而同時達到上面顯示的要求呢?回答是肯定的,這時我們就要用到CSS了。用CSS設定一種風格,設定好我們需要的特性,給它命名一個唯一的名字,然後儲存放在網站的其它地方,然後我們在編寫HTML時引用剛才的風格的名字就可以達到這種要求。如:

  <p class="myNewStyle">網頁教學網的 CSS 風格文本</p>

  然後在網頁的頭部<head></head>之間加上設定風格的代碼,如:

  <style type="text/css">

  <!--

  .myNewStyle {

  font-family: 宋體;

  font-weight: bold;

  color: #FF0000;

  }

  -->

  </style>

  如果你想使上面的CSS控制你的網頁的每個頁面,那麼我們複製粘貼上面的代碼就可以了,如果覺得比較麻煩或者說你覺得網頁的頭部很亂的話,我們也可以把CSS設定的風格單獨儲存為一個檔案(檔案的副檔名為.CSS),之後我們在HTML直接引用那個儲存的檔案就可以引用樣式了。如你儲存的檔案的名字為:myFirstStyleSheet.css,那麼我們可以使用下面代碼來引用:

  <link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">

  注意:上述代碼要放到HTML頁面的<head>地區內。

  至於CSS的設定就在這裡不提了,我們可以專門開啟一個記事本,或使用專門的設計工具如DW等。

  在編輯CSS注意不要再加上如下代碼了:

  <style type="text/css">

  </style>

  我們在CSS檔案中只要設定CSS風格就行了,如:

  .myNewStyle {

  font-family: 宋體;

  font-weight: bold;

  font-size: 8pt;

  color: #FF0000;

  }

  .my2ndNewStyle {

  font-family: 宋體;

  font-weight: bold;

  font-size: 9pt;

  color: #FF0000;

  }

  .my3rdNewStyle {

  font-family: 宋體;

  font-weight: bold;

  font-size: 12pt;

  color: #FF0000;

  }

  然後直接儲存為副檔名為css的檔案就行了(如:myFirstStyleSheet.css)

  最後我們在HTML代碼的BODY地區內加入如下代碼就可以引用我們的設定了:

  <p class="myNewStyle">網頁教學網CSS字型顯示1</p>

  <h2 class="my2ndNewStyle">網頁教學網CSS字型顯示2</h2>

  <h3 class="my3rdNewStyle">網頁教學網CSS字型顯示3</h3>

  我們在上面的代碼中用到了<h2>標籤,我們在CSS中也可以直接對標籤進行風格的定義:

  h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }

  然後我們就可以直接在代碼中加入:

  <h1>網頁教學網CSS字型顯示2</h1>

  那麼同樣按我們設定的風格來顯示。

  我們也可以對其它的標籤設定風格,舉個例子:我們對整個頁面的邊框進行設定:

  body { margin-left: 15%; margin-right: 15%; }

  我們也可以對DIV標籤進行設定:

  div {

  background: rgb(204,204,255);

  padding: 0.5em;

  border: 1px solid #000000;

  }

  在HTML代碼中只要在 <div>和</div>之間的內容將都按上述的風格進行顯示。

  最後在舉個例子,關於超級串連的變色:

  .a:link { color: rgb(0, 0, 153) } /* 未訪問串連的情況 */

  .a:visited { color: rgb(153, 0, 153) } /* 訪問串連之後的串連 */

  .a:hover { color: rgb(0, 96, 255) } /* 滑鼠盤旋的狀態 */

  .a:active { color: rgb(255, 0, 102) } /* 串連啟用的狀態 */

  然後在HTML代碼中加入:

  <a href="http://www.webjx.com">網頁教學網</a>

  上述代碼可以按我們設定的風格顯示。

  最後給大家擴充一下,因為最近總有網友在論壇中問,如何使在同一頁面的串連不同呢?我們接最後這個例子給大家介紹一下。這時我們需要設定CSS的另一種風格:

  .a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 紅色、有底線*/

  .a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }

  .a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 黑色、無底線*/

  .a1:active { COLOR: #0000ff; TEXT-DECORATION: none }

  然後在HTML代碼中加入:

  <a href="http://www.webjx.com">網頁教學網</a>

  <a href="http://www.webjx.com" class="a1">網頁教學網</a>

  就會出現兩種串連效果了。

  CSS在我們設定網頁時功能是非常強大的,希望大家在製作網頁時要熟練的運用,以使我們的頁面更加漂亮和統一。在本站有好多關於CSS的教材希望大家好好研究吧!希望這篇文章能起到畫龍點睛的作用。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.