俗話說人要衣裝 佛要金裝
前面講的HTML 目前就像你沒化過妝的女朋友
這時哪好意思帶出門阿
所以今天就來聊聊 HTML的化粧品 CSS
當然
妝畫的好當然就會美如畫
畫不好就像如花 ㄏㄏ
基本上就是直接定義在原有的Html的標籤內(liline)
語法:
<h1 style="CSS語法">
範例:
<html>
<body>
<h2 style="color:red">hello world</h2>
</body>
</html>
宣告在head之間(embedding)
語法:
<style>CSS樣式設定<style>
範例:
<html>
<head>
<style>
h2 {color:red}
</style>
</head>
<body>
<h2>Hello world</h2>
</body>
</html>
以外掛方式定義(Linking)
是先定義好標籤樣式，並將之存成副檔名為.css的檔案
在Html的head中加入:
一.
<link rel="stylesheet" href="小瓜.css">
二.
<style>
@import url('小瓜.css')
</style>
有兩種寫法
選擇器簡單來說就是要把東西放在對的位置上
例如:畫妝的時候總不可能用口紅畫眉毛
用眉筆塗嘴唇吧
同理 Css選擇器就是要把樣式放置在我們希望的地方
常用的就二大類
有甚麼我忽略的還請提醒喔
我們常常會設置一個類別 來套用至不同標籤
範例:
CSS 部分
.example{color:red;}
HTML 部分
<h1 class="example">hello</h1>
<h2 class="example">world</h2>
ID 就有別於 類別
ID物件只能套用一次 而且定義ID時前面要加"#"
範例:
CSS 部分
#example{color:red;}
HTML 部分
<h1 id="example">hello</h1>這時候就只有這個吃的到CSS
<h2 class="example">world</h2>這個就吃不到
那今天的畫妝課就先講到這邊
明天來聊聊JavaScript 簡稱JS 可別跟java弄混了喔(大大我之前就有弄錯過一段時間而不自知XDD
那明天見
iThome鐵人賽
看影片追技術