Css入門課程 Css基礎

標籤：sea   優勢   before   top   container   工作效率   劃線   login   駝峰   

html css javascript三者關係

• html是網頁內容的載體
• css是網頁內容的表現，外觀控制
• javascript是網頁邏輯處理和行為控制

 

css相對於html標籤屬性的優勢

css簡化了標籤代碼，利於下載提高效率

解決了網頁內容與外觀分離

利於維護，提供工作效率

 

css文法基礎

css文法：選擇符+申明，其中申明是指屬性-值形式，注意css樣式區分大小寫

css使用方式1）行內樣式，又稱內聯樣式

是通過標籤的style屬性書寫在標籤內部的樣式

2）內部樣式，又稱內建樣式

是在網頁頭部的style標籤內部進行定義css樣式

3）外部樣式，又稱外聯樣式

是通過link標籤引用css檔案地址

4）匯入樣式

是使用@import 匯入指定url路徑的css檔案，並且匯入樣式一般在style標籤內部使用，是在style標籤內部的開始處，匯入的css樣式表是在整個html檔案載入完成後開始載入

 

css引用優先順序

一般來說是行內樣式》內部樣式》外部樣式

但是內部樣式和外部樣式，取決於誰最後被載入，也就是就近原則

 

css選擇符1）類選擇符

使用.clallName方式定義，通過標籤的class屬性應用類css樣式，一個標籤可同時引用多個class，之間使用空格符分隔；類選擇符可以對多個標籤進行重複使用；

2）標籤選擇符

標籤選擇符表示對整個文檔一類標籤進行樣式設定

3）id選取器

同構#定義css樣式，id選取器不是太常用，太常用導致id泛濫，增加文檔dom id對象檢索時間不利於提高網頁響應

4）群組選取器

又稱組合選取器，是指多個選取器共同定義樣式，他們之間使用逗號進行分隔

5）後代選取器

在dom中上下緊挨的標籤稱為父子關係，再往上則為祖先後代關係，那麼後代選取器則是值標籤的子項目以及更下級的子項目標籤，後代選取器之間使用空格符分隔，

理解為在某個標籤內部尋找目標標籤；

注意後代選取器的定義往往是從大範圍到小範圍進行，而大範圍的入口即為這6種選擇符；

6）通用選取器 *

這是指所有的標籤都應用該選取器

7）偽類別選取器

：link：標籤未被訪問之前

：visited 標籤訪問過後

：hover 滑鼠移動到標籤上

：active 標籤被單擊但是沒有放開滑鼠前

其中優先順序：active《hover《visited《link，這個直接通過邏輯判斷就可以知道；

注意：hover必須放於link和visited之後才有效

active必須放於hover之後才有效

偽類對大小寫不敏感

8）偽對象

：before

：after

 

同一樣式表內部樣式優先順序

總體來說就是就近原則，但是也有通過計算權重值進行判斷

標籤權重值：+1

類權重值：+10；

id權重值：+100

行內權重值：+1000

 

對於具有同樣權重值來說，那就是後來居上，後面的將覆蓋前面的

 

最高優先順序 ！important，是指該樣式為最高優先順序，使用方式為 如 fontCss{font-size:14px !important;}

 

css樣式命名規則

不能以數字或者底線，‘-’連接線開頭

常見的命名規則有

駝峰法：首字母小寫，其餘單字首大寫

串連符：即單詞首字母小寫，單詞與單詞之間使用連接線-或者底線_串連

 

常見的頁面命名有

頁頭：header 　　　　　　　　導航：nav　　　　　　　　頁面主體：main　　　　　　　　側欄：sidebar　　　　　　　　頁尾：footer　　　　　　　　欄目：column

內容：content/container　頁面外圍控制：wrapper　　　 容器：container　　　　　　　　左中右：left center right

 

常見的css導航命名有

導航：nav　　　　　　　　　　左導航：leftsidebar　　　　主導航：mainnav　　　　　　右導航：rightsidebar　　　　　　子導航：subnav　　　　　　菜單：menu

頂導航：topnav　　　　　　　 子功能表：submenu　　　　 邊導航：sidebar　　　　　　 標題：title　　　　　　　　　　　　摘要：summary

 

常見的css樣式命名有

標誌：logo　　　　　　　　註冊:register　　　　　　　　廣告：banner　　　　　　　　搜尋：search　　　　　　　　　　登陸：login　　　　　　　　功能區：shop

登陸條：loginbar　　　　　標題：title

 

Css入門課程 Css基礎