自學日記

學習程式相關知識及學習法

0%

CSS 宣告

發表於 更新於

CSS 宣告

介紹CSS宣告方式:群組式宣告、、組合式宣告、層疊式宣告

沒有說以哪種方式最合適，無論何種宣告方式，視專案開發而定

群組式宣告

如css 兩種以上class視覺設定相同，可以藉由半形”，”隔開class name，使兩者(或以上)共用同樣的視覺設定，以下藉由原始碼示範:

假如原本設定如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
/*最新消息*/
.news-list{
	border: 1px solid #ccc;
	padding: 20px;
}

.news-list-item{
	color: #666;
	text-decoration: none;
	display: list-item;
}

/*近期活動*/
.event-list{
	border:1px solid #ccc;
	padding: 20px;
}

.event-list-item{
	color: #666;
	text-decoration: none;
	display: list-item;
}
</style>
<!-- 最新消息 -->
<div class="news-list">
  <a href="#" class="news-list-item">...略</a>
  <a href="#" class="news-list-item">...略</a>
  <a href="#" class="news-list-item">...略</a>
</div>

<!-- 近期活動 -->
<div class="event-list">
  <a href="#" class="event-list-item">...略</a>
  <a href="#" class="event-list-item">...略</a>
  <a href="#" class="event-list-item">...略</a>
</div>

我們利用群組式宣告簡化，避免程式原始碼肥大不易解讀:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*最新消息 & 近期活動*/
.news-list,
.event-list{
	border:1px solid #ccc;
	padding: 20px;
}

.news-list-item,
.event-list-item{
	color: #666;
	text-decoration: none;
	display: list-item;
}

群組式宣告須注意

  1. 最後一個選取器的右側不可出現逗號，會導致該串選取器全部失效
  2. 當大量使用逗號區隔眾多選取器時，該考慮另外建立新的共用選取器，而不是濫用逗號做 CSS 群組式宣告
  3. 每個逗號右側建議添加一個空格以利閱讀
  4. 逗號前後的空間不影響選取器的選取作用

除了使用群組化宣告，我們也可以就相同視覺外觀的項目，將它共用的地方抽出來獨立用一個 class 來設定，至於差異化的部分則用另外一個單獨專有的 class 名稱來設定。

組合式宣告

可用於想進一步選取單獨按鈕、圖片或選單時，此處我們直接以程式碼來呈現:

1
<p class="A" id="B">...內文略</p>

CSS 選取器是寫 p 或者是 .A 又或者是 #B 選到的都是同一個目標對象，因此我們可將它串接起來，如下:

1
2
3
p.A#B{ ...略 }
<!-- 或 -->
p#B.A{ ...略 }

每個選取器之間是沒有空格的！同一個目標對象具備多個選取器時不該有空格。

層疊式宣告

此宣告用法為「選取器A 選取器B」，需要注意的是，兩個選取器之間至少具備一個或多個空格，意思是選取到左方選取器A內的選取對象B，以程式碼示範為:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
/*將所有的標題都設定為 36像素字級*/
h1{ font-size: 36px; }

/*將 news 裡面的 h1 設定成紅色字*/
.news h1{ color: red; }

/*將 hot 裡面的 h1 設定成粉紅色字*/
.hot h1{ color: pink; }
</style>

<div class="news">
	<h1>A</h1>
</div>

<div class="hot">
	<h1>B</h1>
</div>

又或者更簡潔可以如此使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- css -->

<style>
.section{ 共用設定...略 }
.section .section-title{ 共用設定...略 }
.section .list{ 共用設定...略 }
.section .list-item{ 共用設定...略 }
.section .list-item-link{ 共用設定...略 }

.news .list-item-link{ 差異設定...略 }
.events .list-item-link{ 差異設定...略 }
</style>


<!-- html -->
<body>
<section class="section news">
	<h2 class="section-title">最新消息</h2>
	<ul class="list">
		<li class="list-item">
			<a href="#" class="list-item-link">...略</a>
		</li>
		...略
	</ul>
</section>

<section class="section events">
	<h2 class="section-title">近期活動</h2>
	<ul class="list">
		<li class="list-item">
			<a href="#" class="list-item-link">...略</a>
		</li>
		...略
	</ul>
</section>
</body>

但須注意，撰寫的層級越多，CSS 效能就越差，要視情況去做調整。

參考資料:
CSS 群組式宣告 - 每個開發者都該學會的選取方式
CSS 組合式宣告 - 新手開發從這裡開始進步
CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器