CSS樣式表 基礎知識

2022-08-05 11:39:13 字數 4170 閱讀 4560

css(cascading style sheets,層疊樣式表),作用是美化html網頁。

/*註釋*/    註釋語法

2.1.1、樣式表分類

1、內聯樣式表

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

例:內聯樣式表

2、內嵌樣式表

作為一個獨立區域內嵌在網頁裡,必須寫在head標籤裡邊。

3、外部樣式表

新建一個css檔案,用來放樣式表。如果要在html檔案中呼叫樣式表,需要在html檔案中點右鍵→css樣式→附加樣式表。一般用link連線方式。

有些標籤有些預設的邊距,一般寫樣式表**的時候都會先去除(也可以設定其他樣式),如下:

2.1.2、選擇器

1、標籤選擇器。用標籤名做選擇器。

2、class選擇器。都是“.”開頭。

3、id選擇器。以“#”開頭

4、複合選擇器。

1)、用“,”隔開,表示並列。

2)、用空格隔開,表示後代。

3)、篩選“.”。

2.2.1、背景與前景

/*背景色,樣式表優先順序高*/

background-image:url(路徑);    /*設定背景(預設)*/

background-attachment:fixed;    /*背景是固定的,不隨字型滾動*/

background-attachment:scroll;    /*背景隨字型滾動*/

background-repeat:no-repeat;    /*no-repeat,不平鋪;repeat,平鋪;repeat-x,橫向平鋪;repeat-y,縱向平鋪*/

background-position:center;    /*背景圖居中,設定背景圖位置時,repeat必須為“no-repreat”*/

background-position:right top;    /*背景圖放到右上角(方位可以自己更改)*/

background-position:left 100px top 200px;    /*離左邊100畫素,離上邊200畫素(可以設為負值)*/

字型font-family:"新宋體";    /*字型。常用微軟雅黑、宋體。*/

font-size:12px;    /*字型大小。常用畫素12px、14px、18px。還可以用“em”,“2.5em”即:預設字型的2.5倍。還可以用百分數*/

font-weight:bold;    /*bold是加粗,normal是正常*/

font-style:italic;    /*傾斜,normal是不傾斜*/

color:#03c;    /*顏色*/

text-decoration:underline;    /*下劃線,overline是上劃線,line-through是刪除線,none是去掉下劃線*/

text-align:center;    /*(水平對齊)居中對齊,left是左對齊,right是右對齊*/

vertical-align:middle;    /*(垂直對齊)居中對齊,top是頂部對齊,bottom是底部對齊。一般設定行高後使用。*/

text-indent:28px;    /*首行縮排量*/

line-height:24px;    /*行高。一般為1.5~2倍字型大小。*/

display:none;    /*none,不顯示;inline-block,顯示為塊,不自動換行,寬高可設;block,顯示為塊,自動換行;inline,效果同span標籤,不自動換行,寬高不可設。*/

visibility:hidden;    /*可視性。hidden,隱藏但是佔空間;visible,顯示。*/

2.2.2、邊界和邊框

border(**邊框、樣式等)、margin(表外間距)、padding(內容與單元格間距)

border:5px solid blue;    /*四邊框:5畫素寬、實線、藍色(相當於以下三行)*/

border-width:5px;

border-style:solid;

border-color:blue;

border-top:5px solid blue;    /*上邊框:5畫素寬、實線、藍色(分寫同上)*/

border-bottom:5px solid blue;   /*下邊框:5畫素寬、實線、藍色(分寫同上)*/

border-left:5px solid blue;    /*左邊框:5畫素寬、實線、藍色(分寫同上)*/

border-right:5px solid blue;    /*右邊框:5畫素寬、實線、藍色(分寫同上)*/

margin:10px;     /*四邊外邊框寬度為10畫素。auto,居中。*/

margin-top:10px;    /*上邊外邊框寬度為10畫素;其他三邊邊框類似*/

margin:20px 0px 20px 0px;    /*上-右-下-左,四邊外邊框順時針順序*/

padding:10px;    /*內容與邊框的四邊間距為10畫素*/

padding-top:10px;    /*內容與邊框的上間距為10畫素;其他三邊間距類似*/

padding:20px 0px 20px 0px;   /*上-右-下-左,內容與邊框的四邊間距順時針順序*/

2.2.3、列表與方塊

width、height、(top、bottom、left、right)只有在絕對座標情況下才有用

list-style:none;      /*取消序號*/

list-style:circle;      /*序號變為圓圈,樣式相當於無序*/

list-style-position:outside;      /*序號在內容外*/

list-style-position:inside;      /*序號跟內容在一起*/

2.2.4、格式與佈局

1、position:fixed

鎖定位置(相對於瀏覽器的位置),例如有些**的右下角彈窗例:a

顯示如下

2、position:absolute

1)、外層沒有position:absolute(或relative);,那麼div相對於瀏覽器定位,如下圖中b(距離瀏覽器的右邊框50畫素,距離瀏覽器的下邊框20畫素)。

2)、外層有position:absolute(或relative);,那麼div相對於外層邊框定位,如下圖中bb(距離d的右邊框50畫素,距離d的下邊框20畫素)。

**:cbd

bb3、position:relative

相對於預設位置的移動。如下圖,a在用relative移動前的位置,aa為用relative移動後的位置,aa距原位置上部間距50畫素,距原位置左邊距20畫素。

**:a

aa顯示如下

4、分層(z-index)

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

在上面relative的示例中,我們看到aa蓋住了a,這是因為後寫**的會蓋住前面的,那麼在不改變**順序的情況下如何讓a蓋住aa,如下:aaa

顯示如下

5、float:left,right

overflow:hidden;    //超出部分隱藏;scroll,顯示出滾動條;  

截斷流附:overflow:hidden;    /*超出範圍時隱藏;scroll,超出範圍時出滾動條。*/

cursor:pointer    滑鼠指到上面時的形狀。

半透明效果

透明區域

//樣式表中**:

.box

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