CSS入门学习(转)
一、基礎學習
? ? ? ?1、何為CSS
? ? ? ? ??CSS是Cascading Style Sheets(層疊樣式表)的簡稱,是一種標記語言,它不需要編譯,可以直接由瀏覽器執行(屬于瀏覽器解釋型語 言). ??
? ? ? ? ? CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴, 可以通過簡單的更改CSS文件,改變網頁的整體表現形式,可以減少我們的工作量,所以 她是每一個網頁設計人員的必修課。
? ? ? ?2、語法
? ? ? ? ??2.1引用
? ? ? ? ? ? ? ?鏈接式(href
[css]?view plaincopy
? ? ? ? ? ? ? ?rel -- 指定鏈接類型?
? ? ? ? ? ? ? ?type -- 包含內容的類型,一般使用type="text/css"
? ? ? ? ? ? ? ?導入樣式(@import
[css]?view plaincopy
? ? ? ? ? ? ? ?內嵌式
[css]?view plaincopy
? ? ? ? ? ? ? ?注意:style標簽應該在head標簽內部.
? ? ? ? ? ? ? ?行內樣式
[css]?view plaincopy
? ? ? ? ?2.2選擇器
? ? ? ? ? ? ? ?CSS選擇器就是CSS樣式的名字,當在XHTML文檔中表現一個CSS樣式的時候,就要用到一個CSS.
? ? ? ? ? ? ? ?標簽選擇器
? ? ? ? ? ? ? ?
? ? ? ? ? ? ??類別選擇器
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ??ID選擇器
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ???實例總結
| id與class選擇符在CSS與XHTML中的用法總結 | ||
| ? | CSS中的寫法 | XHTML中的寫法 |
| 標簽選擇符 | p{font-size:12px;} | <p>www.dreamdu.com</p> |
| id選擇符 | #id_selector{font-size:12px;} | <p id="id_selector">夢之都</p> |
| class選擇符 | .class_selector{font-size:12px;} | <p class="class_selector">夢之都</p> |
? ? ? ?3、優點
? ? ? ? ??內容與表現分離,有了CSS,網頁的內容(XHMTL)與表現就可以分開了.?
?? ? ? ? ?使用CSS可以減少網頁的代碼量,增加網頁的瀏覽速度
二、總結
? ? ? ?1、導圖
? ? ? ?2、難點剖析
? ? ? ? ??2.1外部引用CSS中 鏈接式(link)與導入樣式(@import)的區別
? ? ? ? ? (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可以控制的。
? ? ? ? ? 2.2表格與表單的區別
? ? ? ? ??表格用于布局,表單用來傳輸數據,在表格里面可以包含表單,在表單里面也可以包含表格,用表格來布局表單里面的數據,
? ? ? ? ??如果你有數據提供給后臺程序,比如一個輸入框,文本框等,這些元素通常要放到一個表單,這樣才可以完成數據的提交。
? ? ? ?3、小編寄語
? ? ? ? ? CSS主要是用來控制網頁顯示的樣式。通過CSS可以讓HTML里的內容展現出絢麗的效果,就好比給一個人化妝,用的恰當,效果就好。
? ? ? ? ? 本文只是對CSS一些簡單的內容作了一下整理,至于其他強大的功能還需要我們繼續探索,在以后的學習中逐漸深入。
轉載于:https://www.cnblogs.com/yefengCrazy/p/5636702.html
總結
以上是生活随笔為你收集整理的CSS入门学习(转)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python string与list互转
- 下一篇: android.hardware.Cam