CSS相關
CSS stands for Cascading Style Sheets
– CSS 意思就是 層疊樣式表
? Styles define how to display HTML elements
– 樣式定義了HTML元素怎樣去顯示
? Styles are normally stored in Style Sheets
– 樣式一般存儲在樣式表中
? Styles were added to HTML 4.0 to solve a problem
– 樣式添加到HTML4.0中用來解決問題
? External Style Sheets can save you a lot of work
– 利用外部樣式表可以提高你的工作效率
? External Style Sheets are stored in CSS files
– 外部樣式表存儲在CSS文件中
? With CSS, your HTML documents can be displayed using different output styles
? 樣式表定義元素怎樣去顯示.外部樣式表能夠讓你改變所有出現在你WEB中的外觀和布局,而僅僅通過編輯一個單獨的CSS文檔.(原理就是一動多變)
? CSS是一個在設計領域中的突破,因為它允許開發者一下就能控制多個WEB頁的樣式和布局.作為一名WEB開發者你可以為每個HTML元素和應用他的每個頁面定義一個你想要的樣式.
來實現全面的改變,簡單的改變樣式,所有與之相關的元素都會自動更新
? 樣式表允許樣式信息用多種方式來定義.樣式可以在一單獨的HTML元素中指定,在<head>元素中或在一外部CSS文件中.甚至多個外部樣式表能集中在一個單一的HTML文檔中
當多於一種的樣式指定一HTML元素時使用怎樣的樣式呢?
一般說來所有樣式有下面的規則(第四個
最有優先性)
1. Browser default
瀏覽器默認
2. External style sheet
外部樣式表(css文件)
3. Internal style sheet (inside the<head> tag)
內嵌樣式表(在<head>標簽內)
4. Inline style (inside an HTML element)
行內樣式(在一HTML元素內)
CSS語法：
The CSS syntax is made up of three parts: a selector, a property and a value:
– CSS的語法由三部分組成: 一個選擇器，一個屬性和一個值，例如：selector {property: value}
選擇器是你希望去定義的HTML元素/標簽，每個屬性可以有一個值，屬性和值由冒號區分開外面用大括號括起來
body {color: black}
如果值為多個單詞則用雙引號括起來:p {font-family: "sans serif"}
? 註意：如果你想指定多個屬性，你就必須將每個屬性用分號隔開，下面的例子就演示了怎樣定義居中紅色文字段落
p {text-align:center;color:red}
? 為了讓樣式定義更有可讀性，你可以像這樣分行描述屬性
p{ text-align: center; color: black; font-family: arial }
? 你可以將選擇器組合。用逗號分隔每個選擇器。下的例子將所有的標題元素組合起來，它們的顏色都變為綠色
h1,h2,h3,h4,h5,h6 { color: green }
選擇器類：
? 用選擇器類你可以將同一類型的HTML元素定義出不同的樣式。比如你想在你的文檔中有兩種不同樣式的段落：一種是右對齊，另外是居中的。這就告訴你該怎麽用樣
式來做到這點：right,center是自定義的！
p.right {text-align: right} p.center {text-align: center}
? 你必須在你的HTML文檔中使用類屬性（才能顯示出效果）
<p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
註意：每個HTML元素只能有一個類屬性，下面的例子是不符合規範的
<p class="right" class="center">This is a paragraph.</p>
? 你也可以省略標簽名稱直接去定義，這樣就可以在所有的HTML元素中使用了。下面的例子就能讓所有HTML中所有帶class="center"的元素居中文字：.千萬不要省
.center {text-align: center}
? 下面的代碼中H1和P元素都有class="center"。這就意味著這兩個元素都將遵循選擇器"center"的規則
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
id選擇器
? 使用id 選擇器你可以為不同的HTML元素定義相同的樣式
? 下面的樣式規則對任何一個帶有id屬性值為"green"的元素都是匹配的
#green {color: green}
? 上面的規則將匹配h1和p元素
<h1 id="green">Some text</h1> <p id="green">Some text</p>
? 下面的樣式規則將匹配任何一個帶有id屬性值為"green"的p元素
p#green {color: green}
? 上面的規則與h1元素不匹配（也就是說不會產生樣式效果）
<h1 id="green">Some text</h1>
? 和class一樣,id的名稱的開頭也不要使用數字,不然就無法在Mozilla/Firefox中正常運作了
CSS註釋
? 你可以在CSS中加入解釋代碼用的註釋，這樣可以方便你以後重新編輯代碼。瀏覽器會忽略註釋，註釋一般以"/*"開頭"*/"做結尾，像這樣：
/* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
怎麽使用CSS
? 怎樣插入樣式表？
– 當瀏覽器閱讀樣式表，它會依據它（樣式表）來格式化文檔。有三種方法可以插入樣式表
? 外部樣式表（External Style Sheet）
? 內嵌樣式表（Internal Style Sheet）
? 行內樣式（Inline Styles）
外部樣式表：
? 使用外部樣式表是使樣式應用於多張網頁的理想方法。通過這個方法你只需改動一個文件就能改變整個網站的外觀。使用<link>標簽讓每個頁面都連接到樣式表。 <link>標簽在head區域使用
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
瀏覽器將從mystyle.css文件中讀取樣式定義信息，並依據它來格式化文檔
? 外部樣式表可以用任何一個文字編輯器來書寫。文件不應該包含任何的html標簽。並保存為一個後綴為.css的文件.下面是一個樣式表文件的內容
hr {color: sienna} p {margin-left: 20px} body {background-image:url("images/back40.gif")}
內嵌樣式表：
? 一份內嵌樣式表應該在當有單獨文檔有特殊樣式的時候使用。使用<style>標簽在head區域內定義樣式，像這樣
<head> <style type="text/css"> hr {color: red} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
? 瀏覽器將立即讀取樣式定義，並依據它來格式化文檔。
? 註意：瀏覽器一般會忽略未知的標簽。這就意味著老的瀏覽器不能支持樣式，會忽略<style>標簽，但<style>裏的內容會顯示在頁面上。在HTML註釋元素中隱藏它
可以來避免這類情況在老的瀏覽器中發生
行內樣式：
? 使用行內樣式就失去了樣式表的優勢而將內容和形式相混淆了。一般這類方法在個別元素需要改變樣式的時候使用
? 在相關的標簽上用style屬性來加入行內樣式。樣式屬性可以包含任何CSS屬性。例子中將展示怎樣給一個段落加上左間距並將顏色改為red
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
CSS相關