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

下載本文檔

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

文檔簡介

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

CSS中的寫法*HTML中的寫法*html標簽選擇符p{font-size:12p*;}<p>.dreamdu.</p>id選擇符#id_selector{font-size:12p*;}<pid="id_selector">夢之都</p>class選擇符.class_selector{font-size:12p*;}<pclass="class_selector">夢之都</p>第五節(jié)：CSS聲明CSS聲明是由"屬性","冒號(:)","屬性值"和"分號(;)"組成的.語法屬性:屬性值;例如font-size:12p*;font-size代表字體大小.12p*字體大小的值.介紹兩個常用的技巧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注釋的開場使用/*,完畢使用*/語法/*注釋內容*/例如/*文字樣式開場*//*夢之都白色12象素文字*/.dreamduwhite12p*{ color:white; font-size:12p*;}/*夢之都黑色16象素文字*/.dreamdublack16p*{ color:black; font-size:16p*;}/*文字樣式完畢*/第四章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等價于#ffbb00CSS背景背景(background),文字顏色可以使用color屬性,但是包含文字的p段落,div層,page頁面等的顏色與背景圖片可以使用與background等屬性.通常使用background-color定義背景顏色,background-image定義背景圖片,background-repeat定義背景圖片的重復方式,background-position定義背景圖片的位置,background-attachment定義背景圖片隨滾動軸的移動方式.第一節(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--定義背景圖片的重復方式取值:repeat|repeat-*|repeat-y|no-repeat|inheritrepeat:平鋪整個頁面,左右與上下repeat-*:在*軸上平鋪,左右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;}第四節(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坐標定位的,所以通常取兩個值.第五節(jié):CSSbackground-attachment屬性background-attachment--定義背景圖片隨滾動軸的移動方式取值:scroll|fi*ed|inheritscroll:隨著頁面的滾動軸背景圖片將移動fi*ed:隨著頁面的滾動軸背景圖片不會移動inherit:繼承例如body{ background-image:url('list-orange.png');background-attachment:fi*ed; background-repeat:repeat-*; 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-*center;}第六章CSS文本CSS文本屬性用于定義文字,空格,單詞,段落的表現等.通常使用letter-spacing屬性控制字母之間的距離,word-spacing屬性控制文字間空格的距離,te*t-decoration屬性定義文本是否有下劃線,te*t-transform屬性控制英文的大小寫,te*t-align屬性定義文本的對齊方式,te*t-indent屬性定義文本首行的縮進,white-space屬性定義文本與文檔源代碼的關系.第一節(jié):CSSte*t-decoration屬性te*t-decoration--定義文本是否有劃線以及劃線的方式取值:none|[underline||overline||line-through||blink]|inheritnone:定義正常顯示的文本[underline||overline||line-through||blink]:四個值中的一個或多個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文檔的源代碼的排版方式控制頁面顯示文本的排版方式取值: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統一定義字體的所有屬性.第八章CSS邊框每個內容或元素外面都可以有一個邊框.邊框分為上邊框(top),下邊框(bottom),左邊框(left),右邊框(right).每種邊框有顏色(color),樣式(style),寬度(width)三種屬性.如果上下左右的邊框表現不一樣,可以分別定義上下左右邊框,如果一樣可以統一使用border屬性定義.通常使用border-width屬性定義邊框的寬度,border-color屬性定義邊框的顏色,border-style屬性定義邊框的樣式,border屬性統一定義邊框樣式的幾個屬性.第九章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-collapsebor

溫馨提示

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

評論

0/150

提交評論