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 元素內部 擁有最...