第 3 行使用 8 個空白字元, 第 4 行使用 2 個 tab 字元

CSS 設定: letter-spacing:0.1em, tab-size:4

;        1         2         3         4
;234567890123456789012345678901234567890
        .RSECT
                .ORG    20H
;234567890123456789012345678901234567890

想要取消繼承來的 CSS 設定? 這種想法有點瘋狂! 這原本是不會出現的. 因為絶大部份的狀況下, 我們總是可以精細的調整 CSS 的 Selector, 來達成區分 CSS 的作用範圍. 除非... CSS 的繼承來源你動不了. 又或者像是我在 "CSS: Double Strikeout 雙刪除線" 這一篇貼文裡遇到的狀況: 想要在同一個頁面展示二種雙刪除線的 CSS 設定效果 (不動用 <iframe> tag). 這個時候正是本篇的主角 all: revert 這種另類 CSS 大展身手的時候.

前情提要

首先, 狀況是我原本有一套雙刪除線的 CSS 設定套用在所有貼文裡. 這套雙刪除線作法是: 設定 <del> tag 的 border-top, 並向下位移此 <del> tag 的位置, 然後再用一個 <span> tag 把文字位置移回來.

這套雙刪除線我用的 CSS Selector 是:

前言

今天心血來潮, 用 Google 查了如何在網頁中敘述按鍵組合. 結果意外在 stackoverflow 上看到這組漂亮的按鍵 CSS, 就順手記錄下來.

用法

使用 <kbd> tag 將按鍵文字括住即可. 例如:

• <kbd>Ctrl</kbd> 就變成 Ctrl
• <kbd>Shift</kbd> 就變成 Shift

如果按鍵為圖示, 或者還想加入代表該按鍵的圖示, 則以 HTML 格式插入代表該圖示 unicode 編碼, 或是直接插入該 unicode 字元均可. 例如:

前言

這二天在整理一個系統前端時, 發現需要一個可拉動位置的彈出視窗. 最初一直卡在拉動時移動量非常大. 網路上貼的例子雖然都可以正常動作, 可是都沒有明確的說明重點, 套到自己的程式時就是不正常. 最後經過大半天的測試修正, 總算找到問題點, 搞定! 故特記下一點心得.

HTML 文件

這是前端系統的 HTML 框架. 只寫到 myDiv 這一層, 前端 JS 程式執行了之後 myDiv 裡會再填入一個輸入用的表格 (form). 完成之後, 我希望可拉動的部份就是整個輸入表格 (含 myDiv).

<div id='pop' class="msgDiv ui-overlay">
        <div id='myDiv'></div>
</div>

本篇來源

這一篇是 High Performance Web Sites 的作者 Steve Souders 在 2009 年寫的一篇部落格, 我在 2014 年時研究網站效能時找到的. 原本只記下 URL, 但是隔年回頭查閱時發現圖片都不見了, 幾經辛苦查找, 終於找到有圖片的轉載, 於是複製了圖片, 並把原部落格的整份文章也複製下來作為備份 (原備份貼文時間戳記是 2015-10-08 12:06:56)

今日得空, 便重新整理翻譯, 也分享給大家. 本篇雖然有點久遠 (09~21 有 12 年之久了). 但所陳述的大部份依然是正確無誤. 現下 MS IE (至 IE11) 已經沒了後續的更新, 彼時 MS 要大家都改用 Win10 和 Edge. 現在更是連後繼的 MS Edge 也放棄了原有的核心轉向使用 Chromium 核心了.

原文出處 https://www.stevesouders.com/blog/2009/04/09/dont-use-import/

改造 pixnet 部落格

十二月初小空閒了幾天, 把我的 pixnet 部落格小小的改造了一下. 順便把以前改的和這一次更動的部份記錄一下作為備忘.

整體來說大概完成了以下幾樣工作:

1. 把太過老舊 (IE) 又不合標準的 CSS 設定拿掉.
   

pseudo-class vs pseudo-element

CSS v3 之前 (CSS v1, CSS v2) 沒有在語法上明確的區分 pseudo-class 和 pseudo-element 之間的不同. 二個都是以單一個 : 字元開頭.

但 CSS v3 的語法有明確的區分 pseudo-class 和 pseudo-element. 不過現行的 browser 為了相容性的原故並沒有嚴格區分此二者的語法.

• pseudo-class 偽類別: 以單一個 : 字元開頭.
  

前言

一開始, 你或許會以為我瘋了: 沒事幹嘛硬要用 flex 來做原本 <table> 做的事. 但是如果你想要弄一個可以自動依畫面寬度 (或設備的寬度) 彈性調整的表格模組; 或者你也寫過微信小程序, 那你肯定就不會那麼說了. 以微信小程序來說: <table> <tr> <th> <td> ... 這些 HTML tag 在小程序中都無法正常展現在畫面上. 唯一可用的就只有一種 tag 叫做 <view>. 即使我們強制把這些 HTML tag 的 CSS 設成:

table   { display: table }
tr      { display: table-row }
th, td  { display: table-cell }

也只能展現原本的沒有 rowspan 和 colspan 的狀況. 無奈之下, 我們只好死馬當活馬醫.

前言

最近經常用到 flex box, 但又常常看完把問題解決了, 過幾天要用時又忘了. 雖然網路上也有其他人整理的, 但總是這篇少這個, 那篇又有些設定沒說清楚, 最慘的是有些還弄錯了, 最後只好自己花時間整理.

目前相容性較高的 flex 語法大約是依據 2012 年的 "CSS Flexible Box Layout Module W3C Candidate Recommendation" 這一份文件. 比這個新的文件當然還有好幾份, 但是當中大部份的新設定目前 (2020/03) 幾乎都只有 1 個 browser 支援 (FireFox, 一小部份功能 Chrome 也有支援). 因此, 這裡還是以 2012 版的功能為主, 至少絕大部份 browser 都支援的, 用戶端不至於出現大問題.

flex 快速設定

快速設定: item 橫著排, 只要一行. (由左至右, 由上至下安置)

在網頁中使用 Font Awesome 加一些圖形字元 (icon) 大概很多人都會: 下載 font awesome 提供的壓縮檔 (內含 fonts, CSS ...), 並放到 web server 上, 然後在網頁的前頭加上 <link> tag 來下載就完成了必要的準備工作.

<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />

或者是直接使用 font awesome 提供的 cdn 連結也行.

今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 W3School 卻發現 CSS 中沒有雙刪除線這東東...

於是又花了半天, 好不容易才試出來. 這種作法有幾個好處:

1. 支援跨多行的刪除線, 也可以在項目列表中使用. (我在 Google 中找到好多不同的作法, 都是不支援跨行, 或者沒辦法在 <ul><li> 和 <ol><li> 底下使用的).
2. 利用原本 <del> tag 的功效, 即使用 CSS 設定失效時, 依然可以有單刪除線.
3. 刪除線不因字體大小而徧移位置.
4. 刪除的部份為一個整體, 不會因刪除內容有上標字或下標字而分段 (高低不同).

下例中的 .article-content-inner 是因為要在痞客邦中使用才加上去的. 第 22 行是使用的例子. (用 <del> 和 <span class='del'> 把要刪除的文字括住即可)

正常狀況下網頁中的 <sub> 和 <sup> 應該都是可以正確顯示為上標字及下標字. 不過偶而也會有不正常的時候, 例如: 痞客邦部落格的手機模式頁面, 預設的樣式不小心就把 <sub> 和 <sup> 的字高和其他所有的元素都設成一樣了, 所以就看不出上下標字了.

上下標字最基本的樣式設定是:

• 把字型大小 (font-size) 縮小一些, 一般的字型大小下設成 65% ~ 70% 應該都是可以接受的.
• 再來是文字的垂直位置 (vertical-align), 上標字應該用 "super", 下標字應該用 "sub".
• 還有一個常常會被遺漏的, 行高 (line-height). 由於行中有上下標字時瀏覽器會動態的更動那一行的行高, 所以文章段落看起來就會有一組行距看起來和其他的不一樣. 要避免這一個狀況只要把上下標字的行高設成 0 就可以了.

下面這一段是我加在自己部落格的樣式檔中. (裡面的 !important 是為了要強制覆蓋掉痞客邦預設的設定)

參考手冊:

設定 CSS, 總會要查一下手冊, 下面列的是個人經常參考的 CSS 手冊及標準文件

• W3Scholl 教學網站的 CSS 參考
• mozilla 的 CSS 參考手冊
• IE 的 CSS 參考手冊 (微軟放棄它了, 已經轉向 mozilla)
• W3C CSS Level 1 標準文件
• W3C CSS Level 2.1 標準文件
• W3C CSS Selectors 標準文件(Level 3, 20181106)
• W3C CSS Selectors 草案文件 (Level 4)
• W3C CSS Colors Level 3 標準文件

HTML CSS 的語法結構:

網頁作者的設定是 CSS style 中最重要的部份, 網頁作者可以運用的 CSS 設定有多種來源:

1. inline style
2. embedded stylesheet
3. included stylesheet

修飾設定:

這些 CSS 設定的基礎是修飾設定: 一個 CSS 屬性和它的設定值, 中間以冒號 : 接連起來, 例如: font-size : 1.2em. 這三者之間可以任意加入空白, 以提高可讀性. 但是屬性的名稱和每一種屬性的可以接受的設定值只能依照 CSS 的標準文件來 (或者更嚴格的說只能依照 CSS 的標準文件和各家 browser 實作的交集部份來設定.)

自己寫的網頁掛在別的網頁框架上的時候 (如部落格網站...), 或者是自己用的 CSS 設定的列表一長, 偶而會有樣式跑掉了的狀況發生, 但常常不是很容易找出到底是被哪一條 (或者是哪幾條) css rule 蓋掉.

下面是如何用最簡單的工具: browser 內建的除錯工具來找出問題所在: 不必特別設定什麼或安裝什麼外掛, 只要按 F12 就對了:

IE 11 按下 F12 之後, 跳出來的除錯畫面如下, 它可能併在和原本的頁面的下方, 你可以按下黑色 Menu Bar 右手邊倒數第二個的 取消釘選 (Ctrl+P) 把它和原始的 IE 頁面分離開來:

快速參考

常見的 CSS(v1) selector 設定套用的次序如下:

<style type="text/css">
  div       { color: black ; ... }  /*       1st level */
  .nClass   { color: green ; ... }  /* +this 2nd level */
  #nId      { color: blue  ; ... }  /* +this 3rd level */
  ...
</style>
  ...
<div style="color: red; ... "><!--  /* +this 4th level */ -->

CSS 規範上說: stylesheet 的來源有 user agent, author 及 user 等三種. user agent 就是我們用的 browser 指的是 browser 的預設值; author 是作者的意思, 指的是網頁的作者在網頁上所使用的 stylesheet; 而 user 就是我們, 指的是我們在 browser 中的個人用的 stylesheet 設定. 而套用的次序是:

以往寫網頁都是把 CSS Style 在 <head></head> 區段中載入, 今天發現在 <body></body> 區段中載入也是可以的.

另外如果不是要載入 CSS 檔, 而是要把 CSS Style 插入在 <body></body> 區段中, 則需要用 <div></div> 區段把 <style></style> 區段包住.

<head>
...
</head>
<body>
...
<!-- 可以在 <body></body> 區段中另外再載入 CSS 檔 -->
<link rel="stylesheet" href="mystyle.css" />
...
<div>
<style type="text/css">
/* local style sheet 要放在 <div></div> 區段中 */
.alt0 { background-color:#FCFCFC; }
.alt1 { background-color:#E8E8E8; }
...
</style>
</div>
...
</body>