幫我優化語句嗨大家好，我是Eric！今天我們來談談如何在HTML、CSS和JavaScript中使用自定義CSS屬性（CSS Variables）。這是一個實用...
得之於人者太多，出之於己者太少。 總算等到開賽的日子，這次的主題靈感來自於今年公司要求學習的新網站，由於常常在網路上拜讀許多大神的文章，使得自己有機會能累積到一...
前言 第一次參加鐵人賽，一開始對於連續30天要寫文章有些些抗拒，擔心突然有事打斷進度。但轉念想想，缺點就是優點！換句話說就是連續30天我都要花時間去學習與思考全...
嗨，大家好，我是前端工程師(小宇) 我身邊的朋友常常問我說，成為前端工程師學歷是不是一定要有相關的資訊背景才會被公司錄取?我可以肯定的說不用，我面試多家公司的經...
怎麼自定網站的 CSS style 應該不用多說，我主要是用這個外掛 stylebot 這段時間又補強了一堆元素設定，總算順眼很多目前是以標準模式 ( 非暗夜...
前言 本系列旨在幫助新手快速進入前端的世界，對於底層的原理和延伸用法並未多加著墨。文章中有錯誤或需補充的部分也希望各路高手不吝指教！ HTMl 相關 [快速...
Flex Box flex box，又稱彈性盒子，是一種為了讓網頁適應不同尺寸的設備所衍伸出來的 display 方式。在 flex 出現之前，我們大多利用元素...
Animation 動畫 前面我們講完了 transition，這邊來講一個進階的概念 —— Animation (動畫)，在前面轉場效果中，主要是設定因事件觸...
3D Transform 上一篇我們講完了 2D Transform，今天我們就來介紹 3D 的部分，其實 3D 只是加入 Z 軸，有了立體和透視的概念。在 3...
文字空白及溢出樣式 White Space 屬性名：white-space (指定如何處理文字中的空白)屬性值：normal (預設)、pre (格式與文本完全...
陰影 Shadow 盒子元素陰影 Box Shadow 屬性名：box-shadow屬性值：複合屬性，屬性值分別有 offset-x (水平偏移)、offset...
z-index 是什麼 在一般 normal flow (佈局流) 中，元素幾乎都會按照順序依依排列，但元素經過定位後有可能會發生重疊，這時候就需要靠 z-in...
Position 定位 Position (定位) 是指元素在頁面上的位置。在一般情況下，我們寫好的元素會由左至右、由上至下依序在瀏覽器中排列，不過當網頁變的愈...
Float 浮動 Float 在設計之初是用來呈現文繞圖的效果，可以將元素指定為靠左或靠右浮動，在 CSS 中，所有的元素都可以加入 float 屬性。 範例：...
Overflow 溢出 CSS 的 overflow 屬性通常用於指定元素內容超過該元素範圍大小時的呈現方式，例如文字內容超過其父元素的寬度、圖片超過預設區域的...
Box Model Box Model 其實就是把元素比喻為我們很常見的盒子，如下圖我們可以看到主要分為四個部分：盒子中的內容物 (電腦)、電腦與盒子間的空隙...
HTML 元素的顯示方式 在之前學習 HTML 的內容中，我們會發現每個元素預設的特定都不太一樣，有些會獨佔一整行的空間，例如 <p>、<di...
背景 我們之前介紹 CSS 顏色時有說過 background-color 可以指定元素的背景顏色，但其實在背景中除了顏色外我們還能做更多變化，下面就讓我們花點...
border 邊框 border，指的是邊框，擁有三個必要屬性 border-width、border-color、border-style，分別指定邊框的寬度...
文字段落樣式 文字間距 文本間距分為兩種，字元間距和單字間距。 字元間距：調整每個字元間的距離 單字間距：調整每個單字間的距離，以是否空格區別單字，所以中文無...
字體 font 系列 屬性 說明 語法 font-size 設定文字大小 font-size: 20px; font-weight 設定文字粗...
CSS 長度單位 在生活中我們有許多用於表示大小的單位，例如公里、公尺等，那在網頁中我們又要如何指定元素或文字的大小呢？其實在網頁開發中也有許多長度單位，主要分...
層疊性 當元素的樣式發生衝突時，瀏覽器會根據規則(權重)進行樣式層疊(覆蓋)。 樣式衝突是指某元素特同個樣式名被設為不同值，例如一個元素同時擁有 color:...
選擇器的優先順序 當我們使用多個選擇器選中同個元素，並賦予某個屬性不同值時，就會產生樣式衝突。舉例來說，當我們在 A 選擇器將元素的顏色設為紅色，又用 B 選擇...
基本選擇器 選擇器 說明 語法 通配符 作用範圍為所有標籤，用於頁面整體樣式 * { color: red } 元素 作用於同種標籤，不能進行...
偽元素 偽元素，指的是元素中一些特殊的位置，因為他不是一個真正的元素，所以被稱為偽元素。偽元素在選擇器中的寫法為 ::偽元素，下面就讓我們來介紹常見的偽元素吧！...
UI 元素狀態偽類 是指依照該元素目前的狀態(如是否勾選、是否被禁用)作為選擇器進行選擇，主要分為三種 :checked、:disabled 及 ':enabl...
結構偽類 結構偽類是指針對 HTML 結構來選擇元素進行樣式設定，從而減少對 Class 的依賴，尤其是在表格、表單等排列順序會變動的元素中。例如當我們想利用...
Pseudo-Classes 偽類 (虛擬類別) 有別於我們之前提到的 Class 有點像我們自定義將元素分組，偽類是依照該元素的特殊狀態進行分類，並以 : 為...
最近遇到 VScode 無法自動辨識 HTML 的檔案類型，不知道是不是因為失手進行了更新導致，按 !+Tab 時無法自動生成 HTML 模板(如下圖)並且代碼...
iThome鐵人賽
看影片追技術
看更多
Eric
ThisIsFrankTsai
Bonnie1226