天天看點

什麼是CSS以及它的應用方法

作者:跬步行萬裡

之前在上一篇CSS 的前世今生中提到CSS産生的原因及曆史。

接下來講一下什麼是CSS?

什麼是CSS?

計算機的程式設計語言總體分為兩種,一種叫做DSL(domain-specific language), 另一種叫做GPL(General Purpose Language)

DSL domain是領域,specific 是特定,顧名思義就是運用于特定領域解決特定問題而創作出來的計算機語言, 比如我們熟悉的資料庫SQL(隻能用來查詢或編輯資料庫),網頁語言HTML(隻能用來編輯網頁内容)

GPL 翻譯過來是通用目的語言, 既然是通用就是不限制于某個特定領域, 比如 Python, Go 等程式設計語言, 這一類語言能實作不同類型的軟體開發

CSS當然屬于DSL用來解決網頁排版這個特定問題的, 同時CSS也屬于declarative programming language 表述性程式設計語言(表述性程式設計語言的簡單之處在于我們隻需要告訴計算機需要實作的效果,而具體怎樣實作是由計算機負責的,我們不需要知道具體是怎樣實作的)

在這裡我們編寫CSS描述我們要達到的效果,而浏覽器負責幫我們實作, 比如我描述需要15号宋體紅色字型, 浏覽器了解CSS的文法是以它會解讀我們所指定的這些屬性(Property),并渲染到網頁上。

應用CSS方法

我們知道HTML語言主要是負責網頁内容,而CSS語言負責排版,像好馬配好鞍一樣,有好的文字内容也需要賞心悅目的排版。

因為是兩種不同的語言,是以有不同的文法(Syntax)。我們需要把它們融合(Integration)在一起(像捏泥人一樣把不同的部位捏在一起), 讓它們協同工作, 那具體怎樣實作呢? 具體有三種方法:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline 顧名思義就是在字裡行間,與HTML深度綁定,從邏輯上來講,深度綁定肯定會弊大于利, 在網頁開發中一般不常用, 使用方法見下:

<h1 style="color: blue"> This is H1 </h1>           

在 HDML <h1> 标記内添加style 屬性(attribute), 用雙引号引起對應的屬性值 "color: blue"

  • 優點:擁有最高優先級,避免被 Internal 及External CSS 同樣類型的屬性覆寫
  • 缺點: 缺點也很明顯, 如果每一個标記有自己不同的排版格式,每一個網頁上的标記(成千上萬)需要添加自己的CSS style

Internal CSS

Internal CSS 類似于 Inline CSS 的進化版,是對深度綁定的一次解耦, 避免深度綁定這樣的好處是顯而易見的,我們之前談到過代碼的複用, 這裡就可以派上用場

<h1 style="color: blue"> This is H1 </h1>
<h2 style="color: blue"> This is H2 </h2>
<h3 style="color: blue"> This is H3 </h3>
<h4 style="color: blue"> This is H4 </h4>           

如上面代碼顯而易見,它們有相同的CSS屬性(color)以及屬性值(blue), 不同的是使用他們的标記不同(h1, h2, h3, h4),那我們可以用一行代碼來實作四行代碼的效果, 這就是代碼複用強大的威力,節省你現在(一行代碼)以及未來(修改一次)的寶貴時間

h1, h2, h3, h4 { color: blue }           

這是CSS 解除深度綁定後,衍生出來屬于自己的文法規則

Selector 用來辨別哪個(些)元素需要運用CSS的樣式, 如下圖CSS 運用于<p></p> 标記, 将該段落所有文字顔色渲染為紅色, Selector 也可以運用于多個元素,多個元素之間 用逗号分隔, 如上面代碼段的示例 “h1, h2, h3, h4”

Selector 之後跟着大括号,裡面包含所有屬性及屬性值(屬性和屬性值之間用冒号風格),屬性之間用分号分隔

什麼是CSS以及它的應用方法

正如之前所說, Internal CSS 文法規則從字裡行間中抽離出來, 約定放在HTML的固定位置,标記head中的style标記内

<!DOCTYPE html>
<html lang="”en”">
  <head>
    <style>
      h2, h1, h3, h4, h5, h6 {
        color: crimson;
      }
    </style>
  </head>
  <body></body>
</html>           

External CSS

External CSS 進一步将Internal CSS從網頁中分離出來,這非常符合邏輯,就像不同的東西,歸類後會放在一起一樣, HTML與CSS 是兩種不同的語言,應該儲存在不同的檔案中進行維護,HTML的檔案拓展名是.html,而CSS是.css

将Internal CSS 文法規則代碼儲存到.css 檔案内

具體實作方法,在head标記内建立link标記,在link标記内用rel屬性值"stylesheet"表明是CSS,href屬性值來索引CSS檔案的具體路徑(可以是絕對路徑,也可以是相對路徑)如下為相對路徑檔案名是styles.css

<!DOCTYPE html>
<html lang="”en”">
  <head>
  <link rel="stylesheet" href=“styles.css">
  </head>
  <body></body>
</html>           

繼續閱讀