我們平時用於撰寫程式的整合開發環境 (IDE) 或文字編輯器上, 基本上都有一個設定: 設定一個水平定位字元 (HT, ASCII code 0x09) 相當於幾個空白字元 (SP, ASCII code 0x20), 讓我們可以依自己的需求 (或喜好) 調整程式碼的顯示.
- Nov 13 Wed 2024 01:06
-
CSS: 關於 tab-size 設定
- Nov 12 Tue 2024 21:32
-
Chrome 錯誤回報: CSS 設定項 tab-size 的 bug
第 3 行使用 8 個空白字元, 第 4 行使用 2 個 tab 字元
CSS 設定: letter-spacing:0.1em, tab-size:4
CSS 設定: letter-spacing:0.1em, tab-size:4
; 1 2 3 4
;234567890123456789012345678901234567890
.RSECT
.ORG 20H
;234567890123456789012345678901234567890
- Sep 28 Sat 2024 13:44
-
CSS: 取消繼承來的 CSS 設定
想要取消繼承來的 CSS 設定? 這種想法有點瘋狂! 這原本是不會出現的. 因為絶大部份的狀況下, 我們總是可以精細的調整 CSS 的 Selector, 來達成區分 CSS 的作用範圍. 除非... CSS 的繼承來源你動不了. 又或者像是我在 "CSS: Double Strikeout 雙刪除線" 這一篇貼文裡遇到的狀況: 想要在同一個頁面展示二種雙刪除線的 CSS 設定效果 (不動用 <iframe> tag). 這個時候正是本篇的主角 all: revert 這種另類 CSS 大展身手的時候.
- Apr 26 Tue 2022 23:42
-
CSS: 漂亮的按鍵用 CSS
- Apr 11 Mon 2022 21:29
-
CSS: 可拉動+可調整大小的視窗
前言
這二天在整理一個系統前端時, 發現需要一個可拉動位置的彈出視窗. 最初一直卡在拉動時移動量非常大. 網路上貼的例子雖然都可以正常動作, 可是都沒有明確的說明重點, 套到自己的程式時就是不正常. 最後經過大半天的測試修正, 總算找到問題點, 搞定! 故特記下一點心得.
這二天在整理一個系統前端時, 發現需要一個可拉動位置的彈出視窗. 最初一直卡在拉動時移動量非常大. 網路上貼的例子雖然都可以正常動作, 可是都沒有明確的說明重點, 套到自己的程式時就是不正常. 最後經過大半天的測試修正, 總算找到問題點, 搞定! 故特記下一點心得.
- Feb 28 Mon 2022 03:35
-
CSS: don't use @import [備份]
本篇來源
這一篇是 High Performance Web Sites 的作者 Steve Souders 在 2009 年寫的一篇部落格, 我在 2014 年時研究網站效能時找到的. 原本只記下 URL, 但是隔年回頭查閱時發現圖片都不見了, 幾經辛苦查找, 終於找到有圖片的轉載, 於是複製了圖片, 並把原部落格的整份文章也複製下來作為備份 (原備份貼文時間戳記是 2015-10-08 12:06:56)
- Dec 28 Tue 2021 01:21
-
CSS: CSS 小技巧--以改造 pixnet 部落格為例
改造 pixnet 部落格
十二月初小空閒了幾天, 把我的 pixnet 部落格小小的改造了一下. 順便把以前改的和這一次更動的部份記錄一下作為備忘.
整體來說大概完成了以下幾樣工作:
- Dec 17 Fri 2021 08:25
-
CSS: 關於 pseudo-class :not()
pseudo-class vs pseudo-element
CSS v3 之前 (CSS v1, CSS v2) 沒有在語法上明確的區分 pseudo-class 和 pseudo-element 之間的不同. 二個都是以單一個 : 字元開頭.
CSS v3 之前 (CSS v1, CSS v2) 沒有在語法上明確的區分 pseudo-class 和 pseudo-element 之間的不同. 二個都是以單一個 : 字元開頭.
- Apr 06 Mon 2020 05:41
-
CSS: 如何使用 Flex 完成 table 效果
前言
一開始, 你或許會以為我瘋了: 沒事幹嘛硬要用 flex 來做原本 <table> 做的事. 但是如果你想要弄一個可以自動依畫面寬度 (或設備的寬度) 彈性調整的表格模組; 或者你也寫過微信小程序, 那你肯定就不會那麼說了. 以微信小程序來說: <table> <tr> <th> <td> ... 這些 HTML tag 在小程序中都無法正常展現在畫面上. 唯一可用的就只有一種 tag 叫做 <view>. 即使我們強制把這些 HTML tag 的 CSS 設成:
- Mar 25 Wed 2020 00:09
-
CSS: Flex 快速設定及詳解
前言
最近經常用到 flex box, 但又常常看完把問題解決了, 過幾天要用時又忘了. 雖然網路上也有其他人整理的, 但總是這篇少這個, 那篇又有些設定沒說清楚, 最慘的是有些還弄錯了, 最後只好自己花時間整理.
目前相容性較高的 flex 語法大約是依據 2012 年的 "CSS Flexible Box Layout Module W3C Candidate Recommendation" 這一份文件. 比這個新的文件當然還有好幾份, 但是當中大部份的新設定目前 (2020/03) 幾乎都只有 1 個 browser 支援 (FireFox, 一小部份功能 Chrome 也有支援). 因此, 這裡還是以 2012 版的功能為主, 至少絕大部份 browser 都支援的, 用戶端不至於出現大問題.
- Jan 02 Wed 2019 12:51
-
CSS: 在網頁裡內嵌少量圖型字元的字型
在網頁中使用 Font Awesome 加一些圖形字元 (icon) 大概很多人都會: 下載 font awesome 提供的壓縮檔 (內含 fonts, CSS ...), 並放到 web server 上, 然後在網頁的前頭加上 <link> tag 來下載就完成了必要的準備工作.
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
- Jul 18 Mon 2016 17:26
-
CSS: Double Strikeout 雙刪除線
今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 W3School 卻發現 CSS 中沒有雙刪除線這東東...
