一：CSS概述

什么是CSS

CSS就是層疊樣式表(Casading Style Sheets)，通常稱為CSS樣式表，或者是級(jí)聯(lián)樣式表。主要用于設(shè)置HTML中的文本，內(nèi)容(字體，大小，對(duì)齊)，圖片外形(寬高，邊框樣式，邊距等)，以及版面的布局等外觀樣式。

CSS以HTML為基礎(chǔ)，提供了豐富的功能。還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。

HTML和CSS的關(guān)系

HTML結(jié)構(gòu)層：負(fù)責(zé)從語(yǔ)義的角度搭建頁(yè)面

CSS：負(fù)責(zé)從審美角度美化頁(yè)面

CSS的語(yǔ)法規(guī)則

CSS是由選擇器和{}組成的，

大括號(hào)的是由一條條聲明組成

每一條語(yǔ)句都是要英文狀態(tài)下的聲明，每一條聲明都是由屬性：值;組成

CSS屬性值一般不加引號(hào)，但它的屬性值為數(shù)字時(shí)一般要加單位，單位一般為px

CSS中，不能出行HTML標(biāo)簽

CSS語(yǔ)法

CSS的標(biāo)準(zhǔn)語(yǔ)法主要由兩方面構(gòu)成一是 選擇器。二是 聲明框。

一、選擇器

通過(guò)選擇器可以選定頁(yè)面指定的元素，并將聲明塊中的樣式應(yīng)用在選擇器選中的元素中去。

二、聲明框

是一對(duì){ ?}標(biāo)志，聲明塊緊跟在選擇器后面，實(shí)際上聲明塊里面就是一組一組的屬性名與屬性值對(duì)應(yīng)的結(jié)構(gòu)。稱之為聲明，一個(gè)聲明塊中可以有多個(gè)聲明。多個(gè)聲明之間使用分號(hào)； ?進(jìn)行隔開(kāi)，聲明的樣式與樣式值之間用： 連接。

CSS常用選擇器

元素選擇器???通過(guò)元素選擇器選擇頁(yè)面中所有指定的元素(選擇器就是元素名)

ID選擇器

通過(guò)元素的ID屬性值，來(lái)選中唯一的一個(gè)元素。

類選擇器

通過(guò)為元素設(shè)置class屬性，class屬性和ID屬性類似，但是class屬性可以重復(fù)，把擁有相同class屬性的元素稱之為一組元素。可以為一個(gè)元素設(shè)置多個(gè)class屬性值，多個(gè)值之間可以使用空格隔開(kāi)。

并集選擇器

選擇器分組，可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素(選擇器1，選擇器2，選擇器3{ })表示效果：滿足選擇器1的，滿足選擇器2的并且滿足選擇器3的元素都可以同時(shí)選中，多個(gè)選擇器之間是并集關(guān)系。

通配選擇器

通配選擇器可以選擇頁(yè)面里的所有元素(*{ })。

復(fù)合選擇器(交集選擇器)

可以選中多個(gè)同時(shí)滿足多個(gè)選擇器的元素(選擇器1選擇器2選擇器3{ ? }),對(duì)于ID選擇器來(lái)說(shuō)不建議使用交集選擇器.

后代選擇器

選中制定元素的指定后代元素(祖先元素 后代元素{ ?})也可以寫(xiě)后代的后代的后代元素。但是盡量不要寫(xiě)的太長(zhǎng)，考慮到性能問(wèn)題選擇器盡量寫(xiě)的短一些。

子元素選擇器

比如說(shuō)span元素是p元素的子元素，就可以寫(xiě)成 ?p>span{ ? }

偽類選擇器

偽類是專門用來(lái)表示元素的一種特殊狀態(tài)，比如說(shuō)常見(jiàn)的 a 元素的一些特殊狀態(tài)(原始狀態(tài)的超鏈接，訪問(wèn)過(guò)的超鏈接，運(yùn)行中的超鏈接等等)，當(dāng)我們需要為這些處在特殊狀態(tài)的元素設(shè)置樣式的時(shí)候就可以使用偽類來(lái)定義。

重用屬性

經(jīng)常會(huì)用到一些基本的式樣疊加，比如字體的顏色和加粗。網(wǎng)頁(yè)中可能同時(shí)出現(xiàn)三種情況：1.字體為紅色 2.字體加粗 3.字體紅色加粗

這時(shí)我們只需要定義前兩個(gè)css：

.red{color:red;}

.b{font-weight:bold;}

復(fù)制代碼

第三種情況時(shí)用

子選擇器:

相對(duì)來(lái)說(shuō)，簡(jiǎn)化html文件的代碼更加重要，因此在css中使用子選擇器非常有益，同時(shí)也使css代碼更加容易理解。比如下面的代碼：

• Item 1>
• Item 2
• Item 3

復(fù)制代碼

如果div li a都有各自的式樣,采用子選擇器,可以省略代碼中l(wèi)i 和a 的class屬性，從而簡(jiǎn)化代碼：

sub_nav { /* Some styling */ }

sub_nav li { /* Some styling */ }

sub_nav a { /* Some styling */ }

復(fù)制代碼

組選擇器：

當(dāng)一些元素類型、class或者id都有共同的一些屬性，你就可以使用組選擇器來(lái)避免多次的重復(fù)定義。這可以節(jié)省不少字節(jié)。

例如：定義所有標(biāo)題的字體、顏色和margin，你可以這樣寫(xiě)：

h1,h2,h3,h4,h5,h6 {

"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

color:#333;

margin:1em 0;

}

復(fù)制代碼

如果在使用時(shí)，有個(gè)別元素需要定義獨(dú)立樣式，你可以再加上新的定義，可以覆蓋老的定義，例如：

h1 { font-size:2em; }

h2 { font-size:1.6em; }

復(fù)制代碼

**看到這里別忘記點(diǎn)個(gè)小小的贊喔~

更多往期文章我已整合成PDF放在了我的社區(qū)，也整理了一些Java學(xué)習(xí)，阿里面試真題的zl，需要的小伙伴點(diǎn)擊傳送門**

尾巴

重用、子選擇器和組選擇器的靈活使用可以非常有效的減少代碼，同時(shí)非常有利的增加代碼的可讀性，具體的應(yīng)用需要在具體編寫(xiě)過(guò)程中體會(huì)。

總結(jié)

以上是生活随笔為你收集整理的学java前要学css_教你一招：学习Java必须学会的CSS用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。