屬性選擇器(Attribute Selectors)用於選中符合屬性值條件的 HTML 元素,HTML 元素上會有一些屬性,例如 <a>
標籤有 title
屬性,我們就可以針對有 title
屬性的 <a>
元素來進行樣式設置。
Day5-ID 選擇器-僅此一家,別無分號
ID 選擇器(ID Selectors)是根據元素上的 id
屬性值作為判斷依據,大小寫需相符。
id
其實就是「身分 Identity」的縮寫,同一個 id
只能在頁面中出現一次,這就像我們每個人的身分證字號,都是唯一的。
Day4-類選擇器-前端切版最常使用的選擇器,精準鎖定
上一篇有講到,元素選擇器沒辦法讓相同的標籤進行不同的樣式,這時候就要靠類選擇器啦~!
類選擇器(Class Selectors)是前端切版最常使用到的選擇器,根據 HTML 元素的 class
屬性值來選擇特定的元素,其中 class
就有「類別」的含義。
Day3-元素選擇器-誰說標籤只是標籤
元素選擇器(Type Selectors)也可以稱作「標籤選擇器」。我們可以在 HTML 文件中,選擇任何的 HTML 元素,並對選中的標籤元素來處理樣式。不過,由於 <head>
部分的標籤(如 <meta>
, <title>
等)不會顯示在網頁的可見區域,因此對這些標籤的樣式設置不會產生效果。
Day2-通用選擇器-小朋友才做選擇,我全都要
通用選擇器(Universal Selector)也稱為「通配選擇器」或「全體選擇器」,這些名稱指的都是同一個概念。
通用選擇器可以使用 *
符號來選取所有元素,這在你需要對所有元素應用相同樣式時特別有用。
Day1-什麼是CSS選擇器? CSS選擇器如何應用
一個完整的網站由 HTML、CSS 和 JavaScript 三者協同運作,各司其職,缺一不可。HTML 負責網站的結構,CSS 負責視覺美感,而 JavaScript 則處理動作與使用者互動。
如何用CSS控制移動端可視區域?使用lvh, svh, dvh單位優化網站
最近做專案時,設計師希望行動版第一區塊可以滿版呈現,而當下第一個念頭就是用 vh 來做,但實際在手機看時發現,不管是 Chrome 或 Safari 瀏覽器,底下的 UI 工具列都會擋到內容,沒辦法完整呈現 🤔
用 CSS 打造酷炫的變形蟲效果-CSS教學
在做專案時,設計稿上有個圓形,設計師希望呈現出不規則橢圓的動畫效果,我把它稱之為變形蟲效果😆
就像上圖所呈現的,動畫效果持續為不規則橢圓,並且會漸漸的變色
如何做到的呢?這其實不難~跟著我一起往下做吧!
Google Publisher Tag 教學-顯示廣告版位程式碼
Google Publisher Tag 是一種 JavaScript 標籤庫,簡稱為 GPT (跟 ChatGPT 沒關係嘿~XD),用於在網頁上展示廣告並管理廣告投放。GPT 是 Google Ad Manager 平台的重要組成部分,它提供了強大且靈活的功能,幫助網站管理者優化廣告展示,提高廣告收入
本篇文章將會介紹如何操作 Google Publisher Tag,在網站成功顯示廣告~👍