java學習篇之---css基礎知識（一）

標籤：java   css   

css基礎知識（一）

1、css樣式：

載入css樣式有以下四種：

1）、外部樣式
2）、內部樣式
3）、行內樣式
4）、匯入樣式

<link href="layout.css" rel="stylesheet" type="text/css" />

這種形式是把css單獨寫到一個css檔案內，然後在原始碼中以link方式連結。它的好處是不但本頁可以調用，其它頁面也可以調用，是最常用的一種形式。

<style>h2 { color:#f00;}</style>

這種形式是內部樣式表，它是以<style>和</style>結尾，寫在原始碼的head標籤內。這樣的樣式表只能針對本頁有效。不能作用於其它頁面。

<p style="font-size:18px;">內部樣式</p>

這種在標籤內以style標記的為行內樣式，行內樣式只針對標籤內的元素有效，因其沒有和內容相分離，所以不建議使用。

@import url("/css/global.css");

連結樣式是以@import url標記所連結的外部樣式表，它一般常用在另一個樣式表內部。如layout.css為首頁所用樣式，那麼我們可以把全域都需要用的公用樣式放到一個global.css的檔案中，然後在layout.css中以@import url("/css/global.css")的形式連結全域樣式，這樣就使代碼達到很好的重用性。

2、css優先順序：

1）、id優先順序高於class
2）、後面的樣式覆蓋前面的
3）、指定的高於繼承
4）、行內樣式高於內部或外部樣式
總結：單一的(id)高於共用的(class)，有指定的用指定的，無指定則繼承離它最近的

3、css盒模型組成：

學習web標準，首先要弄懂的就是這個盒模型，這就是DIV排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版後，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔，表現和內容相分離，維護方便，能相容更多的瀏覽器，比如PDA裝置也能正常瀏覽。

那麼它為什麼叫盒子呢？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

我們可以把它想像成現實中上方開口的盒子，然後從正上往下俯視，邊框相當於盒子的厚度，內容相對於盒子中所裝物體的空間，而填充呢，相當於為防震而在盒子內填充的泡沫，邊界呢相當於在這個盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。

所以整個盒模型在頁面中所佔的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中width所定義的寬度僅僅是內容部分的寬度。

這裡的邊界我們也稱之為：外邊距、外補丁；填充也叫：內邊距、內補丁。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

java學習篇之---css基礎知識（一）