iT邦幫忙

0

樣式表的基本知識

小斑 2017-08-15 09:52:4912164 瀏覽

一般來說,利用 jQuery 開發的應用程式都會搭配 HTML, CSS, JavaScript(jQuery) 輔助。因此,先學習如何利用 CSS 樣式表設計網頁的外觀,對之後再進入學習 jQuery 的課程有所幫助。

首先,可先將所有的樣式表設定集中在單一的外部檔案,並從 HTML 網頁匯入外部的 .css 檔案,如 begin.html & begin.css:

begin.html

<!DOCTYPE html>
<html>
<head>
  <meta charest="UTF-8" />
  <title>CSS 的基本知識</title>
  <link rel="stylesheet" href="begin.css" type="text/css" />
</head>
<body>
    <p>往後 10 天請多多指教!</p>
</body>
</html>

begin.css

p{
  background-color: Yellow;
  color: Red;
}

將所有的樣式表設定集中在單一的外部檔案時,只要修改這個 .css 檔案的內容就能變更整個網站的設計,這讓網站的維護變得更簡單方便了。

要從 HTML 網頁匯入外部的 .css 檔案時,可在 head 標籤底下使用 link 標籤。

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

也可將樣式表的設定寫在 .html 檔案裡。雖然大部分的作法是將樣式表的設定整理成外部檔案,但要是程式碼很簡單,有時會直接寫在 .html 檔案裡。

  1. 將樣式表的設定整理在網頁開頭的寫法,其中一種寫法是將樣式表的內容整理在 style 元素,如 begin2.html:

begin2.html

<!DOCTYPE html>
<html>
<head>
  <meta charest="UTF-8" />
  <title>CSS 的基本知識</title>

  <style type="text/css">
  p{
    background-color: Yellow;
    color: Red;
  }
  </style>

  <link rel="stylesheet" href="begin.css" type="text/css" />
</head>
<body>
    <p>往後 10 天請多多指教!</p>
</body>
</html>
  1. 直接以元素指定樣式表設定的方法,這是一種透過 style 屬性撰寫樣式表設定的方法,如 begin3.html:

begin3.html

<!DOCTYPE html>
<html>
<head>
  <meta charest="UTF-8" />
  <title>CSS 的基本知識</title>
  <link rel="stylesheet" href="begin.css" type="text/css" />
</head>
<body>
    <p style="background-color: Yellow; color: Red;">往後 10 天請多多指教!</p>
</body>
</html>

CSS 語法:

CSS 的基本構造為
哪裡的{哪個元素:怎麼處理}
如果改以艱澀一點的詞彙來解釋,就會寫成以下的內容:
選擇器{屬性名稱:屬性值}

第一步就是先利用選擇器指定套用樣式表設定的對象(元素)。接著再在中括號({...})之內撰寫套用樣式表設定的種類(屬性)以及利用冒號(:)間隔屬性的設定值。假如想將 p 標籤的背景色設定成黃色,可利用下列的語法描述:

p{background-color: Yellow;}

中括號裡頭也可同時宣告多種樣式表的設定,只需要利用分號(;)間隔樣式表的設定即可。因此我們將被景色設定成黃色之際,可同時將文字顏色設定成紅色。

p{
  background-color: Yellow;
  color: Red;
}

/images/emoticon/emoticon41.gif

參考書籍: 一定學會 jQuery 的 36 堂關鍵課程


1 則留言

0
mixerspace
iT邦新手 5 級 ‧ 2017-10-30 20:03:40

謝謝分享!!

我要留言

立即登入留言