網(wǎng)站建設(shè)培訓(xùn)教程、css從入門到精通_第1頁(yè)
網(wǎng)站建設(shè)培訓(xùn)教程、css從入門到精通_第2頁(yè)
網(wǎng)站建設(shè)培訓(xùn)教程、css從入門到精通_第3頁(yè)
網(wǎng)站建設(shè)培訓(xùn)教程、css從入門到精通_第4頁(yè)
網(wǎng)站建設(shè)培訓(xùn)教程、css從入門到精通_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

-.z.網(wǎng)站建設(shè)培訓(xùn)教程CSS從入門到精通第一章CSS簡(jiǎn)介4第一節(jié)：什么是CSS"4什么是CSS166\h4參見4第二節(jié)：使用CSS的優(yōu)勢(shì)4第二章CSS入門例子5例如5第三章CSS語(yǔ)法5第一節(jié)：外部引用CSS5使用link標(biāo)簽引用CSS173\h5使用import引用CSS6第二節(jié)：內(nèi)部引用CSS6第三節(jié)：內(nèi)聯(lián)引用CSS7HYPERLINK\l"_Toc264068177"第四節(jié)：CSS選擇符--CSS的名字7選擇符語(yǔ)法7選擇符取名規(guī)則8常用的三種選擇符PAGEREF_Toc264068180\h8選擇符用法總結(jié)8第五節(jié)：CSS聲明9語(yǔ)法9介紹兩個(gè)常用的技巧9第六節(jié)：CSS注釋10語(yǔ)法10例如10第四章CSS顏色11CSS顏色表示方法11注意:11第五章CSS背景11第一節(jié)：CSSbackground-color屬性12background-color--背風(fēng)光,定義背景的顏色12例如12第二節(jié)：CSSbackground-image屬性12background-image--定義背景圖片12例如12第三節(jié)：CSSbackground-repeat屬性13background-repeat--定義背景圖片的重復(fù)方式13例如13第四節(jié)：CSSbackground-position屬性13background-position--定義背景圖片的位置13例如14第五節(jié):CSSbackground-attachment屬性14background-attachment--定義背景圖片隨滾動(dòng)軸的移動(dòng)方式14例如14第六節(jié)：CSSbackground屬性15background--五個(gè)背景屬性可以全部在此定義15例如15第六章CSS文本16第一節(jié):CSSte*t-decoration屬性16te*t-decoration--定義文本是否有劃線以及劃線的方式16例如16第二節(jié):CSSwhite-space屬性17white-space--通過HTML文檔的源代碼的排版方式控制頁(yè)面顯示文本的排版方式17例如17第七章CSS字體18第八章CSS邊框264068218\h18第九章CSS邊外補(bǔ)白18第一節(jié):CSSmargin屬性18margin-top--定義上邊外補(bǔ)白h19margin-right--定義右邊外補(bǔ)白19margin-bottom--定義下邊外補(bǔ)白19margin-left--定義左邊外補(bǔ)白068224\h19第十章CSS邊內(nèi)補(bǔ)白19padding--定義邊內(nèi)補(bǔ)白19padding-top--定義上邊內(nèi)補(bǔ)白20padding-bottom--定義下邊內(nèi)補(bǔ)白20padding-left--定義左邊內(nèi)補(bǔ)白20padding-right--定義右邊內(nèi)補(bǔ)白068230\h20第十一章CSS屬性索引20第一節(jié)：CSS2.1屬性按功能索引20CSS盒模式20HYPERLINKmedia="all"> p{color:red;}p1{color:blue;} </style> <body> <p>color就代表顏色,我們使用紅色red為文字顏色.</p> <p1>你可以修改代碼使用blue藍(lán)色,yellow黃色等.學(xué)習(xí)文字的顏色</p1> </body></html>這段代碼顯示的結(jié)果如下：第三章CSS語(yǔ)法CSS語(yǔ)法非常簡(jiǎn)單,組成CSS語(yǔ)法的元素只有CSS選擇符與CSS屬性.每個(gè)CSS選擇符由1個(gè)或多個(gè)CSS屬性組成.CSS是大小寫敏感的,在CSS語(yǔ)法中推薦使用小寫.第一節(jié)：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代碼量最小,表現(xiàn)最統(tǒng)一,也是標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)推薦的).使用link標(biāo)簽引用CSS例如<head> <linkrel="stylesheet"type="te*t/css"href=".dreamdu./style.css"/></head>href--指定需要加載的資源(CSS文件)的地址URIrel--指定鏈接類型type--包含內(nèi)容的類型,一般使用type="te*t/css"使用import引用CSS例如<head> <styletype="te*t/css">importurl(.dreamdu./style.css);</style></head> 相對(duì)路徑與絕對(duì)路徑加載文件的時(shí)候可以使用相對(duì)路徑或者絕對(duì)路徑.絕對(duì)路徑:文件的完整路徑,主頁(yè)上的文件或目錄在硬盤上真正的路徑..dreamdu./html/default.html就是絕對(duì)路徑,/html/default.html也是絕對(duì)路徑,C:winntsystem.sys也是絕對(duì)路徑相對(duì)路徑:相對(duì)于我們查看文檔的路徑.../default.html或者default.html或者../../default.html都是相對(duì)路徑小結(jié)外部引用CSS中l(wèi)ink與import的區(qū)別差異1：老祖宗的差異。link屬于*HTML標(biāo)簽，而import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比方定義RSS，定義rel連接屬性等，import就只能加載CSS了。差異2：加載順序的差異。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候〔就是被瀏覽者瀏覽的時(shí)候〕，link引用的CSS會(huì)同時(shí)被加載，而import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽import加載CSS的頁(yè)面時(shí)開場(chǎng)會(huì)沒有樣式〔就是閃爍〕，網(wǎng)速慢的時(shí)候還挺明顯。差異3：兼容性的差異。由于import是CSS2.1提出的所以老的瀏覽器不支持，import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無此問題。差異4：使用dom控制樣式時(shí)的差異。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)閕mport不是dom可以控制的。第二節(jié)：內(nèi)部引用CSS例如<styletype="te*t/css">/*文字樣式開場(chǎng)*//*夢(mèng)之都白色12象素文字*/.dreamduwhite12p*{ color:white; font-size:12p*;}/*夢(mèng)之都黑色16象素文字*/.dreamdublack16p*{ color:black; font-size:16p*;}/*文字樣式完畢*/</style>注意:style標(biāo)簽應(yīng)該在head標(biāo)簽內(nèi)部.第三節(jié)：內(nèi)聯(lián)引用CSS內(nèi)聯(lián)引用可以把CSS樣式直接作用在*HTML標(biāo)簽中.例如<pstyle="font-size:10p*;color:#FFFFFF;"> 使用CSS內(nèi)聯(lián)引用表現(xiàn)段落.</p>第四節(jié)：CSS選擇符--CSS的名字CSS選擇符就是CSS樣式的名字,當(dāng)在*HTML文檔中表現(xiàn)一個(gè)CSS樣式的時(shí)候,就要用到一個(gè)CSS.怎么用呢"這時(shí)就通過CSS選擇符(CSS的名字)來指定此*HTML標(biāo)簽使用此CSS樣式.選擇符語(yǔ)法選擇符名字{ 聲明;}一個(gè)CSS選擇符就定義了一個(gè)樣式比方下面這三個(gè)例子p{font-size:12p*;}.dreamdublue{color:blue;}#dreamdured{color:red;}dreamdublue和dreamdured都是CSS的選擇符,也就是CSS的名字.選擇符取名規(guī)則CSS選擇符可以使用英文字母的大寫與小寫,數(shù)字,連字號(hào),下劃線,冒號(hào),句號(hào).英文字母大寫與小寫A-Za-z數(shù)字0-9連字號(hào)-下劃線_冒號(hào)"句號(hào).提示:CSS選擇符只能以字母開頭.常用的三種選擇符(我感覺這是初級(jí)教程中最難的地方:)*html標(biāo)簽選擇符,比方p標(biāo)簽選擇符(代表所有的段落都使用這個(gè)CSS樣式),比方p{font-size:12p*;}id選擇符,唯一性選擇符,比方#dreamdured{color:red;},就是在名字前增加了一個(gè)#,id選擇符在一個(gè)頁(yè)面中只能出現(xiàn)一次,在整個(gè)網(wǎng)站中也最好出現(xiàn)一次(這樣有利于程序員控制此元素,有多個(gè)一樣名稱的元素,就無法分開不好控制了).class選擇符,多重選擇符,比方.dreamdublue{color:blue;},就是在名字前增加了一個(gè).,class選擇符在一個(gè)頁(yè)面中可以出現(xiàn)屢次(注意下面的例如中class選擇符的用法).例如<p>夢(mèng)之都*html標(biāo)簽選擇符</p><pid="dreamdured">夢(mèng)之都id選擇符</p><pclass="dreamdublue">夢(mèng)之都class選擇符</p><pclass="dreamdubluedreamdu18p*">夢(mèng)之都class選擇符2,出現(xiàn)了屢次.</p>一個(gè)p元素使用了兩個(gè)class選擇符,他們之間用空格分開,而且class選擇符可以在一個(gè)頁(yè)面出現(xiàn)屢次.選擇符用法總結(jié)id與class選擇符在CSS與*HTML中的用法總結(jié)

CSS中的寫法*HTML中的寫法*html標(biāo)簽選擇符p{font-size:12p*;}<p>.dreamdu.</p>id選擇符#id_selector{font-size:12p*;}<pid="id_selector">夢(mèng)之都</p>class選擇符.class_selector{font-size:12p*;}<pclass="class_selector">夢(mèng)之都</p>第五節(jié)：CSS聲明CSS聲明是由"屬性","冒號(hào)(:)","屬性值"和"分號(hào)(;)"組成的.語(yǔ)法屬性:屬性值;例如font-size:12p*;font-size代表字體大小.12p*字體大小的值.介紹兩個(gè)常用的技巧1,選擇符的名字一樣,聲明是可以組合的例如：選擇符名字{聲明1;聲明2;}div{ color:black; font-size:12p*;}2,明全部一樣,選擇符的名字也可以組合例如：選擇符名字1,選擇符名字2,選擇符名字3{聲明1;聲明2;}.dreamdudivwhite12p*,h1,div{ color:white; font-size:12p*;}h1,p,div{border:1p*solidblack;}第六節(jié)：CSS注釋就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等.CSS注釋的開場(chǎng)使用/*,完畢使用*/語(yǔ)法/*注釋內(nèi)容*/例如/*文字樣式開場(chǎng)*//*夢(mèng)之都白色12象素文字*/.dreamduwhite12p*{ color:white; font-size:12p*;}/*夢(mèng)之都黑色16象素文字*/.dreamdublack16p*{ color:black; font-size:16p*;}/*文字樣式完畢*/第四章CSS顏色CSS顏色表示方法CSS預(yù)定義顏色表示法(就是使用顏色的英文):color:red;color:green;color:blue;CSSRGB顏色表示法:color:rgb(255,0,0);color:rgb(0,255,0);color:rgb(0,0,255);CSS16進(jìn)制顏色表示法:color:#ff0000;color:#00ff00;color:#1199ff;CSS短16進(jìn)制顏色表示法,屬于websafecolors(網(wǎng)絡(luò)平安色):color:#f00;color:#0f0;color:#00f;短16進(jìn)制顏色表示法就是當(dāng)16進(jìn)制顏色表示法中的兩個(gè)表示顏色值的數(shù)字一樣的時(shí)候的簡(jiǎn)寫,比方color:#ff0000;就可以簡(jiǎn)寫為color:#f00;注意:使用16進(jìn)制表示顏色時(shí),要使用#標(biāo)記#rgb等價(jià)于#rrggbb,例如:#fb0等價(jià)于#ffbb00CSS背景背景(background),文字顏色可以使用color屬性,但是包含文字的p段落,div層,page頁(yè)面等的顏色與背景圖片可以使用與background等屬性.通常使用background-color定義背景顏色,background-image定義背景圖片,background-repeat定義背景圖片的重復(fù)方式,background-position定義背景圖片的位置,background-attachment定義背景圖片隨滾動(dòng)軸的移動(dòng)方式.第一節(jié)：CSSbackground-color屬性background-color--背風(fēng)光,定義背景的顏色取值:<color>|transparent|inherit<color>:顏色表示法transparent:透明inherit:繼承初始值:transparent繼承性:是適用于:所有元素background:背景.color:顏色.例如body{ background-color:green;}第二節(jié)：CSSbackground-image屬性background-image--定義背景圖片取值:<url>|none|inheritnone:無inherit:繼承初始值:none繼承性:否適用于:所有元素background:背景.image:圖片.例如body{ background-image:url('html_table.png');}p{ background-image:none;}div{ background-image:url('list-orange.png');}第三節(jié)：CSSbackground-repeat屬性background-repeat--定義背景圖片的重復(fù)方式取值:repeat|repeat-*|repeat-y|no-repeat|inheritrepeat:平鋪整個(gè)頁(yè)面,左右與上下repeat-*:在*軸上平鋪,左右repeat-y:在y軸上平鋪,上下no-repeat:圖片不重復(fù)inherit:繼承初始值:repeat繼承性:否適用于:所有元素background:背景.repeat:重復(fù).例如body{ background-image:url('list-orange.png'); background-repeat:no-repeat;}div{ background-image:url('list-orange.png'); background-repeat:repeat-y; background-position:right;}第四節(jié)：CSSbackground-position屬性background-position--定義背景圖片的位置取值:[[<percentage>|<length>|left|center|right][<percentage>|<length>|top|center|bottom]"]|[[left|center|right]||[top|center|bottom]]|inherit水平left:左center:中right:右垂直top:上center:中bottom:下垂直與水平的組合*-%y-%*-posy-pos例如body{ background-image:url('list-orange.png'); background-repeat:no-repeat;}p{ background-image:url('list-orange.png');background-position:rightbottom; background-repeat:no-repeat;}div{ background-image:url('list-orange.png');background-position:50%20%; background-repeat:no-repeat;}background-position屬性是通過平面上的*與y坐標(biāo)定位的,所以通常取兩個(gè)值.第五節(jié):CSSbackground-attachment屬性background-attachment--定義背景圖片隨滾動(dòng)軸的移動(dòng)方式取值:scroll|fi*ed|inheritscroll:隨著頁(yè)面的滾動(dòng)軸背景圖片將移動(dòng)fi*ed:隨著頁(yè)面的滾動(dòng)軸背景圖片不會(huì)移動(dòng)inherit:繼承例如body{ background-image:url('list-orange.png');background-attachment:fi*ed; background-repeat:repeat-*; background-position:centercenter;}第六節(jié)：CSSbackground屬性background--五個(gè)背景屬性可以全部在此定義取值:[<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]|inherit[<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]:背景顏色,圖像等的一個(gè)屬性或多個(gè)屬性inherit:繼承例如body{background:url('list-orange.png')repeat-*center;}第六章CSS文本CSS文本屬性用于定義文字,空格,單詞,段落的表現(xiàn)等.通常使用letter-spacing屬性控制字母之間的距離,word-spacing屬性控制文字間空格的距離,te*t-decoration屬性定義文本是否有下劃線,te*t-transform屬性控制英文的大小寫,te*t-align屬性定義文本的對(duì)齊方式,te*t-indent屬性定義文本首行的縮進(jìn),white-space屬性定義文本與文檔源代碼的關(guān)系.第一節(jié):CSSte*t-decoration屬性te*t-decoration--定義文本是否有劃線以及劃線的方式取值:none|[underline||overline||line-through||blink]|inheritnone:定義正常顯示的文本[underline||overline||line-through||blink]:四個(gè)值中的一個(gè)或多個(gè)underline:定義有下劃線的文本overline:定義有上劃線的文本line-through:定義直線穿過文本blink:定義閃爍的文本例如p#underline{ te*t-decoration:underline;}p#overline{ te*t-decoration:overline;}p#line-through{ te*t-decoration:line-through;}p#blink{ te*t-decoration:blink;}p#underover{ te*t-decoration:underlineoverline;}p#underoverthroughblink{ te*t-decoration:underlineoverlineline-throughblink;}第二節(jié):CSSwhite-space屬性white-space--通過HTML文檔的源代碼的排版方式控制頁(yè)面顯示文本的排版方式取值:normal|pre|nowrap|pre-wrap|pre-line|inheritnormal:正常無變化(默認(rèn)處理方式.文本自動(dòng)處理?yè)Q行.假設(shè)抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行)pre:保持HTML源代碼的空格與換行,等同與pre標(biāo)簽nowrap:強(qiáng)制文本在一行,除非遇到br換行標(biāo)簽pre-wrap:同pre屬性,但是遇到超出容器范圍的時(shí)候會(huì)自動(dòng)換行pre-line:同pre屬性,但是遇到連續(xù)空格會(huì)被看作一個(gè)空格inherit:繼承例如p#pre{ white-space:pre;}第七章CSS字體CSS字體屬性用于定義文字的字體,大小,粗細(xì)的表現(xiàn)等.通常使用font-family定義使用什么字體,font-size定義字體大小,font-style定義斜體字,font-variant定義小型的大寫字體,font-weight定義字體的粗細(xì),font統(tǒng)一定義字體的所有屬性.第八章CSS邊框每個(gè)內(nèi)容或元素外面都可以有一個(gè)邊框.邊框分為上邊框(top),下邊框(bottom),左邊框(left),右邊框(right).每種邊框有顏色(color),樣式(style),寬度(width)三種屬性.如果上下左右的邊框表現(xiàn)不一樣,可以分別定義上下左右邊框,如果一樣可以統(tǒng)一使用border屬性定義.通常使用border-width屬性定義邊框的寬度,border-color屬性定義邊框的顏色,border-style屬性定義邊框的樣式,border屬性統(tǒng)一定義邊框樣式的幾個(gè)屬性.第九章CSS邊外補(bǔ)白邊框的外面可以有一層邊外補(bǔ)白(margin),邊外補(bǔ)白可以把塊級(jí)元素分開.邊外補(bǔ)白定義了圍繞*種元素(elements)的空白.可以查看盒模式,了解邊外補(bǔ)白和邊內(nèi)補(bǔ)白.邊外補(bǔ)白分為上邊外補(bǔ)白(top),下邊外補(bǔ)白(bottom),左邊外補(bǔ)白(left),右邊外補(bǔ)白(right).邊外補(bǔ)白只有寬度width一種屬性.第一節(jié):CSSmargin屬性margin邊外補(bǔ)白可以取負(fù)值;邊外補(bǔ)白是看不到的,因?yàn)樗旧硎前咨?margin-top--定義上邊外補(bǔ)白margin-right--定義右邊外補(bǔ)白margin-bottom--定義下邊外補(bǔ)白margin-left--定義左邊外補(bǔ)白第十章CSS邊內(nèi)補(bǔ)白邊框的里面面可以有一層邊內(nèi)補(bǔ)白(padding),邊內(nèi)補(bǔ)白定義了邊框與邊框里面內(nèi)容的距離.邊內(nèi)補(bǔ)白分為上邊內(nèi)補(bǔ)白(top),下邊內(nèi)補(bǔ)白(bottom),左邊內(nèi)補(bǔ)白(left),右邊內(nèi)補(bǔ)白(right).邊內(nèi)補(bǔ)白只有width一種屬性.padding--定義邊內(nèi)補(bǔ)白padding邊內(nèi)補(bǔ)白不可以取負(fù)值;邊內(nèi)補(bǔ)白是看不到的,因?yàn)樗旧硎前咨?padding-top--定義上邊內(nèi)補(bǔ)白padding-bottom--定義下邊內(nèi)補(bǔ)白padding-left--定義左邊內(nèi)補(bǔ)白padding-right--定義右邊內(nèi)補(bǔ)白第十一章CSS屬性索引第一節(jié)：CSS2.1屬性按功能索引CSS盒模式border-collapsebor

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論