CSS3_1.概述、語法、尺寸與邊框

1.CSS概述

1.1 CSS概述

1.1.1 CSS作用

元素樣式定義可以在標籤中使用屬性完成，也可以使用樣式表定義

1.1.2 CSS定義

CSS(Cascading Style Sheets)：層疊樣式表/級聯樣式表，簡稱樣式表；
用於定義HTML文檔中元素的樣式，實現了將內容與表現分離，提高代碼的可重用性和可維護性。

1.1.3 CSS與HTML之間關係

HTML用於構建網頁的結構，內容展示；
CSS用於構建HTML元素的樣式；HTML是頁面的內容組成，CSS是頁面的表現

1.1.4 HTML屬性與CSS樣式的使用原則

W3C建議使用CSS樣式取代HTML屬性以實現內容和表現的分離(樣式代碼高度重用、提高可維護性)，僅當是HTML特有的屬性才使用HTML屬性

1.1.5 常用屬性

color 字體顏色
font-size 字體大小
background背景顏色

1.2 CSS樣式表

1.2.1 CSS樣式表使用方式

三種使用方式：

1. 內聯樣式
   樣式定義在HTML元素的標準屬性style中，CSS語法：
   1）只需要將分號隔開的一個或多個屬性/值對作爲元素的style屬性的值；
   2）屬性和值之間用：連接；
   3）屬性之間用；隔開；
   Eg.1 < h1 style=“color:blue; background-color:silver;”>文本< /h1>
   一般禁止使用內聯樣式，優先級最高(離元素最近)且不能重用
2. 內部樣式表
   樣式表規則位於文檔頭元素< style>元素內，在文檔< head>元素內添加< style>元素，在< style>元素中添加多個樣式規則，每個樣式規則由選擇器(決定使用該樣式的元素)和樣式聲明(使用{}包含多個屬性/值對)組成；
   可以在本頁面重用，但不能在其他文件調用，所以多用於學習和測試
   Eg.2 < style type=“text/css”>h1{color:blue;}< /style>
3. 外部樣式表
   創建單獨的樣式表文件用來保存樣式規則，文件後綴爲.css的純文本文件，該文件只包含樣式規則(由選擇器和樣式聲明組成)；
   在需要使用該樣式表文件的頁面上，使用< link>元素在文檔< head>元素內連接需要的外部樣式表文件；
   < link rel=“stylesheet” type=“text/css” href=“myStyle.css” />

2. CSS語法

2.1 CSS語法規範

2.1.1 CSS語法規範

內聯樣式：由樣式聲明組成；
樣式表(內部樣式表或外部樣式表)：由多個樣式規則組成，選擇器和樣式聲明

2.1.2 CSS樣式表特徵

• 繼承性：大多數CSS樣式規則可以被子元素繼承；
  可以繼承的屬性很少，只有顏色，文字，字體間距行高對齊方式，和列表的樣式可以繼承；
  所有元素可繼承：visibility和cursor；
  內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction；
  終端塊狀元素可繼承：text-indent和text-align；
  列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image；
• 層疊性：可以定義多個樣式，不衝突時多個樣式表中的樣式可層疊爲一個；
• 優先級：樣式定義衝突會按照不同樣式規則的優先級來應用樣式

2.1.3 樣式優先級

瀏覽器默認樣式 < 外部樣式表或內部樣式表(就近原則) < 內聯樣式
如果重複定義相同的樣式，以最後一次定義爲準

2.1.4 !important規則

!important可以調整樣式規則的優先級；
直接將!important添加在樣式規則之後，中間用空格隔開：選擇器{屬性：屬性值 !important; }

2.2 CSS選擇器

2.2.1 通用選擇器

星號*，匹配所有標籤設置默認樣式，效率極低，基本不使用；
除了內外邊距清零：*{margin:0; padding:0;}

 *
 {
 	font-size:9pt;
 }

2.2.2 元素選擇器

html文檔的元素，比如< p>、< h1>等

 h1
 {
 	font-size:9pt;
 }

2.2.3 類選擇器

語法：.className {color: red; }
1）類名稱不能以數字開頭；由字母、數字、字符-和_組成
2）在樣式表中聲明樣式類，在html文檔中將元素的class屬性的值設置爲樣式類的名稱；
3）可以將多個類選擇器應用於同一個元素(多類選擇器)，各個詞之間用空格分隔;

.important{}
.bgc{}
<h1 class="important"></h1>
<p class="important bgc"></p>

結合類選擇器和元素選擇器以實現對某種元素不同樣式的細分控制（分類選擇器）
語法：元素選擇器.className{}
將樣式規則與附帶class屬性的某種元素匹配：元素class屬性的值爲分類選擇器中指定的樣式類名
指向更精確，提升樣式優先級

//只有p元素使用important樣式
    p.important{}
    <h1 class="important"></h1>
    <p class="important"></p>

2.2.4 id選擇器

id選擇器以獨立於文檔元素的方式指定樣式，僅作用於id屬性的值。
語法：選擇器前面需要#號；選擇器本身爲文檔某個元素id屬性值。
在樣式表中定義#id_value{}；在HTML文檔中將元素id屬性的值設置爲選擇器的名稱

#id_value{}
<h1 id="id_value"></h1>

2.2.5 羣組選擇器

選擇器聲明以逗號隔開的選擇器列表，用於將相同的規則作用於多個元素

h2, p.important
{
	color: green;
}

2.2.6 後代選擇器

依據元素在其位置的上下文關係定義樣式，用於選擇作爲某元素後代的元素，用空格分隔

   //只有<h1>元素中的<span>元素中的文本才能使用該樣式
    h1 span
    {
    	color:red;
    }

2.2.7 子代選擇器

子代選擇器要求選擇器之間只能存在父子關係，不能任意選擇後代元素，使用符號>作爲子結合符

div>span {
}
//只有<div>的子元素<span>元素中的文本使用該樣式

2.2.8 僞類選擇器

僞類用於向某些選擇器添加特殊的效果，使用冒號:作爲結合符，左邊是其他選擇器，右邊是僞類;

1. 鏈接僞類
   :link，未訪問的鏈接
   :visited，訪問過的鏈接
2. 動態僞類(用於呈現用戶操作)
   :hover，鼠標懸停在HTML元素
   :active，HTML元素被激活
   :focus，HTML、元素獲取焦點
3. 目標僞類
4. 元素狀態僞類
5. 結構僞類
6. 否定僞類

2.2.9 選擇器優先級

內聯樣式，如: style="…"，權值爲1000。
ID選擇器，如：#content，權值爲0100。
類，僞類、屬性選擇器，如.content，權值爲0010。
類型選擇器、僞元素選擇器，如div p，權值爲0001。
通配符、子選擇器、相鄰選擇器等。如 > +，權值爲0000。
繼承的樣式沒有權值*

選擇器類型	權值
元素選擇器	0,0,0,1
類選擇器	0,0,1,0
僞類選擇器	0,0,1,0
ID選擇器	0,1,0,0
內聯樣式	1,0,0,0

選擇器的權值加到一起，數值大的優先，權值相同則後定義的優先；
選擇器的權值計算不會超過其權值的最大數量級；
內聯樣式不能加!important

3.尺寸與邊框

3.1 CSS單位

3.1.1 尺寸單位

in：英寸(1in=2.54cm)
cm：釐米
mm：毫米
pt：磅(1/72英寸)
px：像素(計算機屏幕上一個點)
em：1em等於當前字體尺寸，2em等於當前字體尺寸的兩倍，繼承父級元素的字體大小；
%：相對於父元素百分比；
rem：與em類似，相對於根元素(body/html)設置字體尺寸的倍數

3.1.2 顏色單位

表示顏色的英文單詞，red
rgb(r,g,b)：RGB值，rgb(255,255,255)代表白色
#rrggbb：十六進制數，#ff0000
#rgb：簡寫十六進制數，#f00
rgba(r,g,b,alpha) 透明值0~1
rgb(r%,g%,b%):RGB百分比值，表現形式使用極少

3.2 尺寸屬性

3.2.1 尺寸

用於設置元素的寬度和高度，取值一般爲像素或百分比。
寬度屬性：
width、max-width、min-width
高度屬性：
height、max-height、min-height

3.2.2 溢出

使用尺寸屬性控制框的大小，如果內容所需空間大於框本身會導致內容溢出，默認垂直溢出；
overflow：指示內容溢出元素框的處理方式
visible默認值、hidden、scroll(橫向縱向一直顯示滾動條)、auto
overflow-x
overflow-y

3.2.3 設置尺寸屬性

可以設置尺寸屬性的HTML元素：

• 塊級對象
  p、div、h#、ul,ol,li,dl,dt,dd等
• 存在width、height屬性的行內元素
  img、table
• 行內塊元素

3.3 邊框屬性

3.3.1 邊框

border：width style color;
單屬性設置：必須有style屬性纔可以正常顯示
border-width/style/color;
單邊定義：
border-left/right/top/bottom-width/style/color;
border-left/right/top/bottom: width style color;
邊框樣式style 實線solid dotted圓點虛線 dashed 短線虛線 double雙實線
邊框顏色可設置爲transport，創建有寬度的不可見邊框
取消邊框：border:none/0;

3.3.2 邊框倒角

border-radius屬性：順時針設置四個倒角，取值爲絕對值或百分比；50%表示圓
單獨定義：
border-top-left-radius;
border-top-right-radius;
border-bottom-left-radius;
border-bottom-right-radius;

3.3.3 邊框陰影

box-shadow：向方框添加多個陰影，取值爲多屬性值的列表
h-shadow：必需，水平陰影的位置
v-shadow：必需，垂直陰影的位置
blur：陰影模糊距離
spread：陰影尺寸
color：陰影顏色
inset：將外部陰影改爲內部陰影

3.3.4 輪廓

輪廓是邊框邊緣的外圍，用於突出元素
outline：width style color ;
outline: none/0;
//輪廓寬度、輪廓樣式、輪廓顏色