內聯樣式
樣式定義在HTML元素的標準屬性style中，CSS語法：
1）只需要將分號隔開的一個或多個屬性/值對作為元素的style屬性的值；
2）屬性和值之間用：連線；
3）屬性之間用；隔開；
Eg.1 < h1 style=“color:blue; background-color:silver;”>文字< /h1>
一般禁止使用內聯樣式，優先順序最高(離元素最近)且不能重用
內部樣式表
樣式表規則位於文件頭元素< style>元素內，在文件< head>元素內新增< style>元素，在< style>元素中新增多個樣式規則，每個樣式規則由選擇器(決定使用該樣式的元素)和樣式宣告(使用{}包含多個屬性/值對)組成；
可以在本頁面重用，但不能在其他檔案呼叫，所以多用於學習和測試
Eg.2 < style type=“text/css”>h1{color:blue;}< /style>
外部樣式表
建立單獨的樣式表文件用來儲存樣式規則，檔案字尾為.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樣式規則可以被子元素繼承；
層疊性：可以定義多個樣式，不衝突時多個樣式表中的樣式可層疊為一個；
優先順序：樣式定義衝突會按照不同樣式規則的優先順序來應用樣式

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 偽類選擇器

偽類用於向某些選擇器新增特殊的效果，使用冒號:作為結合符，左邊是其他選擇器，右邊是偽類;

連結偽類
:link，未訪問的連結
:visited，訪問過的連結
動態偽類(用於呈現使用者操作)
:hover，滑鼠懸停在HTML元素
:active，HTML元素被啟用
:focus，HTML、元素獲取焦點
目標偽類
元素狀態偽類
結構偽類
否定偽類

2.2.9 選擇器優先順序

選擇器型別	權值
元素選擇器	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;
//輪廓寬度、輪廓樣式、輪廓顏色

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

CSS概述、語法、尺寸與邊框

1.CSS概述

1.1 CSS概述

1.1.1 CSS作用

1.1.2 CSS定義

1.1.3 CSS與HTML之間關係

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

1.1.5 常用屬性

1.2 CSS樣式表

1.2.1 CSS樣式表使用方式