iT邦幫忙

2024 iThome 鐵人賽

DAY 7
0
自我挑戰組

HTML跨平台網頁設計系列 第 7

CSS基礎入門

  • 分享至 

  • xImage
  •  

認識CSS
CSS是建立在html的基礎上,用來美化網頁、進行版面設計的語言。有了CSS的協助,對於網頁的維護更方便。
CSS3的新功能

  • 更強大的選擇器
    不需使用ID識別碼或是Class類別就能指向HTML中的特定元素較不容易出錯。
  • 視覺特效
    CSS3降低了使用的門檻,也減少了製作的困難
  • 變形、轉換和動畫
    讓讓網頁可以不在JavaScrip和flash的幫助下呈現豐富的動態效果。
  • 自訂顯示字型
    可以連接網路上的字型檔案,讓整個頁面呈現更美觀的畫面。
  • 媒體查詢
    可以針對使用者的顯示器或者裝置的不同,讓網頁能夠完美呈現在不同的平台上。
    CSS的套用方式
    行內樣式:直接在html的標籤中加入CSS的樣式設定,直接更改該元素的設定
<h1 style="color:#FF0000">標題</h1>

內部樣式表載入:在head元素中將CSS語法設定在style元素中,就可以將css樣式給該網頁使用

<head>
<style>
h1{color:#FF0000;}
</style>
</head>

如此一來想要新增或修改在style修改即可,所有套用的地方會一起改變。
外部樣式載入:也可以把CSS寫在一個外部檔案中,格式為.css,在style元素中用@import語法載入外部樣式檔。
CSS基本語法
CSS的語法結構由選擇器與宣告所組成,其中宣告包含屬性和值

選擇器{屬性:值;}

選擇器:用來決定套用的位置
宣告:在大括號之間,用:隔開。


上一篇
表格與表單
下一篇
CSS基礎入門
系列文
HTML跨平台網頁設計26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言