時間：2016年5月16號
前三天，HTML5的基礎(chǔ)已經(jīng)完結(jié)。網(wǎng)頁中涉及的樣式就跟我們今天學(xué)習(xí)的css有關(guān)。首先，在HTML的基礎(chǔ)上再來學(xué)習(xí)css的樣式，總是覺得要輕松很多，但是總是存在記憶的問題，且不說css的樣式多而雜，就連屬性也有一大堆，這樣的大規(guī)模強制性接受和記憶并非可能。但是，總歸一點，多練多些，孰能生巧。
首先，今天的內(nèi)容分幾大塊。我們先來看看css的基本概述；
一、CSS概述：
.CSS 的作?
? 什么是 CSS
? CSS 與 HTML 之間的關(guān)系
? HTML 屬性與 CSS 樣式的使?用原則
使用css樣式表
? 使?用 CSS 樣式表的?方式
? 內(nèi)聯(lián)?方式使?用 CSS
? 內(nèi)部樣式表
? 外部樣式表
二、具體講解css
a、 CSS 的作?
i 查看如下代碼
<body bgcolor="silver" text="blue">
<h2>h2 text</h2>
<hr color="red" />
Some text here. </body>
注意： 如果使?用 HTML 標(biāo)記中的屬性來定義樣式，各元素對于樣式的屬性定義各不相同！
其顯示的結(jié)果是h2 text和some text here字體顏色均為藍(lán)色，body的背景顏色是銀色，hr為分割線，其顏色為紅色。
ii.查看如下代碼
<html>
<head>
<style type="text/css"> body {
background-color:silver; color:blue; }
h2 {
background-color:orange; color:green;
}
hr { color:red; }
</style>
</head>
上述代碼中要注意元素選擇的css樣式style是寫在<heade></head>之間的。根據(jù)上述的css樣式，body中的相應(yīng)的標(biāo)簽會被設(shè)置樣式。
b、什么是 CSS
? CSS（Cascading Style Sheets）：層疊樣式表，?又叫級聯(lián)樣式表，簡稱樣式表
? 用于 HTML ?文檔中元素的樣式定義 – 實現(xiàn)了將內(nèi)容與表現(xiàn)分離 – 提?高代碼的可重?用性和可維護(hù)性
CSS 與 HTML 之間的關(guān)系 ? HTML ?用于構(gòu)建??網(wǎng)?頁的結(jié)構(gòu) ? CSS ?用于構(gòu)建 HTML 元素的樣式 ? HTML 是?頁?面的內(nèi)容組成，CSS 是?頁?面的表現(xiàn)
HTML 屬性與 CSS 樣式的使?用原則 ? W3C 建議盡量使?用 CSS 樣式取代 HTML 屬性 – 實現(xiàn)內(nèi)容和表現(xiàn)的分離 – 如果為 HTML 所特有的屬性，則使?用 HTML 屬性
c 、HTML 屬性與 CSS 樣式的使?用原則
? W3C 建議盡量使?用 CSS 樣式取代 HTML 屬性 – 實現(xiàn)內(nèi)容和表現(xiàn)的分離 – 如果為 HTML 所特有的屬性，則使?用 HTML 屬性
三、引入css的三種方式：
1、標(biāo)簽內(nèi)引用，style=“樣式名：樣式值；...”
2、內(nèi)部引用
3、外部引用
其中標(biāo)簽內(nèi)引用的優(yōu)先級別最高。外部引用和內(nèi)部引用的優(yōu)先級別是一樣的。
具體引用方式如下：
i 內(nèi)聯(lián)?方式使?用 CSS
? 樣式定義在 HTML 元素的標(biāo)準(zhǔn)屬性 style ?里
? CSS 語法
– 只需要將分號隔開的?一個或者多個屬性/值對作為元素的 style 屬性的值 – 屬性和屬性值之間?用：連接
– 多對屬性之間?用；隔開
如下：
<h1 style =“background-color : silver ; color : blue ;”> ?文本 </h1>
?
ii 知 識 講 解
內(nèi)部樣式表
? 樣式表規(guī)則位于?文檔頭元素中的 <style> 元素內(nèi)
– 在?文檔的 <head> 元素內(nèi)添加 <style> 元素
– 在 <style> 元素中添加樣式規(guī)則
<html>
<head>
<style type="text/css">
h1 { color : blue ; }
</style> </head>
<body>
<h1>文本1</h1>
<h1>文本2</h1>
</body> </html>
?可以在當(dāng)前?頁?面范圍內(nèi)重?用
?知 識 講 解
內(nèi)部樣式表（續(xù)1）
? 在 <style> 元素中添加樣式規(guī)則 – 可以定義多個樣式規(guī)則 – 每個樣式規(guī)則有兩個部分：選擇器和樣式聲明
? 選擇器：決定哪些元素使?用這些規(guī)則
? 樣式聲明：?一對?大括號，包含?一個或者多個屬性/值對
外部樣式引用和內(nèi)部引用差不多，唯一的區(qū)別就是：內(nèi)部引用是在style里面引用，而外部引用則是新建一個css的文檔實行外部引用。
外部引用寫法如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h1>1號標(biāo)題</h1>
<p>段落</p>
<span>其他?文本</span> </body>
</html>
四、css語法
i CSS 語法規(guī)范
. CSS 語法規(guī)范總結(jié)
? CSS 樣式表特征
? 樣式優(yōu)先級
? !important 規(guī)則
ii css選擇器
? 元素選擇器
? 類選擇題
? id 選擇器
? 群組選擇器
? 后代選擇器
? 偽類選擇器
? 通?用選擇器
? ?子代選擇器
? 選擇器優(yōu)先級
a、CSS 語法規(guī)范總結(jié) ? 內(nèi)聯(lián)樣式：由樣式聲明組成
<h1 style=“background-color:silver;color:blue;”>文本</h1>
? 樣式表（內(nèi)部樣式表或者外部樣式表） – 由多個樣式規(guī)則組成 – 每個樣式規(guī)則有兩個部分：選擇器和樣式聲明
b、CSS 樣式表特征
? 繼承性 、
– ?大多數(shù) CSS 的樣式規(guī)則可以被繼承
? 層疊性
– 可以定義多個樣式 – 不沖突時，多個樣式表中的樣式可層疊為?一個
? 優(yōu)先級
– 樣式定義沖突時，按照不同樣式規(guī)則的優(yōu)先級來應(yīng)?用樣式
樣式優(yōu)先級
? 瀏覽器缺省設(shè)置
? 外部樣式表或者內(nèi)部樣式表 – 就近優(yōu)先
? 內(nèi)聯(lián)樣式
注意：相同的樣式，如果重復(fù)定義，以最后一次的定義為準(zhǔn)
iii
!important 規(guī)則
? !important 可以調(diào)整樣式規(guī)則的優(yōu)先級
? 將 !important 添加在樣式規(guī)則之后，中間?用空格隔開
– 選擇器 {屬性 : 屬性值 !important; }
? 謹(jǐn)慎使?
在<html>文檔中：
<p class="s1">段落?文本</p>
在樣式表中：
<style type="text/css">
p.s1 { color:Red;}
p.s1 { color:Green;}
</style>
iiii CSS 基礎(chǔ)選擇器
a、通?用選擇器
? 通?用選擇器，顯?示為?一個星號（*）
– 可以與任何元素匹配 – 常?用于設(shè)置一些默認(rèn)樣式，?比如設(shè)置整個?文檔的?文本的默 認(rèn)字體和?大?小
- {
font-size : 9pt; font-family : "Times New Roman";
}
b、元素選擇器
? html ?文檔的元素就是選擇器
– 比如 <p>、<h1> 等
html { color : black ; }
h1 { color : blue ; }
h2 { color : silver ; }
c、類選擇器
? 語法為：
.className { color:red;}
– 類名稱不能以數(shù)字開頭
? 所有能夠附帶class屬性的元素都可以使?用此樣式聲明
– 將元素的 class屬性的值設(shè)置為樣式類名
? 樣式表中：聲明?一個樣式類
.myClass
{
background-color : Pink; font-size : 35pt;
}
? html ?文檔中：將元素的 class 屬性的 值設(shè)置為樣式類的名稱
<h2 class="myClass">h2?文本</h2>
<p class="myClass">段落?文本</p>
類選擇器（續(xù)1）
? 可以將多個類選擇器應(yīng)?用于同一個元素（多類選擇器）
– HTML 元素的 class 屬性的值中可能包含一個詞列表 – 各個詞之間?用空格分隔，每個詞都是一個類選擇器
? 樣式表中：聲明兩個樣式類
.important
{
font-weight : bold;
}
.warning
{
color : red;
}
? html ?文檔中：將元素的 class 屬性的 值設(shè)置為多個樣式類名的列表 <p class="warning">警告</p> <p class="important">重要</p> <p class="important warning">哈哈</p>
其結(jié)果顯示為“警告”和“哈哈”是紅色而且寬度增加，而“重要”是黑色。
類選擇器（續(xù)2）
? 可以將類選擇器和元素選擇器結(jié)合起來使?用，以實現(xiàn)對某 種元素中不同樣式的細(xì)分控制（分類選擇器）
? 語法為：元素選擇器
.className { }
– 先聲明一個元素選擇器
– 然后使?用?一個點號（.）代表將使?用類選擇器
– 然后聲明一個類的名稱
– 最后使?用?對?大括號聲明樣式規(guī)則
? 將樣式規(guī)則與附帶 class 屬性的某種元素匹配
– 元素的 class 屬性的值為分類選擇器中指定的樣式類名
例子：
? 樣式表中：定義?一個分類選擇器
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
? html ?文檔中：將元素的 class 屬性的值設(shè)置為樣式類的名稱
<h2 class="important">h2?文本</h2>
<p class="important">段落?文本</p>
結(jié)果會發(fā)現(xiàn)只有<p>元素使用了樣式，如果要h2也使用樣式，那么可以這樣在樣式表中這樣寫：
h2，p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
既可以實現(xiàn)h2 也使用了樣式。
d、id 選擇器
? id 選擇器以一種獨?立于?文檔元素的?方式來指定樣式
? 它僅作?用于 id 屬性的值
? 語法為：
– 選擇器前?面需要有一個 # 號
– 選擇器本?身則為?文檔中某個元素的 id 屬性的值
例子如下：
? 樣式表中：定義?一個 id 選擇器
mostImportant
{
color:red;
background:yellow;
}
? html ?文檔中：將元素的 id 屬性的值設(shè)置為選擇器的名稱
<h1 id="mostImportant">This is important!</h1>
<h1 >This is important!</h1>
結(jié)果顯示為：第一個This is important!背景變成了黃色。這就是后面所說的群組選擇器
e、群組選擇器
? 選擇器聲明為以逗號隔開的選擇器列表
– 將?一些相同的規(guī)則作?用于多個元素
樣式表中：定義選擇器分組
h2, p.important { color:green; font-size:20pt; border:1px solid red;
?html ?文檔中：
<p class="important">p text</p>
<h2>h2 text</h2>
f、后代選擇器
? 依據(jù)元素在其位置的上下?文關(guān)系來定義樣式
? ?又稱為包含選擇器，?用于選擇作為某元素后代的元素
– 選擇器一端包括兩個或多個?用空格分隔的選擇器
? 樣式表中：
定義派?生選擇器
h1 span { color:red; }
? html ?文檔中：
<h1> An<span>important</span> question. </h1> <span>other</span>
最后會發(fā)現(xiàn) 只有 <h1> 元素中的 <span> 元 素中的?文本使?用該樣式
g、偽類選擇器
? 偽類?用于向某些選擇器添加特殊的效果
? 使?用冒號(:)作為結(jié)合符，結(jié)合符左邊是其他選擇器，右邊 是偽類 – 選擇器 : 偽類選擇器
? CSS 偽類選擇器可以分為
– 鏈接偽類
– 動態(tài)偽類
– 目標(biāo)偽類
– 元素狀態(tài)偽類
– 結(jié)構(gòu)偽類
– 否定偽類
偽類選擇器（續(xù)1）
? 鏈接偽類
– : link ，適?用于尚未訪問的鏈接 – : visited ，適?用于訪問過的鏈接
? 動態(tài)偽類，?用于呈現(xiàn)?用戶操作 – :hover，適?用于?鼠標(biāo)懸停在 HTML 元素時
– :active，適?用于 HTML 元素被激活時
– :focus，適?用于 HTML 元素獲取焦點時
注意：順序一定不能改 偽類選擇器優(yōu)先級比類選擇器高
例子：
a:link
{
color: black;
font-size:15pt;
}
a:visited
{
color: pink;
font-size:15pt;
}
a:hover
{
font-size : 20pt;
}
a:active
{
color : red;
}
h、優(yōu)先級別
五、尺寸與邊框
i css單位
——尺寸單位
——顏色單位
ii 尺寸屬性
——尺寸
——溢出
——哪些HTML元素可以設(shè)置尺寸屬性
iii 邊框?qū)傩?br>
——邊框
——邊框倒角
——邊框陰影
——圖片邊框
——輪廓
A、css單位
%，in英寸，cm，mm，pt，px，em
B、顏色單位
.rgb取值范圍0~255（red，green，blue）
.rbga a代表透明度，取值0~1.
.rgb有兩種表示方式（255，0，0）（50%，50%，50%）
? #rrggbb：?十六進(jìn)制數(shù)，如#ff0000 ? #rgb：簡寫的?十六進(jìn)制數(shù)，如#f00 ? 表?示顏?色的英?文單詞，如 red
C、尺?
? 尺?寸屬性是?用于設(shè)置元素的寬度和?高度
– 單位一般為像素或百分?比
? 寬度屬性
– width
– max-width
– min-width
? ?高度屬性
– height
– max-height
– min-height
D、溢出
? 使?用尺?寸屬性控制框的?大?小時，如果內(nèi)容所需的空間?大于 框本?身的空間，會導(dǎo)致內(nèi)容溢出
? overflow：當(dāng)內(nèi)容溢出元素框時如何處理
– visible （默認(rèn)的）
– hidden（隱藏的）
– scroll （溢出滾動條）
– auto （超出滾動條）
? overflow-x
? overflow-y
E、哪些 HTML 元素可以設(shè)置尺?寸屬性
? 塊級對象，
如
– p,
– div
– h1,h2,h3,h4,h5,h6
– ul,ol,li,dl,dt,dd等
? 存在width、height屬性的 HTML 元素 – img
– table 等
F、邊框
? 簡寫?方式 – 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
注意：?邊框顏?色，可設(shè)置為值 transparent（?用于創(chuàng)建有寬度的不可?見邊框）
G、邊框倒?角
? border-radius 屬性
– 為簡寫屬性，按順時針順序設(shè)置四個倒?角
– 取值為絕對值或者百分?比
? 單獨定義
– border-top-left-radius：邊框左上?角
– border-top-right-radius：邊框右上?角
– border-bottom-left-radius：邊框左下?角
– border-bottom-right-radius：邊框右下?角
H、邊框陰影
? 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 屬性：將圖片規(guī)定為包圍 div 元素的邊框
– border-image: source width repeat;
? 也可以分別設(shè)置
– border-image-source：圖?片的路徑
– border-image-width：圖?片邊框的寬度
– border-image-repeat：圖像邊框是否應(yīng)平鋪(repeat)、鋪滿 (round)或拉伸(stretch)
輪廓
? 輪廓（outline）是繪制于元素周圍的?一條線，位于邊框邊 緣的外圍，可起到突出元素的作?用
? 簡寫?方式 – outline:color style width;
? outline-width：輪廓的寬度 ? oultine-style：輪廓的樣式
? outline-color：輪廓的顏?色
本次課程到此結(jié)束，相關(guān)參考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基礎(chǔ)</title>
<style>
/子代選擇器,直系子代，和后代選擇器優(yōu)先級別一致/
div>span{
color:blue;
}
/后代選擇器，獲取dic里面的所有span/
div span{
color:red;
}
/偽類選擇器,最常用的是hover/
/link默認(rèn)狀態(tài)下/
.a{
background-color:black;
}
a:link{
background-color: red;
}
#a{
background-color: pink;
}
/a的鏈接被訪問之后/
a:visited{
background-color: blue;
}
/鼠標(biāo)懸浮的時候/
a:hover{
background-color: yellow;
}
/鼠標(biāo)按壓時/
a:active{
background-color: green;
}
a:focus{
background-color: gray;
}
input{
outline: 0;
}
/*偽類選擇器可以使用其他選擇器先獲取對應(yīng)標(biāo)簽*/
.txt{
color: gray;
font-size: 9pt;
}
.txt:focus{
color: black;
font-size: 11pt;
}
/*基本選擇器的優(yōu)先級，內(nèi)聯(lián)樣式>id>偽類>類>標(biāo)簽名*/
a{
color: blue;
}
#footer{
width: 100px;
height: 100px;
/*a代表透明度,取值為0~1.
*/
background-color: #30f;
}
#art {
border-image: url("nihao/22.jpg") 50repeat;
/*border: solid 1px gray;
/*大于半徑默認(rèn)去半徑*/
/*box-shadow: 10px 3px 5px 10px blue inset;
border-radius:50px 40px 30px 20px;
width:100px;
height:100px;
overflow:auto;*/
/* overflow處理溢出scrool內(nèi)容溢出顯示滾動條,，visible看得見的,默認(rèn)的 hidden隱藏 ,auto內(nèi)容超出才會顯示滾動條/
}
/可以設(shè)置寬度的標(biāo)簽為快標(biāo)簽，img，table，行標(biāo)簽設(shè)置寬高需要裝話為塊標(biāo)簽，結(jié)構(gòu)化標(biāo)簽都是塊標(biāo)簽/
/邊框樣式重用solid，dotted，實現(xiàn)和虛線, transparent可以設(shè)置邊框顏色，只是不顯示邊框*/
</style>
</head>
<body>
<div id="head">
<span>我是div里面的第一層span</span>
<p>我是<span>div里面的第二層span</p>
<a id="a" class="a" >taobao</a>
</div>
<input class="txt" type="text" value="用戶名"/>
<input class="txt" type="text" value="地址">
<input class="txt" type="button" value="cuixu"/>
<div id="footer"></div>
<p id="art">
匆匆那年我們究竟說了幾遍再見之后在拖延，誰有沒有愛過不是一場七情上面的雄辯。目視前方下巴抬高更漂亮，不就是女的vdjvndg 就看你發(fā)過苦難代名詞 多加看不見很快樂地方看過看不了的可喜歡你的瘋狂吶喊教科書的房價過快的上空飛過可視電話可是對方能體會就哦哦濕熱建設(shè)規(guī)劃開始給驚恐山谷接電話剛開始</p>
</body>
</html>
