PHP筆記（CSS篇）

HTML常用於在網頁中顯示內容，當然，還可以是布局，但是比較不方便，所以，引進了CSS

CSS全稱Cascading Style Sheets，中文名：層疊樣式表

協助文檔：CSS.chm

作用:布局和美化網頁

特點：

和HTML一樣，是一種標記語言，可以由瀏覽器直接執行

大小寫不敏感

CSS檔案是一個文字檔，尾碼名為css

嵌套在HTML中使用

Css規則

文法

CSS定義由選取器（selector）、屬性（property）及屬性值（value）組成；

格式：selector{property:value;}

選取器包括

類型選取器：

定義：HTML標籤

使用：直接使用標籤

　　　　　　　　

定義　　　　　　　　　　　　　　　　　　　　　　　　　　使用

class選取器：

定義：標記名.類名 或 .類名

使用：class="類名"

標記名為html標籤，“標記名.類名”表示只有使用該標籤並class值為該類名時，才使用該選取器；

“.類名”表示只要class值為該類名，就會使用該選取器

　　　　　　　　

定義　　　　　　　　　　　　　　　　　　　　　　　　使用

id選取器：

定義：標記名#id值 或 #id值

使用：id="id值"

標記名為html標籤，“標記名#id值”表示使用該標籤並id為該值時，才使用該選取器

“#id值”表示只要id為該值，就會使用該選取器

同一頁面id值是唯一的（是的，如果同一頁面有兩個相同的id，樣式也能顯示出來，但是這樣有違邏輯，並且 將來使用js調用id時，會出現混亂）

　　　　　　　　　　　　　　　

定義　　　　　　　　　　　　　　　　　　　　　　　　使用

包含選取器：

多種選取器的層次組合，選取器用空格隔開，各選取器由左到右，為內含項目關聯性

定義：各選取器符組合，用空格隔開

使用：各選取器嵌入使用

層數不限，但建議不要太多，影響維護和seo

　　　　　　　　　　　　

定義　　　　　　　　　　　　　　　　　　　　　　使用

群組選取器：

同時定義多個選取器為同一屬性

定義：各選取器組合，用","分隔開

使用：各分隔字元直接使用

　　　　　　　　　　

定義　　　　　　　　　　　　　　　　　　　　使用

虛擬元素選取器：

對html元素不同狀態的一種定義方式

定義：標籤:虛擬元素

使用：該標籤的不同狀態使用不同屬性

　　　　　　　　

定義　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　使用

屬性與屬性值用":"分隔開，多個屬性值用";"分隔

注釋

格式：/*.......*/

長度單位

相對單位（常用）

px：像素

em：相對於當前對象內文本的字型尺寸

%：百分比

絕對單位（不常用）

pt：點

cm：厘米

mm：毫米

顏色單位和URL值

顏色：

#rrggbb

#rgb

rgb(x,x,x)（不常用，瀏覽器不相容）

rgb(x%,x%,x%)（不常用，瀏覽器不相容）

URL

表示：url(address)

HTML中使用CSS的方式

內聯樣式表

直接在標籤中使用

使用style屬性，嵌入css索引值對

使用靈活，但失去了CSS的作用

內嵌樣式表

在標籤中，使用或者

外部連結樣式表

外部連結css檔案，檔案中直接輸入css內容

優點：

使用外接的css檔案，瀏覽器帶有緩衝功能，不用每次都下載

多個檔案分享權限設定

使用標籤引入HTML中，格式為

三種格式的優先順序，就近原則：內聯式>內嵌式>外鏈式

內嵌元素與區塊層級元素

內嵌元素

標籤中的內容都在同一行，不會自動換行

不可設定寬和高

區塊層級元素

標籤中的內容會自動換行

可設定寬和高

CSS字型屬性

多屬性寫在同一行，用複合屬性，順序必須為 [[ || || ]? [ / ]? ],和為必選項。

單屬性分開寫

屬性：設定字型是否為斜體，預設值為normal；

屬性：設定字型是否為小型的大寫字母，預設值為normal；

屬性：設定字型粗細，預設值為normal；

屬性：設定字型大小，常用單位為"px"或"%"，預設值為normal；

屬性：設定字型，可設定多種字型，用“,”隔開，瀏覽器會按順序檢索是否存在該字型以顯示，字型名稱為中文時，要用單引號引起。預設值根據瀏覽器選擇。

屬性：設定字型寬度，預設值為normal；

CSS背景屬性

多屬性寫在一行，使用複合屬性，屬性值為[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]，其他參數不填時，預設無條件覆蓋。

單屬性分開寫

：設定背景色，預設為transparent；

：設定背景圖片，用"url()"設定圖片路徑；

：設定背景圖片填充效果，預設為repeat；

：設定背景圖片的填充位置，預設值為"0% 0%"，常用單位"%"和"px"。
小技巧：可設定一個地區的和屬性，屬性可填充該地區，如作為導航條等；屬性可分別截取圖片一部分，分開現實，減少網頁載入時間。

CSS文字屬性

：設定字元間距，允許使用負值，預設值為normal

：設定單詞間距，允許使用負值，預設值為normal

：向文本添加修飾，underline底線，overline上劃線，line-through刪除線

：水平對齊，centen置中，right靠右對齊，left靠左對齊

：設定對象行高，當行高與地區高度相同，文本垂直置中

：設定文本縮排，單位可為em（字元）、px（像素）、%（百分比）

：設定字型顏色

CSS邊框屬性

多屬性合并寫，使用複合屬性，屬性值順序為[ border-width ] || [ border-style ] || [ border-color ]

、、、：設定左線、右線、上線、下線的屬性，屬性值順序為[ border-width ] || [ border-style ] || [ border-color ]

單屬性分開寫

：設定邊框樣式，常用dotted（點狀）、dashed（虛線）、solid（單實線）

：設定邊框寬度，不允許為負數，屬性設為none，本屬性失去作用

：設定邊框顏色

CSS列表屬性

:設定清單項目的標記為預設標記

：設定清單項目的標記為自選標記，“url()”設定標記的地址

：設定表項在文本的位置，outside表示標記放置在文本以外，inside表示標記放置在文本以內

DIV+CSS頁面配置

優勢：

1. 內容與布局分離
2. 代碼簡潔，提高頁面瀏覽速度
3. 易於維護和修改
4. 提高搜尋引擎對頁面的索引效率

div和span

div：區塊層級元素，會自動換行，能設定寬高

span：內嵌元素，不會自動換行，不能設定寬高

W3C盒子模型

maigin：外補白（盒子四邊的外延申邊距）

maigin：可使用1~4個參數來設定外補白大小

maigin-top、maigin-right、maigin-bottom、maigin-left：分別設定盒子上、右、下、左外補白大小

border：邊框

border：可使用1~4個參數來設定邊框寬度

border-top、border-right、border-bottom、border-left：分別設定盒子上、右、下、左邊框大小

padding：內補白（盒子內容與邊框的距離）

padding： 可使用1~4個參數設定內補白大小

padding-top、padding-right、padding-bottom、padding-left：分別設定盒子上、右、下、左內補白大小

DIV定位

position：設定定位方式，參數為static、absolute、relative、fixed

absolute：絕對位置，位置相對於文檔流，會脫離文檔流

relative：相對定位，位置相對於自己原來的位置，不會脫離文檔流

fixed：固定定位，位置相對於瀏覽器視窗

繫結模式：父層使用"relative"定位，子層使用"absolute"定位，子層將於父層“綁定”，子層的位置不再相對於文檔流，而是相對於父層

top：盒子與頂部的距離

right：盒子與右邊的距離

bottom：盒子與底部的距離

left：盒子與左邊的距離

z-index:設定層疊順序，預設以0開始，可為負數

text-align：水平對齊，centen置中，right靠右對齊，left靠左對齊

line-height：設定對象行高，當行高與地區高度相同，文本垂直置中

float：設定對象為浮動效果

只會水平浮動，不會不會垂直浮動

會脫離文檔流

多個對象同時設定為浮動時，各對象並排顯示

left：左浮動

right：右浮動

clear：清除浮動

right：清除右浮動，對象右邊不能存在浮動物件

left：清除左浮動，對象左邊不能存在浮動物件

both：清除兩邊浮動，對象兩邊不能存在浮動物件

DIV的顯示

display：設定元素顯示發方式

block：以區塊層級元素方式顯示

inline：以內嵌元素方式顯示

none：隱藏該元素，隱藏後，不佔用位置

visibility：設定嵌套關係的顯示

inherit：顯示內容與父層相同，父顯子顯，父隱子隱

visible：無論父層是否顯示，子層依然顯示

hidden：無論父層是否顯示，子層均隱藏且佔用位置

overflow：內容超出邊界時的顯示方式

auto：自動處理，超出時顯示捲軸，未超出則不顯示

scroll：始終顯示捲軸，無論是否超出

visible：超出也直接顯示，不做處理

hidden：超出部分隱藏，不顯示捲軸

