CSS 邏輯關係順序

有時候我們常常會遇到 CSS 覆寫不過去然後專案或修改迫在眉睫,不管三七二十一就給它 !important 下去,造成 CSS 越來越沒有邏輯性,歷史共業就是這樣造成的….(維護困難)

了解如何適時的增強 CSS 的強度,在專案的維護上是相當重要的,要漸進式的瞭解 CSS 強度順序邏輯關係

1.CSS 選擇器強度說明及使用時所需注意重點。

網頁設計 <===> 設計者

網頁內包含

1.HTML(資料陳列)

2.CSS(外觀修飾裝盤)

3.JS(與其使用者來程式互動)

瞭解網頁的基本架構後,接著就針對 CSS 進行說明:

CSS 語法結構

整個架構我們稱為 規則集(rule set),或是簡稱規則 (rule)也可以。
※也注意名字裡面的單獨部分)

1.選擇器(Selector)
在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響(就是 段落元素 h1,h2,h3,p...)。
2.宣告(Declaration)
單一個規則,例如 color: red; 指定了這個元素的呈現樣貌。

3.屬性 (Properties)
修改屬性是改變你HTML元素的一種方法 . (color 是段落元素的一種屬性.) 在CSS中, 你可以選擇哪些屬性用來影響 rule。

4.屬性值 (Property value)
屬性值就是位於屬性右邊,在冒號(:)之後,從眾多的可能樣式選出一個給予屬性(color 樣式中選出 red)。

選擇器的種類

在撰寫 CSS 必須注意撰寫「強度問題」及「前後順序」,瞭解這兩大重點就可以避免掉大部分覆寫不上的窘境,以下我們先來理解選擇器的種類及強度排名吧!

第一種:Type 選擇器(HTML 的任一標籤):p/ span/ div…..。

特點:擁有默認的 CSS 語法,像是 p 帶有下面的語法。

影響:造成標籤呈現方式不同,然而每個瀏覽器對於默認的樣式語法也不盡相同。

因此:我們會常看到許多國外的模版,會引用一個 reset 的 css 檔案,目的是為了統一各種瀏覽器不同的默認樣式
※記得最後還是必須用瀏覽器實測結果哦!

舉例說明: div/ p/ span/ section

顯示結果

可以看出以下幾點不同:
1.div/ p/ section 會換行(display:block),span 不會換行(display:inline)。

2.接著比較 margin 的差異,基本上 div / span/ section是一樣的,p 則有默認的 margin 值。

那不同瀏覽器的結果又會是如何呢?

基本上 Firefox 和 Google Chrome 是最聽話的一家,只要是 W3C 規定的 Firefox 和 Google Chrome 都會乖乖照辦,然而 IE 瀏覽器常常跟 W3C 唱反調,更慘的是還有 IE8、IE9、IE11、Edge 對於 CSS 的呈現都不太相同,我們用 p 來舉例說明。

可以看出以下幾點不同:
1.字體不同。(預設不同)
2.margin 不同。(各自設置)
3.與瀏覽器的間隔不同。(預設不同)

第二種: 以 . 開頭的 class 選擇器

特點:可以多重宣告。

影響:以利於作為覆寫 CSS 的選擇器。

因此:建議可以用多使用此選擇器。

舉例說明: 多重宣告

 

接著在加上 textGreen 這個 class

CSS 是聽從 style 裡面的順序,即使改變了 HTML 中的 class 排列順序,顯示結果也不會改變。

第三種: 以 # 開頭的 id 選擇器

特點:id選擇器有唯一性。

影響:原因在於 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用。

因此:一個 HTML 文件中僅可被宣告一次,使用時須特別注意。

如何區分 TYPE、CLASS、ID選擇器

1.讓我們從TYPE開始理解

TYPE選擇器(工廠)<瀏覽器>
[ chorme ] [ firfox ] [ safari ] [ie8 ie9 ie11]

設計者拿設計物件的樣品給工廠生產,結果每間工廠生產的物件完成品都會有些許的不同,因此設計者決定拿出一份更詳細的物件製作流程(RESET CSS)給工廠,使生產出來的物件有一致性。

2.那ID和TYPE有甚區別?

ID選擇器(型號)<僅可被宣告一次>
型號 [ header ] [ content ] [ footer ] 當我們製作出不同的物件就會給他不同的型號來區別。

3.給物件漂亮的外表(CLASS)吧!

CLASS選擇器(外觀)
外觀 = 藍色 (class="myBlue")
外觀 = 綠色 (class="myGreen")
外觀 = 黃色 (class="myYellow")

我們可以在同樣型號的物件給予他們不同的顏色。

若我們僅以選擇器來分辨強度的話是以下:

id > class > type

我想增強選擇器的強度!!!
這時候就可以融合上述三種變成「階層選擇器」
寫法為兩個選擇器中間加一個空白。(ex:p span 代表 p 容器裡的 span;.class p代表 .class 類別的容器裡的 p。)

特點: 可以用來加強強度。
影響: 階層選擇器的寫法有很多種。
因此: 必須了解多種寫法。

寫法說明

1.p ~ span
利用 ~ 區隔兩個元素,表示在 p 元素後,與 p 同一層關係的 span 全部都會指到。(CSS3 的選擇器,部分瀏覽器支援)

2.p span
指向 p 標籤裡後代的 span。(兒子、孫子、曾孫都會指到)

3.p > span
指向 p 標籤裡子代的 span。(假設子代的後代也是 span,將會 Inherit 繼承)

4.p.specal
指向有著 specal class 的 p 標籤,最基本加強強度的一種方式。
所有的程式都是由上到下讀入,因此當指定對象相同時後方會覆寫掉前方。

※CSS選擇器兼容性查詢工具

  1. Web Browser Compatibility Tables
  2. Caniuse

CSS寫法邏輯

CSS內部覆寫-在樣式表(Style sheet)中當強度相同時,同樣後方會壓過前方,因此我們會利用這個特性來修正CSS的內容。

1.覆寫屬性宣告
延續一開始講到的重點,所有的程式都是由上到下讀入,因此當指定對象相同時後方會覆寫掉前方。

<body>
<div class="myText">嗨!你好</div>
</body>

顯示出:

假設我們在 color:red 後面加上 color:blue

則會顯示出:

※使用 CSS 綜合寫法注意要點 — 綜合寫法要寫在前面,否則內部默認的樣式語法會將前方蓋掉。

1.綜合寫法有哪些:可以分為兩大類
我們最常用到的綜合寫法有 background / margin / padding / border 等。

background :此類型的綜合寫法( ex: border,font,box-shadow, )並無講求順序:詳可參考 w3schools

margin :此類型的綜合寫法( ex: padding )有講求順序請依照下方範例撰寫:詳可參考w3schools

2.屬性的默認樣式:每個屬性都有自己的默認樣式,
舉例來說 background-color 的默認樣式為 opacity ;
background-repeat 的默認樣式為 repeat。

而綜合寫法的含意就是全部屬性都寫上去!
因此沒寫到的屬性會直接帶入默認樣式,為了避免覆寫屬性宣告,綜合語法要寫在一開始,在覆寫 CSS 時也盡量避免使用。

覆寫規則
這是我們最常用到的方式,為元素再添加一個class覆蓋掉原有的屬性。

<body>
<div class="myContent">我是一個div</div>
</body>

顯示出:

假設我們為這個 div 再添加一個 class 叫 myDiv 並更改背景色(background-color)為青綠色(greenyellow)
<body>
<div class="myContent myDiv">我是一個div</div>
</body>

顯示出:

※一定要添加在被覆寫規則下方才能覆寫成功,因此每當我們建立新的規則都會加在最下方。

※撰寫 RWD CSS@media 注意要點 — @media 是 CSS 擴充元件的寫法之一,它使我們在不同的螢幕尺寸下能有不同的樣式,必須注意寫入順序,我們先來介紹它的兩種寫法:

@media (max-width:800px){}:當螢幕寬度最大值等於800時。
@media (min-width:800px){}:當螢幕寬度最小值等於800時。

CSS 載入順序(優先權)
在了解內部覆寫順序後就是要了解 CSS 的載入順序我們可以整理出一個式子:

!important > inline style(元素標籤內樣式設定) > 内嵌 css style(style 標籤內樣式設定) > link css style(link檔案樣式設定) > @import(import 檔案樣式設定)

※(1)link css stylee(link檔案樣式設定)
依據程式邏輯,先掛入的 link 會被後方 link 覆蓋,因此自己所撰寫的 link css style 一定要在 [ 最後才掛上 ]。

※(2) !important請勿隨意使用
important 是跳脫規則的另類寫法,[ 用起來很方便但靈活度相對低 ]。當所架設的網站為 [ 大型網站 ] 並且需要 [ 極高的 ] 維護性時,無視規則的 !important 會造成維護困難,並有時會忘了有使用它,因此 [ 盡量避免使用 ]。

CSS 的順序判別為先確認 CSS 載入的順序問題,接著是 CSS 內部規則順序問題,這樣才能以正確的讀入方式及寫法邏輯撰寫 CSS,

Comments are closed.