002-CSS基礎內容

網頁由什麼構成?

英文全名:cascading style sheets(百度百科) === cascading style sheet
層疊樣式表,WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制,簡單說就是如何修飾網頁信息的顯示樣式。
目前推薦遵循的是W3C發佈的CSS3.0. 用來表現XHTML或者XML等樣式文件的計算機語言。
1998年5月21日由w3C正式推出的css2.0javascript

CSS編寫語法

clipboard.png

樣式的建立(內部樣式 外部樣式 內聯樣式)、兩種引入外部樣式表的區別

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="屬性:屬性值;屬性:屬性值;"></標籤>

兩種引入外部樣式表link和import之間的區別

  1. 差異1:本質的差異:link屬於XHTML標籤,而@import徹底是CSS提供的一種方式。java

  2. 差異2:加載順序的差異:當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候還挺明顯。
  3. 差異3:兼容性的差異:@import是CSS2.1提出的,因此老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標籤無此問題。瀏覽器

  4. 差異4:使用dom(document object model文檔對象模型)控制樣式時的差異:dom

    當使用javascript控制dom去改變樣式的時候,只能使用link標籤,由於@import不是dom能夠控制的.

樣式表的優先級

  • A、內聯樣式表的優先級別最高
  • B、內部樣式表與外部樣式表的優先級和書寫的順序有關,後書寫的優先級別高。

CSS選擇符(選擇器)

經常使用的選擇符有十種左右:
類型選擇符,id選擇符,class選擇符,通配符,羣組選擇符包含選擇符,僞類選擇符(僞類選擇符CSS中已經定義好的選擇器,不能隨便取名),僞對象選擇符(設置在對象後發生的內容。用來和content屬性一塊兒使用)url

  1. 元素選擇符/類型選擇符(element選擇器 )spa

    語法:元素名稱{屬性:屬性值;}code

    說明:htm

    元素選擇符就是以文檔語言對象類型做爲選擇符,即便用結構中元素名稱做爲選擇符。例如body、div、p,img,em,strong,span......等。
    
    全部的頁面元素均可以做爲選擇符;

    用法:

    1)若是想改變某個元素得默認樣式時,可使用類型選擇符;
          (如:改變一個div、p、h1樣式)
         
     2) 當統一文檔某個元素的顯示效果時,可使用類型選擇符
             (如:改變文檔全部p段落樣式)
  2. id選擇器

    語法:#id名{屬性:屬性值;}
    說明:

    A)當咱們使用id選擇符時,應該爲每一個元素定義一個id屬性
       如:<div id="div1"></div>
       
       B)id選擇符的語法格式是「#」加上自定義的id名
       如:#box{width:300px; height:300px;}
       
       C) 起名時要取英文名,不能用關鍵字:(全部的標記和屬性都是關鍵字)
       如:head標記
       
       D)一個id名稱只能對應文檔中一個具體的元素對象,由於id只能定義頁面中某一個惟一的元素對象。
      
       E) 最大的用處:建立網頁的外圍結構。
  3. class選擇器

    語法:.class名{屬性:屬性值;}
    說明:

    A)當咱們使用class選擇符時,應先爲每一個元素定義一個類名稱
       B)class選擇符的語法格式是:"如:<div class="top"></div>"

    用法:class選擇符更適合定義一類樣式;

  4. *通配符

    語法:*{屬性:屬性值;}
    說明:通配選擇符的寫法是「*」,其含義就是全部元素。
    用法:經常使用來重置樣式。

  5. 羣組選擇器

    語法:選擇符1,選擇符2,選擇符3{屬性:屬性值;}
    說明:當有多個選擇符應用相同的樣式時,能夠將選擇符用「,」分隔的方式,合併爲一組。

  6. 包含選擇器

    語法:選擇符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;} 表示超連接的三種狀態都相同,只有鼠標劃過變顏色。
  1. 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中使用前後)
  2. 浮動屬性的簡單應用

    語法:float:none/left/right;
    float:定義網頁中其它文本如何環繞該元素顯示
    浮動的目的:就是讓豎着的東西橫着來
    有三個取值:

    left:元素活動浮動在文本左面
       right:元素浮動在右面
       none:默認值,不浮動。
  3. 頁面中的註釋

    Html註釋
       <!-- 我是div的頁面註釋 -->
    css的註釋
       /* 我是css的註釋 */
相關文章
相關標籤/搜索