CSS基础笔记(w3school)
CSS 概述
CSS 基礎語法
1.CSS語法
2.值的不同寫法和單位
3.記得寫引號
4.多重聲明
5.空格和大小寫
CSS 高級語法
1.選擇器的分組
2.繼承及其問題
3.友善地對待Netscape 4
4.繼承是一個詛咒嗎?
CSS 派生選擇器
CSS id 選擇器
1.id 選擇器
2.id 選擇器和派生選擇器
3.單獨的選擇器
CSS 類選擇器
CSS 屬性選擇器
1.屬性選擇器
2.屬性和值選擇器
3.屬性和值選擇器 - 多個值
4.設置表單的樣式
如何創建 CSS
1.如何插入樣式表
2.多重樣式
CSS 概述
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中,是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
一般而言,所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中,其中數字 4 擁有最高的優先權。
瀏覽器缺省設置
外部樣式表
內部樣式表(位于 標簽內部)
內聯樣式(在 HTML 元素內部)
因此,內聯樣式(在 HTML 元素內部)擁有最高的優先權,這意味著它將優先于以下的樣式聲明: 標簽中的樣式聲明,外部樣式表中的樣式聲明,或者瀏覽器中的樣式聲明(缺省值)。
CSS 基礎語法
1.CSS語法
- CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明,這里的declaration1、declaration2等等表示聲明
- 選擇器通常是您需要改變樣式的 HTML 元素
- 每條聲明由一個屬性和一個值組成
- 屬性(property)是您希望設置的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開
舉例:
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色,同時將字體大小設置為 14 像素。
在這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值。
下面的示意圖為您展示了上面這段代碼的結構:
提示:請使用花括號來包圍聲明
2.值的不同寫法和單位
(1)除了英文單詞 red,我們還可以使用十六進制的顏色值 #ff0000:
p { color: #ff0000; }(2)為了節約字節,我們可以使用 CSS 的縮寫形式:
p { color: #f00; }(3)我們還可以通過兩種方法使用 RGB 值:
p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }請注意,當使用 RGB 百分比時,即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這么做了。比如說,當尺寸為 0 像素時,0 之后不需要使用 px 單位,因為 0 就是 0,無論單位是什么。
3.記得寫引號
提示:如果值為若干單詞,則要給值加引號:
p {font-family: "sans serif";}4.多重聲明
提示:如果要定義不止一個聲明,則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最后一條規則是不需要加分號的,因為分號在英語中是一個分隔符號,不是結束符號。然而,大多數有經驗的設計師會在每條聲明的末尾都加上分號,這么做的好處是,當你從現有的規則中增減聲明時,會盡可能地減少出錯的可能性。就像這樣:
p {text-align:center; color:red;}你應該在每行只描述一個屬性,這樣可以增強樣式定義的可讀性,就像這樣:
p {text-align: center;color: black;font-family: arial; }5.空格和大小寫
大多數樣式表包含不止一條規則,而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯:
body {color: #000;background: #fff;margin: 0;padding: 0;font-family: Georgia, Palatino, serif;}是否包含空格不會影響 CSS 在瀏覽器的工作效果,同樣,與 XHTML 不同,CSS 對大小寫不敏感。不過存在一個例外:如果涉及到與 HTML 文檔一起工作的話,class 和 id 名稱對大小寫是敏感的。
CSS 高級語法
1.選擇器的分組
你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 {color: green;}2.繼承及其問題
幸運地是,你可以通過使用我們稱為 “Be Kind to Netscape 4” 的冗余法則來處理舊式瀏覽器無法理解繼承的問題。
body {font-family: Verdana, sans-serif;}p, td, ul, ol, li, dl, dt, dd {font-family: Verdana, sans-serif;}4.0 瀏覽器無法理解繼承,不過他們可以理解組選擇器。這么做雖然會浪費一些用戶的帶寬,但是如果需要對 Netscape 4 用戶進行支持,就不得不這么做。
3.友善地對待Netscape 4
根據 CSS,子元素從父元素繼承屬性。但是它并不總是按此方式工作??纯聪旅孢@條規則:
body {font-family: Verdana, sans-serif;}根據上面這條規則,站點的 body 元素將使用 Verdana 字體(假如訪問者的系統中存在該字體的話)。
通過 CSS 繼承,子元素將繼承最高級元素(在本例中是 body)所擁有的屬性(這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的規則,所有 body 的子元素都應該顯示 Verdana 字體,子元素的子元素也一樣。并且在大部分的現代瀏覽器中,也確實是這樣的。
但是在那個瀏覽器大戰的血腥年代里,這種情況就未必會發生,那時候對標準的支持并不是企業的優先選擇。比方說,Netscape 4 就不支持繼承,它不僅忽略繼承,而且也忽略應用于 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題,在表格內的字體樣式會被忽略。我們又該如何是好呢?
4.繼承是一個詛咒嗎?
如果你不希望 “Verdana, sans-serif” 字體被所有的子元素繼承,又該怎么做呢?比方說,你希望段落的字體是 Times。沒問題。創建一個針對 p 的特殊規則,這樣它就會擺脫父元素的規則:
body {font-family: Verdana, sans-serif;}td, ul, ol, ul, li, dl, dt, dd {font-family: Verdana, sans-serif;}p {font-family: Times, "Times New Roman", serif;}CSS 派生選擇器
通過依據元素在其位置的上下文關系來定義樣式,你可以使標記更加簡潔。
在 CSS1 中,通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors),這是由于它們依賴于上下文關系來應用或者避免某項規則。在 CSS2 中,它們稱為派生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器,我們可以使 HTML 代碼變得更加整潔。
比方說,你希望列表中的 strong 元素變為斜體字,而不是通常的粗體字,可以這樣定義一個派生選擇器:
li strong {font-style: italic;font-weight: normal;}請注意<li><strong> 代碼的上下文關系:
<p><strong>我是粗體字,不是斜體字,因為我不在列表當中,所以這個規則對我不起作用</strong></p><ol> <li><strong>我是斜體字。這是因為 strong 元素位于 li 元素內。</strong></li> <li>我是正常的字體。</li> </ol>在上面的例子中,只有 li 元素中的 strong 元素的樣式為斜體字,無需為 strong 元素定義特別的 class 或 id,代碼更加簡潔。
實例演示:
再看看下面的 CSS 規則:
strong {color: red;}h2 {color: red;}h2 strong {color: blue;}下面是它施加影響的 HTML:
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h2>This subhead is also red.</h2> <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>實例演示:
CSS id 選擇器
1.id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 "#" 來定義。
下面的兩個 id 選擇器,第一個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:
#red {color:red;} #green {color:green;}下面的 HTML 代碼中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p>實例演示:
注意:id 屬性只能在每個 HTML 文檔中出現一次。想知道原因嗎,請參閱 XHTML:網站重構。
2.id 選擇器和派生選擇器
- 在現代布局中,id 選擇器常常用于建立派生選擇器。
上面的樣式只會應用于出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元,盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素,比如 或者 ,不過這樣的用法是非法的,因為不可以在內聯元素 中嵌入
(如果你忘記了原因,請參閱 XHTML:網站重構)。
通俗點講,就是這里表示樣式只會應用于id="sidebar"與<p>的后面的數據
實例演示:
css代碼:
#sidebar p {color:red;}html代碼:
<a id="sidebar"><p>1stPeak</p></a><link type="text/css" rel="stylesheet" href="1stPeak.css">運行:
- 一個選擇器,多種用法
即使被標注為 sidebar 的元素只能在文檔中出現一次,這個 id 選擇器作為派生選擇器也可以被使用很多次:
在這里,與頁面中的其他 p 元素明顯不同的是,sidebar 內的 p 元素得到了特殊的處理,同時,與頁面中其他所有 h2 元素明顯不同的是,sidebar 中的 h2 元素也得到了不同的特殊處理。
3.單獨的選擇器
id 選擇器即使不被用來創建派生選擇器,它也可以獨立發揮作用:
#sidebar {border: 1px dotted #000;padding: 10px;}根據這條規則,id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框,同時其周圍會有 10 個像素寬的內邊距(padding,內部空白)。老版本的 Windows/IE 瀏覽器可能會忽略這條規則,除非你特別地定義這個選擇器所屬的元素:
div#sidebar {border: 1px dotted #000;padding: 10px;}實例演示:
css代碼:
div#sidebar {color:blue;}html代碼:
<div id="sidebar">Hello</div><link type="text/css" rel="stylesheet" href="1stPeak.css">運行:
總結:上面的div#sidebar是設置div下id名為sidebar的html代碼,而#sidebar div設置的是id名為sidebar下的包含div標簽的html代碼
#sidebar div實例演示:
css代碼:
#sidebar div {color:blue;}html代碼:
<a id="sidebar"><div>Hello</div></a><link type="text/css" rel="stylesheet" href="1stPeak.css">運行:
CSS 類選擇器
在 CSS 中,類選擇器以一個點號顯示:
.center {text-align: center}在上面的例子中,所有擁有 center 類的 HTML 元素均為居中。
在下面的 HTML 代碼中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 “.center” 選擇器中的規則。
注意:類名的第一個字符不能使用數字!它無法在 Mozilla 或 Firefox 中起作用。
- 和 id 一樣,class 也可被用作派生選擇器:
在上面這個例子中,類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。(名為 fancy 的更大的元素可能是一個表格或者一個 div)
實例演示:
css代碼:
.fancy td {color: #f60;background: #666;}html代碼:
<table class="fancy"><td>Fancy</td></table><link type="text/css" rel="stylesheet" href="1stPeak.css">運行:
- 元素也可以基于它們的類而被選擇:
實例演示:
css代碼:
td.fancy {color: yellow;}html代碼:
<table><td class="fancy">Fancy</td></table><link type="text/css" rel="stylesheet" href="1stPeak.css">運行:
總結:
CSS 屬性選擇器
對帶有指定屬性的 HTML 元素設置樣式。
可以為擁有指定屬性的 HTML 元素設置樣式,而不僅限于 class 和 id 屬性。
注釋:只有在規定了 !DOCTYPE 時,IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中,不支持屬性選擇。
1.屬性選擇器
下面的例子為帶有 title 屬性的所有元素設置樣式:
[title] { color:red; }實例演示:
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title] { color:red; } </style> </head><body> <h1>可以應用樣式:</h1> <h2 title="Hello world">Hello world</h2> <a title="W3School" href="http://w3school.com.cn">W3School</a><hr /><h1>無法應用樣式:</h1> <h2>Hello world</h2> <a href="http://w3school.com.cn">W3School</a> </body> </html>運行:
2.屬性和值選擇器
下面的例子為 title=“W3School” 的所有元素設置樣式:
[title=W3School] { border:5px solid blue; }實例演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title=W3School] { border:5px solid blue; } </style> </head><body> <h1>可以應用樣式:</h1> <img title="W3School" src="/i/w3school_logo_white.gif" /> <br /> <a title="W3School" href="http://w3school.com.cn">W3School</a> <hr /><h1>無法應用樣式:</h1> <p title="greeting">Hi!</p> <a class="W3School" href="http://w3school.com.cn">W3School</a> </body> </html>運行(這里由于是自己測試的,w3school的圖片沒有獲取到):
3.屬性和值選擇器 - 多個值
- 下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值:
實例演示:
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title~=hello] { color:red; } </style> </head><body> <h1>可以應用樣式:</h1> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello W3School students!</h1> <hr /><h1>無法應用樣式:</h1> <h2 title="world">Hello world</h2> <p title="student">Hello W3School students!</p> </body> </html>運行:
- 下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用于由連字符分隔的屬性值:
實例演示:
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [lang|=en] { color:red; } </style> </head><body> <h1>可以應用樣式:</h1> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr /><h1>無法應用樣式:</h1> <p lang="us">Hi!</p> <p lang="zh">Hao!</p> </body> </html>運行:
4.設置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用:
input[type="text"] {width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family: Verdana, Arial; }input[type="button"] {width:120px;margin-left:35px;display:block;font-family: Verdana, Arial; }實例演示:
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> input[type="text"] {width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family: Verdana, Arial; }input[type="button"] {width:120px;margin-left:35px;display:block;font-family: Verdana, Arial; } </style> </head> <body><form name="input" action="" method="get"> <input type="text" name="Name" value="Bill" size="20"> <input type="text" name="Name" value="Gates" size="20"> <input type="button" value="Example Button"></form> </body> </html>運行:
如何創建 CSS
1.如何插入樣式表
當讀到一個樣式表時,瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種:
- 外部樣式表
當樣式需要應用于很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用<link>標簽鏈接到樣式表。 標簽在(文檔的)頭部:
瀏覽器會從文件 mystyle.css 中讀到樣式聲明,并根據它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它僅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
- 內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用
- 內聯樣式
由于要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式,你需要在相關的標簽內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:
2.多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義,那么屬性值將從更具體的樣式表中被繼承過來。
例如,外部樣式表擁有針對 h3 選擇器的三個屬性:
而內部樣式表擁有針對 h3 選擇器的兩個屬性:
h3 {text-align: right; font-size: 20pt;}假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接,那么 h3 得到的樣式是:
color: red; text-align: right; font-size: 20pt;即顏色屬性將被繼承于外部樣式表,而文字排列(text-alignment)和字體尺寸(font-size)會被內部樣式表中的規則取代。
注:目前我需要的就這么多,所以就整理了下基礎,整理于:http://www.w3school.com.cn/css/index.asp
總結
以上是生活随笔為你收集整理的CSS基础笔记(w3school)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 更名为 Linearity Curve,
- 下一篇: 利用MS17-010渗透win7(32位