1、介紹

CSS

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

• 方式1：內(nèi)聯(lián)樣式表，通過標(biāo)簽的 style 屬性設(shè)置樣式，例如：<div style="background-color: #FF0000;"></div>
• 方式2：內(nèi)部樣式表，在當(dāng)前頁面中使用的樣式，例如

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

• 方式3：外部樣式表，有獨(dú)立的css文件，通過 head 標(biāo)簽的 link 子標(biāo)簽導(dǎo)入，例如 <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{...}

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

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

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

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

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

選擇器使用小結(jié)：

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

使用的時(shí)候注意：

• 若多個(gè)樣式作用于一個(gè)元素的時(shí)候：
  
  • 不同的樣式,會(huì)疊加
  • 相同的樣式,最近原則
• 若多個(gè)選擇器作用于一個(gè)元素的時(shí)候：
  
  • 越特殊優(yōu)先級(jí)越高，id 優(yōu)先級(jí)最高

3、樣式

字體：

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

文本：改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)

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

列表：

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

背景：

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

尺寸：

• width：寬度
• height：高度

浮動(dòng)：

• float：可選值 left、right

分類：

• clear:設(shè)置元素的兩邊是否有其他的浮動(dòng)元素，值為 both 兩邊都不允許有浮動(dòng)元素
• display:設(shè)置是否及如何顯示元素。
  
  • none 此元素不會(huì)被顯示。
  • block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
  • inline 默認(rèn)，此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

4、框模型（理解）

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

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

在網(wǎng)上找了兩幅圖片：

上面這三個(gè)屬性都有簡寫的屬性，若設(shè)置大小的時(shí)候，四個(gè)值順序?yàn)?#xff1a;上右下左
eg：padding:10px 10px 10px 10px

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。