跳到主要內容

發表文章

目前顯示的是有「html」標籤的文章

:has() 父層選取器 - 偽元素

:has() 父層選取器從 Safari 於2022年開始支援後，其他瀏覽器現在也幾乎都支援該功能 有時希望「 符合該條件的class或 ID，它的父層能夠套用某css設定時 」，這就是一個很好用又強大的功能。 例如： HTML： <div class="text-title">     <h2>標題文字<h2>   </div> <div class="text-title">     <h3>標題文字<h3>  </div> CSS： .text-title:has(h3) { background-color: red;} 以上的語法意思為：當 text-title 的 class 底下若有 h3 時， text-title 的底色需要呈現紅色。 如果CSS是這樣： .text-title:has(h3, h2) { background-color: red;} 以上的語法意思為：當 text-title 的 class 底下若有 h3 或 h2 時， text-title 的底色需要呈現紅色。 那如果想要讓它的條件同時有 h3 和 h2，CSS就需要這樣寫： .text-title:has(h3):has(h2) { background-color: red;} 但要特別注意，這種寫法，上方的 HTML 則不會有反應，因為它的 text-title 底下並沒有同時有 h3 和 h2，需要變成以下的情況： <div class="text-title">     <h2>標題文字<h2>       <h3>標題文字<h3> </div> 再來就是如果只想要在 text-title 底下那層的 h3 有反應，就必須寫成： .text-title:has(> h3) { background-color: red;}
More »

好玩有趣的 SVG 動態效果

最近剛好在研究 CSS 動畫效果，有時網頁只是需要一個簡單動態效果，總不能花大錢製作影片吧？ 後來發現可以利用簡單的 SVG 及一些 CSS 手法，就可以讓圖片動起來 只能說…高手真的是很強！看完介紹影片後，才覺得自己好弱呀~~ 泡泡動態效果 Youtube影片介紹： https://youtu.be/liW6bDLnuuk （這個作者真的蠻強的，除了泡泡影片也有其他跟 CSS、JavaScript 有關的動態效果影片，我已經入坑加入追蹤了） 它是利用 SVG 的動態語法特性，再加上 CSS 的配合，製作出會動的感覺 影片中提到的「泡泡 SVG」網站在這裡： https://lokesh-coder.github.io/blobs.app/?e=6&gw=6&se=32&c=d1d8e0&o=0 ，免費使用，真是佛心來的呀~~ 依據影片教學我自己也製作出類似的動態效果 【 泡泡動態效果看這裡 】 另外我自己又延伸出波浪的動態效果，不過在做完之後，才發現這個網站更佛心，它能自動產生動態效果，只要把語法放進 HTML 裡面就可以了，哈！ 「波浪 SVG」： https://svgwave.in/ 【 波浪動態效果看這裡 】 詳細的 SVG 動態語法，可以參考該站的說明： https://ithelp.ithome.com.tw/articles/10159283
More »

和 CSS 非常相關的 Viewport

 <meta name="viewport" content=" width=device-width , initial-scale=1 , shrink-to-fit=no , user-scalable=no " /> 以上這段會放在 Html 的 Head 區塊中，以下大略說明其用意： width=device-width ==> Viewport 的寬度為 Screen 的寬度 initial-scale=1 ==> 固定畫面比例為1 user-scalable=no ==> 避免畫面被放大或縮小 shrink-to-fit=no ==> 額外解決 iOS9 無法辨認 initial-scale 的新屬性
More »

偽元素 ::before 和 ::after

這兩個偽元素一般來說在 HTML 程式裡面並不會看到，但在前台檢查時，卻可以透過 CSS 加上去，讓 DOM 增加更多不同的樣式。 特別注意： CSS 裡一定要寫一行：「 content: ' '; 」至於裡面要不要放文字，可以依設計來決定 這裡可以加的只能是一般文字和符號，不接受 <br> 這類的 HTML 語法 文字的樣式和父元素的相同，想要有不同的樣式，就需要再另外寫語法來指定 其他使用方式，可以搜尋Amos的「金魚都能懂的CSS選取器」一書，裡面會有更詳細的使用教學 【HTML】 <div class="events">      <a href="#">活動說明文字兼活動簡述文字</a> </div> 【CSS】 .events a {      font-size: 14px;     color: #333333;     display: block;     border-left: 3px solid #689c85;     padding-left: 0.5rem; }  【示意圖】 大概出現的樣式就是像下面的圖，左邊會有一條綠色線段 如果加上偽元素的 CSS 語法後： .events a:before {     content: '【特別】';     color:#ff0000;     font-weight:bold; } 在每個 a 的前面都會加上紅色、粗體的文字 前台檢查 HTML 語法時，也可以看到 a 底下出現了 ::before 的偽元素 如果用的是 ::after ，那麼文字就會出現在最後 偽元素的基本使用就介紹到這裡，下次有機會再介紹如何利用這兩個偽元素來增加更多變的樣式。
More »

利用css達到左右兩個文字之間出現RWD的連接線

【HTML】  <div class="textzoom-line">     <dd>左側文字1</dd>     <em></em>     <dt>說明文字1</dt> </div> <div class="textzoom-line">     <dd>標題2</dd>     <em></em>     <dt>標題說明文字2</dt> </div> <div class="textzoom-line">     <dd>標題3</dd>     <em></em>     <dt>不曉得要打什麼就隨便啦</dt> </div> <div class="textzoom-line">     <dd>最後一行的標題文字4</dd>     <em></em>     <dt>說明</dt> </div> 【CSS語法】 .textzoom-line { display: flex;} .textzoom-line dd, .textzoom-line em, .textzoom-line dt {flex-shrink: 0;} .textzoom-line dd { padding-right: 1em;} .textzoom-line em { border-bottom: 1px dotted #000000; height: 0.9em; flex: 2;} .textzoom-line dt { padding-left: 1em; text-align: right;} 【說明】 就是把左文字、中間連接線、右文字用一個 te...
More »

讓邊框變成箭頭樣式（傾斜語法）

利用這個語法， 可以輕鬆在文字的下方（或右方）增加一個有質感的箭頭 【HTML 語法】   <p>Arrow Btn <strong class="arrowsBox"></strong></p> 【CSS】 .arrowsBox::before {      content: '';       border-bottom: 1px solid #f78a74; /* 下方一條線 */      border-right: 1px solid #f78a74; /* 右方一條線 */      -webkit-transform: skewX(45deg);       -ms-transform: skewX(45deg);       transform: skewX(45deg); /* 將該區塊傾斜 */      width: 50px;       height: 7px;       display: inline-block;  } 【說明】 當區塊未設定傾斜時呈現的樣式 而當區塊設定傾斜後，就可以明顯看到它變成箭頭的樣式了
More »

固定表格的每一欄 td 寬度，使其不隨內容而改變

【HTML】 <table clas="table-space"> <tr> <td>文字較少</td> <td>這一行的文字較多</td> <td>文字較少</td> </tr> </table> 【示意圖】 設定前 設定後 【CSS語法】 table.table-space { table-layout:fixed;word-break:break-all;} 一般來說，表格內的 td 會隨著內容自動拉出對等的寬度，只有一張表還沒什麼感覺，如果同時有很多張表排列下來，每個表格的欄位寬度都不同，會造成視覺上的不適，這時就可以加上語法來讓每個欄位寬度都是均分的。 不過要特別注意，表格的寬度要設定為 100%，不然感覺不出效果。
More »

利用 flex 讓寬度自動配合內容

【HTML】  <section>   <h2>flex-direction: row</h2>   <div class="flex-container">     <div class="flex-item f1">內容 A</div>     <div class="flex-item f2">內容 B</div>     <div class="flex-item f3">內容 C</div>     <div class="flex-item f4">內容 D</div>     <div class="flex-item f1">內容 AA</div>     <div class="flex-item f2">內容 BB</div>     <div class="flex-item f3">內容 CC</div>     <div class="flex-item f4">內容 DD</div>     <div class="flex-item f1">內容 AAA</div>     <div class="flex-item f2">內容 BBB</div>     <div class="flex-item f3">內容 CCC</div>     <div class="flex-item f4">內容 DDD</div>     <div class="flex-item f1">內容 AAAA</div>     <div class="flex-item f2">內容...
More »

在文字底下加底線色塊（像螢光筆畫重點線）

原本在我自己的blog中有加入這個效果，現在改版就不再使用 可以看一下最下方的示意圖 【HTML】 <div>     <p><strong>文字</strong></p> </div>  【CSS語法】 div p strong { background-image: linear-gradient(90deg, #dbc477 0%, #dbc477 50%, rgba(219, 196, 119, 1) 50%, rgba(219, 196, 119, 1) 100%);     background-size: 200% 0.5em;     background-position: 100% bottom;     background-repeat: no-repeat;} 【說明】 這裡主要是在文字底下加入背景色，並透過「透明底色」+「有顏色底色」的漸層設定，來達到像是底線色塊的效果，就像是用螢光筆畫重點線的感覺。 顏色的色碼就請自行更換，另外想要修改底線的高度和大小，可以從 background-position 和 background-size 這兩個地方下手。 【示意圖】
More »

讓超連結功能失效，但仍有超連結的HTML語法

【CSS】  a {pointer-events:none;} 【說明】 此設定會讓全站的超連結 a 都無法點選，不論連結路徑有沒有設定、或是設定 # 只是單純讓連結功能失效，所以 HTML 中仍是可以查看到該超連結的連結路徑，Google 爬蟲仍是可以抓得到喔！ 另外因為連結功能失效，滑鼠移到該超連結就不會顯示手指頭的樣式，如果想要讓滑鼠也變樣式，可以加上 cursor:default; 這個語法，或是指定其他滑鼠游標樣式 滑鼠游標樣式可以參考該文章： http://www.flycan.com/article/css/css-cursor-209.html
More »

網站內嵌入背景音樂

參考來源 http://www.pcnet.idv.tw/pcnet/html/12.htm 2022 備註： Google Chrome 已開始不支援背景音樂+自動播放的功能，變成一定要顯露出播放器的面板讓使用者自行點選「播放」 雖然是好意不想讓使用者浪費瀏量，但相對的就沒辦法製作出「專屬網頁」的感覺
More »

多張img圖片產生間距問題

【Html代碼】 <div class="f0">      <img src="images/1.png" >      <img src="images/2.png" >      <img src="images/3.png" > </div> 【解决方法】 方法一： img 設成 block，但這樣會呈現一行一張圖 方法二： 刪除同一行img之間的空格，使img語法都在同一行，並且img與img之間沒有空格，如果是wordpress裡本身就有針對 img 設定間距，可以再加上 img+img {margin:0; padding:0;} （若有兩張以上的相連圖片，第二張圖的間距為0，邊距為0）
More »

各式 HTML 符號一覽

41389 ＃ 41390 ＆ 41391 ＊ 41392 ※ 41393 § 41394 〃 41395 ○ 41396 ● 41397 △ 41398 ▲ 41399 ◎ 41400 ☆ 41401 ★ 41402 ◇ 41403 ◆ 41414 □ 41405 ■ 41406 ▽ 41407 ▼ 41408 ㊣ 41409 ℅ 41428 √ 41429 ＜ 41430 ＞ 41431 ＝ 41432 ≦ 41433 ≧ 41434 ≠ 41435 ∞ 41436 ≒ 41437 ≡ 41443 ～ 41444 ∩ 41445 ∪ 41446 ⊥ 41447 ∠ 41448 ∟ 41449 ⊿ 41450 ㏒ 41451 ㏑ 41452 ∫ 41453 ∮ 41454 ∵ 41455 ∴ 41456 ♀ 41457 ♂ 41458 ⊕ 41459 ⊙ 41460 ↑ 41461 ↓ 41462 ← 41463 → 41464 ↖ 41465 ↗ 41466 ↙ 41467 ↘ ★=2605　☼=263c　♥=2665　♠=2660　♨=2668 ♪=266a　♫=266b　☺=263a　♣=2663　☎=260e ☜=261c　◈=25c8　▒=2592　◐=25d0　☆=2606 ♀=2640　♂=2642　〒=3012　∩=2229　〃=3003 △=25b3　▲=25b2　▽=25bd　▼=25bc　□=25a1 ■=25a0　℅=2105　￡=ffe1　￠=ffe0　⊙=2299 █=2588　℃=2103　℉=2109　∮=222e　Θ=0398 ╭=256d　╮=256e　╰=2570　╯=256f　〥=0325 ◢=25e2　◣=25e3　◤=25e4　◥=25e5
More »