iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Modern CSS 超詳細新手攻略 系列

介紹 Modern CSS 發展歷史與其所提供之功能,協助讀者對於 CSS 能有更進一步的理解。

參賽天數 6 天 | 共 11 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 1

[13th-鐵人賽]Day 1:Modern CSS 超詳細新手攻略 - 簡介

嗨大家,我是 Ronnie! 這是我第一次參加iT鐵人賽,在開始前先幫我自己訂一個小小目標,就是希望我可以順利完成這30天的鐵人賽, 也請大家可以和我說聲加油,...

2021-09-06 ‧ 由 veronica1130 分享
DAY 2

[13th-鐵人賽]Day 2:Modern CSS 超詳細新手攻略 - 入門

WHO? WHAT? CSS到底是誰? CSS的全名為Cascading Style Sheets,其中的style是樣式,因此CSS就是用來描述網頁樣式的工具...

2021-09-07 ‧ 由 veronica1130 分享
DAY 3

[13th-鐵人賽]Day 3:Modern CSS 超詳細新手攻略 - Box Model

現在我們手上有了武器(css基本語法),只是剛創建角色拿到的新手包裡面那種,所以在打怪前記得先來補充一點觀念才不會一下就game over了! Box Mode...

2021-09-08 ‧ 由 veronica1130 分享
DAY 4

[13th-鐵人賽]Day 4:Modern CSS 超詳細新手攻略 - Display

昨天提到了Box Model,那要將box放到網頁前就必須先了解display這個屬性。 Display 基本最常用的有這三種:inline、block、in...

2021-09-09 ‧ 由 veronica1130 分享
DAY 5

[13th-鐵人賽]Day 5:Modern CSS 超詳細新手攻略 - Selector (一)

今天再來深度研究一下CSS的語法!我要介紹的是CSS中的選擇器,選擇器是最重要的語法之一,決定了要改變樣式的到底是哪些元素,先從基本選擇器開始! 基本選擇器...

2021-09-10 ‧ 由 veronica1130 分享
DAY 6

[13th-鐵人賽]Day 6:Modern CSS 超詳細新手攻略 - Selector (二)

介紹完基礎選擇器,再來介紹一下複合選擇器~ a b 選擇a元素裡的子元素 ab ab為同一元素但不同標籤 a, b 同時選擇a及b元素 a...

2021-09-11 ‧ 由 veronica1130 分享
DAY 6

[13th-鐵人賽]Day 7:Modern CSS 超詳細新手攻略 - 偽類 Pseudo Classes

今天要來介紹的是Pseudo Classes,可以用來改變元素在某個狀態下的樣式,例如鼠標停留在button上時的樣式變化,checkbox被選取時的樣式等。...

2021-09-13 ‧ 由 veronica1130 分享
DAY 6

[13th-鐵人賽]Day 8:Modern CSS 超詳細新手攻略 - 偽元素 Pseudo Element

偽類與偽元素差別 如果你只在偽元素前加一個冒號,你有時會發現也可以正常運行,但在CSS3之後偽元素改為2個冒號以便和偽類分開,因此請盡量使用2個冒號的寫法...

2021-09-14 ‧ 由 veronica1130 分享
DAY 6

[13th-鐵人賽]Day 9:Modern CSS 超詳細新手攻略 - Specificity

今天要講的主題是權重,權重在CSS中扮演著裁決者的角色,在被重複賦予樣式時,決定最終該顯示哪一個樣式。 權重可以轉換成圖中分數: 千位數為inline-st...

2021-09-15 ‧ 由 veronica1130 分享
DAY 6

[13th-鐵人賽]Day 10:Modern CSS 超詳細新手攻略 - background

一個單調的網頁,配上精美的背景圖片將帶來意想不到的驚豔,但在加入背景圖片可不是這麼簡單,今天來介紹關於背景的各種屬性! background-color 背...

2021-09-16 ‧ 由 veronica1130 分享