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互转
- 下一篇： CSS中position的4种定位详解