02-CSS
1、介紹
CSS
層疊樣式表,作用:渲染頁面,提高工作效率。
格式:選擇器{屬性:值;屬性1:值1;}
后綴名:.css 獨立的css(樣式)文件
和 HTML 元素的整合 ★ :
- 方式1:內聯樣式表,通過標簽的 style 屬性設置樣式,例如:<div style="background-color: #FF0000;"></div>
- 方式2:內部樣式表,在當前頁面中使用的樣式,例如
- 方式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:雙實線
總結
- 上一篇: 我与Python网络爬虫的第一次接触
- 下一篇: CSS3新特性(整理贴)