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