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

目前分類:CSS (7)

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

在網頁中使用 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 連結也行.

文章標籤

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

今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 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 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼