CSS樣式基礎(chǔ)知識(shí)

時(shí)間：2023-08-29 23:06:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-29 23:06:01 來源：網(wǎng)站運(yùn)營

CSS樣式基礎(chǔ)知識(shí)：

CSS樣式概念

CSS的出現(xiàn),將頁面內(nèi)容與樣式徹底分離,極大地改善了HTML在頁面顯示方面的缺陷。

使用CSS可以控制HTML標(biāo)簽的顯示樣式,如頁面的布局、字體、顏色、背景和圖文混排等效果。CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。

在網(wǎng)站的風(fēng)格方面,一個(gè)CSS樣式文件可以在多個(gè)頁面中使用,當(dāng)用戶修改CSS樣式文件時(shí),所有引用該樣式文件的頁面外觀都隨之發(fā)生改變。

CSS的定義

div{color：blue；font-size：12px}

div為選擇器，color和font-size為屬性，blue和12px為屬性值

其中,第一項(xiàng)必須是選擇器或選擇器表達(dá)式，一個(gè)選擇器可以包含有一個(gè)或多個(gè)聲明。選擇器之后緊跟一對(duì)大括號(hào),每個(gè)聲明由屬性和屬性值成，且位于大括號(hào)之內(nèi),聲明之間需以英文分號(hào)進(jìn)行間隔。

CSS選擇器

基本選擇器

要想將CSS樣式應(yīng)用于特定的HTML元素,首先需要找到該目標(biāo)元素。要使用CSS對(duì)HTML頁面中的元素實(shí)現(xiàn)一對(duì)一、一對(duì)多或者多對(duì)一的控制,這就需要用到CSS選擇器。在CSS中,執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器。HTML頁面中的元素就是通過CSS選擇器進(jìn)行控制的。

CSS基本選擇器有通用選擇器、標(biāo)簽選擇器、屬性選擇器、類選擇器和id選擇器等多種類型。

1.通用選擇器

通用選擇器使用通配符“*”表示,它是所有選擇器中作用范圍最廣的選擇器,能匹配頁面中所有的元素,其語法格式如下:

*{屬性1:屬性值1;屬性2:屬性值2;...屬性n：屬性值n；}例如下面的代碼,使用通配符選擇器定義CSS樣式,清除所有HTML標(biāo)簽的默認(rèn)邊距。

*{margin:O;/*定義外邊距*/padding:0;/*定義內(nèi)邊距*/}2.標(biāo)簽選擇器

標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器,按標(biāo)簽名稱分類,為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式,其語法格式如下:

標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;...屬性n:屬性值n;}標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式,同時(shí)這也是它的缺點(diǎn),不能設(shè)計(jì)差異化樣式。標(biāo)簽選擇器自動(dòng)應(yīng)用于HTML標(biāo)簽。

注意:標(biāo)簽選擇器根據(jù)元素的標(biāo)簽名稱查找。

3.類選擇器

類選擇器使用英文點(diǎn)號(hào)“.”進(jìn)行標(biāo)識(shí),后面緊跟類名,其語法格式如下:

.類名{屬性1:屬性值1;屬性2:屬性值2;...屬性n:屬性值n;}類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。類選擇器對(duì)HTML實(shí)體元素通過class屬性應(yīng)用類樣式(也稱點(diǎn)樣式)。

注意:類選擇器根據(jù)class屬性值查找元素。

4.id選擇器

id選擇器使用“#”進(jìn)行標(biāo)識(shí),后面緊跟id名,其語法格式如下:

#id名{屬性1:屬性值1，屬性2:屬性值2;...屬性n:屬性值n;}該語法中,id名即為HTML元素的id屬性值,大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。id選擇器對(duì)HTML實(shí)體元素通過id屬性應(yīng)用#樣式(也稱唯一樣式)。

注意：id選擇器根據(jù)id屬性值查找元素

組合選擇器

組合選擇器是由兩個(gè)或多個(gè)基本選擇器通過不同的方式組合而成的,具體有如下五種。

1.后代選擇器

后代選擇器用來選擇元素或元素組的后代,其寫法就是把外層標(biāo)簽寫在前面,內(nèi)層標(biāo)簽寫在后面.中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí),內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。例如:

div #main p.one{color:red; font-size:18px;/*多級(jí)后代*/}注意：后代選擇器根據(jù)上下文選擇元素，用以實(shí)現(xiàn)樣式的精準(zhǔn)控制。

2.子選擇器

子選擇器是特殊的后代選擇器,用來選擇某個(gè)元素的直接后代(間接子元素不適用),父子選擇器之間用大于號(hào)分隔。子選擇器只能出現(xiàn)在后代選擇器之后,否則,效果被子選擇覆蓋，一個(gè)子選擇器的示例代碼如下:

links a{color:red;/*元素links的所有超鏈接為紅色*/}#links>a{color:blue;/*元素links的首個(gè)超鏈接被修改為藍(lán)色*/}又如:

ul>li{color;blue;/*所有11都是ul的兒子,因此.所有列表項(xiàng)都將為藍(lán)色*/

3.交集選擇器

交集選擇器由兩個(gè)選擇器構(gòu)成,其中第一個(gè)為標(biāo)簽選擇器,第二個(gè)為class類選擇器或id選擇器,兩個(gè)選擇器之間不能有空格，例如

h3.special或p#one

4,并集選擇器

并集選擇器是各個(gè)選擇器通過逗號(hào)連接而成的、任何形式的選擇器(包括標(biāo)簽選擇器class類選擇器、id選擇器等),都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。例如:

p,.box,span{font-size:12px;}5.偽類選擇器

同一個(gè)標(biāo)簽，根據(jù)其不同的狀態(tài)，有不同的樣式.這稱為“偽類”。偽類用冒號(hào)“:“來表示。

偽類樣式為選擇器添加了一些特殊效果。當(dāng)用戶和文檔進(jìn)行交互的時(shí)候，一個(gè)元素可以獲取或者失去一個(gè)偽類。“偽”的含義是:它不像類樣式那樣,需要使用class屬性。例如：a hover(鼠標(biāo)位于超鏈接上時(shí))、image:hover和p:after(在選定的元素后插人內(nèi)容)等,都是偽類樣式。

常用CSS樣式的屬性

文本外觀

color

顏色名稱，如：red；blue；black

十六進(jìn)制色彩碼，如#ff0000；#fff000

RGB代碼，如rgb（255.0.0）

line-height

用于設(shè)置文本的行間距，就是調(diào)整行與行之間的距離。

line-height有三種屬性單位，分別為像素px；相對(duì)值em；百分比%，其中像素是最常用的。

text-decoration

用于設(shè)置文本上下劃線、刪除線等裝飾效果。其中none表示沒有修飾，為默認(rèn)值、underline表示下劃線、overline表示上劃線、line-through表示刪除線

text-align

用于設(shè)置文本內(nèi)容的水平對(duì)齊。

其中l(wèi)eft為左對(duì)齊（默認(rèn)值），right為右對(duì)齊，center為居中對(duì)齊。

方框樣式

width

用于定義元素的寬度，其取值單位為像素或百分比。

height

用于定義元素的高度，其取值單位為像素或百分比。

float

用于設(shè)置塊元素的浮動(dòng)，其中，left設(shè)置元素左浮動(dòng)；right設(shè)置元素右浮動(dòng)；none設(shè)置元素不浮動(dòng)，默認(rèn)值；inherit設(shè)置從父元素繼承float屬性值。

clear

屬性clear用于設(shè)置元素的哪一側(cè)不允許其他浮動(dòng)元素,其屬性值如下:

• left設(shè)置在左側(cè)不允許浮動(dòng)元素;
• right設(shè)置在右側(cè)不允許浮動(dòng)元素;
• both設(shè)置在左、右兩側(cè)均不允許浮動(dòng)元素;
• none設(shè)置允許浮動(dòng)元素出現(xiàn)在兩側(cè)(默認(rèn)值);
• inherit設(shè)置應(yīng)該從父元素繼承clear屬性值。