iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
Modern Web

從0開始系列 第 11

從0開始爬CSS - 字型、文字、清單

  • 分享至 

  • xImage
  •  

講了好多前情提要喔
直接進入美編階段


字型

  1. 字型:font-family
    系統預設為細明體或是新細明體
    https://ithelp.ithome.com.tw/upload/images/20220926/201519192u8YERdEEE.png

  2. 字母大小寫:text-transform
    總共有5種設定值,預設值、第一個字母大寫、全大寫、全小寫、全形
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919QeiAA2QkHt.png

  3. 大小:font-size
    總共有4種設定值,長度、絕對大小、相對大小、百分比
    長度:有8種的設定值,其中像素(px)最常見
    絕對大小:就像衣服一樣的size表
    相對大小:只有smaller和larger兩個設定值,都是相對值
    百分比
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919IWHrveURAq.png

  4. 斜體:font-style
    總共有3個設定值,預設值、斜體、傾斜體
    https://ithelp.ithome.com.tw/upload/images/20220926/201519196H4Nzcc55e.png

  5. 粗細:font-weight
    大概可以分成13個設定值,100~900數字越大越粗,400相當於預設值(normal),700相當於預設值加粗(bold),再來是相對值,bolder、lighter(更細)
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919Y3fBQLDLx9.png

  6. 變化:font-variant
    有2種設定值,預設值、小型大寫字
    https://ithelp.ithome.com.tw/upload/images/20220926/201519197U5AzuGNVu.png

  7. 行高:line-height
    總共有4種設定值,預設值、數字、長度、百分比
    數字:用數字設定幾倍的行距
    長度、百分比:皆與大小概念相同
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919EiLRFnbCvy.png
    一定會很奇怪吧,第三組為什麼疊在一起。因為行距的長度只用了3px


文字

比起文字,我自己的理解比較像是文章的排版

  1. 首行縮排:text-ident
    總共有2個設定值,長度、百分比
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919nwvsXTi04D.png

  2. 對齊方式:text-align
    總共有8個設定值,除了靠左、靠右、置中、左右對齊以外,還有對齊一行開頭、對齊一行結尾、對齊一行頭尾和繼承父元素對齊方式
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919NuzJmNzfHa.png

  3. 字母間距:letter-spacing
    總共2個設定值,預設值、長度
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919xcCt9t39Lt.png

  4. 文字間距:word-spacing
    又代表著單字的距離,總共是3個設定值,預設值、長度、百分比
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919AO8xTJODaL.png

  5. 空白字元:white-space
    總共有5個設定值,3種特性,分別是換行,空白,自動換行
    預設值:自動換行
    pre:換行、空白
    nowrap:都不會
    pre-wrap:換行、空白、自動換行
    pre-line:換行、自動換行
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919yLMvFEYTb8.png

  6. 陰影:text-shadow
    總共5個設定值,預設值或是 水平位移、垂直位移、模糊、色彩
    https://ithelp.ithome.com.tw/upload/images/20220926/201519198qGUCM2GMz.png

  7. 裝飾
    總共3種,他們可以任意排列組合

    • 文字裝飾線條(text-decoration-line)
      他有5個設定值,預設、底線、頂線、刪除線、閃爍
    • 文字裝飾樣式(text-decoration-style)
      他也有5個設定值,實現、雙線、點線、虛線、波浪
    • 文字裝飾色彩(text-decoration-color)
      https://ithelp.ithome.com.tw/upload/images/20220926/20151919QDBXE9v9ib.png

清單

  1. 項目符號和編號屬性(list-style-type)
    項目符號有4個設定值,編號屬性是的5大種,屬於有順序的編號
    項目符號的設定值有,實心圓點(預設)、空心圓點、實心方塊、none,假如想要其他類型,像是阿拉伯數字、羅馬數字、英文字母等都是屬於編號屬性
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919Tlg5BUxe41.png
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919O9Dq0n1Jxu.png

  2. 圖片項目符號(list-style-image)
    就是可可愛愛的圖案圖標拉
    https://ithelp.ithome.com.tw/upload/images/20220926/201519195VHARFxKWl.png

  3. 項目符號與標號位置(list-style-position)
    總共2個設定值,分為文字區塊的外部還有內部
    https://ithelp.ithome.com.tw/upload/images/20220926/20151919kvGYvEysep.png


/images/emoticon/emoticon29.gif


上一篇
從0開始爬 - CSS小入門
下一篇
從0開始爬CSS – 顏色、背景
系列文
從0開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言