資源描述:
《html+css的文檔筆記》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、CSS簡介一、CSS簡單介紹:a)Csscascadingstylesheets層疊樣式表b)Css的主要目的:是給HTML標(biāo)記添加各種各樣的表現(xiàn)(格式、樣式)比如:文字樣式,背景,文本樣式,連接樣式c)提示:css是給HTML標(biāo)記加的樣式;js是給HTML標(biāo)記加的行為。HTML標(biāo)記是最先出現(xiàn)的d)HTML超文本標(biāo)注語言:各種HTML標(biāo)記e)Css層疊樣式表:給HTML標(biāo)記加的樣式f)JavaScript腳本程序:給HTML標(biāo)記加的程序。h1{color:red;font-size:14px;}選擇器聲明聲明屬性值屬性值二、Css語法格式a)b
2、)一個(gè)CSS規(guī)則,由“選擇器”和“格式聲明語句”構(gòu)成c)“選擇器”:就是選擇HTML標(biāo)記,換句話說:就是給那個(gè)HTML語句加樣式d)“格式生命語句”:由{}構(gòu)成,{}中是各種格式語句。e)一條格式語句,由“屬性名:屬性值”構(gòu)成f)每一條格式語句,必須用英文下的分號“;”結(jié)束。g)屬性名,就是CSS的各種屬性,這些屬性名都是固定值h)屬性值,一個(gè)屬性名可以去不同的值,這個(gè)值不加引號。i)CSS中數(shù)字單位都是px,著個(gè)px不能省略三、CSS選擇器a)基本選擇器l“*”選擇器:通配符1.描述:將匹配所有的HTML標(biāo)記,所有的標(biāo)記都會改變的2.語法:*
3、{color:red;}3.注意:“*”盡量少用,因?yàn)镮E6不支持l標(biāo)簽選擇器1.描述:將匹配指定的HTML標(biāo)記2.語法:h1{color:red}3.注意:CSS標(biāo)簽選擇器,與HTML標(biāo)記一樣,但是不能加尖括號lClass選擇器(類選擇器)-類選擇器是使用頻率最高的1.描述:給一類HTML標(biāo)記加樣式。這里所指的“一類”是:每個(gè)HTML標(biāo)記都有一個(gè)Class屬性,且Class值一樣。Class屬性是公共屬性,每個(gè)標(biāo)記都有這個(gè)屬性2.類選擇器的名稱,必須以“.”開頭,后跟HTML標(biāo)記的class屬性的值。如:.box{color:red;}3.H
4、TML標(biāo)記的Class屬性的值,不能以數(shù)字開頭lID選擇器1.描述:個(gè)指定ID的元素添加樣式。2.注意:網(wǎng)頁中HTML標(biāo)記的ID屬性的值,必須唯一的3.每一個(gè)HTML標(biāo)記都有一個(gè)id的公共屬性。4.注意:id屬性一般是給Js用的,不是讓你來加樣式的,class屬性只能給CSS樣式的不能給Js用5.Id選擇器的名稱,必須以“#”開頭,后跟HTML屬性的值l組合選擇器1.多元素選擇器a)描述:給多個(gè)元素加同一個(gè)樣式多個(gè)選擇器之間用“,”隔開b)舉例:h1,p,div,body{color:red;}l后代元素選擇器(最常用)1.描述:給某個(gè)標(biāo)簽的某
5、一個(gè)后代加元素樣式。選擇器用“空格”隔開2.舉例:div.title{color:red}l子元素選擇器1.描述:給某個(gè)元素的子元素添加樣式2.舉例:div>h1.title(color:red)lCSS選擇器-基本選擇器(單個(gè)選擇器)1.通配符“*”:將匹配所有的HTML標(biāo)記,只要
中存在的標(biāo)記都會生效2.標(biāo)簽選擇器:對應(yīng)于HTML標(biāo)記,有什么樣的HTML標(biāo)記,就有什么樣的鏢旗選擇器。如:p{color:red}3.類選擇器:給HTML標(biāo)記中,class屬性值相同的元素,添加樣式。命名必須以“.”開頭。如:.news{}4.Id選擇
6、器:給HTML標(biāo)記中,具有一id屬性的元素,添加樣式。唯一性。命名以“#”開頭。如:#news{}lCSS選擇器-咋和選擇器(多個(gè)選擇器)1.多元素選擇器:同時(shí)給多個(gè)元素添加樣式,各個(gè)選擇之間用逗號“,”分開。如:p,h1,#box{}1.后代元素選擇器:給某個(gè)元素的子元素添加樣式。用空格隔開。如:#boxh1{}2.子元素選擇器:給某個(gè)元素的子元素添加樣式。用“>”隔開。如:#box>h1{}一、CSS尺寸屬性a)Width:元素寬度,一定要加px單位b)Height:元素高度。二、CSS字體屬性a)Font-size:文字大小。如:font
7、-size:14px;b)Font-family:字體。如:font-family:微軟雅黑;c)Font-style:斜體,取值:italic。如:font-style:italic;d)Font-weight:粗體,取值:bold。如:font-weight:bold;三、CSS文本屬性a)Color:文本顏色b)Text-decoration:文本修飾線,取值:none(無),underline(上劃線),line-through(刪除線)c)Text-align:文本水平對齊方式,取值:left,center,rightd)Line-h
8、eight:行高,可以用固定值,也可以用百分比。如:line-height:24px;line-height:150%;e)Text-indent:首