CSS概念
動(dòng)態(tài)網(wǎng)頁(yè)分為腳本語(yǔ)言、支持動(dòng)態(tài)效果的瀏覽器和CSS樣式表三個(gè)部分。
- 樣式表是專(zhuān)門(mén)描述結(jié)構(gòu)文檔表現(xiàn)方式的文檔，它既可以描述文檔如何在屏幕上顯示，也可以描述文檔的打印效果，甚至聲音效果。
- CSS就是Cascading Style Sheets的縮寫(xiě)，即“層疊樣式表”，簡(jiǎn)稱(chēng)樣式表。
CSS聲明方法
CSS聲明方法主要分為三種：基本聲明、集體聲明和分項(xiàng)聲明。
- 基本聲明
格式：
標(biāo)記{性質(zhì)名稱(chēng)：設(shè)定值}
- 集體聲明
格式：
標(biāo)記A，標(biāo)記B，標(biāo)記C，...
{性質(zhì)名稱(chēng)1：設(shè)定值1；性質(zhì)名稱(chēng)2：設(shè)定值2；...}
- 分項(xiàng)聲明
如果對(duì)同樣一個(gè)性質(zhì)作了重復(fù)的聲明，則以“后聲明”的值為準(zhǔn)。
格式：
標(biāo)記A{性質(zhì)名稱(chēng)1：設(shè)定值1；性質(zhì)名稱(chēng)2：設(shè)定值2；性質(zhì)名稱(chēng)3：設(shè)定值3；}
CSS種類(lèi)
按照樣式表的插入形式可以將CSS分為三種： 內(nèi)嵌樣式（Inline Style）、 內(nèi)部樣式表（Internal Style Sheet）、外部樣式表（External Style Sheet）。
- 內(nèi)嵌樣式
內(nèi)嵌樣式是將Style屬性值直接加在超文本標(biāo)記內(nèi)。
格式：<標(biāo)記 Style = “”性質(zhì)1：設(shè)定值1；性質(zhì)2：設(shè)定值2；...“”>
- 內(nèi)部樣式表
內(nèi)部樣式表將樣式規(guī)則卸載<STYLE></STYLE>標(biāo)簽之間，分為兩步：
(1) 在html文件頭(head)加入：<STYLE TYPE ="text/css">...</STYLE>
(2) 在文檔體(body)加入<class = ...>即可。
- 外部樣式表
在一個(gè)外部樣式表文檔內(nèi)定義網(wǎng)頁(yè)的外觀風(fēng)貌，所有鏈接文檔的網(wǎng)頁(yè)都會(huì)反映出相同的外觀。外部樣式表的引入方式：
(1) 使用link引入
格式：<link REL="styleheet" TYPE="text/css" HERF="home.css">
通常將link標(biāo)簽寫(xiě)在網(wǎng)頁(yè)的<HEAD></HEAD>部分中。
(2) 使用@import引入，類(lèi)似link用法，但必須放在<Style></Style>中。
格式：
<Style type = "text/css">
@import url(home.css)；[分號(hào)必須存在]
</Style>
外部樣式表可以在任何編輯器中編輯，只是文件中不能包含任何的html標(biāo)簽。樣式表應(yīng)該以css為擴(kuò)展名來(lái)保存。
CSS語(yǔ)法
CSS的定義由三個(gè)部分組成：選擇符、屬性和屬性的取值。
基本格式：selector{property：value}
- 選擇符
任何HTML元素都可以是一個(gè)CSS選擇符，如body/p/table等。
例如：body{color:red}這樣做的效果是是頁(yè)面中的文字為紅色。
如果屬性的值由多個(gè)單詞組成，不許在值上加“”
如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性，則需使用分號(hào)將所有的屬性和值分開(kāi)。
選擇符組是指將相同屬性和值的選擇符組合起來(lái)，用逗號(hào)將選擇符分隔開(kāi)。
例如：p,table{font-size:9pt} - 類(lèi)選擇符
在定義類(lèi)選擇符時(shí)，需要在定義類(lèi)的名稱(chēng)前面加上一個(gè)點(diǎn)號(hào)。 - 偽類(lèi)
偽類(lèi)作為一種特殊的類(lèi)選擇符，其最大的用處就是使鏈接在不同狀態(tài)下具有不同的樣式效果。
偽類(lèi)的語(yǔ)法是在選擇符的原有的語(yǔ)法上加上一個(gè)偽類(lèi)。格式如下：
slector:pseudo-class{proerty:value}
即（選擇符：偽類(lèi){屬性：值} 或者 選擇符.類(lèi)：偽元素{屬性：值}）
在CSS定義中，a：hover必須被置于a:link和a:visited之后才是有效的。同時(shí)，a:active必須被置于a:hover之后也才是有效的。偽類(lèi)名稱(chēng)對(duì)大小寫(xiě)不敏感。
- 偽元素
偽元素指元素的一部分，經(jīng)常應(yīng)用于表示段落的第一個(gè)字母等場(chǎng)合。
1.首行偽元素
CSS將其作為首行偽元素，可以用于任何塊極元素（P、H等）
2.首個(gè)字母?jìng)卧?br> CSS將其作為首個(gè)字母?jìng)卧?，首個(gè)字母?jìng)卧乜梢杂糜谌魏螇K級(jí)元素。 - ID選擇符
在HTML頁(yè)面中，頁(yè)面元素可以使用ＩＤ選擇符來(lái)標(biāo)識(shí)。定義ID選擇符在ID名稱(chēng)前面加一個(gè)“”#“”號(hào)，有兩種應(yīng)用：
1.在“#”前面指定標(biāo)記名，只能應(yīng)用于指定標(biāo)記中具有此ＩＤ的元素。
2.以“#”開(kāi)頭，可應(yīng)用于所有具有此ID的元素。
ID屬性只能在每個(gè)HTML文件中出現(xiàn)一次。
- CSS繼承
一般情況下，嵌套的選擇符會(huì)繼承外層選擇符指定的屬性值。
繼承規(guī)則：、ID樣式、類(lèi)別樣式、標(biāo)記樣式。
1.外部的元素樣式會(huì)保留下來(lái)繼承給該元素。
2.當(dāng)樣式表繼承遇到?jīng)_突時(shí)，以最后定義的樣式為準(zhǔn)。
3.不同的選擇符定義相同的元素時(shí)，其優(yōu)先級(jí)次序依次從高到低為行內(nèi)樣式，除非使用！important改變提升某樣式的優(yōu)先權(quán)。 - 注釋
常用CSS屬性
- 字體屬性
CSS字體屬性允許改變HTML中字體的種類(lèi)、粗細(xì)、尺寸以及樣式。
| 屬性 | 說(shuō)明 | 屬性值 |
|---|---|---|
| color | 字體顏色屬性 | 顏色值或顏色名稱(chēng) |
| font-family | 字體名稱(chēng)屬性 | arial/tahoma/courier等 |
| font-size | 字體大小屬性 | 最常用的單位是pt和px |
| font-style | 字體風(fēng)格屬性 | normal(缺省值)、italic、oblique都是斜體顯示 |
| font-weight | 字體粗細(xì)屬性 | normal(缺省值)和bold |
- 文本屬性
CSS文本屬性用來(lái)控制文本的外觀。文本屬性可以改變文本的顏色，增加或減少文本中的字符間距，排列、裝飾文本。
| 屬性 | 說(shuō)明 | 屬性值 |
|---|---|---|
| direction | 設(shè)置文本方向 | ltr、rtl |
| text-align | 設(shè)定文本的對(duì)齊方式 | left(居左，缺省值)、right(居右)、center(居中)、justify(兩端對(duì)齊) |
| text-decoration | 文本修飾屬性 | none(無(wú)，缺省值)、underline(下劃線(xiàn))、overline(上劃線(xiàn))、lint-through(中劃線(xiàn)) |
| text-indent | 文本縮進(jìn)屬性，設(shè)定文本首行縮進(jìn) | 長(zhǎng)度可以用絕對(duì)單位，也可以用百分比 |
| text-height | 設(shè)定每行之間的距離 | normal(缺省值)、length(長(zhǎng)度)、percentagr(百分比) |
| text-transfrom | 控制元素中的字母 | None、capitaliza、uppercase、lowercase |
- 顏色和背景屬性
CSS背景屬性允許控制HTML元素的背景顏色，可以將圖像設(shè)置為網(wǎng)頁(yè)背景等。
| 屬性 | 說(shuō)明 | 屬性值 |
|---|---|---|
| color | 設(shè)定前景顏色 | 十六進(jìn)制顏色值或者顏色名稱(chēng) |
| background-color | 設(shè)定背景顏色 | 十六進(jìn)制顏色值或者顏色名稱(chēng) |
| visibility | 設(shè)定可視度 | visible:顯示；hidden:不顯示；inherit:以父元素可視度決定 |
| background-image | 設(shè)定背景圖形 | none:無(wú)背景圖；url:使用絕對(duì)或相對(duì)地址指定背景圖像 |
| background-repeat | 設(shè)定背景重復(fù)性 | repeat:重復(fù)；repeat-x:水平方向重復(fù)；repeat-y:垂直方向重復(fù)；no-repeat:不重復(fù) |
| background-attachment | 設(shè)定圖片是否跟內(nèi)容滾動(dòng) | fixed:附著；scroll:不附著 |
| background-position | 設(shè)定背景圖片的最初位置 | top left、top center、top right、cente left、center center、center right、bottom left、bottom center、bottom right、x-% y-%、x-pos y-pos |
| background | 設(shè)定背景的相關(guān)屬性，將背景屬性設(shè)置在一個(gè)聲明中 | background-color、background-image、background-repeat、background-attachment、background-position |
- 容器屬性
CSS把HTML中<somesign>...</somesign>的部分稱(chēng)為容器（BOX）.
BOX有三種屬性：邊框?qū)傩?、填充距屬性和邊距屬性?br> 1.邊框?qū)傩?br> CSS邊框?qū)傩栽试S規(guī)定元素邊框的樣式和顏色。在HTML中使用table來(lái)創(chuàng)建文本周?chē)倪吙?，而使用CSS邊框?qū)傩?，不但可以?chuàng)建出效果出色的邊框，而且可以應(yīng)用于任何元素。
2.邊距屬性(margin)
CSS邊距屬性用于元素周?chē)目臻g，可以對(duì)上下左右邊距進(jìn)行改變。
3.填充距屬性
CSS填充距屬性定義了元素邊框和元素內(nèi)容之間的空白。 - 定位屬性
主要對(duì)頁(yè)面的布局和控制進(jìn)行定義。
1.絕對(duì)定位
絕對(duì)定位能夠精確地定位要素在頁(yè)面的獨(dú)立位置，而不去考慮頁(yè)面的其他要素的定位設(shè)置。
如果元素唄定義為絕對(duì)定位屬性，則其位置將從IE瀏覽器左上角的0點(diǎn)開(kāi)始計(jì)算。
2.相對(duì)定位
相對(duì)定位是指元素在相對(duì)于文檔布局的原始位置上進(jìn)行偏移，即所定位的要素位置相對(duì)于在文件中所分配的位置。這里所指的移動(dòng)和padding或者margin是不一樣的，padding和margin是元素本身的一種邊距和填充距，而并不是真正的移動(dòng)，但是，被標(biāo)記為relative的元素是真正的移動(dòng)，所產(chǎn)生的移動(dòng)距離是從margin的外圍到父級(jí)標(biāo)簽內(nèi)側(cè)之間的一段。 - 列表樣式屬性
列表樣式包括列表符號(hào)、圖形符號(hào)、列表位置三部分。
1.列表符號(hào)
list-style-style屬性
2.圖形符號(hào)
list-style-image:url;
3.列表位置
list-style-position:參數(shù)
.inside:在BOX模型內(nèi)部顯示
.outside:在BOX模型外部顯示 - 鼠標(biāo)屬性(Cursor)
CSS可以改變鼠標(biāo)屬性，當(dāng)鼠標(biāo)移動(dòng)到不同的元素對(duì)象上面時(shí)，讓鼠標(biāo)以不同的形狀、圖案顯示。 - 媒體屬性
@media規(guī)則可以在相同的樣式表中使用不同的樣式規(guī)則來(lái)針對(duì)不同的媒介。
CSS 濾鏡
style："filter:filename(fpara1,fpara2...)"
CSS濾鏡屬性使得可視化的濾鏡和轉(zhuǎn)換效果應(yīng)用于一個(gè)標(biāo)準(zhǔn)的HTML元素（如圖片、文本容器等），以實(shí)現(xiàn)特殊的藝術(shù)效果。
CSS濾鏡屬性
1.alpha濾鏡：設(shè)置透明層次
格式：style："filter:alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
2.blur濾鏡：創(chuàng)建高速移動(dòng)效果，即模糊效果
格式：
Style="filter:blur(Add=add,Direction=direction,Strength=strength)"
3.DropShadow濾鏡：創(chuàng)建對(duì)象的固定影子
格式：
style:"filter:DropShadow(Color=color,OffX= Offx,OffY=offy,Positive=positive)"
4.FlipH和FlipV濾鏡：創(chuàng)建水平或垂直鏡像圖片
格式：
{filter:FlipH},{filter:FlipV}
5.Glow濾鏡：使圖片的輪廓產(chǎn)生光輝
格式：
style="filter:Glow(Color=color,Strength=strength)"
6.Gray/Invert/Xray濾鏡：把圖片灰色化、反色、是對(duì)象變得向背X光照射一樣
格式：
{fliter:gray},{filter:invert},{filter:xray}
7.Shadow濾鏡：創(chuàng)建偏移固定影子
格式：
{filter:shadow(color=color,direction=diction)}
8.Chroma濾鏡：設(shè)置圖片中的某個(gè)顏色為透明
9.Mask濾鏡：為對(duì)象建立一個(gè)覆蓋于表面的膜，效果就好像是在用有色眼鏡看物體一樣
格式：
Filter:mask(color=顏色)
10.Wave濾鏡
Wave屬性可以把對(duì)象按照垂直的波紋樣式打亂。
格式：
filter:Wave(Add=true(false),freq=頻率,lightstrength=增強(qiáng)光效，phase=偏移量,strength=強(qiáng)度)
