❆初訪說明

小說心得評價

▲個人評價說明
 10:精彩逼人,瑕不掩瑜。
  9: 豐富完整,有些缺陷。
  8: 出書水準,或可推薦。
  7: 想法出奇,見仁見智。
  6: 尚且可觀,中規中矩。
  5: 平鋪直敘,淡漠無感。
  4 ↧ 一言難盡,不予評論。
   早期帖麻煩自行轉換
「推薦書單」資料夾收入以下幾種條件的書目:

1. 個人評價四星/8分起跳
2. 看到書名就想起內容
3. 主觀喜歡/欣賞
4. 耐看,能重複看


註:標題以『讀』標記者為推薦
▼原創統整類目
 ◆ 統整推薦:大陸原創小說
       推薦清單

 ◆ 綜合感言:
 ◆ 推薦書單:原創推薦
 ◆ 個帖清單:原創心得
 ◆ 撈書資訊:原創部落格
       分享、介紹

❆文章類別

❆管理後台

❆尋找舊帖

新帖┇熱帖

新訊┇留言

【CSS】Font(文字)-1/20 letter-spacing

  關於文字的設定太多了,一時間我不可能寫完整,加上我只紀錄常用到的部份,所以本帖也不可能齊全。
  於是我想了想,把這篇改成隨增隨更型的帖子好了。
  一樣,想到哪裡,碼到哪裡。
  PS.本篇是文字,範例不少大段文字,內容我隨便打打不用認真。

sup、sub(上標、下標)

▋文字上標「標籤」 <sup> 文字上標</sup> ,「效果」文字上標
▋文字下標「標籤」 <sub> 文字下標</sub> ,「效果」文字下標


letter-spacing(字元間距)
參數只有一個,letter-spacing:間隔距離值;normal、inherit、自訂 px或 em
▋字元像素pxletter-spacing:1px;字元間隔效果letter-spacing:10px;字元間隔效果
▋字母寬度emletter-spacing:0.1em;字元間隔效果letter-spacing:1em;字元間隔效果
1em不一定就是16px,全看全篇網頁設定的值,若是設19px,1em即=19px;


white-space(空白字元):段落換行
Normal:預設值,遇連續空白會縮減成僅一個空白,字句若太長會自動分成兩行。
Nowrap:遇連續空白縮減成一格,不換行。(用於適應區塊大小縮小文字
Pre:保持原貌,縮成一行,即使超出界線也不變兩行
Pre-wrap:會分行,遇連續空白不縮減。
Pre-line:會分行,遇連續空白縮減成一格。


word-wrap(句子換行):
  種屬性值:normal、break-word、initial、inherit,下列只說明較常用的break-word。
Normal:預設值,長英文字串若超過區塊寬度會直接溢出。
break-word:超過會折到第二行。
  normal:Default. Content exceeds the boundaries of its container.
        break-word:Content wraps to next line, and a word-break occurs when necessary. 


word-break(文字斷行):
  種屬性值:normal、break-all、keep-all、initial、inherit,下列只說明較常用的break-all、keep-all。
keep-all:禁止單字斷開。
  keep-all:Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.  from Microsoft > documentation > samples > word-break property
break-all中英文適用。允許從句子中的單字斷行,解決因半形字元而左右不齊行的英文句子。
  break-all:Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.  from Microsoft > documentation > samples > word-break property
可用「-」(&shy;)或「 」(&#8203;)斷行,從加入的地方切開,避免突兀。
讓 ㈠不句子溢出又能 ㈡齊行的語法:word-wrap:break-word; + word-break:break-all;


 text-indent(文字縮排、凸排)
  準備一個區塊(Div,作用=p,用於大段落),因為blogger打p會被自動切換成div,所以此處用div說明。
  ▋縮排範例text-indent: em; 被div包覆的每一段首行縮排兩個字的距離。
平行線永不相交。它可以是一項數學真理,也可以是一種令人無法逆轉勝的──平行空間。此時此刻,本該永不交會的兩個世界卻無從解釋的交疊,於是我認識了妳,妳知道我。我們熟悉,互相看得見,卻永遠碰觸不到彼此。
▋凸排範例text-indent: - 2 em; 被div包覆的每一段首行突出兩個字的距離。
還有什麼比這還慘嗎?如果是隔著世界兩端的距離,我們可以用書信、電話、網路串連起無距離的國界,甚至能用視頻隨時看見彼此動態,有各式各樣的交通工具,想見一面就出發,只是碰到面的時間長短不同罷了。身處平行的我們卻面臨窮極一生的努力也無法碰觸彼此的窘迫處境,何其殘忍。
➥凸排要設內距或外距將整段拉右 2em ↥,為了和首行向左減去的距離(-2em)抵平,否則版面會跑位
還有什麼比這還慘嗎?如果是隔著世界兩端的距離,我們可以用書信、電話、網路串連起無距離的國界,甚至能用視頻隨時看見彼此動態,有各式各樣的交通工具,想見一面就出發,只是碰到面的時間長短不同罷了。身處平行的我們卻面臨窮極一生的努力也無法碰觸彼此的窘迫處境,何其殘忍。

0 Comments:

張貼留言