一：CSS概述

什么是CSS

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

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

HTML和CSS的關(guān)系

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

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

CSS的語法規(guī)則

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

大括號的是由一條條聲明組成

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

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

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

CSS語法

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

一、選擇器

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

二、聲明框

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

CSS常用選擇器

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

ID選擇器

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

類選擇器

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

并集選擇器

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

通配選擇器

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

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

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

后代選擇器

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

子元素選擇器

比如說span元素是p元素的子元素，就可以寫成 ?p>span{ ? }

偽類選擇器

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

重用屬性

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

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

.red{color:red;}

.b{font-weight:bold;}

復(fù)制代碼

第三種情況時(shí)用

子選擇器:

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

• Item 1>
• Item 2
• Item 3

復(fù)制代碼

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

sub_nav { /* Some styling */ }

sub_nav li { /* Some styling */ }

sub_nav a { /* Some styling */ }

復(fù)制代碼

組選擇器：

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

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

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)用需要在具體編寫過程中體會。

總結(jié)

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

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