HTML_css樣式表 樣式屬性 格式布局

標籤：class   position   pos   pad   選擇   add   png   alpha   定位   

CSS（Cascading Style Sheet，疊層樣式表），作用是美化HTML網頁。

/*注釋地區*/此為注釋文法

一、樣式表

（一）樣式表的分類

1.內聯樣式表

    和HTML聯合顯示，控制精確，但是可重用性差，冗餘較多。

    例：<p style="font-size:14px;">內聯樣式表</p>

2.內嵌樣式表

    作為一個獨立地區內嵌在網頁裡，必須寫在head標籤裡面。

    <style type="text/css">

    p   //格式對p標籤起作用

    {

    樣式；

    }

    </style>

3.外部樣式表

    建立一個CSS檔案，用來放置樣式表。如果要在HTML檔案中調用樣式表，需要在HTML檔案中點右鍵→CSS樣式表→附加樣式表。一般用link串連方式。

    註：css檔案中不需要寫style標籤

    有些標籤有預設的邊距，一般寫樣式表代碼的時候都會先去除（也可以設定其他的樣式），如下：

    註：就是先去掉邊距和間距。

（二）選取器

1.標籤選取器。用標籤名做選取器。

                       

2.class選取器。都是以“.”開頭。

   註：class選取器可以和標籤選取器疊加，顯示出不同效果。

 

3.ID選取器。以“#”開頭。

   註：ID選取器可以和標籤選取器疊加，顯示出不同效果。

<div id="樣式名">

 

4.複合選取器

（1）用“，”隔開，表示並列。

 

（2）用空格隔開，表示後代。

 

（3）篩選“.”。

二、樣式屬性

（一）背景與前景

1.背景：

2.前景字型：

 

（二）邊界和邊框

border（表格邊框、樣式等）、margin（表外間距）。padding（內容與儲存格間距）。

（三）列表與方塊

width、height、（top、bottom、left、right）只有在絕對座標情況下才有用。

三、格式與布局

（一）position：fixed

    鎖定位置（相對於瀏覽器的位置），例如有些網站的右下角的快顯視窗。

樣本：

（二）position：absolute

    絕對位置：

    1.外層沒有position：absolute（或relative）；那麼div相對於瀏覽器定位，如中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。

    2.外層有position：absolute（或relative）；那麼div相對於外層邊框定位，如中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。

樣本：

（三）position：relative

    相對位置：

    如，相對於把此div包含住的div的某個位置進行固定。如果外層沒有包含他的，那就相對於瀏覽器進行相對位置的固定。

樣本：

（四）分層（z-index）

    在z軸方向分層，可以理解為分成一摞紙，層數越高越靠上。

    在上面relative的樣本中，我們看到了aa遮住了a，這是因為後寫代碼的顯示層級越靠前，那麼在不改變代碼順序的情況下如何讓a蓋住aa。如下：

樣本：

（五）float：left、right

      Left、right時不用給他規定位置（left、top），直接相對於瀏覽器。若外部被包裹，相對於外部div的除去一行的位置的左上或右上顯示。

附加：1、 overflow：hidden；    //超出部分隱藏；scroll，顯示出捲軸；

              <div style="clear:both"></div>   //截斷流

         2、cursor：pointer   滑鼠指到上面時的形狀；

         3、半透明效果：

             <div class="box">透明地區<div>

             在樣式表中的代碼為：

             .box

             {

             opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

             }

HTML_css樣式表 樣式屬性 格式布局