最簡潔的CSS學習筆記

css是一種用來表現HTML(標準通用標記語言 (SGML)的一個應用)或XML(標準通用標記語言 (SGML)的一個子集)等檔案樣式的電腦語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字型字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。

1.通用屬性

1. name：名稱，可以重複，可以一樣;

2. class：類名，可以重複，也可以擁有多個，給CSS用的；如<p class="one two"></p>;

3. id：唯一標示，不能重複，一般多用在JavaScript中；命名規則與其他語言的標示命名規則一樣;

4. title：標題，可以在標籤中添加；如<img src="1.jpg" title="這是一張圖片">;

2.標籤關係

1. 後代關係：父子關係（內含項目關聯性）;

2. 兄弟關係：同父關係;

3.CSS-層疊樣式表

1. CSS注釋：/注釋內容寫在這裡，給程式員看，頁面上不顯示/;

2. CSS文法規則：所有符號都以英文IME狀態下輸入，要小寫，大括弧裡寫屬性，每條屬性語句都以分號結束，屬性值要帶像素單位（px）；格式：屬性:屬性值;

4.CSS的引入方式

1. 行內引入：在標籤中加樣式的引入方式；格式：<標籤 style="background:red; font-size:20px;">內容</標籤>;注意：代碼可維護性極差，CSS代碼與html結構沒有實現分離；影響的範圍只在當前標籤;

2. 內嵌引入：在網頁頭部中加<style type="text/css">CSS樣式</style>;注意：代碼可維護性比較差，沒有實現CSS代碼與HTML結構分離，影響範圍只在當前頁面;

3. 外聯引入：在網頁外建立一個xx.css檔案，網頁頭部中利用<link rel="stylesheet" type="text/css" href="xx.css">;注意：代碼可維護性高，CSS代碼與HTML結構完全分離，影響範圍整個網站所有引入CSS檔案網頁中;

5.CSS核心文法：

1. 結構格式：選取器{屬性：屬性值；屬性：屬性值；...}；例：p{background:red;color:gray;size:20px;};

2. 選取器：選擇頁面元素的工具;

3. 大括弧：大括弧裡面寫樣式內容;

6.選取器

1. 基礎選取器：

• 通用選取器：用來初始化網頁預設樣式的，樣式表開頭就寫；格式：*{padding:0;margin:0;};

• 標籤選取器:給指定標籤加樣式；格式：p{color:green;};

• 類別選取器：選擇制定類別選取器樣式；格式:.class名{background:pink;};注意：class名在標籤中定義，如class="one";如果幾個塊內容樣式一樣，那麼給他們一樣的樣式就可以;

• id選取器：唯一標示，不能重複出現；格式：#id名{backgound-image:url(1.jpg);}注意：id名在標籤中定義id="one";id不能隨表加，幾個塊內容樣式一樣時幾個塊的id名都得不一樣;;

id和class的區別：注意上一點——ID必須能夠唯一的確定DOM節點。如果你全篇都使用ID選取器，那麼即使兩個DOM節點樣式完全相同，那麼你也必須把節點樣式寫兩遍, 如果後期要進行維護,那麼你必須對兩處的代碼都進行維護！！！極大的增加了維護的成本;

• 偽類別選取器：順序LoVe HAte原則，可以跳過去，但順序不能換；分別是連結狀態(link)，訪問過的狀態(visited)，活動狀態(hover)和點擊狀態(active);

描點類：a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 擷取焦點時的樣式a:focus{};注意：屬性中可以加文字屬性，背景顏色和圖片；a{}與a:link{}實現的效果是一樣的;
列表類：li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};注意：屬性中可以加文本系列屬性，背景顏色和圖片等;

1. 複合選取器：

• 分組選取器（並集選取器，多元選取器）：用來給多個元素加同一個樣式；例：.one,#one,a,span{color:red;font-size:14px;}意思是類one,#one,a標籤，span標籤有共同屬性;

• 後代選取器：給子類元素加屬性;例：.one a{text-decoration:none;}意思是類one的後代a標籤修飾的內容無底線;

• 子項目選取器（指定式選取器）：給指定的子項目加屬性；例：#one>p{color:red;};意思是給id選取器one的兒子p標籤休息的內容加屬性;

• 相鄰元素選取器：

1.兩個緊挨著的兄弟選取器加屬性,不給自己加屬性，只給後面的兄弟加屬性；.one+p{background:red;};
2.one~p{background:green}意思是給one選取器後面的所有p標籤元素加屬性，前提是他們擁有一個父類;

• 屬性選取器：

1.給帶有屬性的元素的加屬性;img[id]{background:red;}給帶id的元素加屬性;

1. 給帶有指定屬性值的元素加屬性：img[src="b.jpg"]{background:red;}給帶b.jpg的元素加屬性;

3.給帶有指定字元開頭的的元素加屬性：img[src^="b"]{background:red;}給以b開頭的所有元素加屬性;
4.選取器帶有以指定屬性值為結尾的元素：img[src$="b"]{background:red;}給以b結尾的所有元素加屬性;
5.選取器帶有包含指定屬性值的元素:img[src*="b"]{background:red;}給含b的所有元素加屬性;

7.元素包含（顯示方式的分類）

1. 塊元素：用來排版，結構 典型的有：p，p，li，h1，dt;

• 元素自己獨佔一行顯示（與寬度無關）;

• 可以設定寬度和高度;

• 當嵌套一個區塊層級元素，子項目如果不設定寬度，那麼該子項目的寬度為父元素的寬度;

2. 行內元素： 用來加樣式的；span,a,font,strong;注意：行內元素不要給上下的margin和padding，上下會被忽略，左右起作用（一般不用）;

• 元素在一行上顯示;

• 不能直接設定寬度和高度;

3. 行內塊元素：image,input;

• 元素在一行上顯示;

• 可以設定寬度和高度;

4. 轉換關係：行內包含行內；塊元素包含塊元素，塊元素可以包含行內元素;

• Display: inline 將元素轉化為行內元素

• Display：inline-block 將元素轉化行內塊元素

• Display: block 將元素轉化為塊元素

8.CSS的屬性

1. 字型有關屬性：

• font-size:字型大小，多少像素，px;

• font-weight:字型粗細，bold（700-900），normal，可以寫100-900;

• font-style：字型傾斜，italic，normal;

• font-family:字型，微軟雅黑，黑體;

• 屬性連寫：font: font-style font-weight font-size/line-height font-family;注意： font屬性聯寫必須有 font-size 和font-family(其他屬性可以不寫)；font-size 和font-family的順序不能換;

2. 文本：

• color:顏色;

• text-indent：縮排【單位是em】;

• text-decoration：文本線【underline底線，overline上劃線，line-through刪除線，none取消線】;

• word-spacing:單詞之間距離;

• letter-spacing：字母鍵距離;

• text-align：水平對齊【預設left，center，right】;

• line-height：行高，文字所在行的高度【行高和元素高度相等時文字垂直置中】;

3. 尺寸：是塊元素的尺寸，行內元素不可以設定寬高，想設定得轉換;

• width：寬度;

• height：高度;

4. 列表ul，li的屬性：list-style-type在ul中加了可以的li中不用加;

• list-style-type:none;去掉符號,square方塊，circle圓，disc實體圓，加圖片了後可以不寫也可以list-style-type:none;

• list-style-image:url(1.jpg)圖片

• border:1px solid red;給ul整體設定邊框

• list-style-position:outside;樣式圖片定位：inside,outside

5. 背景：

• 背景顏色background-color;

• 背景圖片background-image注意：設定背景圖片的時候一定要設定寬度和高度;

• 背景平鋪background-repeat：repeat （預設值）|no-repeat （不平鋪）|repeat-x | （橫向平鋪）repeat-y （縱向平鋪）

• 背景位置background-position：設定具體值： left| right| top| bottom| cneter；設定具體值的時候不區分先後順序；設定具體數位時候，第一個值代表水平方向，第二個值代表垂直方向，設定前背景圖片設定格式改成background-image;

• 設定背景是否固定background-attachment： Scroll（預設值）滾動;fixed （圖片固定）;

• 屬性聯寫：沒有數量限制和先後順序限制：background:url("") red no-peat 30px 40px;

6. 行高line-height:

7. 盒子模型：用來進行網頁布局，必須設定寬度

• 盒子邊框屬性：

• 組成部分：

1. 邊框寬高：border-width:1px;

2. 邊框顏色：border-color:red;

3. 邊框樣式：border-style:solid實線/dotted點線/dashed虛線/none無;

4. 屬性聯寫：border:1px solid red; 注意：屬性聯寫的時候沒有先後順序限制，邊框顏色可以不寫，邊框寬度可以不寫

5. 分開寫法：

6. border邊框：

7. padding內邊距：設定內容距離盒子邊框之間的距離

8. margin外邊距： 設定盒子與盒子之間的距離

     p{          width:300px;          height:200px;         border-top:1px solid red;         border-left:1px solid  red;         border-right:1px solid  red;         border-bottom:1px solid  red;        }

6. 單獨設定屬性法：

     border-top-color:red;     border-top-style:solid;     border-top-width:1px;

1. 盒子大小：

• 盒子大小影響的地方：繼承的盒子再父盒子寬度範圍內，padding值不會影響該盒子大小

• 盒子大小計算： 寬度=內容寬度+左右邊框+左右內邊距

1. 邊框可以影響盒子大小

2. 內邊距影響盒子大小

3. 以後進行頁面盒子布局的實現，如果給盒子設定了內邊距，對應的要將內容寬度或者高度減去相應的值

2. margin外邊距： 設定盒子與盒子之間的距離

• 盒子置中：

• 屬性聯寫：

1. 標準流下的盒子置中:margin:0px auto;

2. 定位的盒子置中：先走父盒子的一半，再往回走自己寬度的一半

3. Margin: 10px 上 右 下 左 10px

4. Margin:10px 20px 上下10px 左右20px

5. Margin: 10px 20px 30px 上10px 左右20px 下30px

6. Margin: 10px 20px 30px 40px 上右下左

 one{       width: 100px;      height:100px;      border: solid red  1px;     position: absolute;     left: 50%;     margin-left: -50px;      }

• 
  

• 注意：

• 屬性聯寫：

1. Padding: 10px; 上，右，下，左的距離為10px

2. Padding: 10px 20px; 上下10px 左右20px

3. Padding: 10px 20px 30px； 上10px 左右20px 下30px

4. Padding: 10px 20px 30px 40px; 上， 右 ， 下， 左

1. 當兩個盒子垂直顯示的時候，外邊距以設定的最大值為準（外邊距合并的第一種情況），當兩個盒子橫排顯示時，外邊距疊加

2. 外邊距塌陷（有難問題）解決步驟：

3. padding內邊距：設定內容距離盒子邊框之間的距離

1. 給父盒子設定邊框

2. 給父盒子設定overflow:hidden;

1. 清除邊距：

1. 方法1：*{padding：0；margin：0；}

2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

9.CSS的三大特性

1. 繼承性：

• 可繼承性：color，text-align，text-indent，font-size，font-weight，font-family

• 不可繼承：text-decoration，border，display，margin，float，padding

• 繼承性發生的前提是標籤之間屬於一種嵌套關係

• 文字顏色可以實現繼承；文字大小可以實現繼承；字型可以實現繼承；與文字有關的屬性都可以 實現繼承

• 行高可以實現繼承

• 特殊性：

1. 不能繼承父元素中的文字顏色（層疊掉了）

2. <h1></h1> 標題標籤不能繼承父元素中的文字大小

2. 重疊性：層疊性是指樣式的覆蓋

• 樣式的層疊性與樣式的調用順序沒有關係，與樣式的定義順序有關。

• 層疊性發生的前提： 樣式衝突

3. 優先順序：

• 權重：行內引入（1000）>id(100)>class(10)>標籤（1）>通用(0)

• 把權重相加，值越大越有先

• 權重一樣，後面的樣式起作用

10.補充知識筆記

1. 表單最佳化寫法：<lable for="one">使用者名稱：</lable><input type="text" id="one">

2. 格式化列表表徵圖：list-style: none

3. 表單合并：border-collapse:collapse(設定表格邊框合并，適用於表格）

4. Bfc “格式化上下文”

5. overflow:

• visible:預設值。內容不會被修剪，會呈現在元素框之外

• hidden:內容會被修剪，並且其餘內容是不可見的;當圖片改變位置時帶動父元素也改變位置，給父元素加此屬性值可使父元素位置不變

• scroll:內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容

• auto:如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容

11.標準流：區塊層級元素獨佔一行顯示；標準流的顯示方式：元素預設的顯示方式

12.浮動：浮動用來解決文字文繞圖問題；用來製作導覽列，網頁布局

• 用法： Float:left| right

• 特點：要浮動都浮動

1. 設定了浮動的元素不佔原來的位置（脫標）

2. 可以讓區塊層級元素在一行上顯示

3. 浮動可以行內元素轉化為行內塊元素

4. 模式轉換的過程中，能用display就用display

• 清除浮動：

1. 定義：清除浮動不是刪除浮動；清除浮動指的是清除浮動的影響

2. 注意使用時機：當子項目設定了浮動，父元素沒有高度的時候，造成頁面配置混亂；這種情況下進行清除浮動。

3. 清除浮動方法：
   [x]注意：在要清除浮動的元素後面添加一個空塊元素（<p></p>,標籤），在添加的空元素中加clear:both | left |right

     .clearfix{            clrar:both;      }     <p class="content">           <p class="left"></p>           <p class="right"></p>           <p class="clearfix"></p>     </p>

  [x]給父盒子設定overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推薦使用該種方式清除浮動**

     .content{     width:500px；     overflow:hidden;     }

  [x]使用虛擬元素清除浮動

     .clearfix:after{        content:"";       display:block;       clear:both;       height:0;       visibility:hidden;     }     .clearfix     {       zoom:1;     }          <p class="content  clearfix">     <p class="left"></p>     <p class="right"></p>     </p>

13.定位：方位：left、right、top、bottom

• 靜態定位：靜態定位就是元素標準流的顯示方式position:static;就是預設的定位

• 絕對位置：相對於定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就會找到最初的包含層；不佔有以前的位置；position：absolute；

1. 當給一個單獨的元素設定絕對位置，以瀏覽器左上方（body）為基準設定定位的。

2. 當盒子發生嵌套關係的時候，如果父盒子沒有設定定位，子盒子設定定位以瀏覽器左上方為基準設定定位。

3. 當盒子發生嵌套關係的時候，如果父盒子設定定位，子盒子設定定位父盒子左上方為基準設定定位。

4. 給盒子設定了絕對位置，該盒子不佔位置（脫標）

5. 給行內元素設定絕對位置後，該元素轉化為了行內塊元素

6. 注意：元素設定了絕對位置後，通過具體的方位名稱可以隨便設定元素的位置

• 相對定位：相對於元素原位置，會佔有以前位置；position：relative；

1. 元素設定了相對定位後占原來的位置

2. 設定相對定位以自己的位置為參照設定位置

3. 相對定位不能進行元素的模式轉換

4. 子絕父相（子項目設定絕對位置，父元素設定相對定位）

• 固定定位：相對於整個穩穩當固定不變；固定定位不佔位置（脫標）;將行內元素轉化為行內塊元素position:fixed

• 層級問題：

1. 只有設定到定位才會有層級問題

2. 兄弟元素中存在相對，絕對等定位，誰的HTML文檔結構在後面，誰在最外層（層級高）

3. Z-index:設定層級，值是數字，只要有定位會用到定位設定

14. CSS之精靈兔：選擇透明文檔

• 瀏覽器中的座標系

• 圓點以右為正方向，圓點以下為正

• CSS精靈是一種處理網頁背景映像的方式；精靈圖也是一種背景圖片

• 精靈圖的使用

1. 使用fw一定要用開啟的方式開啟精靈圖

2. 使用精靈圖作為背景圖片的時候，常與background-position配合使用

3. 測量精靈圖中的元素的座標使用矩形選取器

4. 或者使用快速鍵 字母： k

15. CSS可見度

• overflow: hidden 將超出部分進行隱藏

• display: none 直接將元素隱藏

• display：block 將元素顯示(與js配合更搭)

• visibility:hidden 將元素隱藏

• display: none; 將元素隱藏後不佔位置

• visibility: hidden; 將元素隱藏後占原來的位置

16. 圖片和文字置中

• 每一種inlne-block元素都有一個預設的vertical-align:baseline

• vertical-align:middle 垂直對齊； vertical-align與inline-block更搭配；

17.規避脫標流

• 網頁版面配置階段中能用標準流就用標準流

• 標準流不能解決浮動

• 浮動不能解決定位

• 使用margin-left/margin-right 取值為auto可以將盒子自動衝到兩外一邊

18. 標籤包含規範

• p可以包含任何標準流下的標籤

• p標籤不能包含p和標題標籤和列表標籤

• 標題便簽可以包含其他標籤

• 行內元素最好不要包含其他標籤

19. 設定寬高的總結

• 在浮動之後，元素可以設定寬高

• 在絕對位置後，元素可以設定寬高

• 在固定定位後，元素可以設定寬高

20. 提升至CSS3

• CSS3和CSS2：CSS功能強大，代碼簡潔

• 偽類別選取器：

1. 第一個子項目：first-child

2. 最好一個元素：last-child

3. 第n個子項目：nth-child（n）;n給數值

4. 奇數為子項目：nth-child(odd);或者（nth-child(2n+1)）

5. 偶數位子項目：nth-child(even)；或者（nth-child(2n)）

• 文本陰影：text-shadow：水平，垂直，陰影

• 盒子陰影：box-shaadow:水平，、垂直，陰影

• 背景：background

相關推薦：

全面總結css中屬性值繼承知識

CSS段落屬性詳解

20 個 CSS 進階技巧匯總