CSS Tutorial(一)：基本知識

時間 2019-11-08

標籤 css tutorial 基本知識欄目 CSS 简体版

原文原文鏈接

1.簡介css

CSS(Cascading Style Sheets)：疊層樣式表。主要用來定義如何去顯示HTML的元素。HTML4中添加CSS主要是爲了達到內容與顯示分離。編程

HTML本來是設計用來用來定義一個文檔的內容，而不是用來定義如何顯示這些內容。然而曾經有一段時間，大量網頁充斥着相似於<font>標籤和color屬性的東西，致使頁面難以維護。爲了解決這個問題W3C提出了CSS。瀏覽器

2.CSS語法編程語言

CSS並非編程語言，並且CSS的語法很是簡單。CSS規則很是簡單，包含兩部分：選擇器和一個或者多個定義，其語法以下圖所示：編輯器

其中，selector（選擇器）用來選擇而且制定頁面中哪些元素須要應用樣式，而沒一個定義包含一個屬性及其對應的屬性值。下面就是一個典型的CSS樣式：url

p {
    color:red;text-align:center;
}

他的意思是，對於頁面中全部的<p>元素，顏色爲紅色，文字居中對齊。每個定義以分號結尾，若干個定義一塊兒被左右花括號括起來。通常來講，爲了使得CSS的可讀性更好，通常會將一個定義放在一行，以下：spa

p {
    color:red;
    text-align:center;
}

CSS也有註釋，格式以下：翻譯

/*
這裏面都是
註釋
*/

3.Id選擇器和類選擇器設計

Id選擇器用來給HTML文檔中的一個元素設置樣式。Id選擇器使用被設置樣式的元素的id屬性，而且以"#"開頭。例如：code

#para1 {
    text-align:center;
    color:red;
}

這個例子中，樣式是設置給HTML中id爲para1的元素的。

class選擇器和Id選擇器不一樣，他能夠爲一組HTML元素，而不是單個元素設置相同的樣式。這就容許對具備相同class的不少元素設置同樣的樣式。class選擇器以"."開頭。例如：

.center {
    text-align:center;
}

這個例子就是給全部class爲center的元素設置文字居中對齊。固然能夠從class屬性相同的元素中，挑出某一類設置樣式啦，例如：

p.center {
    text-align:center;
}

這樣一來的話，只有class爲center的<p>元素的文字對齊是居中的了。

4.插入CSS的三種方法

外部樣式表

外部樣式表適用於一個樣式表控制多個HTML文件的顯示。這樣你能夠經過只修改一個CSS文檔，就能使整個站點的樣式更新的效果。這種狀況下，須要給每一個網頁添加一段代碼引用這個外部樣式表文件：

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

其中mystyle.css就是這個文件。外部樣式表能夠使用任何文本編輯器編輯，以css做爲後綴名，其中不容許包含HTML標籤。下面就是一個外部樣式表的例子：

hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}

須要注意的是，屬性值與單位之間不能有空格，有空格的話，IE能夠正常顯示可是FF和Opera不行。

內部樣式表

內部樣式表則是在HTML的<head>標籤中增長<style>標籤，而且在裏面寫樣式，例如：

<style>
hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}
</style>

內聯樣式表

內聯樣式表就是在對應的標籤屬性中定義樣式，以下：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

很明顯，這種方式達不到將內容與現實分開的目的，所以儘可能少用或不用。

5.多個樣式表的問題

既然上面提到樣式表能夠以三種方式插入，那麼必定會存在對於某個元素，多個樣式表中都對其進行了樣式規定的狀況，那到底以哪一個爲準呢？CSS有以下的標準：

瀏覽器默認
外部樣式表
內部樣式表
內聯樣式表

其中第四個優先級是最高的。

參考資料：

W3C 《CSS Tutorial》：http://www.w3schools.com/css/default.asp

本系列文章的內容，結構，例子都來源於上面的連接。我這裏主要是提取其中的要點翻譯整理。一方面備忘，也方便不喜歡看英文的同窗。有任何不當，歡迎交流！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。