iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
自我挑戰組

從零開始自學HTML/CSS網頁設計系列 第 14

CSS的屬性介紹

  • 分享至 

  • xImage
  •  
  • 文字的大小
    大家一定很好奇,為什麼在HTML檔案裡插入h標籤和p標籤時,文字大小會隨著標籤等級而改變,這是因為瀏覽器預設了他們的font-size值,如下圖所示:
    https://ithelp.ithome.com.tw/upload/images/20220927/20152190DfcFV6zzKK.png
  • CSS的註解
    可以加入註解來辨識是在HTML的哪個部份加上裝飾的:
/* 標題 */
h1{
    font-size: 16px;
    color: blue;
}
  • 文字的顏色
    在昨天的文章裡,color屬性值是以green、black、purple這種顏色單詞來指定,但其實更常見的是輸入色碼。色碼又分成兩種:
  1. 十進位指定法
    RGB的值有0~255個,在開頭輸入rgb並以逗號區分RGB三種值,如下範例:
選擇器 {color: rgb(89, 13, 108)}

其中89是R,13是G,108是B。

  1. 十六進位指定法
    使用0~9和a~f共同表示的字串色碼,依序以兩位數的數字來指定RGB三色的強弱,開頭並加上#,如下範例:
選擇器 {color: #345a6f; }

其中34是R,5a是G,6f是B。

Tips:如果不知道想指定的顏色的色碼,可以將游標移到值,然後按下Ctrl+E,就能啟動以下功能:
https://ithelp.ithome.com.tw/upload/images/20220927/20152190YMnFP822LL.png

  • 文字的對齊方式
    希望文字可以置中或向右對齊的話,可以使用text-align屬性:
    https://ithelp.ithome.com.tw/upload/images/20220927/2015219053zdtXDa3k.png
/*小標題*/
h2{
   text-align: center;
}
  • 加入文字的邊框
    想要在文字加上邊框時,可以使用border相關屬性:
h3{
   border-left-style: solid;
   border-left-width: 6px;
   border-left-color: #345a6f;
}

border-style:
https://ithelp.ithome.com.tw/upload/images/20220927/20152190wMkGma4cs4.png
border-style可以指定的值有:none/solid/double/dotted/dashed/groove/ridge/inset/outside
https://ithelp.ithome.com.tw/upload/images/20220927/20152190r5FPfyazRt.png
border-width:
https://ithelp.ithome.com.tw/upload/images/20220927/20152190g0XvYMQP81.png
border-color:
https://ithelp.ithome.com.tw/upload/images/20220927/20152190xbqqB37vvv.png
簡寫屬性:

h3{
   border-left: solid 6px #345a6f;
}

  • 設定網站背景顏色
    想要改變網站背景顏色時,可以利用background-color屬性,並以色碼方式指定:
body{
     background-color: #345a6f;
}

上一篇
建立CSS檔案
下一篇
class屬性與id屬性指定CSS的方法
系列文
從零開始自學HTML/CSS網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言