CSS
Cascading Style Sheets
《學習目標》HTML如何套用CSS?
CSS基本格式
selector { rule }
ex: h1 {color: red;}
h1稱為「選擇器」、color: red;則為「樣式規則(color: 屬性、red; 設定值)」。
套用樣式表的三種方式
【行內宣告 Inline】
寫在HTML語法內，以sytle屬性宣告CSS。
例：<h1 style="font-family: Broadway B;border: 1px #336699 solid;">To be or not to be.</h1>
【內嵌宣告 Embedding】
在HTML文件內，以<style></style>標記來宣告，位於<head></head>標記內。
例如：
<html>
<head>
<title>Embedding宣告CSS</title>
<style type="text/css">
<!--
table, tr, td {
border: 1px solid #cccccc;
bordercolor: green;
border-collapse: collapse;
}
--!>
</style>
</head>
【連接外部樣式檔 Linking】
把CSS宣告小成一個樣式檔(ex: sample.css)，再用link把它叫進來HTML裡使用。
<html>
<head>
<title>Embedding宣告CSS</title>
<style type="text/css">
<!--
table, tr, td {
border: 1px solid #cccccc;
bordercolor: green;
border-collapse: collapse;
}
--!>
</style>
<link rel=stylesheet type="text/css" href="sample.css">
</head>
CSS選擇器
標記名稱
在標記名稱後面，以大括號做屬性設定。
例如：div { font-size: 16px; color: #00ccdd; }
font { font-size: 12px; color: blue; }
通用選擇器
使用「*」來選擇所有標記。
例如：* { font-size: 16px; color: #ff0000 ;}
class選擇器
先宣告一個CSS class，再於標記名稱內加入class屬性。
例如：
<style type="text/css">
<!--
.txt { #也可以寫成font.txt，呼叫方式不變。
font-size: 24px;
color: red;
font-family: broadway BT;
font-weight: bold;
border: 1px #
}
--!>
</style>
<font class="txt">以class選擇器套用樣式</font>
id選擇器
id可以用來辨識HTML元件，必須是唯一的。
#id名稱{ 樣式規則; }
<標記名稱 id="id名稱">
例如：
<style type="text/css">
<!--
#font_bold {
font-size: 24px;
color: red;
font-family: broadway BT;
font-weight: bold;
border: 1px #
}
--!>
</style>
<font id="font_bold">以id選擇器套用樣式</font>
屬性選擇器
參考文獻