css筆記總結

1.CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

2.值的不同寫法和單位

除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000和rgb（）表示。

請注意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這么做了。比如說，當尺寸為 0 像素時，0 之后不需要使用 px 單位，因為 0 就是 0，無論單位是什么。

3.選擇器的分組

你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。這是并列選擇器。

4.派生選擇器

通過依據元素在其位置的上下文關系來定義樣式，你可以使標記更加簡潔。

5.id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。

id 選擇器和派生選擇器。在現代布局中，id 選擇器常常用于建立派生選擇器。

單獨的選擇器：id 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用

6.在 CSS 中，類選擇器以一個點號顯示

和 id 一樣，class 也可被用作派生選擇器

元素也可以基于它們的類而被選擇

7.可以使用 backgroud-color為元素設置背景色。

這個屬性接受任何合法的顏色值。

8.要把圖像放入背景，需要使用?background-image屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值。如果需要在頁面上對背景圖像進行平鋪，可以使用?background-repeat屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。

9.水平對齊

text-align是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。

10.接下來討論 text-decoration屬性。

text-decoration 有 5 個值：none ? underline ? overline ? line-through ? blink

不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，none 值會關閉原本應用到一個元素上的所有裝飾。

11.指定字體系列

使用 font-family?定義文本的字體系列

字體風格font-style最常用于規定斜體文本。

該屬性有三個值：normal - 文本正常顯示 ? italic - 文本斜體顯示 ? oblique - 文本傾斜顯示

12.字體加粗

font-weight屬性設置文本的粗細。

使用 bold 關鍵字可以將文本設置為粗體。

關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。

13.設置鏈接的樣式

能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。

鏈接的四種狀態：a:link - 普通的、未被訪問的鏈接 ? ?a:visited - 用戶已訪問的鏈接 ? ? a:hover - 鼠標指針位于鏈接的上方 ? ?a:active - 鏈接被點擊的時刻

當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

14.文本修飾

text-decoration 屬性大多用于去掉鏈接中的下劃線

15.CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框?和 外邊距的方式。

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。

提示：背景應用于由內容和內邊距、邊框組成的區域。

內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置。

提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

16.元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。

CSS padding 屬性定義元素邊框與元素內容之間的空白區域。

單邊內邊距屬性

也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：padding-top ?padding-bottom ? padding-left ? padding-right

17。元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。

元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。

每個邊框有 3 個方面：寬度、樣式，以及顏色。

CSS 規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。

CSS 的 border-style屬性定義了 10 個不同的非 inherit 樣式，包括 none。

邊框的寬度：可以通過border-width為邊框指定寬度。

邊框的寬度：可以通過 border-width為邊框指定寬度。

transparent指明透明

18.圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。

設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規則，允許為外邊距指定少于 4 個值。規則如下：

如果缺少左外邊距的值，則使用右外邊距的值。

如果缺少下外邊距的值，則使用上外邊距的值。

如果缺少右外邊距的值，則使用上外邊距的值。

19.Padding（填充）

當元素的 Padding（填充）（內邊距）被清除時，所"釋放"的區域將會受到元素背景顏色的填充。

單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。

填充- 單邊內邊距屬性

在CSS中，它可以指定不同的側面不同的填充

Padding屬性，可以有一到四個值。

padding:;上填充 ?右填充 ?下填充 左填充；

padding:上填充 左右填充 ?下填充；

padding:上下填充 ?左右填充；

padding:上下左右填充；

margin同理

20.CSS?分組?和?嵌套?選擇器

CSS 分組可以將具有相同樣式的選擇器進行分組，減少代碼量。（并列選擇器）

CSS 嵌套適用于選擇器內部的選擇器的樣式。

21.CSS?Display(顯示)?與?Visibility（可見性）

隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影

響布局。display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用

的空間也會從頁面布局中消失。

22.如何改變一個元素顯示

塊狀元素加display：inline變成行類元素

行類元素加display:block變成塊狀元素

23.Positioning(定位)

CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面，并指定一個元素的內容太大時，應該發生什么。

元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非事先設定position屬性。他們也有不同的工作方

式，這取決于定位方法.。

Static 定位

HTML元素的默認值，即沒有定位，元素出現在正常的流中。

靜態定位的元素不會受到top, bottom, left, right影響。

Fixed 定位

元素的位置相對于瀏覽器窗口是固定位置。

即使窗口是滾動的它也不會移動：

Fixed定位使元素的位置與文檔流無關，因此不占據空間。

Relative 定位

相對定位元素的定位是相對其正常位置。

可以移動的相對定位元素的內容和相互重疊的元素，它原本所占的空間不會改變。

相對定位元素經常被用來作為絕對定位元素的容器塊。

Absolute 定位

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于:<html>

Absolutely定位使元素的位置與文檔流無關，因此不占據空間。

元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）

一個元素可以有正數或負數的堆疊順序：

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

注意：?如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

24.元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環繞在它左邊：

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

清除浮動

clear:both ? ? overflow;hidden

25.導航欄

導航條基本上是一個鏈接列表，所以使用<ul>和<li>元素非常有意義：

list-style-type:none - 移除列表前小標志。一個導航欄并不需要列表標記

移除瀏覽器的默認設置將邊距和填充設置為0

26.css3邊框

在CSS3中，就能夠很容易創建圓角。在CSS3中border-radius屬性就是被用于創建圓角的

CSS3 border-radius - 指定每個圓角

如果你在 border-radius 屬性中只指定一個值，那么將生成 4 個 圓角。

但是，如果你要在四個角上一一指定，可以使用以下規則：

四個值:?第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

三個值:?第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角

兩個值:?第一個值為左上角與右下角，第二個值為右上角與左下角

一個值：?四個圓角值相同

CSS3中的box-shadow屬性被用來添加陰影

box-shadow：x距離 y距離 模糊距離 陰影大小 顏色?

27.css3背景

CSS3 background-image屬性

CSS3中可以通過background-image屬性添加背景圖片。

不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。

CSS3 background-size 屬性

background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。

CSS3中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。您可以指定像素或百分比大小。

你指定的大小是相對于父元素的寬度和高度的百分比的大小。

CSS3的background-Origin屬性

background-Origin屬性指定了背景圖像的位置區域。

content-box, padding-box,和 border-box區域內可以放置背景圖像。

28.CSS3的文本陰影

CSS3中，text-shadow屬性適用于文本陰影。

指定了水平陰影，垂直陰影，模糊的距離以及陰影的顏色

29.CSS3 2D轉換

CSS3轉換，我們可以移動，比例化，反過來，旋轉，和拉伸元素。

translate()移動

rotate()旋轉

scale()放大縮小

30.CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點，必須規定兩項內容：

指定要添加效果的CSS屬性

指定效果的持續時間。

注意：?如果未指定的期限，transition將沒有任何效果，因為默認值是0。

指定的CSS屬性的值更改時效果會發生變化。一個典型CSS屬性的變化是用戶鼠標放在一個元素上時：當鼠標光標移動到該元素時，它逐漸改變它原有樣式。

要添加多個樣式的變換效果，添加的屬性由逗號分隔

31.css動畫

CSS3 @keyframes 規則

@keyframes規則是創建動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

當在@keyframe創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規定動畫的名稱

規定動畫的時長

注意:?您必須定義動畫的名稱和動畫的持續時間。如果省略的持續時間，動畫將無法運行，因為默認值是0。