web前端開發(fā) - 2 CSS基本屬性的用法
1、CSS簡介
英文全名：cascading style sheets
定義: 層疊樣式表, 是WEB標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)語言, 表現(xiàn)標(biāo)準(zhǔn)語言在網(wǎng)頁中主要對網(wǎng)頁信息的顯示進(jìn)行控制，簡單說就是如何修飾網(wǎng)頁信息的顯示樣式。
目前推薦遵循的是W3C發(fā)布的CSS3.0.
用來表現(xiàn)XHTML或者XML等樣式文件的計(jì)算機(jī)語言。
1998年5月21日由w3C正式推出的css2.0
2.css語法
CSS語法：選擇符{屬性：屬性值；屬性：屬性值；}
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| text-align | center, left, right | 文字居中格式 |
| font-size | 18px | 設(shè)置文字大小 |
| font-family | 微軟雅黑, 宋體等 | 設(shè)置字體 |
| font-weight | normal(默認(rèn)), bold(粗體), 100px ,等 | 設(shè)置字體加粗 |
| font-style | normal(默認(rèn)), italic(斜體) | 設(shè)置字體樣式 |
| color | 顏色值 | 設(shè)置文字顏色 |
| background-color | 顏色值 | 設(shè)置背景顏色 |
3.樣式的創(chuàng)建
(1) 內(nèi)部樣式:
<head>
<style type="text/css">
css語句
</style>
</head>
(2) 外部樣式:
第一種:
<head>
<link rel="stylesheet" type="text/css" href="目標(biāo)文件的路徑及文件名全稱" />
</head>
rel（relation）：用于定義文檔關(guān)聯(lián)，表示關(guān)聯(lián)樣式表；
type：定義文檔類型
第二種:
<head>
<style type="text/css">
@import url(目標(biāo)文件的路徑及文件名全稱);
</style>
</head>
注意:a. @和import之間沒有空格 url和小括號之間也沒有空格；必須結(jié)尾以分號結(jié)束
b. @import是CSS2.1提出的，所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。
(3)內(nèi)聯(lián)樣式:
語法：<標(biāo)簽 style="屬性：屬性值;屬性:屬性值;"></標(biāo)簽>
4.樣式表的優(yōu)先級
A、內(nèi)聯(lián)樣式表的優(yōu)先級別最高
B、內(nèi)部樣式表與外部樣式表的優(yōu)先級和書寫的順序有關(guān)，后書寫的優(yōu)先級別高。
5.css選擇器
| 序號 | 選擇器 | 語法 |
|---|---|---|
| 1 | 標(biāo)簽選擇器 | 標(biāo)簽名稱{屬性：屬性值；} |
| 2 | id選擇器 | #id名{屬性：屬性值;} |
| 3 | class選擇器 | .class名{屬性：屬性值;} |
| 4 | 通配符 | *{屬性：屬性值；} |
| 5 | 群組選擇器 | 選擇符1，選擇符2，選擇符3{屬性：屬性值;} |
| 6 | 包含選擇器 | 選擇符1 選擇符2{屬性：屬性值;} |
| 7 | 偽類選擇器 | 如下 : 注意3 |
注意1: class選擇器 定義類名稱要規(guī)范: 如下表格是常見的命名:
| 部位 | 命名 |
|---|---|
| 頭 | header |
| 內(nèi)容 | content |
| 尾 | footer |
| 導(dǎo)航 | nav |
| 側(cè)邊欄 | sidebar |
| 標(biāo)志 | logo |
| 廣告 | banner |
| 頁面主體 | main |
注意2 : 包含選擇器選擇符之間是用空格隔開,并且選擇符1>大于選擇符2;
而群組選擇器選擇符之間是用逗號隔開.
注意3. 偽類選擇器
語法 ：
a:link{屬性：屬性值;}超鏈接的初始狀態(tài);
a:visited{屬性：屬性值;}超鏈接被訪問后的狀態(tài);
a:hover{屬性：屬性值;}鼠標(biāo)懸停，即鼠標(biāo)劃過超鏈接時(shí)的狀態(tài);
a:active{屬性：屬性值;}超鏈接被激活時(shí)的狀態(tài)，即鼠標(biāo)按下時(shí)超鏈接的狀態(tài);
例如:
a:hover{color: red;}
a{text-decoration: none;} /*去掉超鏈接的下劃線*/
6.css選擇器的權(quán)重
css中用四位數(shù)字表示權(quán)重，權(quán)重的表達(dá)方式如：0，0，0，0
標(biāo)簽選擇器的權(quán)重為0001
class選擇器的權(quán)重為0010
id選擇器的權(quán)重為0100
偽類選擇器的權(quán)重為0001
包含選擇器的權(quán)重：為包含選擇符的權(quán)中之和
內(nèi)聯(lián)樣式的權(quán)重為1000
!important 語法是提升指定樣式條目的應(yīng)用優(yōu)先權(quán)
7.浮動(dòng)屬性的應(yīng)用
A. 語法: float : none / left / right ;
B. float: 定義網(wǎng)頁中其它文本如何環(huán)繞該元素顯示
C. 浮動(dòng)的目的: 就是讓豎著的東西橫著來
D. 浮動(dòng)的三個(gè)取值:
left:元素活動(dòng)浮動(dòng)在文本左面
right:元素浮動(dòng)在右面
none:默認(rèn)值，不浮動(dòng)。
E. 清除浮動(dòng)的三種方法 :
? a. 語法：.clear{clear:both;} 不常用
? b. 語法：.clear{overflow:hidden;} 不建議使用
? c. 語法：最流行、最常用、可兼容所有瀏覽器 , 開發(fā)時(shí)推薦使用
clear：after{
display:block;
clear:both;
content:".";
visibility:hidden;
height:0;}
clear{zoom:1;}
牢記:對于CSS的清除浮動(dòng)(clear)，這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素
8.css文本屬性
| 序號 | 功能 | 語法 |
|---|---|---|
| 1 | 文本大小 | font-size : value |
| 2 | 文本顏色 | color : 顏色值 |
| 3 | 文本字體 | font-family : 字體1，字體2，字體3 |
| 4 | 文字加粗 | font-weight : bolder(更粗的) / bold（加粗）/ normal（常規(guī)）/100—900 |
| 5 | 文字傾斜 | font-style：italic / oblique / normal（取消傾斜，常規(guī)顯示） |
| 6 | 水平對齊方式 | text-align : left / right / center |
| 7 | 文字行高 | line-height : normal / value |
| 8 | 文本修飾 | text-decoration : none / underline(添加下劃線) / overline / line-through |
| 9 | 首行縮進(jìn) | text-indent : value (例如: text-indent : 2em ) |
| 10 | 字間距 | letter-spacing : value |
| 11 | a標(biāo)簽清除圓點(diǎn) | list-style: none |
| 12 | a標(biāo)簽清除下劃線 | text-decoration: none |
注意: 文字屬性可簡寫
font屬性的簡寫：字號，行高，字體
font:12px/24px "宋體";
font-size:12px; line-height:24px; font-family:”宋體”;
說明:font的屬性值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開)
順序: font-style font-weight font-size / line-height font-family
9.css列表屬性
| 序號 | 功能 | 語法 |
|---|---|---|
| 1 | 定義列表符號樣式 | list-style-type：disc(實(shí)心圓) / circle(空心圓) / square(實(shí)心方塊) / none(去掉列表符號)；list-style-type : none===list-style : none; |
| 2 | 使用圖片作為列表符號 | list-style-image：url(所使用圖片的路徑及全稱)； |
| 3 | 定義列表符號的位置 | list-style-position : outside(外邊) / inside(里邊)； |
10.css背景屬性
| 序號 | 功能 | 語法 |
|---|---|---|
| 1 | 背景顏色 | background-color : 顏色值 ; |
| 2 | 背景圖片的設(shè)置 | background-image：url(背景圖片的路徑及全稱)； |
| 3 | 背景圖片平鋪屬性 | background-repeat : no-repeat(不平鋪)/repeat(平鋪)/repeat-x(橫向平鋪)/repeat-y(縱向平鋪) ; |
| 4 | 背景圖的固定 | background-attachment : scroll(滾動(dòng)) / fixed(固定) ; |
| 5 | 背景圖片的位置 | background-position : left / center/right/(水平向上)或數(shù)值 top/center/bottom/(水平向下)或數(shù)值 |
11.css邊框?qū)傩?/h3>
| 序號 | 功能 | 語法 |
|---|---|---|
| 1 | border : 邊框?qū)挾?邊框風(fēng)格 邊框顏色 | border : 5px solid red |
| 2 | 邊框圓角(倒角) | border-radius : 25px |
| 3 | 邊框陰影 | box-shadow : 10px 10px 5px #888888; |
| 4 | 邊框樣式 | border-style : solid(實(shí)線)/ dashed(虛線) |
| 5 | 單獨(dú)設(shè)置各邊 | border-top-style : dotted ; border-right-style : solid ; border-bottom-style : dotted ; border-left-style : solid; |
| 6 | 邊框?qū)挾?/td> | border-width : 20px |
補(bǔ)充 : 錨點(diǎn)鏈接
1.<dt><a href="#step1">HTML標(biāo)簽</a></dt>
2.<p id="top"></p>
3.<p id="step1">
4.<a href="#top">回到頂部</a>
執(zhí)行效果: 點(diǎn)擊4跳轉(zhuǎn)到2, 點(diǎn)擊1跳轉(zhuǎn)到3
