公告版位
從小害怕寫作文, 文筆不佳到現在, 還請各位讀者大大:
1. 發現有錯誤, 請留言告知. (或者你 '覺得' 不對也行)
2. 用字措辭不當, 請留言告知.
3. 有看沒有懂? 幫到忙也好, 幫倒忙也罷, 總之留個言吧.

目前分類:CSS (6)

瀏覽方式: 標題列表 簡短摘要

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

於是又花了半天, 好不容易才試出來.

  1. 它可以支援跨多行的刪除線, 也可以在項目列表中使用. (我在 Google 中找到好多不同的作法, 都是不支援跨行, 或者沒辦法在 <ul><li><ol><li> 底下使用的).
  2. .article-content-inner 是因為要在痞客邦中使用才加上去的.
  3. 第 24 行是使用的例子. (用 <del><span class='del'> 把要刪除的文字括住即可)
  4. 這種作法有個好處是利用原本 <del> tag 的功效, 即使用 CSS 設定失效時, 依然可以有單刪除線.
<style type='text/css'>
...
.article-content-inner span.add     { color:navy; }
.article-content-inner del {
    padding:0; margin:0;
    position: relative;
    text-decoration:none;
    display: inline;
    top: 0.8em;
    left: 0;
    border-top: 5px double red;
}
.article-content-inner del > span.del {
    padding:0; margin:0;
    position: relative;
    top: -0.8em;
    left: 0;
    width:100%;
    color: black;
}
...
</script>
<body>
<p>原來的本文<del><span class='del'>這一小段要刪除</span></del>繼續原來的本文</p>
</body>
文章標籤

MagicJackTing 發表在 痞客邦 留言(0) 人氣()

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

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

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

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

文章標籤

MagicJackTing 發表在 痞客邦 留言(1) 人氣()

參考手冊:


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

HTML CSS 的語法結構:


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

文章標籤

MagicJackTing 發表在 痞客邦 留言(0) 人氣()

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

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


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

文章標籤

MagicJackTing 發表在 痞客邦 留言(0) 人氣()

快速參考:

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

<style>
  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 */ -->
文章標籤

MagicJackTing 發表在 痞客邦 留言(0) 人氣()

以往寫網頁都是把 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 { backbround-color:#FCFCFC; }
.alt1 { background-color:#E8E8E8; }
...
</style>
</div>
...
</body>
文章標籤

MagicJackTing 發表在 痞客邦 留言(0) 人氣()

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼