Tag: css

[CSS] 超連結()的狀態樣式

記錄一下超連結的(<a>)幾個狀態 css selector,相較普通元素多了”未訪問” 與 “已訪問” 的 selector a: 超連結的基本樣式。 a:link 尚未訪問過的超連結樣式。 a:visited 已訪問過的超連結樣式。 a: hover 滑鼠 hover 狀態的樣式。 a:focus 目前 focus 的超連結元素樣式。 a:active 連結被點擊當下的樣式。   參考資料: http://www.w3schools.com/cssref/sel_link.asp

[CSS] flexbox 解析,解決傳統排版的複雜問題

CSS3 的新排版方式,flexbox (目前在IE上好像還是有不少 bug….) 利用 flexbox 可以解決我們傳統排版方式遇到的許多問題。 在這篇文章中,我就不介紹 flexbox 的用法與屬性了(flexbox教學的文章網路上很多,google後應該一堆) 但我還蠻推薦這個網站: http://flexboxfroggy.com/ 花不到一個小時就可以很快上手 flexbox 排版囉! 接下來,我會簡單比較幾個複雜的案例,使用 flexbox 排版與傳統排版的差異 還記得以前在不同情況時的各種置中方法嗎? 在 flexbox 版面配置中一切都變得很容易,只要利用 justify-content 與 align-items 就可以輕易達成 選單的導覽列,我們時常使用 inline-block 去做選單的每個選項,針對選項的數量去制定寬度如( 33%、25%等),這樣日後增加選項時我們還需要去更改 CSS 的寬度設定 但在 flexbox 版面時,我們可以讓裡面的 item 自動分配寬度 如: 在寫多欄式的版面時,可能每欄的高度不同,若要使所有欄與最高欄的對齊。我們需要用一些 overflow: hidden; padding-bottom: 9999px; margin-bottom: 9999px; 這類的 CSS hack。(不乾淨的寫法。 在 flexbox,可以透過簡單 flex-grow 就可以做到相同的效果 雙邊側欄 + 中間主內容隨螢幕改變大小。 如: […]

[css] position 屬性relative、absolute、static 及 fixed 解析

css 的 position 屬性,許多剛入門的人不深入了解,容易不清楚究竟是以哪個父元素做定位,造成不良的HTML編排架構。(最差的狀況就是用了一堆 fixed…..) 這篇整理幾個範例,說明每個屬性的用法。 static: 預設定位,無法定義 top、left、bottom 與 right。 relative: 元素與 static 位置相同,可定義 top、left、bottom 與 right。(注意: 元素實際位置還是在 static的位置,非偏移過後的位置) absolute: 以上層非 static(預設定位)的父元素為定位基準。(重要: 若上層所有父元素都是預設的 static 定位,則會根據 body 定位) PS. 可以看到藍色區塊會以祖父元素(position: relative;)來做定位。 fixed: 以目前瀏覽器視窗定位,固定在瀏覽視窗的固定位置,不隨滾動捲軸拉動。 也就是很多廣告或彈出視窗的作法。 PS. 非不得已不要用,這等同於強制覆蓋住所有其他的元素及畫面。

[CSS] 水平置中與垂直置中(傳統作法)

想說把之前報過的幾個簡報整理為文章記錄一下好了XD 在 CSS 中,大家時常為了水平置中與垂直置中的問題而困擾,這篇文章整理幾個傳統解決置中的做法。 不過現在 CSS3 有 flexbox 排版與 grid 排版,幫助我們解決排版的問題,只不過還不夠普及就是了。(flexbox 在IE上還有許多bug….) 首先必須知道在 HTML 的每個元素都有預設的一個 display 屬性,詳情請查文件 如: inline: <span>、<a>、<b>、<i>…等。 inline 元素預設依據內容多寡決定寬度並可以多個並排在一行,無法設定 width、height、margin-top、margin-bottom、padding-top 及 padding-bottom。 block: <div>、<nav>、<section>、<p>、<h1>…等。 block 元素預設會佔滿父元素的100%並且換行, inline-block: 可以多個並排在一行,且可以設定 block 的所有 CSS 屬性。(引述以下 Vexed Blog:就是外面是 inline ,裡面是 block 。) flex: CSS3 的一種排版方式,請見此文章。 其他: 剩下的其他屬性相比較不常見,有用到再自己看囉! 接下來,我就以 inline 與 block 的水平置中及垂直置中方法來介紹(inline-block 的方法就與 inline 一樣)~ 水平置中 […]

[css] 讓過長的內容省略為….,text-overflow的用法與說明

在網頁的許多地方可能會出現較長的段落,當文字過長時可能會影響排版及 UI。 我們可以利用 css 的 text-overflow 去做一個客製化的隱藏多餘文字。 這個屬性要記得搭配 overflow: hidden; (oveflow時隱藏)與 white-space: nowrap;(瀏覽器不換行) text-overflow clip  預設值,直接將字切斷 ellipsis 將過長的地方取代為 … 例: 上面例子 <span> 標籤多了 display:inline-block;,是因為 <span> 是行內(inline)元素,並不能設定寬度,因此必須改為 display: inline-block;。 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow

[css] word-break、word-wrap(overflow-wrap) 及 white-space 的差別與用法

剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space 利用這篇釐清這幾個的用法與差別 word-break:決定如何斷行單詞。 normal 瀏覽器預設的單詞斷行,可以看到英文會以詞斷行(不會將原詞切斷),中文則是以字斷行。 break-all 讓非CJK(Chinese、Japanese、Korean)語言的文字,任意斷行(以字斷行)。 keep-all 用詞斷行。 例: word-wrap:當詞斷行後的結果 overflow時,要如何處理 normal 保持在同一行 break-word 切斷詞並換行。 PS. 設定 word-break: break-all; 就不會 overflow,因此 word-wrap 並不會起作用。 例: white-space:決定如何處理元素中的空白字元及斷行。 normal 預設連續空白時瀏覽器會忽略空白(還會省略開頭多餘的空白),只會視為一個,若 overflow 則自動換行。 nowrap 直到遇到 <br /> 之前都不換行,就算你再設定 word-wrap: break-word; 也不會換行。 pre 依原空白字元及排版顯示,overflow 仍不換行。 pre-wrap 保留原排版及空白字元,在 overflow時會自動換行 pre-line 保留原排版,會合併多餘的空白,overflow 自動換行。 PS. 詳細請看參考資料之網址 例: 參考資料: http://abgne.tw/css/css3-lab/css3-word-break.html […]

[HTML、CSS] 載入圖片失敗時,純 CSS 替代處理方法

當我們在網頁中載入外部圖片時,時常會使用 HTML 的 <img> 標籤 src 來嵌入圖片來源,這也是其中一個可以允許發送跨域請求的 HTML 標籤。 PS. 跨域請求:簡單來說就是可以載入任意網域的外部資源,因此常是 XSS 的攻擊方式之一。(這邊不多談) 若外部網域發生錯誤,圖片無法正常顯示則會產生一個醜醜的小縮圖,如以下範例: 因此若你的網站有大量外部資源圖片,就可能因為圖片載入失敗而影響排版與視覺觀感。   其實預設在 <img> 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功 onload:當圖片成功載入時觸發此事件。 onerror:當圖片載入失敗時觸發此事件。 onabort:當使用者手動中斷此圖片的載入,如:點擊瀏覽器左上角的停止載入按鈕。 我們可以透過以下的程式碼來測試以上情況所觸發的事件 PS. 在瀏覽器按下 F12,選擇主控台或 console 即可看見不同情況的輸出訊息。 因此大家可能會想,那就可以利用此事件。當圖片載入發生錯誤,我們就將 src 替換為替代圖片。 因此可寫出如以下的程式碼 <img src=”404.jpg” onerror=”this.src=’noimage.jpg’” /> 但是以上這段程式碼可能會發生無窮迴圈而無止盡執行的錯誤。 若 noimage.jpg 也發生錯誤,就會導致無止盡的替換 src ,但又無止盡的發生錯誤,造成網頁的崩潰。 以上說了這些事件,是希望大家能對事件有初步的了解及可能的應用。 再來我們進入主題,可以如何使用CSS來做取代圖片 首先我們來看 <img> 這個標籤,當讀取圖片失敗時有沒有什麼特性。 <img src=”404.jpg” alt=”圖片讀取失敗” /> 若圖片讀取失敗,會將 alt […]

[CSS] CSS 的 !important 使用

相信有寫過 CSS 的朋友都知道 CSS 的優先性: inline-style > id > class。 selector 越明確的話優先度越高,如 p.text > p 但是,如果有用過 CSS 框架(bootstrap、angular-material)的,可能就會發現有些 CSS 被設置了 !important。由於會增加後續維護困難,在平常可能比較少見。 因此我們來看一個 <p> 標籤若被設置 style、class、id 與 !important 各種不同顏色。 試著移除CSS後,可以發現優先序為:!important > inline style > id > class 由此可知,!important 會優先於其他的 selector 設定的 CSS。 因此使用大量的 !important 將會導致覆寫複雜及除錯困難,可以的話盡量少用。

[CSS] CSS3 屬性 will-change 如何使用

css3 新增了一個屬性為 will-change,這個屬性用於提示瀏覽器此元素可能有 CSS 的改變(如:transition、transform等等),讓瀏覽器可以針對 CSS 改變先做處理。 根據 mozilla 開發者文件上面有列出幾點注意事項 不要將多個元素都設上 will-change,這樣瀏覽器會嘗試優化所有元素而消耗過多的機器資源,進而使網頁變得更慢。 在適當的時機加上 will-change。若我們一開始就在 stylesheet 對元素加上 will-change ,會導致瀏覽器一直對此元素做優化而消耗資源,我們應該適時的使用 script 等方式適當的加入、移除 will-change 屬性。  若網頁已非常順暢,就不要再多加 will-change,過多的 will-change 反而會造成記憶體的消耗及衍生效能問題。 給予足夠時間預先加入 will-change 屬性。 接下來,我們來看看,什麼是在適當時機使用 will-change 屬性 錯誤用法 1: 錯誤用法2: 雖然比用法1好很多,但可想而知,大多數元素不可能無時無刻都可能改變。 錯誤用法3: 當 btn 點擊後改變透明度 比較好的用法: 適時的加入及移除 will-change 屬性 當 btn 點擊後改變透明度 你可能會問如果是想要滑鼠移至按鈕時改變呢? 你可以這樣寫 當然,除了上面 CSS 的寫法,我們也可以使用 javascript 去動態加入及移除 will-change […]