標籤：html 使用 target family round size selector 應用 根據
1.CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常儲存在樣式表中
把樣式添加到 HTML 4.0 中，是為瞭解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在 CSS 檔案中
多個樣式定義可層疊為一
樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，
或在一個外部的 CSS 檔案中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表
2.當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
1瀏覽器預設設定
2外部樣式表
3內部樣式表（位於 <head> 標籤內部）
4內聯樣式（在 HTML 元素內部）
3.CSS 規則由兩個主要的部分構成：選取器，以及一條或多條聲明。
selector {
declaration1;
declaration2; ...
declarationN；
}
選取器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
h1 {
color:red;
font-size:14px;
}
如果值為若干單詞，則要給值加引號：
p {
font-family: "sans serif";
}
以上都稱之為規則，一個規則裡可以有不止一種聲明。規則是包含在樣式表中的。
4.不可以在內嵌元素 <span> 中嵌入 <p>
id 屬性只能在每個 HTML 文檔中出現一次。
5.CSS id選取器
id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選取器以 "#" 來定義。
在現代布局中，id 選取器常常用於建立派生選取器（即選取器中多了一個元素，即為派生。比如#sidebar為選取器，#sidebar p為派生）
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
}
在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，
同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。
6.CSS 類別選取器---class
1）在 CSS 中，類別選取器以一個點號顯示：
.center {text-align: center}會應用於以下部分。
因為h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
2）class 也可被用作派生選取器：
.fancy td {
color: #f60;
background: #666;
}
3）元素也可以基於它們的類而被選擇
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。
<td class="fancy">
7.CSS 屬性選取器
對帶有指定屬性的 HTML 元素設定樣式
為帶有 title 屬性的所有元素設定樣式：
[title]
{
color:red;
}
為帶有包含指定值的 lang 屬性的所有元素設定樣式，適用於由連字號分隔的屬性值：
[lang|=en] { color:red; }
屬性選取器在為不帶有 class 或 id 的表單設定樣式時特別有用：
input[type="text"]
{
width:150px;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
font-family: Verdana, Arial;
}
8.css選取器參考手冊：
選取器 描述
[attribute] 用於選取帶有指定屬性的元素。
a[target] //為帶有 target 屬性的 <a> 元素設定樣式
{
background-color:yellow;
}
[attribute=value] 用於選取帶有指定屬性和值的元素。
a[target=_blank] //為 target="_blank" 的 <a> 元素設定樣式：
{
background-color:yellow;
}
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[title~=flower] //選擇 titile 屬性包含單詞 "flower" 的元素，並設定其樣式
{
background-color:yellow;
}
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[lang|=en] //選擇 lang 屬性值以 "en" 開頭的元素，並設定其樣式
{
background-color:yellow;
}
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
div[class^="test"] //設定 class 屬性值以 "test" 開頭的所有 div 元素的背景色
{
background:#ffff00;
}
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
div[class$="test"] //設定 class 屬性值以 "test" 結尾的所有 div 元素的背景色
{
background:#ffff00;
}
[attribute*=value] 匹配屬性值中包含指定值的每個元素。
div[class*="test"] //設定 class 屬性值包含 "test" 的所有 div 元素的背景色
{
background:#ffff00;
}
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
