CSS 基礎語法

admin發表於2019-01-11
CSS

任何複雜的程式都是由小的元素構成，對於CSS程式碼也是如此。

所以，良好的基礎知識掌握是進階的必由之路，不可能有其他捷徑。

本文將結合程式碼例項介紹一下CSS最基礎知識，讀完本文您會掌握如下內容：

（1）.CSS語法結構。

（2）.CSS大小寫選擇。

（3）.CSS常見選擇器示例。

（4）.CSS選擇器優先順序：

（5）.CSS應用方式。

一.CSS語法結構：

CSS語法構成比較簡單，主要有如下兩個部分組成：

（1）.選擇器。

（2）.主體部分。

語法結構如下：

[CSS] 純文字檢視 複製程式碼
selector {
  Rules 
}

語法結構解析如下：

（1）.selector ：它是一個元素選擇器，可以匹配所有的div元素，選擇器種類眾多，且可以組合使用。

（2）.Rules ：CSS規則主體部分，具體定義匹配元素的表現形式，由具體的宣告構成，可以有多條宣告，宣告與宣告之間用分號分隔，最後一個宣告後的分號可以省略；每一條宣告由CSS屬性和對應的屬性值構成，中間由冒號分隔。

[CSS] 純文字檢視 複製程式碼
div {
  width:100px;
  height:50px;
  border:1px dotted red;
}

上面是一個簡單的程式碼演示，div是一個元素選擇器，主題部分由三個CSS宣告構成，分別定義div的寬度、高度和邊框樣式，宣告之間用分號分隔，最後一個分號是可以省略的。為了程式碼更為易讀，會對CSS程式碼格式進行一定的縮排或者換行。

二.大小寫選擇器：

規範中沒有強制規定CSS程式碼的大小寫，但是建議統一使用小寫形式。

無論是選擇器，還是主題部分的具體程式碼都建議使用小寫，這是業界編寫程式碼的慣例。

[CSS] 純文字檢視 複製程式碼
DIV{COLOR:RED}

上面的程式碼是非推薦形式，推薦方式如下：

[CSS] 純文字檢視 複製程式碼
div{color:red}

三.常見選擇器：

CSS選擇器種類眾多，這裡只會簡單介紹幾個常見的選擇器，且不會進行過多深入介紹。

目的是讓學習者能夠寫一些簡單的CSS程式碼，以便對CSS作用與使用有一個初步的掌握，以便繼續深入學習。

（1）.元素選擇器：元素選擇器極為簡單，標籤的名稱就是元素選擇器，比如div、p或者span等。

（2）.id選擇器：id選擇器由井號（#）+元素的id屬性值構成，例如#ant，ant是元素的id屬性值。

（3）.class選擇器：class選擇器有點（.）+元素的class屬性值構成，例如.ant，ant是元素的class屬性值。

僅介紹上面三個最為簡單的選擇器，更多的內容可以參閱CSS教程版塊其他內容。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{color:red}
#ant{color:blue}
.ant{color:green}
</style>
</head>
<body>
<span>螞蟻部落一</span>
<div id="ant">螞蟻部落二</div>
<div class="ant">螞蟻部落三</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/192735jcpxse8yeezpmpc8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

四.選擇器優先順序：

CSS選擇器是具有優先順序的，id選擇器>class選擇器>元素選擇器。

當然優先順序原則並不會這麼簡單，更多內容參閱CSS 選擇器優先順序規則一章節。

如果選擇器優先順序相同，那麼後面的CSS屬性值會覆蓋前面的值，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{color:red}
#ant{color:green}
.cl{color:blue}
</style>
</head>
<body>
<div class="cl" id="ant">螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/192818ohstbwh5aytthtbc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到id選擇器設定的設定的字型顏色會生效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{color:red}
div{color:blue}
</style>
</head>
<body>
<div class="cl" id="ant">螞蟻部落</div>
</body>
</html>

字型顏色呈現藍色，如果選擇器優先順序相同，那麼後面選擇器中css屬性設定的值會覆蓋前面設定的值。

五.CSS應用方式：

使用css的方式主要以下三種：

（1）.行內樣式。

（2）.內嵌樣式。

（3）.外聯樣式。

特別說明：不同教程對三種應用方式的稱呼可能不同，但這並不是教程的關鍵。

行內樣式是通過html元素的style屬性直接定義在便籤內的CSS程式碼：

[HTML] 純文字檢視 複製程式碼
<div style="color:blue">螞蟻部落</div>

優點是應用簡單，但是缺點也非常明顯，會讓程式碼非常臃腫，且不容易維護。

簡短的CSS應用尚可，如果CSS程式碼較為複雜，不推薦使用。

內嵌樣式是通過<style>標籤定義，程式碼如下：

[HTML] 純文字檢視 複製程式碼
<style type="text/css">
div{
  font-size:12px;
  color:green;
}
</style>

此標籤通常置於<head>標籤之內，應用同樣非常的簡單。

簡短的CSS程式碼可以使用此方法，如果較大規模的CSS程式碼不推薦使用。

外聯樣式就是將一個css檔案引入當前頁面，程式碼如下：

[HTML] 純文字檢視 複製程式碼
<link rel="stylesheet" type="text/css" href="style.css" />

當css程式碼較多的時候，推薦使用此方式。

相關文章