CSS --- Cascading Style Sheets 層疊樣式表
Cascading 層疊: 一種樣式疊加在另一種樣式的一種方式
Style Sheets 樣式表: 控制網(wǎng)頁文檔外觀和感觀.
CSS 和HTML是工作在一起的:
HTML: 構(gòu)建出網(wǎng)頁的結(jié)構(gòu)
CSS: 定義HTML元素如何顯示
問題: 樣式表的作用?
答案: 控制網(wǎng)頁文檔外觀和感觀.
為什么使用CSS?
CSS 允許你對指定的HTML元素應(yīng)用指定的樣式.
CSS的主要好處是允許你把樣式和內(nèi)容分離挡毅。
只使用HTML, 所有的樣式和格式都在一起,隨著頁面的內(nèi)容增加，將增加維護難度.
所有格式可以(應(yīng)該可以)從HTML文件中移除并存儲在單獨的CCS文件中.
內(nèi)聯(lián)CSS
使用內(nèi)聯(lián)樣式是其中一種插入樣式表的方式,使用內(nèi)聯(lián)樣式,獨有的樣式被應(yīng)用在單一的HTML元素上.
為了使用內(nèi)聯(lián)樣式,可以在相關(guān)的表簽上添加style屬性.
下面的例子展示如何使 P元素獲得灰色的背景和白色的文本:
<!DOCTYPE html>
<html lang="zh-cn">
<body>
<p style = "color: white; background-color:gray;">
這是一個內(nèi)聯(lián)樣式的例了
</p>
</body>
</html>
嵌入/內(nèi)部CSS
內(nèi)部樣式是被定義在<style>元素內(nèi)的,在HTML頁面中的head部份.
例如:下面的代碼應(yīng)用在所有的P元素中:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<p>這是我的第一個段落</p>
<p>這是我的第二個段落</p>
</body>
</html>
外部 CSS
使用這種方法,所有樣式規(guī)則被包含在一個文本文件中,這個文本文件的擴展名為.css.
這個CSS文件在HTML文件使用<link>表簽來引用,<link>元素被包含在head部分.
下面是個例子:
HTML文件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>這是我的第一個段落</p>
<p>這是我的第二個段落</p>
<p>這是我的第三個段落</p>
</body>
</html>
CSS文件:
p {
color: white;
background-color: gray;
}
層級
一個網(wǎng)頁的最終呈現(xiàn)是各種樣式規(guī)則的結(jié)果.
形成層級樣式信息的主要三種來源:
---來自網(wǎng)頁作者創(chuàng)建的樣式
---來自瀏覽器默認的樣式
---來自用戶指定的樣式
CSS是Cassading Style Sheets的首字母縮寫.
Inheritance 繼承
繼承是指屬性在網(wǎng)頁中的流動行式, 除非有指定定義外,一個子元素通常會具有其父級元素的特征.
例如:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>這是在段落中的文本</p>
</body>
</html>
因為 P標簽(子元素)在body標簽的內(nèi)部(父級元素),它具有body標簽中所有的樣式.
階段小結(jié)
三種樣式來源中，哪一種是網(wǎng)站最優(yōu)的選擇? (A)
A: 外部
B: 內(nèi)聯(lián)
C: 內(nèi)部
當(dāng)使用內(nèi)部樣試的時候,"style"屬于以下哪種性質(zhì)? (C)
A: value 值
B: property 屬性
C: tag 標簽
樣式的定義規(guī)則包含:選擇器, 屬性和值
補充空格上的內(nèi)容使得P元素具有白色文本的樣式
p {___ #FFF;}------答案： color:
