零基礎學WEB前端-CSS
CSS指層疊樣式表(Cascading Style Sheets)，CSS 是標準的布局語言，用來控制元素的尺寸、顏色、排版。CSS 由 W3C 發明，用來取代基於表格的布局、框架以及其他非標準的表現方法。樣式 (style) 定義如何顯示 HTML 元素；樣式通常存儲於樣式表中；外部樣式表存儲於 CSS 文件中。
CSS可以解決html代碼對樣式定義的重復，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
1、CSS基礎部分
層疊次序
當同一個HTML元素被不止一個樣式所定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標簽內部）
內聯樣式（在 HTML 元素內部）
CSS基本語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。 selector {declaration1; declaration2;
... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。selector {property: value}
CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。有興趣了解WEB前端的可以加我這個群：前面是四八七，中間是四二五，後面是四二九，我們這個每晚都有大神講解，真心有興趣的朋友可以加群，如果不是真心的請勿打擾
CSS高級語法
選擇器的分組，你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
1 h1,h2,h3,h4,h5,h6 {
2 color: green;
3 }
CSS派生選擇器
通過依據元素在其位置的上下文關系來定義樣式，你可以使標記更加簡潔。在 CSS1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關系來應用或者避免某項規則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器，它只對li標簽中的strong標簽起作用：
1 li strong {
2 font-style: italic;
3 font-weight: normal;
4 }
CSS id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
1 #red {color:red;}
2 #green {color:green;}
下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。註意：id 屬性只能在每個 HTML 文檔中出現一次。
1 <p id="red">這個段落是紅色。</p>
2 <p id="green">這個段落是綠色。</p>
id 選擇器和派生選擇器
在現代布局中，id 選擇器常常用於建立派生選擇器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
一個選擇器，多種用法
即使被標註為 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：
// haha為form的id
#haha {
color : green;
}
#haha input {
color : blue;
}
#haha select {
color : red;
}
上面的樣式只會應用於id是haha元素內的內容。比如，id為haha的form內input標簽中字體顏色為blue，select標簽中字體顏色為red，其他的顏色為green。
CSS類選擇器
在 CSS 中，類選擇器以一個點號顯示： .center {text-align: center}
在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。
1 <h1 class="center">
2 This heading will be center-aligned
3 </h1>
4
5 <p class="center">
6 This paragraph will also be
center-aligned.
7 </p>
註意：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
我們在使用時是使用類選擇器還是ID選擇器呢？註意，ID選擇器會使用一次，並且僅一次，如果有多個ID項匹配ID選擇器，則只有第一個起作用。不同於類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。類似於類，可以獨立於元素來選擇 ID。有些情況下，您知道文檔中會出現某個特定 ID 值，但是並不知道它會出現在哪個元素上，所以您想聲明獨立的 ID 選擇器。例如，您可能知道在一個給定的文檔中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文檔都會有這麽一個最重要的內容，它可能在任何元素中，而且只能出現一個。在這種情況下，特別適合使用ID選擇器。
CSS屬性選擇器
對帶有指定屬性的 HTML 元素設置樣式。可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限於 class 和 id 屬性。屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
[attribute] {
color : red;
}
以上代碼就會對<p attribute="">我是一個段落</p>產生作用了。
CSS的創建
如何插入樣式表，當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：外部樣式表、內部樣式表和內斂樣式。
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：
1 <head>
2 <link rel="stylesheet"
type="text/css" href="mystyle.css" />
3 </head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：
1 hr {color: sienna;}
2 p {margin-left: 20px;}
3 body {background-image: none;}
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: none;}
</style>
</head>
內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
1 <p style="color: sienna;
margin-left: 20px">
2 This is a paragraph
3 </p>
HTML+CSS程序示例
<html>
<head>
<title>HTML和CSS學習</title>
<!-- 引用外部文件方式
<link type="text/css"
rel="stylesheet" href="body.css"/>
-->
<!-- 直接在head中寫css方式 -->
<style type="text/css">
/* id選擇器 */
#haha {
color : green;
}
#haha input {
color : blue;
}
#haha select {
color : red;
}
/* 屬性選擇器 */
[attribute] {
color : brown;
}
/* 類選擇器 */
.p_class {
color : red;
}
/* 屬性選擇器，只對input中type為text產生作用 */
input[type="text"] {
background-color:yellow;
}
</style>
</head>
<body>
<p>我是一個段落</p>
<p attribute="">我是一個段落</p> <!-- 屬性選擇器 -->
<p class="p_class">我是一個段落</p> <!-- 類選擇器 -->
<hr color="blue"/>
<!-- id選擇器 -->
<form id="haha" action="/example/html/form_action.asp"
method="post">
用戶名: <input type="text"
name="username"/> <br/>
密 碼: <input type="password"
name="password"/> <br/>
上 傳: <input type="file"
name="upload_file"/> <br/>
圖 片: <input type="image"
original="pic.jpg" width="40px"
height="20px"/> <br/>
單 選: <input type="radio"
name="sex" checked="checked" value="man"/>男<input type="radio"
name="sex" value="women"/>女 <br/>
多 選: <input type="checkbox"
name="sex2" checked="checked" value="man"/>男<input type="checkbox"
name="sex2" value="women"/>女 <br/>
城 市: <select name="city">
<option value="null">--請選擇--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select> <br/>
留言板: <textarea>
</textarea> <br/>
<input type="submit" value="提交" /> <input type="reset"
/>
WEB前端學習交流群21 598399936
零基礎學WEB前端-CSS