前幾天我們介紹了不同類型的選擇器。 包括元素、類別、ID、通用等基本的選擇器，依任意屬性挑選元素的屬性選擇器，依不存在的分類挑選元素的偽類選擇器，依不存在的元素...
前兩天我們介紹了偽類選擇器。 今天我們要介紹類似的偽元素選擇器。 偽元素簡介 定義 偽元素選擇器（Pseudo-Elements），也可以譯作虛擬元素選擇器。從...
昨天我們介紹了偽類的基本語法，還有動態偽類。 今天我們要繼續介紹剩下五種類型的偽類。 目標偽類 之前在介紹<a>元素的時候有提過，如果網頁中的某個元...
昨天我們講解了對任何屬性都能使用的屬性選擇器。 今天要繼續來介紹偽類選擇器。 關於偽類 偽類選擇器（Pseudo-Class），也可以譯作虛擬類別選擇器。由字面...
昨天我們提到怎麼將多個選擇器一起搭配使用，組成複合選擇器、複雜選擇器，以及選擇器清單。 接下來我們要從屬性選擇器開始，繼續介紹其他類型的選擇器。 屬性選擇器與它...
昨天我們提到CSS有四種基本的選擇器，包括元素選擇器、類別選擇器、ID選擇器，以及通用選擇器。 這些選擇器還能組合在一起使用，同時以多個條件篩選網頁中的內容，就...
昨天我們提到在HTML中使用CSS的三種方式，包括外部樣式表、內部樣式表，以及行內樣式。 也提到定義樣式的規則由選擇器與宣告所構成。選擇器指定樣式適用於哪些內容...
暫別HTML後，我們要來學習怎麼用CSS設定網頁樣式啦。 不過在此之前，要先了解所謂的CSS到底是什麼，要怎麼在HTML中使用。 也需要知道CSS的基本語法。...
前幾天提到怎麼在網頁中加入連結、清單、表格跟圖片。 掌握這些常見內容的使用方法後，我們差不多可以往CSS邁進了。 不過在此之前，我想再補充怎麼加入引文、程式碼這...
昨天我們解釋了什麼是像素密度，也介紹怎麼透過<img>元素的srcset屬性，為同一張圖片提供其他像素密度版本的檔案。 不過除了像素密度，我們還需要...
響應式圖片 昨天我們介紹了怎麼透過<img>元素在網頁中加上圖片。也提到可以搭配使用<figure>和<figcaption>...
前幾天，我們提到怎麼在網頁中加入連結、清單與表格。 接下來，我們要介紹怎麼幫網頁加上圖片。 在網頁中加入圖片有幾種方式。除了HTML的元素，也可以透過設定CSS...
昨天我們介紹了怎麼為表格添加標題或說明、劃分結構，還有將欄分成不同群組，讓我們的表格更清楚也更有結構。 不過即使這麼設定，一旦表格複雜起來，有跨行或跨欄的格子，...
昨天我們對HTML的表格做了基本的介紹。 包括使用<table>、<tr>跟<td>這三種元素，建立一個簡單的表格；以及將標...
昨天提到HTML中的清單主要分成三種，包括以符號區別項目的無序清單、以編號區別項目的有序清單，以及沒有符號或編號的描述清單。 今天我們要介紹的是，同樣常用來整理...
昨天我們提到HTML的<a>元素，以及怎麼用它在網頁中加上連結。也說明這些連結不一定都是連到網頁，實際在網頁中也不一定都是以文字來呈現。 今天要介紹...
前天提到除了主要內容之外，網頁通常在版面上還會分出頁首、導覽列、側邊欄與頁尾等區塊。雖然這些區塊主要是由語意化結構元素來劃分，不過經過昨天的討論可以知道這些元素...
昨天我們介紹了網頁中常見的區塊，以及用來劃分這些區塊的語意化結構元素（semantic structural elements），包括<header>...
昨天我們提到怎麼爲網頁中的文字進行初步的編排，包括添加粗體斜體等樣式、換行與分段，還有在段落間加上標體與分隔線。 不過如果跟著做，會發現我們寫出來的網頁還是跟平...
前幾天介紹了網頁的基本組成元素，以及構成這些元素的語法。接下來幾天，要開始說明怎麼編輯網頁的實際內容啦～ 就像是使用Word等文書軟體撰寫文件，可以依據需求對文...
今天要回過頭來，仔細看看網頁的<head>元素裡面有什麼。 之前說過，<head>元素裡會放入有關網頁的metadata。這些metad...
昨天我們提到了網頁的基本結構，今天要進一步說明HTML的語法，還有一些需要注意的鋩鋩角角（mê-mê-kak-kak）。 元素 Elements HTML由一系...
首先遇到的是HTML。 HTML是HyperText Markup Language的縮寫。根據MDN的說明，HTML是網頁的基礎，其定義了網頁的結構與意義。H...
在開始主題之前，先來自我介紹吧。 大家好，我是KK。目前是好想工作室Web Camp的學員。從年初進入好想工作室以來，時間已經過了六個月（淚～ 這段期間，我主要...
KK
iThome鐵人賽
看影片追技術