英文全名:cascading style sheets(百度百科) === cascading style sheet
層疊樣式表,WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制,簡單說就是如何修飾網頁信息的顯示樣式。
目前推薦遵循的是W3C發佈的CSS3.0. 用來表現XHTML或者XML等樣式文件的計算機語言。
1998年5月21日由w3C正式推出的css2.0javascript
A、內部樣式css
語法: <style type="text/css"> /*css語句*/ </style> 注:使用style標記建立樣式時,最好將該標記寫在<head></head>;
B、外部樣式html
*方法一:外部樣式表的建立: <link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" /> 說明: 使用link元素導入外部樣式表時,需將該元素寫在文檔頭部,即<head>與</head>之間。 rel(relation):用於定義文檔關聯,表示關聯樣式表; type:定義文檔類型; *方法二:外部樣式表的導入 <style type="text/css"> @import url(目標文件的路徑及文件名全稱); </style> 注:@和import之間沒有空格 url和小括號之間也沒有空格;必須結尾以分號結束; C、內聯樣式 (行間樣式,行內樣式,嵌入式樣式) 語法:<標籤 style="屬性:屬性值;屬性:屬性值;"></標籤>
差異1:本質的差異:link屬於XHTML標籤,而@import徹底是CSS提供的一種方式。java
差異3:兼容性的差異:@import是CSS2.1提出的,因此老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標籤無此問題。瀏覽器
差異4:使用dom(document object model文檔對象模型)控制樣式時的差異:dom
當使用javascript控制dom去改變樣式的時候,只能使用link標籤,由於@import不是dom能夠控制的.
經常使用的選擇符有十種左右:
類型選擇符,id選擇符,class選擇符,通配符,羣組選擇符包含選擇符,僞類選擇符(僞類選擇符CSS中已經定義好的選擇器,不能隨便取名),僞對象選擇符(設置在對象後發生的內容。用來和content屬性一塊兒使用)url
元素選擇符/類型選擇符(element選擇器 )spa
語法:元素名稱{屬性:屬性值;}code
說明:htm
元素選擇符就是以文檔語言對象類型做爲選擇符,即便用結構中元素名稱做爲選擇符。例如body、div、p,img,em,strong,span......等。 全部的頁面元素均可以做爲選擇符;
用法:
1)若是想改變某個元素得默認樣式時,可使用類型選擇符; (如:改變一個div、p、h1樣式) 2) 當統一文檔某個元素的顯示效果時,可使用類型選擇符 (如:改變文檔全部p段落樣式)
id選擇器
語法:#id名{屬性:屬性值;}
說明:
A)當咱們使用id選擇符時,應該爲每一個元素定義一個id屬性 如:<div id="div1"></div> B)id選擇符的語法格式是「#」加上自定義的id名 如:#box{width:300px; height:300px;} C) 起名時要取英文名,不能用關鍵字:(全部的標記和屬性都是關鍵字) 如:head標記 D)一個id名稱只能對應文檔中一個具體的元素對象,由於id只能定義頁面中某一個惟一的元素對象。 E) 最大的用處:建立網頁的外圍結構。
class選擇器
語法:.class名{屬性:屬性值;}
說明:
A)當咱們使用class選擇符時,應先爲每一個元素定義一個類名稱 B)class選擇符的語法格式是:"如:<div class="top"></div>"
用法:class選擇符更適合定義一類樣式;
語法:*{屬性:屬性值;}
說明:通配選擇符的寫法是「*」,其含義就是全部元素。
用法:經常使用來重置樣式。
語法:選擇符1,選擇符2,選擇符3{屬性:屬性值;}
說明:當有多個選擇符應用相同的樣式時,能夠將選擇符用「,」分隔的方式,合併爲一組。
語法:選擇符1 選擇符2{屬性:屬性值;}
說明:選擇符1和選擇符2用空格隔開,含義就是選擇符1中包含的全部選擇符2;
用法:當個人元素存在父級元素的時候,我要改變本身自己的樣式,能夠不另加選擇符,直接用包含選擇器的方式解決。
7.僞類選擇器(僞類選擇符)
語法 : a:link{屬性:屬性值;}超連接的初始狀態; a:visited{屬性:屬性值;}超連接被訪問後的狀態; a:hover{屬性:屬性值;}鼠標懸停,即鼠標劃過超連接時的狀態; a:active{屬性:屬性值;}超連接被激活時的狀態,即鼠標按下時超連接的狀態; 要讓他們遵照一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。 說明: A)當這4個超連接僞類選擇符聯合使用時,應注意他們的順序,正常順序爲: a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連接的樣式失效; B)爲了簡化代碼,能夠把僞類選擇符中相同的聲明提出來放在a選擇符中; 例如:a{color:red;} a:hover{color:green;} 表示超連接的三種狀態都相同,只有鼠標劃過變顏色。
CSS選擇符的權重
css中用四位數字表示權重,權重的表達方式如:0,0,0,0
第一等:表明內聯樣式,如: style=」」,權值爲1000。
第二等:表明ID選擇器,如:#content,權值爲0100。
第三等:表明類,僞類和屬性選擇器,如.content,權值爲0010。
第四等:表明類型選擇器和僞元素選擇器,如div p,權值爲0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
繼承的樣式沒有權值。
* 當不一樣選擇符的樣式設置有衝突的時候,高權重選擇 符的樣式會覆蓋低權重選擇符的樣式。 例如:b .demo的權重是1+10=11 .demo的權重是10 因此常常會發生.demo的樣式失效 * 相同權重的選擇符,樣式遵循就近原則:哪一個選擇符最後定義,就採用哪一個選擇符樣式。 (注意:是css樣式中定義該選擇符的前後,而不是html中使用前後)
浮動屬性的簡單應用
語法:float:none/left/right;
float:定義網頁中其它文本如何環繞該元素顯示
浮動的目的:就是讓豎着的東西橫着來
有三個取值:
left:元素活動浮動在文本左面 right:元素浮動在右面 none:默認值,不浮動。
頁面中的註釋
Html註釋 <!-- 我是div的頁面註釋 --> css的註釋 /* 我是css的註釋 */