一：CSS概述

什么是CSS

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

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

HTML和CSS的關系

HTML結構層：負責從語義的角度搭建頁面

CSS：負責從審美角度美化頁面

CSS的語法規則

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

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

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

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

CSS中，不能出行HTML標簽

CSS語法

CSS的標準語法主要由兩方面構成一是 選擇器。二是 聲明框。

一、選擇器

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

二、聲明框

是一對{ ?}標志，聲明塊緊跟在選擇器后面，實際上聲明塊里面就是一組一組的屬性名與屬性值對應的結構。稱之為聲明，一個聲明塊中可以有多個聲明。多個聲明之間使用分號； ?進行隔開，聲明的樣式與樣式值之間用： 連接。

CSS常用選擇器

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

ID選擇器

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

類選擇器

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

并集選擇器

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

通配選擇器

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

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

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

后代選擇器

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

子元素選擇器

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

偽類選擇器

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

重用屬性

經常會用到一些基本的式樣疊加，比如字體的顏色和加粗。網頁中可能同時出現三種情況：1.字體為紅色 2.字體加粗 3.字體紅色加粗

這時我們只需要定義前兩個css：

.red{color:red;}

.b{font-weight:bold;}

復制代碼

第三種情況時用

子選擇器:

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

• Item 1>
• Item 2
• Item 3

復制代碼

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

sub_nav { /* Some styling */ }

sub_nav li { /* Some styling */ }

sub_nav a { /* Some styling */ }

復制代碼

組選擇器：

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

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

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

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

color:#333;

margin:1em 0;

}

復制代碼

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

h1 { font-size:2em; }

h2 { font-size:1.6em; }

復制代碼

**看到這里別忘記點個小小的贊喔~

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

尾巴

重用、子選擇器和組選擇器的靈活使用可以非常有效的減少代碼，同時非常有利的增加代碼的可讀性，具體的應用需要在具體編寫過程中體會。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。