CSS（Cascading Style Sheets）：層疊樣式表杏糙，又叫級(jí)聯(lián)樣式表慎王，簡(jiǎn)稱樣式表
用于 HTML 文檔中元素的樣式定義
實(shí)現(xiàn)了將內(nèi)容與表現(xiàn)分離
提高代碼的可重用性和可維護(hù)性
body
{
background-color:silver;
color:blue;
}
h2
{
background-color:orange;
color:green;
}
hr { ?color:red; ?}
HTML 用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)
CSS 用于構(gòu)建 HTML 元素的樣式
HTML 是頁(yè)面的內(nèi)容組成，CSS 是頁(yè)面的表現(xiàn)
W3C 建議盡量使用 CSS 樣式取代 HTML 屬性
實(shí)現(xiàn)內(nèi)容和表現(xiàn)的分離
如果為 HTML 所特有的屬性宏侍，則使用 HTML 屬性
內(nèi)聯(lián)方式
樣式定義在單個(gè)的 HTML元素中
樣式定義在 HTML 元素的標(biāo)準(zhǔn)屬性 style 里
CSS 語(yǔ)法
只需要將分號(hào)隔開(kāi)的一個(gè)或者多個(gè)屬性/值對(duì)作為元素的style 屬性的值
屬性和屬性值之間用：連接
多對(duì)屬性之間用柬祠；隔開(kāi)
文本
內(nèi)部樣式表
樣式定義在 HTML 頁(yè)的頭元素中
樣式表規(guī)則位于文檔頭元素中的 元素內(nèi)
在文檔的 元素內(nèi)添加 元素
在 元素中添加樣式規(guī)則
h1 { color : blue ; }
文本1
文本2
在 元素中添加樣式規(guī)則
可以定義多個(gè)樣式規(guī)則
每個(gè)樣式規(guī)則有兩個(gè)部分：選擇器和樣式聲明
選擇器：決定哪些元素使用這些規(guī)則
樣式聲明：一對(duì)大括號(hào)，包含一個(gè)或者多個(gè)屬性/值對(duì)
外部樣式表
將樣式定義在一個(gè)外部的 CSS 文件中（.css 文件）
由 HTML 頁(yè)面引用樣式表文件
第一步：創(chuàng)建一個(gè)單獨(dú)的樣式表文件用來(lái)保存樣式規(guī)則
一個(gè)純文本文件负芋，文件后綴為 .css
該文件中只能包含樣式規(guī)則
樣式規(guī)則由選擇器和樣式聲明組成
第二步：在需要使用該樣式表文件的頁(yè)面上漫蛔，使用 元素鏈接需要的外部樣式表文件
在文檔的 元素內(nèi)添加 元素
1號(hào)標(biāo)題
段落
其他文本
繼承性
大多數(shù) CSS 的樣式規(guī)則可以被繼承
層疊性
可以定義多個(gè)樣式
不沖突時(shí)，多個(gè)樣式表中的樣式可層疊為一個(gè)
優(yōu)先級(jí)
樣式定義沖突時(shí)旧蛾，按照不同樣式規(guī)則的優(yōu)先級(jí)來(lái)應(yīng)用樣式
瀏覽器缺省設(shè)置
外部樣式表或者內(nèi)部樣式表
就近優(yōu)先
內(nèi)聯(lián)樣式
相同樣式重復(fù)定義以最后一次為準(zhǔn)
!important 可以調(diào)整樣式規(guī)則的優(yōu)先級(jí)
將 !important 添加在樣式規(guī)則之后莽龟，中間用空格隔開(kāi)
選擇器 ?{屬性 : 屬性值 ?!important; }
謹(jǐn)慎使用
通用選擇器，通配符锨天，顯示為一個(gè)星號(hào)（*）
可以與任何元素匹配
常用于設(shè)置一些默認(rèn)樣式毯盈，比如設(shè)置整個(gè)文檔的文本的默認(rèn)字體和大小
html 文檔的元素就是選擇器
比如
、
等
語(yǔ)法為：.className ?{ color:red;}
類名稱不能以數(shù)字開(kāi)頭
所有能夠附帶class屬性的元素都可以使用此樣式聲明
將元素的 class屬性的值設(shè)置為樣式類名
css中
myClass
{
background-color : Pink;
font-size : 35pt;
}
html中
h2文本
段落文本
分類選擇器：加important的p
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
id 選擇器以一種獨(dú)立于文檔元素的方式來(lái)指定樣式
它僅作用于 id 屬性的值
語(yǔ)法為：
選擇器前面需要有一個(gè) # 號(hào)
選擇器本身則為文檔中某個(gè)元素的 id 屬性的值
選擇器聲明為以逗號(hào)隔開(kāi)的選擇器列表
將一些相同的規(guī)則作用于多個(gè)元素
css中
h2, p.important
{
color:green;
font-size:20pt;
border:1px solid red;
}
html中
p text
h2 text
依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式
又稱為包含選擇器病袄，用于選擇作為某元素后代的元素
選擇器一端包括兩個(gè)或多個(gè)用空格分隔的選擇器
css中
h1 ?span
{
color:red;
}
html中
An important ?question.
other
子選擇器
div>span
{
color : red;
font-size:20pt;
}
偽類用于向某些選擇器添加特殊的效果
使用冒號(hào)(:)作為結(jié)合符搂赋，結(jié)合符左邊是其他選擇器，右邊是偽類
選擇器 : 偽類選擇器
CSS 偽類選擇器可以分為
鏈接偽類
動(dòng)態(tài)偽類
目標(biāo)偽類
元素狀態(tài)偽類
結(jié)構(gòu)偽類
否定偽類
鏈接偽類
: link 益缠，適用于尚未訪問(wèn)的鏈接
: visited 脑奠，適用于訪問(wèn)過(guò)的鏈接
動(dòng)態(tài)偽類，用于呈現(xiàn)用戶操作
:hover幅慌，適用于鼠標(biāo)懸停在 HTML 元素時(shí)
:active宋欺，適用于 HTML 元素被激活時(shí)
:focus，適用于 HTML 元素獲取焦點(diǎn)時(shí)
a:link {
color: black;
font-size:15pt;
}
a:visited ?{
color: pink;
font-size:15pt;
}
a:hover ?{
font-size : 20pt;
}
a:active ?{
color : red;
}
css中
.txt {
color : gray;
font-size : 9pt;
}
.txt:focus {
color : black;
font-size: 11pt;
注意：動(dòng)態(tài)偽類在鏈接偽類之后胰伍，順序?yàn)長(zhǎng)VHA
}
html中
input class="txt" type="text" value="用戶名" />
選擇器優(yōu)先級(jí)：
尺寸和邊框
尺寸單位
%：百分比
in：英寸
cm：厘米
mm：毫米
pt：磅(1pt等于1/72英寸)
px：像素(計(jì)算機(jī)屏幕上的一個(gè)點(diǎn))
em：1em等于當(dāng)前的字體尺寸齿诞，2em等于當(dāng)前字體尺寸的兩倍
顏色單位
rgb(x,x,x)：RGB 值，如 rgb(255,0,0)
rgb(x%,x%,x%)：RGB百分比值骂租，如rgb(100%,0%,0%)
#rrggbb：十六進(jìn)制數(shù)祷杈，如#ff0000
#rgb：簡(jiǎn)寫(xiě)的十六進(jìn)制數(shù)，如#f00
表示顏色的英文單詞渗饮，如 red
與尺寸有關(guān)的屬性
寬度：width但汞，max-width宿刮，min-width
高度：height，max-height特占，min-height
p ?{border:1px solid red;} ? ? ? ? // ?borde：寬度糙置，形狀云茸，顏色
邊框?qū)傩?/p>
簡(jiǎn)寫(xiě)方式
border:width style color;
具體方式border-left/right/top/bottom:width style color;
border-width
border-left/right/top/bottom-width
border-style
border-left/right/top/bottom-style
border-color
border-left/right/top/bottom-color
邊框倒角
border-radius ?順時(shí)針設(shè)置四個(gè)倒角
具體：border-top-left-radius：邊框左上角
border-top-right-radius：邊框右上角
border-bottom-left-radius：邊框左下角
border-bottom-right-radius：邊框右下角
css中
div
{
border:2px solid red;
width:200px;
height:50px;
}
#d1
{
border-radius:10px 15px 20px 25px;
}
#d2
{
border-radius:5px;
}
html中
邊框陰影 box-shadow
box- shadow：h-shadow ?v-shadow ?blur ?spread ?color ? inset
h-shadow：必需是目，為水平陰影的位置
v-shadow：必需，為垂直陰影的位置
blur：可選标捺，為模糊距離
spread：可選懊纳，為陰影的尺寸
color：可選，為陰影的顏色
inset：可選亡容，將外部陰影 (outset) 改為內(nèi)部陰影
圖片邊框
border-image：source ?width ?repeat
border-image-source：圖片的路徑
border-image-width：圖片邊框的寬度
border-image-repeat：圖像邊框是否應(yīng)平鋪(repeat)嗤疯、鋪滿(round)或拉伸(stretch)
輪廓
outline：color ?style? width
p.first ?{
min-width:300px;
max-width:500px;
}
溢出處理
overflow ? ? ?? ? ?visible ? ? hidden ? ? ? scroll ? ? ? ?auto
overflow-x
overflow-y
那些html元素可以設(shè)置尺寸屬性
1，塊級(jí)元素如div ?p ?hn ?ul ol li ?dl dt dd
2闺兢，存在width和height的元素如：img ?table
