CSS學習筆記

2021-08-03 10:17:27 字數 2317 閱讀 8878

css(cascading style sheets,層疊樣式表)包含一些簡單語句,稱為規則。每個規則為選擇的一些html元素提供樣式。

使用w3c驗證工具驗證css(http:jigsaw.w3.org/css-validator)。

一、css和html的結合方式

1、style屬性方式

style="color:red">hello worldh2>
2、style標籤方式(內嵌方式):將css規則放置在中間。

選擇器

h2style>

head>

...body>

html>

3、引入方式:在標籤內引入外部檔案。

type="text/css">

@import

url("css檔案的位址")

; h2

style>

4、鏈結方式:使用元素。元素用於包含乙個外部樣式表,這就不需要元素。元素放在...

二、css選擇器

指定css要作用的標籤,那個標籤的名稱就是選擇器。

css選擇器的型別:

.類選擇器名稱

#id選擇器名稱

三、css擴充套件選擇器

四、繼承

子元素繼承父元素。

其中元素是段落的乙個子元素,但它沒有任何文字,所以不受影響。

五、優先順序

六、字型

1、font-family屬性:頁面中使用的字型。共有5個字型系列:sansserif、serif、monospace、cursive和fantasy。

2、font-size屬性:字型大小。指定字型大小的方式有:畫素(px)、百分數、em(指定比例因子)和關鍵字。舉個例子如下:

body

h1h2

在上面的例子中,body的字型大小是14px,h1的字型大小是body的150%即21px,h2的字型大小是body的1.2倍即17px左右。

3、color屬性:文字設定顏色。

4、font-weight屬性:字型的粗細。使用bold設定為粗體,使用normal去掉粗體。

5、text-decoration屬性:為文字增加風格,包括上劃線、下劃線(underline)和刪除線。

6、font-style屬性:為字型增加風格。包含斜體(italic)和傾斜(oblique)。

七、顏色

16種基本顏色和150種擴充套件顏色。

指定顏色的方法:直接使用顏色名和按紅、綠、藍分量的多少來指定。

下面通過設定背景顏色(background-color)來具體說明。

body

【注】

1)顏色名不區分大小寫

2)rgb是red,green,blue的縮寫

3)紅、綠、藍指定為0到255之間的數值

4)使用十六進製製碼指定顏色

舉個例子:#cc6600

其中,#表示十六進製製碼;cc表示紅分量;66表示綠分量;00表示藍分量。

八、盒模型

九、

十、布局屬性

1、css布局漂浮屬性

1)float(漂浮)

2)clear(清除)

2、css布局定位屬性position

【補充】

1、常用的塊狀元素有:

2、常用的內聯元素有:

3、常用的內聯塊狀元素有:

4、css注釋

/***注釋*/

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS 學習筆記

當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...