《Web前端開發(fā)-網(wǎng)頁設(shè)計(jì)》單元3 CSS基礎(chǔ)

單元3

CSS基礎(chǔ)3.1

CSS概述PART

01什么是CSS主要內(nèi)容C

O

N

T

E

N

T

SPART

03網(wǎng)頁引入CSS的方法PART

02CSS的基本語法什么是CSSCSS指層疊樣式表(Cascading

Style

Sheets)，簡稱樣式表，最初提出于1994年，1996年12月CSS第一版本由W3C組織發(fā)布，到目前為止版本有CSS1.0、CSS2.0、CSS3.0，與采用表格進(jìn)行布局的網(wǎng)頁相比，采用CSS+DIV進(jìn)行網(wǎng)頁布局有三大顯著優(yōu)勢：1.表現(xiàn)和內(nèi)容相分離所謂內(nèi)容是通過HTML文件存放網(wǎng)頁相關(guān)信息，表現(xiàn)是通過CSS將樣式設(shè)計(jì)部分剝離出來放在一個獨(dú)立樣式文件中，使頁面對搜索引擎更加友好。什么是CSS提高頁面瀏覽速度對于同一個頁面視覺效果，采用CSS+DIV重構(gòu)的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器不用去編譯大量冗長的標(biāo)簽。易于維護(hù)和改版相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級的精確控制，只要簡單修改幾個CSS文件就可以重新設(shè)計(jì)整個網(wǎng)站的頁面。CSS的基本語法CSS語法規(guī)則集由選擇器和聲明塊兩個部分組成，下面以h1選擇器設(shè)置顏色和字號兩種樣式為例子，來分析其CSS語法的詳細(xì)結(jié)構(gòu)，如下圖：CSS的基本語法包含一條或多條聲明，聲明之間用分號分隔。每條聲明由一個屬性和一個值組成，屬性和值之間用冒號分隔。所有聲明塊通過花括號括起來，形成當(dāng)前選擇器的CSS樣式。3位或6位十六進(jìn)制值表示的顏色代碼：3位各用1位表示紅綠藍(lán)三原色的值，6位各用2位表示紅綠藍(lán)的值。聲明塊通過選擇器選中需要改變樣式的HTML元素或元素組合。CSS選擇器網(wǎng)頁引入CSS的方法<style

type="text/css">@import

url(“外部樣式表路徑”);</style>Link方式加載所謂外部樣式表是專門創(chuàng)建一個CSS文檔來存放網(wǎng)頁元素的所有樣式內(nèi)容，擴(kuò)展名為.css。<link

href="外部樣式表路徑"rel="stylesheet"type="text/css"/>@import方式加載一、外部樣式表網(wǎng)頁引入CSS的方法當(dāng)單個網(wǎng)頁文檔需要特殊的樣式時，可以使用內(nèi)嵌式樣式表，創(chuàng)建的方式是使用<style>標(biāo)簽在文檔頭部定義內(nèi)嵌式樣式表，簡稱內(nèi)嵌式。加載方式二、內(nèi)嵌式樣式<style>p

{font-family:"宋體";font-size:20px;}</style>網(wǎng)頁引入CSS的方法行內(nèi)式也稱內(nèi)聯(lián)樣式，這種方式由于內(nèi)容和樣式在一起，違背結(jié)構(gòu)與表現(xiàn)分離的原則，不提倡過多使用，但它擁有最高的優(yōu)先權(quán)，它優(yōu)先于內(nèi)嵌式樣式表、外部樣式表或?yàn)g覽器的默認(rèn)樣式加載方式二、行內(nèi)式樣式<p

style="font-family:"宋體";font-size:20px;">利用行內(nèi)式設(shè)置p標(biāo)簽樣式</p>感謝觀看單元3

CSS基礎(chǔ)3.10

CSS的繼承性與優(yōu)先級主要內(nèi)容C

O

N

T

E

N

T

SPART

01CSS樣式的層疊性PART

03CSS樣式的優(yōu)先級PART

02CSS樣式的繼承性CSS樣式的層疊性層疊性是指多種CSS樣式疊加到同一個HTML元素上，當(dāng)設(shè)置相同的樣式時，一個樣式就會覆蓋（層疊）另一個樣式，產(chǎn)生樣式?jīng)_突。層疊原則：樣式?jīng)_突，遵循就近原則，執(zhí)行離結(jié)構(gòu)最近的樣式。樣式不沖突，不會層疊。CSS樣式的層疊性繼承性是指被包在內(nèi)部標(biāo)簽將擁有外部標(biāo)簽的樣式屬性，即子元素可以繼承父元素屬性。繼承特性：恰當(dāng)?shù)厥褂美^承性可以簡化代碼，減低CSS樣式的復(fù)雜性。子元素可以繼承父元素的屬性：一般來說，文字的所有屬性都可以繼承，如顏色、大小、字體、粗細(xì)、風(fēng)格、行高等。子元素不能繼承父元素屬性：比如盒子模型、背景、定位、生成內(nèi)容、輪廓樣式等屬性。某些HTML元素繼承的特殊性。繼承的優(yōu)先級最近的祖先樣式比其他祖先樣式優(yōu)先級高。CSS樣式的優(yōu)先級同等級原則優(yōu)先級高的優(yōu)先，如行內(nèi)式樣式>內(nèi)嵌式樣式>外部樣式。優(yōu)先級相同時，則采用就近原則，選擇后定義的樣式。屬性后面加!important時，絕對優(yōu)先。來自繼承的屬性，優(yōu)先級最低。CSS樣式的優(yōu)先級不同等級原則當(dāng)選擇器等級不同時，則根據(jù)選擇器權(quán)重執(zhí)行。選擇器權(quán)重?cái)?shù)值繼承、*0,0,0,0標(biāo)簽選擇器、偽元素選擇器0,0,0,1類選擇器、屬性選擇器、偽類選擇器0,0,1,0ID選擇器0,1,0,0行內(nèi)式樣式style=“”1,0,0,0！important無窮大單個選擇器權(quán)重值見表中，如ID選擇器權(quán)重為1000。組合選擇器的優(yōu)先級關(guān)系，權(quán)值計(jì)算公式如下：權(quán)值=1000第一等級個數(shù)+100第二等級個數(shù)+10第三等級個數(shù)+1第四等級個數(shù)感謝觀看單元3

CSS基礎(chǔ)3.2

CSS選擇器PART

01基本選擇器主要內(nèi)容C

O

N

T

E

N

T

SPART

03屬性選擇器PART

02組合選擇器PART

04偽選擇器CSS基本選擇器選擇器說明E選擇指定類型的網(wǎng)頁元素E#id選擇匹配E的元素，且匹配元素的id為“id”，E選擇符可以省略。選擇匹配E的元素，且匹配元素的class屬性值為“class”，E選擇符可以省略。E.class*選取所有元素?！景咐?.2.1】使用CSS基本選擇器基本選擇器即簡單選擇器，主要是根據(jù)元素的名稱、id、類來選擇元素CSS組合選擇器選擇器說明E

F選擇匹配F的元素，且該元素被包含在匹配E的元素內(nèi)。E

>

F選擇匹配F的元素，且該元素為所匹配E元素的子元素。E

+

F選擇匹配F的元素，且該元素為所匹配E元素后面相鄰的位置。E

~

F選擇前面有E元素的每個F元素。【案例3.2.2】使用CSS組合選擇器組合選擇器是根據(jù)簡單選擇器之間的特定關(guān)系來選擇元素的。組合選擇器可以包含多個簡單選擇器。元素的不同狀態(tài)對元素進(jìn)行選擇。CSS屬性選擇器選擇器說明選擇匹配E的元素，且該元素定義了foo屬性。E選擇符可以省略，表示選擇定義了foo屬性的任意類型的元素。選擇匹配E的元素，且該元素foo屬性值為“bar”選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個以空格符分隔的列表，列表中的一個值為“bar”。選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個用連字符（-）分隔的列表，值以“en”開頭。E[foo]E[foo="bar"]E[foo~="bar"]E[foo|="en"]【案例3.2.3】使用CSS屬性選擇器屬性選擇器是根據(jù)元素屬性或?qū)傩灾档那闆r來選擇元素。元素的不同狀態(tài)對元素進(jìn)行選擇。CSS偽選擇器選擇器說明E:link選擇匹配E的元素，且匹配元素被定義了超鏈接并未被訪問。E:visited選擇匹配E的元素，且匹配元素被定義了超鏈接并已被訪問。E:active選擇匹配E的元素，且匹配元素被激活E:hover選擇匹配E的元素，且匹配元素正被鼠標(biāo)經(jīng)過E:focus選擇匹配E的元素，且匹配元素獲取了焦點(diǎn)E:first-child選擇匹配E的元素，且該元素為父元素的第一個子元素。偽類選擇器根據(jù)元素的不同狀態(tài)對元素進(jìn)行選擇。CSS偽選擇器選擇器說明E::first-line選擇匹配E元素內(nèi)的第一行文本E::first-letter選擇匹配E元素內(nèi)的第一個字符E::before在匹配E的元素前面插入內(nèi)容E::after在匹配E的元素后面插入內(nèi)容【案例3.2.4】使用CSS偽類、偽元素選擇器偽元素選擇器則用于選擇并設(shè)置元素指定部分的樣式。感謝觀看單元3

CSS基礎(chǔ)3.3

CSS文本樣式PART

01設(shè)置字體樣式主要內(nèi)容C

O

N

T

E

N

T

SPART

03設(shè)置行高與間距PART

02設(shè)置文本縮進(jìn)與對齊PART

04設(shè)置文本修飾設(shè)置字體樣式屬性font-family描述用于設(shè)置元素內(nèi)文字的字體。用于設(shè)置元素內(nèi)文字的字號。用于設(shè)置元素內(nèi)文字的字體。number：數(shù)值有相對尺寸和絕對尺寸兩種類型。medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small：取值相對于父元素來說，medium為默認(rèn)值，其它取值以medium作為基礎(chǔ)參照。用于設(shè)置元素內(nèi)文字的顏色。用于設(shè)置元素內(nèi)文字的粗細(xì)。font-sizecolorfont-weightfont-stylefont-variantfont用于設(shè)置元素內(nèi)文字的樣式。normal：設(shè)置文本字體樣式為正常字體italic：設(shè)置字體樣式為斜體oblique：設(shè)置字體樣式為傾斜的字體。人為的使文字傾斜，而不是去選取字體中的斜體字。用于設(shè)置元素內(nèi)文字為小型大寫字體或者正常字體。設(shè)置元素內(nèi)文字的字體類型、大小、風(fēng)格、顏色等各個屬性的組合樣式【案例3.3.1】使用文本樣式設(shè)置文本縮進(jìn)與對齊屬性描述設(shè)置文本的第一行的縮進(jìn)。length（默認(rèn)值）：設(shè)置文本固定的縮進(jìn)，值為0。%：設(shè)置基于父元素寬度的百分比的縮進(jìn)。設(shè)置元素內(nèi)部文本的水平對齊方式，該屬性只適用于塊級元素。left：文本內(nèi)容采用左對齊right：文本內(nèi)容右對齊center：文本內(nèi)容采用居中設(shè)置行級元素在行框內(nèi)的垂直對齊方式。text-indenttext-alignvertcal-align【案例3.3.2】使用文本樣式設(shè)置行高與間距屬性描述實(shí)現(xiàn)上下排文字間隔距離，以及單排文字在一定高度情況上下垂直居中布局。length（默認(rèn)值）：設(shè)置文本固定的縮進(jìn)，值為0。%：設(shè)置基于父元素寬度的百分比的縮進(jìn)。用來設(shè)置元素內(nèi)部字符的間距。normal：默認(rèn)。規(guī)定字符間沒有額外的間距。數(shù)值：設(shè)置字符間的固定間距（允許使用負(fù)值）。inherit：規(guī)定應(yīng)該從父元素繼承l(wèi)etter-spacing屬性的值。用來設(shè)置元素內(nèi)部字的間距。normal：默認(rèn)。規(guī)定字符間沒有額外的空間。length：設(shè)置字、單詞間的固定間距（允許使用負(fù)值）。inherit：規(guī)定應(yīng)該從父元素繼承l(wèi)etter-spacing屬性的值。用來設(shè)置是否保留文本間的空格、換行；文本超過邊界時是否換行。left：文本內(nèi)容采用左對齊right：文本內(nèi)容右對齊center：文本內(nèi)容采用居中l(wèi)ine-heightletter-spacingword-spacingwhite-space【案例3.3.2】設(shè)置文本垂直居中的樣式設(shè)置文本修飾【案例3.3.4】設(shè)置文本修飾的樣式text-decoration屬性：用來設(shè)置或刪除文本的修飾。Inherit：繼承none：文字沒有樣式。underline：文字添加下劃線樣式。overline：文字添加上劃線樣式。line-through：文字添加刪除線樣式。blink：文字添加閃爍線樣式。text-decoration:inherit|none|underline|overline|line-through|blink;感謝觀看單元3

CSS基礎(chǔ)3.4

CSS背景和邊框樣式PART

01設(shè)置背景顏色主要內(nèi)容C

O

N

T

E

N

T

SPART

03設(shè)置邊框樣式PART

02設(shè)置背景圖片background-color屬性：用來設(shè)置網(wǎng)頁元素的背景顏色。color：顏色值background-color:color屬性值說明顏色名直接指定顏色的英文名稱，如表示紅色color:red。十六進(jìn)制在#后面指定3位或6位數(shù)值，如指定白色6位表示法為#ffffff，3位表表示法為#fff。RGB規(guī)則為rgb(red,green,blue)，指定red、green、blue顏色的強(qiáng)度，強(qiáng)度值介于0與255之間的整數(shù)，或者是百分比值（從0%到100%），如表示藍(lán)色rgb(0,0,255)或rgb(0%,0%,100%)。RGBA規(guī)則rgba(red,green,blue,alpha)。alpha參數(shù)是介于0.0（完全透明）與1.0（完全不透明）的數(shù)字。CSS設(shè)置背景顏色background-image屬性：用來設(shè)置網(wǎng)頁元素的背景圖片。none（默認(rèn)值）：無背景圖片。image：使用絕對/相對地址、漸變色切片圖來確定圖像，圖像的格式可為擴(kuò)展名為png、jpg等文件。background-image:image

|

noneCSS設(shè)置背景圖片background-repeat屬性：用來設(shè)置元素的背景圖像的填充方式，其中提供一個參數(shù)時，同時應(yīng)用于水平方向和垂直方向；提供兩個參數(shù)值時，第一個為橫向，第二個為縱向。background-repeat:repeat-x

|

repeat-y

|

[repeat

|

no-repeatrepeat-x：背景圖像在水平方向平鋪。repeat-y：背景圖像在垂直方向平鋪。repeat：背景圖像在水平方向和垂直方向平鋪。no-repeat：背景圖像不平鋪。CSS設(shè)置背景圖片background-attachment屬性：用來設(shè)置滾動時，背景圖像相對于誰固定。fixed:背景圖像相對于視口（viewport）固定。scroll：背景圖像相對于元素固定，也就是說當(dāng)元素內(nèi)容滾動時背景圖像不會跟著滾動，因?yàn)楸尘皥D像總是要跟著元素本身。但隨元素的祖先元素或窗體一起滾動。background-attachment:fixed

|

scrollCSS設(shè)置背景圖片background-position屬性：用來設(shè)置背景圖像在元素中出現(xiàn)位置。可設(shè)置1~4個參數(shù)值。percentage：用百分比指定背景圖像在元素中出現(xiàn)的位置?？梢詾樨?fù)值。參考容器尺寸減去背景圖尺寸進(jìn)行換算。length：用長度值指定背景圖像在元素中出現(xiàn)的位置?？梢詾樨?fù)值。center：背景圖像橫向或縱向居中。left：背景圖像從元素左邊開始出現(xiàn)。right：背景圖像從元素右邊開始出現(xiàn)。background-position:left

|

center

|

right

|

top

|

bottom

|

<percentage>

|

<length>CSS設(shè)置背景圖片background屬性：用來設(shè)置元素的所有背景樣式，為簡寫形式，屬性間用逗號分隔，當(dāng)樣式重疊時，前面的背景圖會被后面的覆蓋。bg-image：設(shè)置背景圖片，即background-image屬性。position：設(shè)置背景圖片在元素中的位置，即background-position屬性。repeat-style：設(shè)置背景圖片是否重復(fù)，即background-repeat屬性。attachment：設(shè)置滾動時，背景圖片對些誰固定，即background-attachment屬性。background:|

position|

repeat-style|attachment......CSS設(shè)置背景圖片【案例3.3.4】設(shè)置元素樣式border-color屬性：用來設(shè)置網(wǎng)頁元素的邊框線的顏色。color：屬性值可為1~4個參數(shù)。1個參數(shù)時顏色值填充于四個邊框；2個參數(shù)時，第1個顏色值作用于上下邊框，第2個顏色值作用于左右邊框；3個參數(shù)時，第1個顏色值作用于上

邊框，第2個顏色值作用于左右邊框，第3個顏色值作用于下邊框；4個參數(shù)時，按上、右、下、左邊框線順序填色。border-color:color;border-width屬性：用來設(shè)置網(wǎng)頁元素的邊框線的尺寸。length：用數(shù)值來設(shè)置邊框線的尺寸，不能取負(fù)值。medium：設(shè)置默認(rèn)尺寸的邊框線，值為3px。thin：設(shè)置比默認(rèn)尺寸細(xì)的邊框線，值為1px。thick：設(shè)置比默認(rèn)尺寸粗的邊框線，值為5px。border-width:<length>

|

thin

|

medium

|

thickborder-style屬性：用來設(shè)置網(wǎng)頁元素的邊框線類型。border-width:none

|

hidden

|

dotted

|

dashed

|

solid

|

double

|

groove

|

ridge

|

inset

|outsetnone：無輪廓。設(shè)置該值，border-width值計(jì)為0。hidden：設(shè)置隱藏邊框線。dotted：設(shè)置邊框線為點(diǎn)狀輪廓。dashed：設(shè)置邊框線為虛線輪廓。solid：設(shè)置邊框線為實(shí)線輪廓。double：設(shè)置邊框線為雙線輪廓。groove：設(shè)置邊框線為3D凹槽輪廓。ridge：設(shè)置邊框線為3D凸槽輪廓。inset：設(shè)置邊框線為3D凹邊輪廓。outset：3D凸邊輪廓border屬性：用來設(shè)置網(wǎng)頁元素的所有邊框線樣式，是簡寫形式。line-width：設(shè)置元素的邊框線的粗細(xì)尺寸，即border-width屬性。line-style：設(shè)置元素的邊框線樣式，即border-style屬性。color：設(shè)置元素的邊框線顏色，即border-color屬性。border:<line-width>

|

<line-style>|

<color>【案例3.3.5】設(shè)置元素的邊框樣式感謝觀看單元3

CSS基礎(chǔ)3.5

CSS盒子模型主要內(nèi)容C

O

N

T

E

N

T

SPART

01盒子模型PART

02設(shè)置顯示模式PART

03設(shè)置內(nèi)邊距與外邊距PART

04外邊距合并盒子模型盒子模型，是1996年W3C推出CSS時提出的Box

Model（盒模型/框模型）的中文名稱。盒子模型規(guī)定：網(wǎng)頁中的所有元素都可看作被放在一個方框里，網(wǎng)頁設(shè)計(jì)師可以通過CSS來控制該方框的顯示屬性?？倢挾萩ontent外邊距邊內(nèi)邊距盒子模型示意圖設(shè)置顯示模式HTML元素的類型決定了其CSS顯示模式，HTML元素按顯示模式分為塊級元素、行級元素以及行內(nèi)塊元素等。屬性描述塊級元素在新行上開始，占據(jù)一整行，其寬度自動填滿其父元素寬度,垂直向下排列。塊級元素塊級元素可以設(shè)置寬高,并且寬度高度以及外邊距,內(nèi)邊距都可隨意控制。塊級元素內(nèi)可以包含其它塊級元素或行級元素。典型塊元素有h1`h6、div、p、ul、li等。通常使用塊級元素來進(jìn)行頁面的總體布局。行級元素行級元素和其他行級元素?zé)o間隔地排列在一行。

行級元素不可以設(shè)置寬高，寬度高度由元素內(nèi)容決定，可以設(shè)置行高（line-height）。設(shè)置外邊距margin時，上下無效，左右有效。內(nèi)邊距padding可以隨意設(shè)置。行級元素不能包含塊級元素，只能容納文本或者其他行級元素。典型元素有span、a等。行內(nèi)塊元素多個行內(nèi)塊元素排列在一行，元素間有間隔，在瀏覽器中按照從左到右一個接一個地排列。行內(nèi)塊元素默認(rèn)寬度是元素的寬度，寬、高、內(nèi)外邊距屬性可以設(shè)置。行內(nèi)塊元素內(nèi)可以包含其它塊元素或行級元素。典型元素有img、input等。設(shè)置顯示模式display屬性設(shè)置元素顯示模式的類型。語法格式：none：隱藏元素，即，不顯示元素。inline：設(shè)置元素為行級元素。block：設(shè)置元素為塊級元素inline-block：設(shè)置元素為行內(nèi)塊級元素。display:none

|

inline

|

block

|

inline-block設(shè)置內(nèi)邊距與外邊距padding屬性設(shè)置元素的邊框與元素的內(nèi)容區(qū)之間的間距。語法格式：length：用長度值來定義內(nèi)邊距的值，不允許負(fù)值。percentage：用百分比來定義內(nèi)邊距的值。padding:[length

|

percentage]【案例3.5.1】設(shè)置元素的內(nèi)邊距樣式設(shè)置內(nèi)邊距與外邊距margin屬性設(shè)置元素周圍的留白區(qū)稱為外邊距，外邊距從視覺上將元素相互隔開。語法格式：auto:默認(rèn)外邊距值。length：用長度值來定義外邊距，可以為負(fù)值。percentage：用百分比來定義外邊距。margin:[auto|

length

|

percentage]【案例3.5.2】設(shè)置元素的外邊距樣式外邊距合并在CSS中，相鄰兩個元素的外邊距可以合并成一個單獨(dú)的外邊距，稱為外邊距合并，或折疊。外邊距合并兄弟關(guān)系外邊距合并當(dāng)兩個元素在垂直方向上相鄰時，上邊元素的下外邊距與下面元素的上外邊距會自動發(fā)生合并，合并生成的外邊距為兩個邊距中大的值。【案例3.5.3】兄弟關(guān)系元素的外邊距合并外邊距合并父子包含外邊距合并當(dāng)父元素包含子元素時，父子元素在垂直方向的上邊距或下外邊距也會發(fā)生合并?！景咐?.5.3】父子包含外邊距合并外邊距合并自己外邊距合并假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并。感謝觀看單元3

CSS基礎(chǔ)3.6設(shè)置超鏈接和列表樣式主要內(nèi)容C

O

N

T

E

N

T

SPART

01超鏈接偽類PART

03設(shè)置鼠標(biāo)樣式PART

02設(shè)置超鏈接樣式PART

04設(shè)置列表樣式超鏈接偽類靜態(tài)偽類：只適用于超鏈接的偽類，主要狀態(tài)描述如下。:link

超鏈接點(diǎn)擊之前的樣式。:visited

鏈接被訪問過之后的樣式。動態(tài)偽類：針對所有元素都適用的偽類，主要狀態(tài)描述如下。:hover

鼠標(biāo)放到元素上的時候的樣式，即懸停狀態(tài)。:active

鼠標(biāo)點(diǎn)擊元素，但是不松手時的樣式，即激活狀態(tài)。:focus

是某個元素獲得焦點(diǎn)時的樣式，即獲得焦點(diǎn)。設(shè)置超鏈接樣式超鏈接及其偽類選擇器【案例3.6.1】設(shè)置超鏈接基本的樣式選擇器aa:linka:visiteda:hover說明定義的樣式針對所有的超鏈接(包括錨點(diǎn))選擇未被訪問過的a元素，且a元素必須包含href屬性。選中已經(jīng)被訪問過的a元素。當(dāng)鼠標(biāo)懸停在a元素上的時候。a:active鼠標(biāo)單擊a元素，但不松手的時候。設(shè)置鼠標(biāo)樣式cursor屬性：設(shè)置在當(dāng)前元素上移動鼠標(biāo)時所要顯示的鼠標(biāo)形狀。cursor:[<url>

[<x><y>]?,]*[

auto

|

default

|

none

|

context-menu

|

help

|

pointer

|

progress

|

wait

|

cell

|crosshair

|

text

|

vertical-text

|

alias

|

copy

|

move

|

no-drop

|

not-allowed

|

e-resize

|

n-resize

|

ne-resi|

nw-resize

|

s-resize

|

se-resize

|

sw-resize

|

w-resize

|

ew-resize

|

ns-resize

|

nesw-resize

|

nwse-resizecol-resize

|

row-resize

|

all-scroll

|

zoom-in

|

zoom-out

|

grab

|

grabbing]屬性值說明url需使用的自定義光標(biāo)的URL。default默認(rèn)光標(biāo)（通常是一個箭頭）auto默認(rèn)。瀏覽器設(shè)置的光標(biāo)。crosshair光標(biāo)呈現(xiàn)為十字線。pointer光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）move此光標(biāo)指示某對象可被移動。e-resize此光標(biāo)指示矩形框的邊緣可被向右（東）移動。ne-resize此光標(biāo)指示矩形框的邊緣可被向上及向右移動（北/東）。nw-resize此光標(biāo)指示矩形框的邊緣可被向上及向左移動（北/西）。n-resize此光標(biāo)指示矩形框的邊緣可被向上（北）移動。se-resize此光標(biāo)指示矩形框的邊緣可被向下及向右移動（南/東）。sw-resize此光標(biāo)指示矩形框的邊緣可被向下及向左移動（南/西）。s-resize此光標(biāo)指示矩形框的邊緣可被向下移動（南）。w-resize此光標(biāo)指示矩形框的邊緣可被向左移動（西）。text此光標(biāo)指示文本?！景咐?.6.3】設(shè)置鼠標(biāo)的樣式展示設(shè)置列表樣式列表主要用于對大量信息的分類，列表相關(guān)CSS屬性。功能：簡寫屬性。在一條聲明中設(shè)置列表的所有屬性。語法：list-style:list-style-type

|

list-style-position

|

list-style-image【案例3.6.4】設(shè)置列表的樣式展示屬性說明功能：規(guī)定列表項(xiàng)標(biāo)記的類型。語法：list-style-type:disc

|

circle

|

square

|

decimal

|

lower-roman

|

upper-roman

|lower-alpha

|

upper-alpha

|

none

|

armenian

|

cjk-ideographic

|

georgian

|

lower-greek

|

hebrew

|

hiragana

|

hiragana-iroha

|

katakana

|

katakana-iroha

|

lower-latin|

upper-latinlist-style-typelist-style-position功能：規(guī)定列表項(xiàng)標(biāo)記（項(xiàng)目符號）的位置。語法：list-style-position:outside

|

insidelist-style-image功能：指定圖像作為列表項(xiàng)標(biāo)記。語法：list-style-image:none

|

urllist-style感謝觀看單元3

CSS基礎(chǔ)3.7

CSS設(shè)置表格和表單樣式主要內(nèi)容C

O

N

T

E

N

T

SPART

01設(shè)置表格樣式PART

02設(shè)置表單樣式設(shè)置表格樣式表格早期多用于頁面布局，現(xiàn)在多用于較詳細(xì)信息展示，如時間表、日程表等。功能各不相同的表格，其樣式設(shè)計(jì)也應(yīng)該各有特色?！景咐?.7.1】設(shè)置表格樣式屬性值border-collapse說明功能：設(shè)置表格行或單元格邊是合并或獨(dú)立。語法：border-collapse:separate

|

collapse功能：設(shè)置表格邊框獨(dú)立時，行和單元格的邊框在橫向和縱向上的間距。語法：border-spacing:length{1,2}功能：設(shè)置表格標(biāo)題所在位置。語法：caption-side:top

|

bottom功能：設(shè)置當(dāng)表格單元格無內(nèi)容時，是否顯示該單元格的邊框。語法：empty-cells:hide

|

show功能：用來綜合設(shè)置表格的上述邊框樣式，是簡寫形式。border-spacingcaptionempty-cellsborder設(shè)置表單樣式表單是網(wǎng)頁中瀏覽器與服務(wù)器交互的手段。表單中包含多種表單元素，每種表單元素都有自己的默認(rèn)樣式?！景咐?.7.2】設(shè)置表單的樣式屬性inputtextarea說明input元素可按type屬性分類進(jìn)行樣式設(shè)置，建議使用屬性選擇器。多行文本框適用于在網(wǎng)頁上輸入多行文字內(nèi)容，CSS樣式效果主要體現(xiàn)在控制文本框的尺寸、位置、文本內(nèi)容等樣式上。下拉菜單樣式主要體現(xiàn)在控制下拉菜單背景、前景、邊框、顯示菜單項(xiàng)數(shù)量等樣式。表單中的按鈕分為提交按鈕、重置按鈕、普通按鈕、圖像按鈕等，CSS樣式效果重點(diǎn)在按鈕的形狀、尺寸、邊框等樣式上。select按鈕感謝觀看單元3

CSS基礎(chǔ)3.8

CSS浮動布局主要內(nèi)容C

O

N

T

E

N

T

SPART

01標(biāo)準(zhǔn)文檔流PART

03清除浮動PART

02設(shè)置浮動標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流又稱標(biāo)準(zhǔn)流、文檔流，是默認(rèn)的網(wǎng)頁元素布局模式。在這種模式下，元素在瀏覽器里按照人類的閱讀習(xí)慣，從左向右、從上到下依次排列。在排列中，HTML元素按照顯示模式有塊級、行級、行內(nèi)塊級三種類型。塊級元素會垂直排列，行級元素和行內(nèi)塊級元素會水平排列。設(shè)置浮動float屬性用于設(shè)置HTML元素是否浮動。none：隱藏元素。left：設(shè)置元素浮在左邊。right：設(shè)置元素浮在右邊。float:none

|

left

|

right設(shè)置浮動網(wǎng)頁基本結(jié)構(gòu)分析網(wǎng)頁結(jié)構(gòu)從上到下通常分為頁眉、導(dǎo)航、內(nèi)容和頁腳等。網(wǎng)頁布局時首先劃分版心，明確信息存放的區(qū)域設(shè)置浮動DIV+CSS實(shí)現(xiàn)基礎(chǔ)布局網(wǎng)頁布局是按照流技術(shù)（先行后列）進(jìn)行排列的，每行中一般劃分為1~3個模塊區(qū)域，這些模塊將整個網(wǎng)頁劃分成了若干個功能區(qū)域。1行1列布局div1DIV結(jié)構(gòu)：<div

class="div1"></div>CSS樣式：.div1{

width:

600px;height:

100px;background-color:

red;margin:

10px

auto;}設(shè)置浮動1行2列布局DIV結(jié)構(gòu)：<div

class="div1"><div

class="div2"></div><div

class="div3"></div></div>CSS樣式：.div1{

width:

600px;height:

100px;background-color:

red;margin:

10px

auto;}.div2,.div3{width:

270px;height:

80px;background-color:

green;padding:

10px;}/*方法1*/.div2{

float:

left;

}.div3{

float:

right;

}/*方法2

*//*

.div3{

float:

left;

margin-left:

20px;

}

*/設(shè)置浮動1行3列布局DIV結(jié)構(gòu)：<div

class="div1"><div

class="div2"></div><div

class="div3"></div><div

class="div4"></div></div>CSS樣式：.