iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0

接下來我們來稍微講講CSS,他具有多種功能,用於控制網頁的外觀和樣式:

  1. 樣式化網頁元素: CSS允許您選擇HTML元素並為其定義樣式。您可以指定元素的顏色、字體、大小、邊距、背景等方面的外觀。
  2. 布局控制: 使用CSS,您可以控制頁面的布局。這包括定位元素、調整盒子模型屬性(如寬度和高度)以及創建多列布局等。
  3. 字體和文本控制: 您可以使用CSS來設置文本的字體、大小、顏色、行高等屬性,以及調整文本的對齊方式和間距。
  4. CSS使您能夠創建響應式網頁,以適應不同大小的屏幕和設備。通過媒體查詢和彈性布局技術,您可以根據屏幕寬度和設備特性應用不同的樣式。
  5. 背景和圖像處理: CSS允許您設置元素的背景顏色、背景圖像,以及處理圖像的尺寸、重複方式和位置。
  6. 您可以為元素添加邊框,定義其樣式、顏色和圓角。此外,CSS還支持為元素添加投影和陰影效果。
    除此之外還有許多的效果,而css除了可以使用style直接寫在html中也可以額外開啟一個文件來控制,以下是範例:
    在html中寫的:
    https://ithelp.ithome.com.tw/upload/images/20230921/20162857M6eNRYdCmc.png

可以看到div標籤中的換了顏色:
https://ithelp.ithome.com.tw/upload/images/20230921/20162857j2THPT6t1R.png

要跟另外一個文件連接需要輸入程式碼: <link rel="stylesheet" href="test.css">:
https://ithelp.ithome.com.tw/upload/images/20230921/20162857uH9WL0817O.png
https://ithelp.ithome.com.tw/upload/images/20230921/20162857mEot3bU09i.png
呈現結果:
https://ithelp.ithome.com.tw/upload/images/20230921/20162857Mu8eNrn6FW.png


上一篇
網頁學習30天 day5
下一篇
網頁學習30天 day7
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言