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

下載本文檔

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

文檔簡介

啟搏人網(wǎng)站建設(shè)基礎(chǔ)教程/共20頁第4頁網(wǎng)站建設(shè)培訓(xùn)教程CSS從入門到精通 <p>color就代表顏色,我們使用紅色red為文字顏色.</p> <p1>你可以修改代碼使用blue藍(lán)色,yellow黃色等.學(xué)習(xí)文字的顏色</p1> </body></html>這段代碼顯示的結(jié)果如下：第三章CSS語法CSS語法非常簡單,組成CSS語法的元素只有CSS選擇符與CSS屬性.每個(gè)CSS選擇符由1個(gè)或多個(gè)CSS屬性組成.CSS是大小寫敏感的,在CSS語法中推薦使用小寫.第一節(jié)：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代碼量最小,表現(xiàn)最統(tǒng)一,也是標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)推薦的).使用link標(biāo)簽引用CSS示例<head> <linkrel="stylesheet"type="text/css"href="/style.css"/></head>href--指定需要加載的資源(CSS文件)的地址URIrel--指定鏈接類型type--包含內(nèi)容的類型,一般使用type="text/css"使用@import引用CSS示例<head> <styletype="text/css">@importurl(/style.css);</style></head> 相對路徑與絕對路徑加載文件的時(shí)候可以使用相對路徑或者絕對路徑.絕對路徑:文件的完整路徑,主頁上的文件或目錄在硬盤上真正的路徑./html/default.html就是絕對路徑,/html/default.html也是絕對路徑,C:winntsystem.sys也是絕對路徑相對路徑:相對于我們查看文檔的路徑.../default.html或者default.html或者../../default.html都是相對路徑小結(jié)外部引用CSS中l(wèi)ink與@import的區(qū)別差別1：老祖宗的差別。link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。差別2：加載順序的差別。當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(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)锧import不是dom可以控制的。第二節(jié)：內(nèi)部引用CSS示例<styletype="text/css">/*文字樣式開始*//*夢之都白色12象素文字*/.dreamduwhite12px{ color:white; font-size:12px;}/*夢之都黑色16象素文字*/.dreamdublack16px{ color:black; font-size:16px;}/*文字樣式結(jié)束*/</style>注意:style標(biāo)簽應(yīng)該在head標(biāo)簽內(nèi)部.第三節(jié)：內(nèi)聯(lián)引用CSS內(nèi)聯(lián)引用可以把CSS樣式直接作用在XHTML標(biāo)簽中.示例<pstyle="font-size:10px;color:#FFFFFF;"> 使用CSS內(nèi)聯(lián)引用表現(xiàn)段落.</p>第四節(jié)：CSS選擇符--CSS的名字CSS選擇符就是CSS樣式的名字,當(dāng)在XHTML文檔中表現(xiàn)一個(gè)CSS樣式的時(shí)候,就要用到一個(gè)CSS.怎么用呢?這時(shí)就通過CSS選擇符(CSS的名字)來指定此XHTML標(biāo)簽使用此CSS樣式.選擇符語法選擇符名字{ 聲明;}一個(gè)CSS選擇符就定義了一個(gè)樣式比如下面這三個(gè)例子p{font-size:12px;}.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í)教程中最難的地方:)xhtml標(biāo)簽選擇符,比如p標(biāo)簽選擇符(代表所有的段落都使用這個(gè)CSS樣式),比如p{font-size:12px;}id選擇符,唯一性選擇符,比如#dreamdured{color:red;},就是在名字前增加了一個(gè)#,id選擇符在一個(gè)頁面中只能出現(xiàn)一次,在整個(gè)網(wǎng)站中也最好出現(xiàn)一次(這樣有利于程序員控制此元素,有多個(gè)一樣名稱的元素,就無法分開不好控制了).class選擇符,多重選擇符,比如.dreamdublue{color:blue;},就是在名字前增加了一個(gè).,class選擇符在一個(gè)頁面中可以出現(xiàn)多次(注意下面的示例中class選擇符的用法).示例<p>夢之都xhtml標(biāo)簽選擇符</p><pid="dreamdured">夢之都id選擇符</p><pclass="dreamdublue">夢之都class選擇符</p><pclass="dreamdubluedreamdu18px">夢之都class選擇符2,出現(xiàn)了多次.</p>一個(gè)p元素使用了兩個(gè)class選擇符,他們之間用空格分開,而且class選擇符可以在一個(gè)頁面出現(xiàn)多次.選擇符用法總結(jié)id與class選擇符在CSS與XHTML中的用法總結(jié)

CSS中的寫法XHTML中的寫法xhtml標(biāo)簽選擇符p{font-size:12px;}<p></p>id選擇符#id_selector{font-size:12px;}<pid="id_selector">夢之都</p>class選擇符.class_selector{font-size:12px;}<pclass="class_selector">夢之都</p>第五節(jié)：CSS聲明CSS聲明是由"屬性","冒號(hào)(:)","屬性值"和"分號(hào)(;)"組成的.語法屬性:屬性值;示例font-size:12px;font-size代表字體大小.12px字體大小的值.介紹兩個(gè)常用的技巧1,選擇符的名字一樣,聲明是可以組合的例如：選擇符名字{聲明1;聲明2;}div{ color:black; font-size:12px;}2,明全部一樣,選擇符的名字也可以組合例如：選擇符名字1,選擇符名字2,選擇符名字3{聲明1;聲明2;}.dreamdudivwhite12px,h1,div{ color:white; font-size:12px;}h1,p,div{ border:1pxsolidblack;}第六節(jié)：CSS注釋就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等.CSS注釋的開始使用/*,結(jié)束使用*/語法/*注釋內(nèi)容*/示例/*文字樣式開始*//*夢之都白色12象素文字*/.dreamduwhite12px{ color:white; font-size:12px;}/*夢之都黑色16象素文字*/.dreamdublack16px{ color:black; font-size:16px;}/*文字樣式結(jié)束*/第四章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í)候的簡寫,比如color:#ff0000;就可以簡寫為color:#f00;注意:使用16進(jìn)制表示顏色時(shí),要使用#標(biāo)記#rgb等價(jià)于#rrggbb,例如:#fb0等價(jià)于#ffbb00CSS背景背景(background),文字顏色可以使用color屬性,但是包含文字的p段落,div層,page頁面等的顏色與背景圖片可以使用與background等屬性.通常使用background-color定義背景顏色,background-image定義背景圖片,background-repeat定義背景圖片的重復(fù)方式,background-position定義背景圖片的位置,background-attachment定義背景圖片隨滾動(dòng)軸的移動(dòng)方式.第一節(jié)：CSSbackground-color屬性background-color--背景色,定義背景的顏色取值:<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-x|repeat-y|no-repeat|inheritrepeat:平鋪整個(gè)頁面,左右與上下repeat-x:在x軸上平鋪,左右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:下垂直與水平的組合x-%y-%x-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屬性是通過平面上的x與y坐標(biāo)定位的,所以通常取兩個(gè)值.第五節(jié):CSSbackground-attachment屬性background-attachment--定義背景圖片隨滾動(dòng)軸的移動(dòng)方式取值:scroll|fixed|inheritscroll:隨著頁面的滾動(dòng)軸背景圖片將移動(dòng)fixed:隨著頁面的滾動(dòng)軸背景圖片不會(huì)移動(dòng)inherit:繼承示例body{ background-image:url('list-orange.png'); background-attachment:fixed; background-repeat:repeat-x; 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-xcenter;}第六章CSS文本CSS文本屬性用于定義文字,空格,單詞,段落的表現(xiàn)等.通常使用letter-spacing屬性控制字母之間的距離,word-spacing屬性控制文字間空格的距離,text-decoration屬性定義文本是否有下劃線,text-transform屬性控制英文的大小寫,text-align屬性定義文本的對齊方式,text-indent屬性定義文本首行的縮進(jìn),white-space屬性定義文本與文檔源代碼的關(guān)系.第一節(jié):CSStext-decoration屬性text-decoration--定義文本是否有劃線以及劃線的方式取值:none|[underline||overline||line-through||blink]|inheritnone:定義正常顯示的文本[underline||overline||line-through||blink]:四個(gè)值中的一個(gè)或多個(gè)underline:定義有下劃線的文本overline:定義有上劃線的文本line-through:定義直線穿過文本blink:定義閃爍的文本示例p#underline{ text-decoration:underline;}p#overline{ text-decoration:overline;}p#line-through{ text-decoration:line-through;}p#blink{ text-decoration:blink;}p#underover{ text-decoration:underlineoverline;}p#underoverthroughblink{ text-decoration:underlineoverlineline-throughblink;}第二節(jié):CSSwhite-space屬性white-space--通過HTML文檔的源代碼的排版方式控制頁面顯示文本的排版方式取值:normal|pre|nowrap|pre-wrap|pre-line|inheritnormal:正常無變化(默認(rèn)處理方式.文本自動(dòng)處理換行.假如抵達(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-collapseborder-color--邊框顏色border-spacingborder-style--邊框樣式border-top--上邊框border-right--右邊框border-bottom--下邊框border-left--左邊框border-top-color--上邊框顏色border-right-color--右邊框顏色border-bottom-color--下邊框顏色border-left-color--左邊框顏色border-top-style--上邊框樣式border-right-style--右邊框樣式border-bottom-style--下邊框樣式border-left-style--左邊框樣式border-top-width--上邊框?qū)挾萣order-right-width--右邊框?qū)挾萣order-bottom-width--下邊框?qū)挾萣order-left-width--左邊框?qū)挾萣order-width--邊框?qū)挾萣order--邊框所有屬性margin-right--右邊外補(bǔ)白寬度margin-left--左邊外補(bǔ)白寬度margin-top--上邊外補(bǔ)白寬度margin-bottom--下邊外補(bǔ)白寬度margin--邊外補(bǔ)白padding-top--上邊內(nèi)補(bǔ)白padding-right--右邊內(nèi)補(bǔ)白padding-bottom--下邊內(nèi)補(bǔ)白padding-left--

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論