iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
Modern Web

訂單網頁嘗試集系列 第 8

{Day8} 小公主訂單網頁嘗試集_第八集_css初學

  • 分享至 

  • xImage
  •  

第一週手把手教學了很多基本觀念,接下來第二週要開始css的教程了!

Css主要掌控格式、美編、字體大小等等,小公主建議與html分開兩個檔案撰寫,才可更有效及清楚的閱覽程式碼,不然全部擠在一航,真的很難除錯也很難直觀地知道哪邊在寫哪個區段,廢話已經太多,就直接動手來新增一個css檔吧!

語法規則:
https://ithelp.ithome.com.tw/upload/images/20220923/20151423xMhgEYmHiy.png

選擇器:要被美化的對象,對應到class or id 等屬性
屬性+值:color:#RRGGBB(以十六進位值排列)
可參考色碼錶:https://www.toodoo.com/db/color.html
屬性+值:color:顏色名稱
屬性+值:width/ height:150px
屬性+值:width/ height:150pc
等等
每個可以拿來被規範的美編條件都有不同單位

還有很多不同功能等你探索挖掘呦!

css應用程式碼:

h1{
    color: aqua;
    width: 1500px;
}
h2{
    color: #ff330495;
}
h3{
    width: 500pc;
}

網頁呈現:
https://ithelp.ithome.com.tw/upload/images/20220923/2015142368VziYujIZ.png

小公主溫馨小提醒:
在html 裡面要在加入下面這行,才會成功連動兩個檔案ㄛ!

<link rel="stylesheet" href="style.css">

上一篇
{Day7} 小公主訂單網頁嘗試集_第七集_建立表格
下一篇
{Day9} 小公主訂單網頁嘗試集_第九集_相對位置&絕對位置
系列文
訂單網頁嘗試集30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言