在認識BFC之前，首先我們要知道Positioning schemes（定位規則）與Formatting context（格式化上下文）。 Positionin...
繼鐵人賽後，想把自己再推前進一點，在 30 天的陶冶後，發現每天撥一點時間思考與撰寫程式，可以提升對於程式的熟悉感，並可以爬梳自己所理解的東西，就算可能當下不了...
我們前幾篇認識了基本的CSS樣式，了解了文字、邊框、背景怎麼用顏色跟單位數值來設定樣式 ; 接著認識了box model，知道了單一個元素的box結構。 今天，...
★ 地圖雷奧鎮近郊處 ↓↓↓ 顯示雷奧鎮位置圖 就在那了！！ ( 抬頭一看 ) 只要再往東走，就能順利到達城鎮～～ ：站住！！ 近郊衛士 [速記豹]： 此為進入...
我們曾經在HTML篇章討論block元素與inline元素時，粗淺提到margin重疊。既然已經知道box model，終於可以來認識什麼是Collapsing...
box-sizing屬性是用來聲明元素的width跟height包含box model的哪些部位。 適用元素： 所有可設定width跟height的元素。 va...
Box model box-model是CSS的基礎概念。我們在HTML檔中寫入很多元素，在瀏覽器渲染時，我們可以在畫面上看到一個個區域，個別裝著不同的內容，這...
★ 地圖西北方峽谷森林 ↓↓↓ 閱讀前，建議先前往 鉄人18号「左右蛙」獲取經驗書，此為峽谷森林終章。 顯示峽谷森林位置圖 雖能運用自如，但疑惑的是 「怦然心動...
Border樣式 所有元素都可以設邊框(border)。今天要介紹的border屬性有：border-style ｜ border-color ｜ border...
真是值得為自己掌聲的一刻，我很少每天花時間學習一個技術或累積文章連續 30 天，但藉由這次鐵人賽給自己一個挑戰，既然我要盡快轉職，是必要給自己一些里程碑，在這次...
background-position background-position是用來定位背景的位置，可以以方位名稱(top、left、center、right、...
background屬性是用來聲明元素的背景，它可以大到網頁整個背景，也可以設定一個一個區塊的背景，或是小到像<button>、<a>都...
★ 地圖西北方峽谷森林 ↓↓↓ 顯示峽谷森林位置圖 森林橋 [？？？]：能真正駕馭此屬性，才是如虎添翼啊。(哈哈！！傲慢樣。) 傳送卷軸，建議先向 鉄人16号「...
★ 地圖西北方峽谷森林 ↓↓↓ 傳送卷軸，建議先向 鉄人2号「文本士」收集資料，此章為進階續文。 顯示峽谷森林位置圖 方向感為零摸索前進著。 峽谷森林 [行高怪...
我們知道了怎麼在CSS裡表示color屬性值、單位與數值，這篇，我們要來認識常用到的文字樣式。 font-size 字的大小，我們在前一篇有示範過，字體的大小可...
單位 單位可以用在width（寬）、height（高）屬性上，也可以用在font-size（字體大小）上，我們在切版的時候，用什麼樣的單位來指定畫面上區塊、字體...
我們已經會用選擇器來指定我們要的元素，選擇器框內放入樣式聲明，才能夠幫元素套樣式，還記得我們說到CSS語法時，樣式聲明是屬性（property）跟屬性值（val...
在學選擇器時，不免會一直提到權重，權重是css的樣式聲明的套用比較級，當很多樣式被寫在同一個css檔時，它們的權重值會決定誰最後勝出，元素最終會以權重值最高的樣...
介紹了基礎的選擇器，以及進階用組合子的方式選擇。今天我們要來介紹更近一步的選擇器應用，偽類與偽元素。 偽類 Pseuedo-classes 偽類之所以叫作偽，簡...
上一篇介紹了基礎的選擇器用法，今天來介紹進階的用法吧～ 群組選擇器 複選元素一起套樣式，中間用逗號隔開。要注意的是，如果這個選擇器群組其中一個無效，則整個群組都...
上一篇介紹套用CSS的方法，最常用的是另外建立css檔並引入html檔。那麼我們要怎麼在css檔內寫入我們想要的樣式呢？ 首先我們會介紹css的語法，接著本篇的...
會寫HTML了，可是放在瀏覽器看起來卻很單調，接下來就可以用CSS幫它做樣式，之前從CSS zen garden可以看出，CSS的功能是很強大的，可以做出各式各...
語意化標籤 我們學到，標籤的語意是撰寫html文檔時，很重要的概念。而HTML5版本，有所謂的語意化標籤，這類元素並不像<input>、<a&...
標籤語意的重要性 在瀏覽器的世界，雖然很多元素的視覺效果可能很像，可是針對網站的每個不同內容下好的元素很重要。它會幫助瀏覽器讀取文檔，讓網路體驗更優化。 進...
打開文字編輯器 *還不會用VS code的話請看第3天文章有提到的教學。 這裡示範的文字編輯器是VS code，新增一個檔案，先將它存成Html檔，這樣編輯器才...
上一篇我們說到元素的特性，介紹了inline元素跟block元素。今天就來介紹： 替換元素與非替換元素 文檔的層級概念 替換元素&非替換元素 替換元...
首先就來了解網路的運作吧！點圖看影片 How The Internet Works： HTML是什麼 超文本標記語言（英語：HyperText Markup...
完全門外漢的初階學習資源 在對於網頁前端領域完全陌生的情況下，要自己看懂教學文章是很吃力的(但也不是不可能，有人做得到，但對我來說真的很難。 以下是我在完全零基...
網站工程 架設一個網站的工程(這邊講的是網站架設工程，不包含網頁視覺設計)主要分成兩大區塊：前端與後端。 前端工程負責網頁的門面，看得到的文字、顏色、連結、分頁...
自學之前的掙扎 想學網頁前端，卻像在大海中迷航，不知道從何下手嗎？這30篇文章為我的學習做筆記，也分享給自詡為門外漢的你。從準備自學，到開始自學，最後可以執行基...
JinWen
letter liu
Tim Hsu
iThome鐵人賽
看影片追技術