1、介紹

CSS

層疊樣式表，作用：渲染頁面，提高工作效率。
格式：選擇器{屬性:值;屬性1:值1;}
后綴名：.css 獨立的css(樣式)文件
和 HTML 元素的整合 ★ ：

• 方式1：內聯樣式表，通過標簽的 style 屬性設置樣式，例如：<div style="background-color: #FF0000;"></div>
• 方式2：內部樣式表，在當前頁面中使用的樣式，例如

<style>#divId2{background-color: #0f0;} </style>

• 方式3：外部樣式表，有獨立的css文件，通過 head 標簽的 link 子標簽導入，例如 <link rel="stylesheet" href="css/1.css" type="text/css"/>

2、選擇器 ★

• id 選擇器
  要求： html 元素必須有 id 屬性且有值 <xxx id="id1"></xxx> ；css 中通過”#”引入,后面加上id的值 #id1{...}

• 類選擇器：
  要求：html 元素必須有 class 屬性且有值 <xxx class="cls1"/>；css 中通過”.”引入,后面加上class的值 .cls1{...}

• 元素選擇器：
  直接用元素(標簽)名即可 xx{...} 例如：div{ }

• 屬性選擇器：
  html 元素有一個屬性且有值 <xx att="val1">，css 中通過元素名[屬性=”值”]使用 xx[att="val1"]{...} 例如：xxx[nihao="wohenhao"]{....}

• 后代選擇器：
  選擇器 后代選擇器{...}：在滿足第一個選擇器的條件下找后代的選擇器，給滿足條件的元素添加樣式。

• 錨偽類選擇器：（了解）

  a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */

選擇器使用小結：

• id選擇器：一個元素(標簽)
• 類選擇器：一類元素
• 元素選擇器：一種元素
• 屬性選擇器：元素選擇器的特殊用法

使用的時候注意：

• 若多個樣式作用于一個元素的時候：
  
  • 不同的樣式,會疊加
  • 相同的樣式,最近原則
• 若多個選擇器作用于一個元素的時候：
  
  • 越特殊優先級越高，id 優先級最高

3、樣式

字體：

• font-family：設置字體(隸書) 設置字體家族
• font-size:：設置字體大小
• font-style：設置字體風格

文本：改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進

• color:文本顏色
• line-height:設置行高
• text-decoration: 向文本添加修飾。 none underline
• text-align:對齊文本

列表：

• list-style-type:設置列表項的類型 例如:a 1 實心圓
• list-style-image:設置圖片最為列表項類型 使用的時候使用 url函數 url("/i/arrow.gif");

背景：

• background-color:設置背景顏色
• background-image:設置圖片作為背景 url

尺寸：

• width：寬度
• height：高度

浮動：

• float：可選值 left、right

分類：

• clear:設置元素的兩邊是否有其他的浮動元素，值為 both 兩邊都不允許有浮動元素
• display:設置是否及如何顯示元素。
  
  • none 此元素不會被顯示。
  • block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
  • inline 默認，此元素會被顯示為內聯元素，元素前后沒有換行符。

4、框模型（理解）

一個元素外面有 padding(內邊距)、border(邊框)、margin(外邊距)

• padding：元素和邊框的距離
• margin：元素最外層的空白

在網上找了兩幅圖片：

上面這三個屬性都有簡寫的屬性，若設置大小的時候，四個值順序為：上右下左
eg：padding:10px 10px 10px 10px

• 若只寫一個的話 代表四個邊使用同一個值 padding:10px
• 若只寫兩個個的話 代表四個邊使用同一個值 padding:10px 20px
• 若只寫三個個的話 代表四個邊使用同一個值 padding:10px 20px 30p

border(邊框)：可以設置顏色 風格
簡寫屬性：border:寬度 風格 顏色; eg：border:5px solid red;
說明：solid:實線，dashed:虛線，double:雙實線

總結

以上是生活随笔為你收集整理的02-CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。