CSS3_1.概述、語法、尺寸與邊框
CSS概述、語法、尺寸與邊框
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樣式表使用方式
三種使用方式:
- 內聯樣式
樣式定義在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;
//輪廓寬度、輪廓樣式、輪廓顏色