標籤：
====任務描述====
【原連結】http://ife.baidu.com/task/detail?taskId=2
任務目的====總結====
一. CSS樣式的建立
1. 外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。
每個頁面使用 <link> 標籤連結到樣式表，具體的css檔案載入方式如下：
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
2. 內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:
<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
3. 內聯樣式
直接寫在現有的HTML標籤中。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
當三者同時存在時，運用的優先順序遵循“就近原則”，即：內聯樣式>內部樣式表>外部樣式表
二. CSS選取器
1. 標籤選取器
標籤選取器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
2. 類別選取器
類別選取器在css樣式編碼中是最常用到的。文法：
.類選器名稱{css樣式代碼;}
3. ID選取器
在很多方面，ID選取器都類似於類選擇符，但也有一些重要的區別：
(1)為標籤設定id="ID名稱"，而不是class="類名稱"。
(2)ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
#ID選取器名稱{css樣式代碼;}
4. 子選取器
還有一個比較有用的選取器子選取器，即大於符號(>),用於選擇指定標籤元素的第一代子項目。如：
<ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>蘋果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>捲心菜</li> </ul> </li></ul>子選取器的css代碼：.food>li{border:1px solid red;}
這行代碼會使class名為food下的子項目li（水果、蔬菜）加入紅色實線邊框。
5. 後代（包含）選取器
包含選取器，即加入空格,用於選擇指定標籤元素下的後輩元素。如：
.first span{color:red;}
【注意】>作用於元素的第一代後代，空格作用於元素的所有後代。
6. 通用選取器
通用選取器是功能最強大的選取器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字型顏色全部設定為紅色：
* {color:red;}
7. 偽類選擇符
偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色：
a:hover{color:red;}
8. 分組選擇符
當你想為html中多個標籤元素設定同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標籤同時設定字型顏色為紅色：
h1,span{color:red;}
html實踐——IFE task 02（CSS選取器）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
