css以及選取器基礎

最後更新：2017-07-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：區塊層級元素 pcr head content 屬性選取器樣式表網頁 roo .com

CSS樣式基礎瞭解
1.css基礎文法
CSS樣式的出現是為了將內容和表現分離極大的提高了工作效率
內聯樣式（在 HTML 元素內部）
<p style="margin-left: 10px；margin-right:10px"></p>
<標籤名 style="屬性:屬性值;屬性:屬性值;" 屬性="屬性值"></標籤名>
內部樣式表（位於 <head> 標籤內部）
<style type="text/css">
h1
{color: maroon}
h2
{color: blue}
</style>

外部樣式表（實現了內容與表現的分離，推薦使用）
先建立外部樣式表檔案（*.css）使用HTML的link對象
<link href="ceshi.css" rel="stylesheet" type="text/css" />
rel="stylesheet"描述了當前頁面與href所指定文檔的關係

三、CSS選取器【重點】
1.css基礎先擇器
①元素選取器（有特殊功能的標籤做）
h1{
color: yellow;
}
②類別選取器（class）
.a{
background-color: #00ABFF;
}
使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，如下：
<span>Web開發</span>
第二步：使用class="類別選取器名稱"為標籤設定一個類，如下：
<span class="one">Web開發</span>
第三步：設定類選器css樣式，如下：
.one{color:red;}
樣式層疊
③ID選取器（id）
#b{
background-color: red;
}
Id和class的區別主要在於，在一個文檔中【重點】
Id不能重複使用，指一個元素的唯一識別碼
Class可以重複使用，指同一類的多個對象
用class表現共性，表示一類帶有共同特徵的對象，class可以複用
用id作為唯一識別碼，同一網頁中id不能重複出現
三種基本選取器的組合形態：
元素.{}
元素#{}
④包含選取器
選擇所有被E1包含的E2。中間用空格分隔。
文法： E1 E2
#content p{
color: green;
}
⑤選取器分組
將同樣的定義應用於多個選擇符
文法：選取器1，選取器2，選取器3
p,h2,h1{
background-color: pink;
}
可以避免重複寫代碼
⑥子項目選取器
X>Y：子項目選取器(不能跳級)
頁面配置常見命名規範
參考：http://wenku.baidu.com/link?url=ZErK6r8GecSTpcrKUfnmW_ks1VhZyvuW9yiUVS83c_40fImZ4ZUG2_nBSA4i-j7tkEXaPdUrdR3_ABc3PYaB2AduDZzzuXa577OQii9zXyS

⑦css進階選取器
通用元素選取器
*{

}
相鄰元素選取器
需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選取器
X + Y：X之後的第一個Y類型兄弟元素
X ~ Y：X之後的所有Y類型兄弟元素

⑧偽類【重點】
錨偽類
a:link {color: #FF0000}/* 未訪問的連結 */
a:visited {color: #00FF00}/* 已訪問的連結 */
a:hover {color: #FF00FF}/* 滑鼠移動到連結上 */
a:active {color: #0000FF}/* 選定的連結 */
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效。

文本偽類（虛擬元素）虛擬元素只能用於區塊層級元素。
:first-line用於向文本的首行設定特殊樣
:first-letter用於向文本的首字母設定特殊樣
:before在元素之前新增內容。
:after在元素之後新增內容。

結構性偽類(什麼情況下比較常用)
:first-child 選取器表示的是選擇父元素的第一個子項目
:last-child 選取器選擇的是選擇父元素的最後一個子項目

X:nth-of-type(n) X:nth-child(n)
X:only-of-type X:first-child
X:first-of-type X:last-child
X:last-of-type(n) X:only-child

屬性選取器（表單樣式設計常用）
input[type=text]{
border-color: red;
}

css以及選取器基礎

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More