網站建設培訓教程 新手入門到精通_第1頁
網站建設培訓教程 新手入門到精通_第2頁
網站建設培訓教程 新手入門到精通_第3頁
網站建設培訓教程 新手入門到精通_第4頁
網站建設培訓教程 新手入門到精通_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

友情提醒：如果你還不熟悉網站建設、美工設計、內容優(yōu)化、網站推廣的流程,你可以選擇發(fā)布懸賞任務，歡迎點此進入發(fā)布任務獲得網絡高手的全力協(xié)助。網站建設培訓教程CSS從入門到精通TOC\o"1-5"\h\z\o"CurrentDocument"第一章CSS簡介3\o"CurrentDocument"第一節(jié)：什么是CSS?3\o"CurrentDocument"什么是CSS3\o"CurrentDocument"參見3\o"CurrentDocument"第二節(jié)：使用CSS的優(yōu)勢3\o"CurrentDocument"第二章CSS入門例子4\o"CurrentDocument"示例4\o"CurrentDocument"第三章CSS語法4\o"CurrentDocument"第一節(jié)：外部引用CSS4\o"CurrentDocument"使用link標簽引用CSS4\o"CurrentDocument"使用@import引用CSS5\o"CurrentDocument"第二節(jié)：內部引用CSS5\o"CurrentDocument"第三節(jié)：內聯引用CSS6\o"CurrentDocument"第四節(jié)：CSS選擇符--CSS的名字6\o"CurrentDocument"選擇符語法6\o"CurrentDocument"選擇符取名規(guī)則7\o"CurrentDocument"常用的三種選擇符7\o"CurrentDocument"選擇符用法總結7\o"CurrentDocument"第五節(jié)：CSS聲明8\o"CurrentDocument"語法8\o"CurrentDocument"介紹兩個常用的技巧8\o"CurrentDocument"第六節(jié)：CSS注釋9\o"CurrentDocument"語法9\o"CurrentDocument"示例9\o"CurrentDocument"第四章CSS顏色10\o"CurrentDocument"CSS顏色表示方法10注意：1010第五章CSS背景10\o"CurrentDocument"第一節(jié)：CSSbackground-color屬性11background-color--背景色，定義背景的顏色11\o"CurrentDocument"示例11第二節(jié)：CSSbackground-image屬性11background-image--定義背景圖片11\o"CurrentDocument"示例11第三節(jié)：CSSbackground-repeat屬性12background-repeat--定義背景圖片的重復方式12\o"CurrentDocument"示例12第四節(jié)：CSSbackground-position屬性12background-position--定義背景圖片的位置12\o"CurrentDocument"示例13第五節(jié):CSSbackground-attachment屬性13background-attachment--定義背景圖片隨滾動軸的移動方式13\o"CurrentDocument"示例13第六節(jié)：CSSbackground屬性14\o"CurrentDocument"background--五個背景屬性可以全部在此定義14\o"CurrentDocument"示例14\o"CurrentDocument"第六章CSS文本15第一節(jié):CSStext-decoration屬性15text-decoration--定義文本是否有劃線以及劃線的方式15\o"CurrentDocument"示例15第二節(jié):CSSwhite-space屬性16white-space--通過HTML文檔的源代碼的排版方式控制頁面顯示文本的排版方式16示例16\o"CurrentDocument"第七章CSS字體17\o"CurrentDocument"第八章CSS邊框17\o"CurrentDocument"第九章CSS邊外補白17\o"CurrentDocument"第一節(jié):CSSmargin屬性17margin-top--定義上邊外補白18margin-right--定義右邊外補白18margin-bottom--定義下邊外補白18margin-left--定義左邊外補白18\o"CurrentDocument"第十章CSS邊內補白18padding--定義邊內補白18padding-top--定義上邊內補白19padding-bottom--定義下邊內補白19padding-left--定義左邊內補白19padding-right--定義右邊內補白19\o"CurrentDocument"第十一章CSS屬性索引19\o"CurrentDocument"第一節(jié)：CSS2.1屬性按功能索引19CSS盒模式19\o"CurrentDocument"CSS視覺格式模型20\o"CurrentDocument"CSS視覺效果20CSS列表20CSS背景21CSS字體21CSS文本21

CSS顏色21第一章CSS簡介CSS顏色21第一節(jié)：什么是CSS?什么是CSS?CSS是CascadingStyleSheets（層疊樣式表）的簡稱.CSS語言是一種標記語言，它不需要編譯，可以直接由瀏覽器執(zhí)行（屬于瀏覽器解釋型語言）.在標準網頁設計中CSS負責網頁內容（XHTML）的表現.?CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴.可以通過簡單的更改CSS文件，改變網頁的整體表現形式，可以減少我們的工作量，所以她是每一個網頁設計人員的必修課.CSS是由W3C的CSS工作組產生和維護的.參見W3C的CSS主頁/Style/CSS/在w3c網站上校驗CSS的正確性/css-validator/第二節(jié)：使用CSS的優(yōu)勢內容與表現分離,有了CSS,網頁的內容（XHMTL^表現就可以分開了.使用CSS可以減少網頁的代碼量,增加網頁的瀏覽速度第二章CSS入門例子示例定義文字的顏色<html><styletype="text/css"media="all">p{color:red;}p1{color:blue;}</style><body><p>color就代表顏色,我們使用紅色red為文字顏色.</p><p1>你可以修改代碼使用blue藍色,yellow黃色等.學習文字的顏色</p1></body></html>這段代碼顯示的結果如下：cMk就代表顏色,我們使用紅色red為文字顏色.p你可以修改代碼使用blue藍色，yellow黃色等.學習文字的顏色p1第三章CSS語法CSS語法非常簡單，組成CSS語法的元素只有CSS選擇符與CSS屬性.每個CSS選擇符由1個或多個CSS屬性組成.CSS是大小寫敏感的，在CSS語法中推薦使用小寫.第一節(jié)：外部引用CSSCSS外部引用使用了外接的CSS文件，一般的瀏覽器都帶有緩存功能，所以用戶不用每次都下載此CSS文件.外部引用CSS是最好的引入CSS的方式（可以使代碼量最小,表現最統(tǒng)一，也是標準網頁設計推薦的）.使用link標簽引用CSS示例<head><linkrel="stylesheet"type="text/css"href="/style.css”/></head>href--指定需要加載的資源（CSS文件）的地址URIrel--指定鏈接類型type--包含內容的類型，一般使用type="text/css”使用@import引用CSS示例<head><styletype="text/css">@importurl（/style.css）;</style></head>相對路徑與絕對路徑加載文件的時候可以使用相對路徑或者絕對路徑.絕對路徑:文件的完整路徑，主頁上的文件或目錄在硬盤上真正的路徑./html/default.html就是絕對路徑，/html/default.html也是絕對路徑,C:winntsystem.sys也是絕對路徑相對路徑:相對于我們查看文檔的路徑.../default.html或者default.html或者../../default.html都是相對路徑>小結外部引用CSS中l(wèi)ink與@import的區(qū)別差別1：老祖宗的差別。link屬于XHTML標簽，而@import完全是CSS提供的一種方式。link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。第二節(jié)：內部引用CSS示例<styletype="text/css">/*文字樣式開始*//*夢之都白色12象素文字*/.dreamduwhite12px{color:white;font-size:12px;}/*夢之都黑色16象素文字*/.dreamdublack16px{color:black;font-size:16px;}/*文字樣式結束*/</style>注意:style標簽應該在head標簽內部.第三節(jié)：內聯引用CSS內聯引用可以把CSS樣式直接作用在XHTML標簽中.示例<pstyle="font-size:10px;color:#FFFFFF;">使用CSS內聯引用表現段落.</p>第四節(jié)：CSS選擇符--CSS的名字CSS選擇符就是CSS樣式的名字，當在XHTML文檔中表現一個CSS樣式的時候，就要用到一個CSS.怎么用呢?這時就通過CSS選擇符（CSS的名字）來指定此XHTML標簽使用此CSS樣式.選擇符語法選擇符名字{聲明；}一個CSS選擇符就定義了一個樣式比如下面這三個例子p{font-size:12px;}.dreamdublue{color:blue;}#dreamdured{color:red;}dreamdublue和dreamdured都是CSS的選擇符,也就是CSS的名字.選擇符取名規(guī)則CSS選擇符可以使用英文字母的大寫與小寫，數字，連字號,下劃線，冒號，句號.英文字母大寫與小寫A-Za-z數字0-9連字號-下劃線_冒號”句號.提示:CSS選擇符只能以字母開頭.常用的三種選擇符（我感覺這是初級教程中最難的地方:）xhtml標簽選擇符，比如p標簽選擇符（代表所有的段落都使用這個CSS樣式），比如p{font-size:12px;}id選擇符，唯一性選擇符，比如#dreamdured{color:red;}就是在名字前增加了一個#,id選擇符在一個頁面中只能出現一次，在整個網站中也最好出現一次（這樣有利于程序員控制此元素,有多個一樣名稱的元素,就無法分開不好控制了）.class選擇符，多重選擇符，比如.dreamdublue{color:blue;}就是在名字前增加了一個.,class選擇符在一個頁面中可以出現多次（注意下面的示例中class選擇符的用法）.示例<p>夢之都xhtml標簽選擇符</p><pid="dreamdured”>夢之都id選擇符</p><pclass="dreamdublue”>夢之都class選擇符</p><pclass="dreamdubluedreamdu18px">^之都class選擇符2,出現了多次.</p>一個p元素使用了兩個class選擇符，他們之間用空格分開，而且class選擇符可以在一個頁面出現多次.選擇符用法總結id與class選擇符在CSS與XHTML中的用法總結CSS中的寫法XHTML中的寫法xhtml標簽選擇符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聲明是由”屬性”,”冒號(:)”,”屬性值”和”分號(;)”組成的.語法屬性:屬性值；示例font-size:12px;font-size代表字體大小.12px字體大小的值.介紹兩個常用的技巧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注釋的開始使用/*,結束使用*/語法/*注釋內容*/示例/*文字樣式開始*//*夢之都白色12象素文字*/.dreamduwhite12px{color:white;font-size:12px;}/*夢之都黑色16象素文字*/.dreamdublack16px{color:black;font-size:16px;}/*文字樣式結束*/第四章CSS顏色css顏色表示方法CSS預定義顏色表示法(就是使用顏色的英文)：color:red;color:green;color:blue;CSSRGB顏色表示法：color:rgb(255,0,0);color:rgb(0,255,0);color:rgb(0,0,255);CSS16進制顏色表示法：color:#ff0000;color:#00ff00;color:#1199ff;CSS短16進制顏色表示法，屬于websafecolors(網絡安全色)：color:#f00;color:#0f0;color:#00f;短16進制顏色表示法就是當16進制顏色表示法中的兩個表示顏色值的數字一樣的時候的簡寫，比如color:#ff0000;就可以簡寫為color:#f00;注意：>使用16進制表示顏色時,要使用#標記#rgb等價于#rrggbb,例如:#fb0等價于#ffbb00第五章CSS背景背景(background)，文字顏色可以使用color屬性，但是包含文字的p段落,div層,page頁面等的顏色與背景圖片可以使用與background等屬性.通常使用background-color定義背景顏色,background-image定義背景圖片‘background-repeat定義背景圖片的重復方式’background-position定義背景圖片的位置’background-attachment定義背景圖片隨滾動軸的移動方式.第一節(jié)：CSSbackground-color屬性background-color--背景色，定義背景的顏色取值：<color>ItransparentIinherit<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--定義背景圖片的重復方式取值：repeat|repeat-x|repeat-y|no-repeat|inheritrepeat:平鋪整個頁面，左右與上下repeat-x:在x軸上平鋪，左右repeat-y:在y軸上平鋪，上下no-repeat:圖片不重復inherit:繼承初始值：repeat繼承性：否適用于：所有元素background:背景.repeat:重復.示例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;}:CSSbackground-position屬性background-position--定義背景圖片的位置>取值：[[<percentage>|<length>|left|center|right][<percentage>|<length>|top|centerIbottom]?]I[[leftIcenterIright]II[topIcenterIbottom]]Iinherit水平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坐標定位的,所以通常取兩個值.第五節(jié)：CSSbackground-attachment屬性background-attachment--定義背景圖片隨滾動軸的移動方式取值：scrollIfixedIinheritscroll:隨著頁面的滾動軸背景圖片將移動fixed:隨著頁面的滾動軸背景圖片不會移動?inherit:繼承示例body{background-image:url('list-orange.png');background-attachment:fixed;background-repeat:repeat-x;background-position:centercenter;}第六節(jié)：CSSbackground屬性background--五個背景屬性可以全部在此定義取值:[<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]|inherit[<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]:背景顏色，圖像等的一個屬性或多個屬性?inherit:繼承示例body{background:url('list-orange.png')repeat-xcenter;}第六章CSS文本CSS文本屬性用于定義文字，空格，單詞，段落的表現等.通常使用letter-spacing屬性控制字母之間的距離,word-spacing屬性控制文字間空格的距離,text-decoration屬性定義文本是否有下劃線,text-transform屬性控制英文的大小寫,text-align屬性定義文本的對齊方式,text-indent屬性定義文本首行的縮進,white-space屬性定義文本與文檔源代碼的關系.第一節(jié)：CSStext-decoration屬性text-decoration--定義文本是否有劃線以及劃線的方式取值:noneI[underlineIIoverlineIIline-throughIIblink]Iinheritnone:定義正常顯示的文本[underlineIIoverlineIIline-throughIIblink]:四個值中的一個或多個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:正常無變化（默認處理方式.文本自動處理換行.假如抵達容器邊界內容會轉到下一行）pre:保持HTML源代碼的空格與換行，等同與pre標簽nowrap:強制文本在一行，除非遇到br換行標簽pre-wrap:同pre屬性，但是遇到超出容器范圍的時候會自動換行pre-line:同pre屬性，但是遇到連續(xù)空格會被看作一個空格?inherit:繼承示例p#pre{white-space:pre;}第七章CSS字體CSS字體屬性用于定義文字的字體，大小，粗細的表現等.通常使用font-family定義使用什么字體,font-size定義字體大小,font-style定義斜體字font-variant定義小型的大寫字體,font-weight定義字體的粗細,font統(tǒng)一定義字體的所有屬性.第八章CSS邊框每個內容或元素外面都可以有一個邊框.邊框分為上邊框(top),下邊框(bottom),左邊框(left),右邊框(right).?每種邊框有顏色(color),樣式(style),寬度(width)三種屬性.如果上下左右的邊框表現不一樣，可以分別定義上下左右邊框，如果一樣可以統(tǒng)一使用border屬性定義.通常使用border-width屬性定義邊框的寬度,border-color屬性定義邊框的顏色,border-style屬性定義邊框的樣式,border屬性統(tǒng)一定義邊框樣式的幾個屬性.第九章CSS邊外補白邊框的外面可以有一層邊外補白(margin)，邊外補白可以把塊級元素分開.邊外補白定義了圍繞某種元素(elements)的空白.可以查看盒模式,了解邊外補白和邊內補白.邊外補白分為上邊外補白(top),下邊外補白(bottom),左邊外補白(left),右邊外補白(right).邊外補白只有寬度width一種屬性.第一節(jié)：CSSmargin屬性margin邊外補白可以取負值;邊外補白是看不到的，因為它本身是白色的.margin-top--定義上邊外補白margin-right--定義右邊外補白margin-bottom--定義下邊外補白margin-left--定義左邊外補白第十章CSS邊內補白邊框的里面面可以有一層邊內補白(padding)，邊內補白定義了邊框與邊框里面內容的距離.邊內補白分為上邊內補白(top),下邊內補白(bottom),左邊內補白(left),右邊內補白(right).邊內補白只有width一種屬性.padding--定義邊內補白padding邊內補白不可以取負值;邊內補白是看不到的，因為它本身是白色的.padding-top--定義上邊內補白padding-bottom--定義下邊內補白padding-left--定義左邊內補白padding-right--定義右邊內補白第十一章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-bot

溫馨提示

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

評論

0/150

提交評論