關於 Lamp 填坑式學習筆記（3）

層疊樣式表CSS的基礎

什麼是CSS ？

css 是 Cascading Style Sheets 的縮寫，也就是層疊樣式表，，，

它除了可以設置網頁元素的顯示位置和格式，會可以產生濾鏡，圖像淡化等效果。

它就是一個樣式代碼，瀏覽器讀取到後，就執行的一串代碼。

說的直白點就是， css 可以像 word 一樣的排版控制，來控制網頁中顯示的效果。

眾所周知每個 html 標籤，都有四個固定的屬性， id , class , style , name ，我們就從裡面的 style 這個開始的。

CSS語言語法

格式：

屬性：值；屬性一：值一；

屬性和值之間使用冒號分開，多個屬性之間，用分號分開。

顏色：#rgb #8fa #aaffaa red green rgb(255,0,10)

大小：em 2em px pt % pc cm mm in

URL (url)

注釋 /* */ 在其中不要再包含注釋

CSS的四種設置方式

分別是：內聯樣式表，嵌入式樣表，外部樣式表，輸入樣式表 。

內聯樣式表：

在 HTML 元素標籤中使用 style 屬性內聯，就像我開頭那樣，每個 HTML 標籤都可以使用這個屬性。

通過 HTML 的 <style> 標籤將 CSS 嵌入到 HTML 中使用，可以控制當前頁面的所有樣式。

將樣式單獨定義在一個後戳名為 .css 的文檔中，並在 HTML 中通過 link 元素連接到 HTML 中使用。

可以將一個樣式文件輸入到另一個樣式文件夾中，或者將一個樣式文件輸入到 <style> 元素中。

@import url（CSS文件）

1，

沒搞懂是什麼原因。。。

格式沒錯啊 = = ！

優先順序：

內聯的高於其它的， 其它的和載入的順序有關 。

CSS的多種選擇器的使用

什麼是樣式選擇器？

Selector { /* Selector 是樣式選擇器 */

property:value; /* color:red; */

property:value; /* font-size:4cm; */

…

}

而其中的 selector 就是樣式選擇器，說的直白點就是，指定一個在標籤，然後在這個標籤里設置樣式。

HTML選擇器

HTML 里有標籤，而 CSS 里有選擇器。

選擇符就是賦予內部或外部樣式表的名字。

HTML的標籤，用來改變一個指定標籤的樣式。

任何一個元素都可以是一個CSS選擇符 。

就是在選擇器後面加個點，然後定義個類名。

同一個選擇器能有不同的類，因而允許同一個元 素有不同的樣式 。

[tag].類名 （類名是自定義的,如果不加tag則代表所有 HTML元素）

<tag class=「類名 類名1 類名2」> （同一個元素可以使 用多個類，類名之間使用空格分開）

在定義一個類名的時候，不能使用純數字，建議使用英文字母定義類。

1，

在HTML頁面中， ID屬性指定了某個單一 元素，id屬性就用來對單一元素定義單獨樣式 。

一個HTML頁面中，ID屬性值要唯一 。

因為 id 和 JavaScript 結合著使用居多，但是也是可以用來當做 CSS 來用，所以就不能重複，要不就亂套了。

#idname { } (idname是自定義的名稱)

<tag id=「idname」>

關聯選擇器只不過是一個用空格隔開的兩 個或更多的單一選擇器給成的字元串 。

因為層疊順序的規則，它們的優先權比單 一的選擇符大 。

必須按關聯關係使用，不能有反順序。

只要能保持關聯關係就可以，不管是在多 少層 。

為了減少樣式表的重複聲明，組合是允許 的。

只要使用英文逗號（,）隔開每個選擇符就 可以了 。

偽元素選擇器是指對同一個HTML元素在不同的狀態下的 一種定義方式 。

目前只有a和p兩處HTML元素可以使用 。

使用時的語法 ：

標籤：偽元素 標籤［.類名］：偽元素

a:link 沒有任何運作前的狀態

a:hover 游標移到到超鏈接上的狀態

a:active: 選擇超鏈接的狀態

a:visited 訪問過超連接的狀態

p:first-letter 一個段落中首個字母的狀態

P:first-line 一個段落中首行的狀態

--------

這個好複雜啊 = =！我就簡單弄一個算了，我又不是真的去搞前端的，，了解了解就得了。

--------

所有嵌套在某個HTML標籤中的HTML標籤 都會繼承外層標籤設置的樣式規則。

關聯>ID選擇器>CLASS選擇器>HTML標籤選 擇器

常見的CSS屬性和值

就是一些常見的屬性和值，我也就懶的一個一個的去實操了，直接截圖。

多個圖標放到同一個圖片里，通過定義某 區塊的背景定位，調用同一個圖片中不同 位置上的小圖標，好處是可以減少對服務 器的請求次數，從而加快頁面的訪問速度 。

例子：

任何一個元素都可以設置邊框

邊框屬性是用於設置一個元素邊框風格、 邊框寬度、邊框顏色的略寫，可以一起設 置4邊的邊框，也可對上邊框、右邊框、下 邊框和左邊框單獨設置。

邊框風格屬性

可以通過邊框風格屬性border-style設定上下左右邊 框的風格，該屬性用於設置一個元素邊框的樣式， 而且必須用於指定可見的邊框。可以使用1到4個關 鍵字，如果四個值都給出了，它們分別應用於上、 右、下和左邊框的式樣。

如果給出一個值，它將被運用到各邊上。

如果兩個或三個值給出了，省略了的值與對邊相等 。

也可以分別使用border-top-style、border-bottomstyle、border-left-style和border-right-style屬性單獨 設置各邊的風格 。

各邊的風格使用的屬性值

none：沒有邊框，無論邊框寬度設為多大

dotted：點線式邊框

dashed：破折線式邊框

solid：直線式邊框

double：雙線式邊框

groove：槽線式邊框

ridge：脊線式邊框

inset：內嵌效果的邊框

outset：突起效果的邊框

邊框寬度屬性

可以通過邊框寬度屬性border-width設定上下左右邊框的寬 度，該屬性用1到4個值來設置元素的邊界，值是一個關鍵 字或長度，不允許使用負值長度。

如果四個值都給出了，它們分別應用於上、右、下和左邊 框的式樣。

如果只給出一個值，它將被運用到各邊上。

如果兩個或三個值給出了，省略了的值與對邊相等。這個 屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬 度屬性的略寫。

也可以分別使用border-top-width、border-bottom-width、 border-left-width和border-right-width屬性單獨設置各邊的 寬度。除了可以使用長度單位定值外，還可以用medium（ 是默認值）、thin（比medium細）或thick（比medium粗） 值。

邊框顏色屬性

可以通過邊框顏色屬性border-color設定上 下左右邊框的顏色，可以使用1到4個關鍵 字。如果四個值都給出了，它們分別應用 於上、右、下和左邊框的式樣。如果給出 一個值，它將被運用到各邊上。如果兩個 或三個值給出了，省略了的值與對邊相等 。

略寫的邊框屬性

CSS屬性border是邊框屬性的一個快捷的綜合寫法 ，是一個用於設置一個元素邊框的寬度、式樣和 顏色的略寫，它包含border-width，border-style和 border-color屬性。

邊框屬性border只能設置四種邊框，也只能給出一 組邊框的寬度和式樣。為了給出一個元素的四種 邊框的不同的值，網頁製作者必須用一個或更多 的屬性，如：上邊框、右邊框、下邊框、左邊框 、邊框顏色、邊框寬度、邊框式樣、上邊框寬度 、右邊框寬度、下邊框寬度或左邊框寬度。

滑鼠游標屬性

在網頁中默認的滑鼠指針只有兩種，一種是最普 通的箭頭，另一種是當移動到鏈接上時出現的「 小手」。但現在越來越多的網頁都使用了CSS鼠 標指針技術，當將滑鼠移動到鏈接上時，可以看 到多種不同的效果。CSS可以通過Cursor屬性實現 滑鼠形狀的改變，其屬性可以是默認的滑鼠形狀 default、小手形狀hand、交叉十字crosshair、文本 選擇符號text、Windows的沙漏形狀wait、帶有問 號的滑鼠help以及各個方向的箭頭屬性值。

主要是看這一節的時候，我是在似睡非睡中，看到，看的就是一堆的值和屬性，，，記不住，，所以大致的了解是什麼樣式，再理解理解如何用就行。