CSS介紹
CSS=層疊樣式表（Cascading Style Sheets）HTML表達結構，CSS表達樣式
樣式和內容/結構是分離的
背景樣式
兩種效果：1）純色
2）圖像
整個背景設置一個樣式
<body style="background-color:yellow;">
RGB顏色：
#FF0000
rgb(255,255,0)
rgba(255,255,0,0~1)
style="background-image:url(symz00.jpg);background-repeat:no-repeat"
style="background-image:url(symz00.jpg);background-repeat:repeat-x"
style="background-image:url(symz00.jpg);background-repeat:repeat-y"
style="background-image:url(symz00.jpg);background-repeat:no-repeat;background-position:center/top/right;background-attachment:scroll/fixed"
課程習題
題目1：在HTML文檔中，引用外部樣式表的正確位置是？
<head>部分
題目2：哪個 HTML 標籤用於定義內部樣式表？
<style>
題目3：哪個 HTML 屬性可用來定義內聯樣式？
style
題目5：如何在 CSS 文件中插入註釋？
/* this is a comment */
文本樣式
段落
<p style="color:red"><p style="text-indent:2em">
<p style="text-indent:-2em; padding:2em;">
<p style="text-indent:2em; line-height:2">
<p style="text-indent:2em; line-height:normal">
<p style="text-indent:2em; text-alignment:right/center/justify">
<p style="text-indent:2em; word-spacing:30px; letter-spacing:3px; text-transform:uppercase/lowercase/capitalize; text-decoration:underline/overline/line-through; white-space:normal/pre/pre-wrap/nowrap/pre-line; direction:rtl">
字體
<p style="text-indent:2em;font-family:serif/sans-serif/monospace/cursive/fantasy;
font-style:italic/normal/obique;
font-variant:small-caps;
font-weight: blod/300;
font-size:0.4em">
題目1：哪個 CSS 屬性可控制文本的尺寸？
font-size
題目2：在以下的 CSS 中，可使所有 <p> 元素變爲粗體的正確語法是？
C: p {font-weight:bold}
效果
<p style="text-indent:2em; text-shadow:3px 5px 5px rgba(0,255,0,0.5)"><h1 style="background-color:yellow; text-shadow:0px -1px 0px #000000, 0px 1px 3px #606060; color:#606060">INSET</h1>
<p style="text-indent:2em; text-shadow:3px 5px 5px rgba(0,255,0,0.5); outline-color:red; outline-style:solid; outline-width:thin/3/">
列表和表格
列表
<ul style="list-style--image:url(zz.png)"><ul style="list-style-type:disc/circle/square; list-style-position:inside/outside">
<li>語文</li>
<li>數學</li>
<li>物理</li>
<li>化學</li>
</ul>
表格
<table style="border:1px solid blue; border-collapse:collapse/separate; caption-side:bottom; table-layout:automatic/fixed"><caption>成績</caption>
<tr>
<th style="width:50px; height:30px; vertical-align:top; text-align:right; padding:10px">語文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
</tr>
<tr>
<th>86</th>
<th>89</th>
<th>92</th>
<th>76</th>
</tr>
框模型和定位
CSS框模型
<p style="margin:10px 50px 50px 10px;">定位
普通流、浮動、絕對定位<p style="position:relative/absolute; left:20px; bottom:-10pt">
<img src="fig/symz01.jpg" width="800" style="float:left/right/none">
樣式選擇器
<style>th {border:1px solid blue}
*.important {color:red}
</style>
<p class="important">