Css層疊樣式表
Css層疊樣式表,允許網(wǎng)頁(yè)設(shè)計(jì)者定義網(wǎng)頁(yè)元素的樣式,字體顏色及其它高級(jí)樣式.
樣式表說白了就是表示網(wǎng)頁(yè)標(biāo)簽元素長(zhǎng)什么樣式,由一組決定顯示格式,這些規(guī)則用定定義網(wǎng)頁(yè)中任何HTML元素內(nèi)容的顯示格式
例: ? h1 {color:red;font-size:14px;}
選擇器 ? 聲明(屬性,值) ? ? ? ? 聲明(屬性,值) ? ? ? ?里面屬性與值采用字典的格式;?
1.Css語法
由一到多個(gè)規(guī)則組成,規(guī)則由選擇器與格式聲明語句兩部分組成
選擇器就是你要改變的那個(gè)樣式的HTML元素,類似于選擇那個(gè)控件
聲明語句放在{}內(nèi);
每一條格式聲明語句由"屬性名:屬性值"對(duì)組成,屬性名與屬性值間以冒號(hào)隔開,每條聲明語句以分號(hào)";"結(jié)束
CSS對(duì)大小寫不敏感;
2.屬性:
在格式聲明語句中,屬性名稱與屬性值之間以冒號(hào)":"隔開,屬性值不需要使用引號(hào)括起來,除非屬性值是由多個(gè)單詞組成; ? (字典)
有的屬性可以指定多個(gè)屬性值,多個(gè)屬性值以","隔開;
當(dāng)定義多個(gè)值時(shí),瀏覽器按照前后順序選擇屬性值.如果第1個(gè)值有效,則嘗試使用,如果第1個(gè)無效,則使用第2個(gè),依次類推
例:
div.news.title{
font-family:"華文行楷","宋體","Times New Roman",Arial;
text-align:center;
font-weight:bold;
color:#444444;
background-color:#808080;
}
3.選擇器分類:
基本選擇器,組合選擇器,屬性選擇器,偽類選擇器;
基本選擇器:
選擇器 ? ? ? 含義 ? ? 舉例
通用選擇器 ?通用選擇器,將匹配任何元素.不建議使用,IE不支持,大網(wǎng)站增加客戶端負(fù)擔(dān) ? *{margin:0px} ?
標(biāo)簽選擇器 ?匹配標(biāo)簽元素 ? p{font-size:14px};
類選擇器 定義一類HTML元素樣式,以"."來定義 ? .box{width:800px;}
Id選擇器 ? Id選擇器可以為標(biāo)有特定ID的HTML指定的樣式,只能使用一次.ID選擇器以"#"來定義 ? #title{font-size:14px};
組合選擇器
(疑問:后代選擇器與子元素選擇器不要搞混了)
E,F多元素選擇器 ?多元素選擇器,同進(jìn)匹配所有E或F的元素,E或F之間使用逗號(hào)分隔 ?p,h1,h2{margin:0px};
E F后代選擇器 ?匹配所有屬性E元素后代的F元素,E F之間使用空格分隔 ?#slidebar p{font-color:#990000;}
E>F子元素選擇器 ? 匹配所有E元素的子元素F ?div>p{color:#990000;}
E+F相鄰元素選擇器 ?匹配所有緊隨E元素之后的同級(jí)元素F ?div+div{color:#990000;}
注意:后代選擇器:瀏覽器CSS匹配從右到左進(jìn)行查找,好處就是盡早過濾掉無關(guān)樣式規(guī)則與元素(可是為什么從右往就可以呢?)
屬性選擇器
E[attr] ? 匹配所具有att屬性的E元素,不考慮它的值 ?h1[align]{......} ?input[type][size]{......}
E[attr = val] ?匹配所有attr屬性值等于val的E元素 ? h1[align = center]{.......} 屬性值 一般不加引號(hào);
偽類選擇器
<a>標(biāo)記的選擇器 ,對(duì)應(yīng)4種不同的狀態(tài):未訪問的鏈接link,鼠標(biāo)放上的狀態(tài)hover,已訪問鏈接visited,當(dāng)前活動(dòng)鏈接active. ?CSS允許對(duì)于元素的不同狀態(tài), 定義不同的格式化信息
選擇器的 ? ? ?含義
a:link ? 未訪問的鏈接
a:hover ?鼠標(biāo)移動(dòng)到鏈接上
a:visited ?已訪問的鏈接
a:active ? 選定的鏈接
a.red:link ?class等于red的a元素
a.red:visited ?同上
a.red:active 同上
a.red:hover ?同上
4.CSS中的注釋
/* 注釋*/
例: ?td{
color:black;/*定義顏色*/
font-size:14px;/*定義大小*/
text-align:center;/*對(duì)齊方式*/
}
5.HTML中添加樣式表
style定義內(nèi)部樣式表---內(nèi)嵌式
1.內(nèi)部樣式通過<style>元素直接在HTML文檔中定義樣式表,2.它可以出現(xiàn)在HTML的任何地方,一般情況下在<head></head>之間定義<style></style>,3.通過<style>定義的內(nèi)部樣式表只能應(yīng)用于當(dāng)前HTML文檔中的元素;
<html>
<head>
<style type = "text/css">
table{border:1px solid#cccccc;}
</style>
</head>
外部級(jí)聯(lián)樣式表----外聯(lián)式
多個(gè)HTML需要進(jìn)行共享樣式表,應(yīng)使用外部級(jí)聯(lián)式樣式表.
將包含規(guī)則的樣式表保存后綴為.css的文件,在<head>標(biāo)記通過<link>標(biāo)記引入
其中,rel屬性定義當(dāng)前與href屬性中鏈接文檔之間的系,屬性值stylesheet表示鏈接文檔外門部的一個(gè)樣式表文件;type屬性表示鏈接文件的MIME類型;href為要鏈接文件的地址,可以是相對(duì)路徑,也可以是絕對(duì)路徑.
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "css文件地址"/>
</head>
在.css文件中,只包括各項(xiàng)規(guī)則,不出現(xiàn)<style></style>標(biāo)記對(duì).
一個(gè)HTML文檔中,可以根據(jù)需要鏈接任意個(gè)外部樣式表文件.多個(gè)樣式表文件中的規(guī)則將根據(jù)被鏈接進(jìn)行疊加與覆蓋
行內(nèi)樣式----------style屬性
每個(gè)HTML元素均有一個(gè)style屬性,該屬性值為當(dāng)前元素直接定義樣式,該樣式只應(yīng)用到當(dāng)前元素及其包含的內(nèi)層元素.
Style屬性的值與樣式表規(guī)則{}內(nèi)的內(nèi)容相同.
<h1 style = "height:30px;line-hight:30px">一級(jí)標(biāo)題內(nèi)容</h1>
導(dǎo)入外部樣式表
導(dǎo)入外部樣式表是<style></style>標(biāo)記內(nèi)引用外部樣式表文件的內(nèi)容,也可在CSS文件中使用.導(dǎo)入通過@improt語句實(shí)現(xiàn).
使用進(jìn)@improt語句必須出現(xiàn)在其它規(guī)則定義之前,語法:@import(樣式表地址)
區(qū)別:<link>元素是HTML的一個(gè)標(biāo)簽,而@improt是Css的一個(gè)標(biāo)簽,是CSS的一部分,只能在CSS內(nèi)部使用;
<style type = "text/css">
@import url(css/main.css);
p{color:#444444;}
</style>
6.CSS優(yōu)先級(jí)
選擇器的優(yōu)先級(jí) ?!important>行內(nèi)樣式>ID選擇器>Class選擇器>元素選擇器
定義!important的選擇器,優(yōu)先級(jí)最高,但I(xiàn)E6不支持.
例如: ?h1{color:#ff0000 !important;}
<style type = "text/css">
/*行內(nèi)樣式優(yōu)先級(jí)最高*/?
#title{color:#0000ff;} /*ID選擇器比Class選擇器優(yōu)先級(jí)高*/
.title{color:#00ff00;}/*Class選擇器比元素選擇器優(yōu)先級(jí)高*/
h1{color:#ff0000;} /*元素選擇器,優(yōu)先級(jí)最低*/
<style>
<h1 class= "title" id = "title" style = "color:#999900">人社部官員</h1>
指定越精確優(yōu)先級(jí)越高,通常標(biāo)簽 class ID ?行內(nèi)樣式選擇器的優(yōu)先級(jí)分別是1 10 100 1000,數(shù)字越大越精確;
舉例:
div.box span{}優(yōu)先級(jí)為12
.box span{} ? 優(yōu)先級(jí)為11,優(yōu)先級(jí)小于上邊
7.CSS高效原則
讓瀏覽器在查找style匹配的時(shí)候盡可能少的查找找到;
原則:
不要在ID選擇器前使用標(biāo)簽名 ? ?例如:div#box ?簡(jiǎn)寫形式#box
不要在class選擇器前使用標(biāo)簽名 ? ?例如: ? div.box簡(jiǎn)寫形式 ?.box
盡量少使用層級(jí)關(guān)級(jí) ? ?例如: ?.box .news .title h1 ? 簡(jiǎn)寫形式 .title h1
使用class代替層級(jí)關(guān)系 例如: ? .box ?.news ?.title ?簡(jiǎn)寫形式 .title
8.CSS的屬性
尺寸屬性 ?height/width ? ? 值auto自動(dòng),瀏覽器會(huì)自動(dòng)計(jì)算高度,length:使用px定義高度,%:基于包含它的塊級(jí)對(duì)象的百分比高度/寬度
字體屬性:
font-family 宋體,黑體 ? ? 字體
? font-size 12px,14px ? ? ?大小
?font-style ?normal italic ? 樣式
font-weight ?normal bold bolder lighter ? 粗細(xì)
font ?設(shè)置文字各種屬性的簡(jiǎn)捷方式
Font可以同時(shí)設(shè)置字符的各種屬性,各屬性間用空格隔開,如果同時(shí)設(shè)置font-size與font-height這兩屬性值可以使用"/"隔開;
font{italic bold 12px/20px arial,sans-serif;}
Css文本屬性
color ?#ff000000或red或rob(3,5,8) 設(shè)置文本顏色
line-height ? 正整數(shù)或百分比 ?設(shè)置行高
letter-spacing ? 正整數(shù)或負(fù)值 ? 字符間距
text-align ?left center right ?對(duì)齊方式
vertical-align ?Top middle bottom baseline等當(dāng)前元素與相鄰元素的垂直對(duì)齊關(guān)系
text-transform ? ? ?Capitalize uppercase lowercase ? ? ?大小寫轉(zhuǎn)換
text-indent ? ?%或像素 ?首行文本縮進(jìn)
text-decoration none underline overlain line-though ?文本的修飾
word-spacing ?normal,length 單詞間距
p{text-decoration:underline overlain line-through;} ? //同時(shí)設(shè)置多線;
CSS屬性--------偽類屬性
:link ?向未被訪問的鏈接添加樣式
:visited ?向已被訪問的鏈接添加樣式
:hover ?當(dāng)鼠標(biāo)懸浮在元素上方時(shí),向元素添加樣式;
CSS屬性--------列表屬性
list-style ? square inside url(arrow.gif) ? 在一個(gè)聲明中設(shè)置所有列表屬性
line-style-image ?url 圖像路徑 ? 將圖像設(shè)置為列表項(xiàng)標(biāo)記
line-style-position ?inside outside 設(shè)置列表項(xiàng)標(biāo)記放置位置
list-style-type none disc square circle 設(shè)置列表項(xiàng)標(biāo)記的類型
CSS屬性------表格屬性
屬性 ? ?值 ? 含義
border-collapse separate(默認(rèn)),collapse(合并) ? 是否合并表格邊框
border-spacing ?length ?相鄰單元格邊框之間的距離,如果設(shè)置一個(gè)值,水平與垂直一樣;如果設(shè)置兩個(gè)值,水平與垂直分開設(shè)置
caption-slide top或bottom ?規(guī)定表格標(biāo)題的位置
CSS屬性 ? 背景屬性
background-color ?#f0000,red,rgb(255,0,0) ?背影顏色
background-image ? url圖像路徑與名稱 ?背景圖像
background-repeat ?repeat repeat-x repeat-y no-repeat ? 背景圖像是否重復(fù)
Background-position center center或x% y%或expos typos 背景圖像起始位置
background-attachment ? scroll或fixed ?設(shè)置背景圖像是固定還是滾動(dòng)
background ? url(1.jpg) no-repeat center ?設(shè)置背景的簡(jiǎn)寫形式
CSS屬性---邊框?qū)傩?/p>
border ?border:1px solid #444444 設(shè)置所有邊框?qū)傩?/p>
border-top ?設(shè)置頂邊框
border-right 設(shè)置右邊框
border-bottom 設(shè)置底邊框
border-left ?設(shè)置左邊框
邊框線型: ? -None無 ?solid實(shí)線 ?dotted點(diǎn)狀線 ?dashed虛線 ?double雙線 groove3D凹槽邊框
CSS屬性 ---內(nèi)外邊距
padding ?padding:5px ?0px ? 同時(shí)設(shè)置四個(gè)邊距,順序:上右下左
padding-top ?上填充距離
padding-right 右填充距離
padding-bottom 下填充距離
padding-left ?左填充距離
margin ? 同時(shí)設(shè)置四個(gè)邊距,順序:上右下下左
margin-top 上邊距
margin-right 右邊距
margin-bottom 下邊距
margin-left 左邊距
外邊距合并,兩個(gè)垂直外邊距相遇形成一個(gè)外邊距,合并后的外邊距的高度等于兩個(gè)發(fā)生合并邊距高度中的較大的那一個(gè).
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開,它們兩個(gè)上和下外邊距也會(huì)發(fā)生合并);
注釋:只有普通文檔流中塊框的垂直外邊框才會(huì)發(fā)生外邊距合并.行內(nèi)框,浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并;
9.CSS屬性 ?定位屬性
position ? ? absolute fixed relative static 規(guī)定元素的定位類型
top/right/bottom/left ? auto,%,length 設(shè)置定位上外邊距邊界與其包含塊上/右/底/左 塊邊界之間的偏移
display none,block,inline等 ? 規(guī)定元素應(yīng)該生成的框的類型
float ? ? left,right,none ?規(guī)定框是否應(yīng)該浮動(dòng)
clear left,right,both,none ?規(guī)定元素的那一側(cè)不允許其它浮云元素
overflow ?visible,scroll,hidden,auto ?當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情
visibility ?hidden,visible 規(guī)定元素是否可見,即使不可兇元素也會(huì)占據(jù)頁(yè)面上的空間
z-index ? auto,數(shù)值 ?設(shè)置元素的堆疊順序
cursor ?url,pointer,text,wait等 ? 規(guī)定要顯示的光標(biāo)的類型(形狀)
position定位屬性的幾種狀態(tài)
absolute ?生成絕對(duì)的元素,相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位.元素的位置通過 "left" "top" "right"以及"bottom"屬性進(jìn)行規(guī)定
relative 生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位.因此"left20"會(huì)向元素的LEFT位置添加20像素
fixed ?生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位.元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定.
static 默認(rèn)值,沒有定位,元素出現(xiàn)在正常的文檔流中(忽略top,bottom.left,right或者z-index聲明)
position屬性定義建立元素布局所用的定位機(jī)制.任何元素都可以定位,不過絕對(duì)成固定元素會(huì)生成一個(gè)塊級(jí)框,而不論該元素本身是什么類型.相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移.
相對(duì)定位---relative
設(shè)置為相對(duì)定位的元素會(huì)偏移某個(gè)距離,元素仍然保持其未定位前的形狀態(tài),它原本所占的空間仍保留.注意:在使用相對(duì)定位時(shí),無論是進(jìn)行移動(dòng),元素仍然占據(jù)原來的空間,因此移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框.
絕對(duì)定位 ?absolute
設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除,并相對(duì)于其包含塊定位,包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊.元素原先在正常文檔中所占的空間會(huì)關(guān)閉,就像該元素原來不存在一樣.元素定位后生成個(gè)塊級(jí)框,而不論原來它在正常流中生成何種類型的框.
絕對(duì)定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間,與相對(duì)定位不同在這里.相對(duì)定位實(shí)際上被看作普通流定位模型的一部分, 因此元素的位置相對(duì)于它在普通流中的位置
絕對(duì)定位的元素的位置相對(duì)于最近已定位祖先元素,如果元素沒有已定位的祖先元素,那么它的位置相對(duì)于最初的包含塊; ?(通俗一點(diǎn)就是相對(duì)于最近的基準(zhǔn),如果沒有基準(zhǔn),如無那么就相對(duì)于最原始包含它的那個(gè)元素)
8.顯示屬性display
none ? 此元素不會(huì)被顯示
block ?此元素將顯示為塊級(jí)元素,此元素前后會(huì)帶有換行符
inline ?默認(rèn),此元素會(huì)被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符
inline-block ?行內(nèi)塊元素
table ? 作為塊級(jí)表格來顯示(類似<table>),表格前后帶有換行符
inline-table ?內(nèi)聯(lián)表格來顯示(類似<table>),表格前后沒有換行符
table-row 此元素會(huì)作為一個(gè)表格行顯示(類似<tr>)
table-cell 作為一個(gè)表格單元格顯示(類似<td>和<th>)
9.CSS浮動(dòng)與清理
float ? ?Left,right,none ?使元素向左或向右浮動(dòng)
clear ? Left,right,both,none ?規(guī)定元素的那一側(cè)不允許其它浮動(dòng)元素
浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)的邊框?yàn)橹?
浮動(dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣.
CSS清除浮動(dòng)
假設(shè)希望讓一個(gè)圖片浮動(dòng)到文本塊的左邊,并且希望這幅圖片與文本包含在另一個(gè)具有背景顏色和邊框的元素中.
因?yàn)楦?dòng)元素脫離了文檔流,所以包圍圖片和文本的div不占據(jù)空間
如何在讓包圍元素在視覺上包圍浮動(dòng)元素呢?需要在這個(gè)元素中的某個(gè)地方應(yīng)用clear;
10.盒子模型
CSS盒子模型(Box Model)規(guī)定了元素處理元素內(nèi)容,內(nèi)邊距,邊框與外邊距的方式;
CSS中width與height指的是內(nèi)容的寬度與高度.增加內(nèi)邊距,邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸,但是會(huì)增加元素框的總尺寸.
大多數(shù)瀏覽器會(huì)按照頁(yè)面設(shè)置的DTD來呈現(xiàn)內(nèi)容,介理IE5.x和6 使用的是非標(biāo)準(zhǔn)模型,它的width不是內(nèi)容寬度,而是內(nèi)容內(nèi)邊距與邊框的寬度總和;
如何解決:回避,就是不要給元素添加指定寬度的內(nèi)邊距,而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素中;
