快速學習html、css的經典筆記（不看後悔偶）
Ø 行距：line-height
數字行距：p{font-size:12pt;line-height:2;}//12pt*2
單位行距：p{line-height:9pt;}
比例行距：p{font-size:10pt;line-height:140%;}//10pt*140%
Ø 文字對齊
格式：text-align：left|right|center|justify
vertical-align：top|bottom|text-top|text-bottom|baseline|middle|sub|super說明：text-align屬性用於文字水平對齊，但這個屬性只用於整塊內容，如：
<HEAD>
<TITLE>vertical-align垂直對齊屬性</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
#base {vertical-align:baseline}/*此為預設值*/
#sub {vertical-align:sub; font-size:0.5em}/*設定垂直對齊方式為下標*/
#sup {vertical-align:super; font-size:0.5em}/*設定垂直對齊方式為上標*/
#top{vertical-align:top}/*設定垂直對齊方式為向上對齊*/
#t-top{vertical-align:text-top}/*設定為文字垂直向上對齊*/
#mid{vertical-align:middle}/*設定垂直對齊方式為居中對齊*/
#bot{vertical-align:bottom}/*設定垂直對齊方式為向下對齊*/
#t-bot{vertical-align:text-bottom}/*設定為文字垂直向下對齊*/
-->
</STYLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>vertical-align垂直對齊屬性的應用</FONT>
<TABLE BORDER=2 HEIGHT=200>
<TR BGCOLOR=LIGHTGREEN align=center>
<TD>設定vertical-align屬性</TD><TD>顯示結果</TD>
<TD>設定vertical-align屬性</TD><TD>顯示結果</TD></TR>
<TR>
<TD>vertical-align:sub</TD>
<TD>C+O<FONT ID=sub>2</FONT>-->CO<FONT ID=sub>2</FONT></TD>
<!--在FONT標籤內利用ID選擇符，引用sub樣式-->
<TD>vertical-align:super</TD>
<TD>a<FONT ID=sup>2</FONT>+b<FONT ID=sup>2</FONT>
=c<FONT ID=sup>2</FONT></TD>
<!--在FONT標籤內利用ID選擇符，引用sup樣式-->
</TR>
<TR>
<TD ID=top>vertical-align:top</TD>
<TD ID=top><IMG SRC="logo.gif"></TD>
<!--在TD標籤內利用ID選擇符，引用top樣式-->
<TD ID=t-top>vertical-align:text-top</TD>
<TD ID=t-top><IMG SRC="logo.gif"></TD>
<!--在TD標籤內利用ID選擇符，引用t-top樣式-->
</TR>
<TR>
<TD ID=mid>vertical-align:middle</TD>
<TD ID=mid><IMG SRC="logo.gif"></TD>
<!--在TD標籤內利用ID選擇符，引用mid樣式-->
<TD ID=base>vertical-align:baseline</TD>
<TD ID=base><IMG SRC="logo.gif"></TD>
<!--在TD標籤內利用ID選擇符，引用base樣式-->
</TR>
<TR>
<TD ID=bot>vertical-align:bottom</TD>
<TD ID=bot><IMG SRC="logogriph"></TD>
<!--在TD標籤內利用ID選擇符，引用bot樣式-->
<TD ID=t-bot>vertical-align:text-bottom</TD>
<TD ID=t-bot><IMG SRC="logo.gif"></TD>
<!--在TD標籤內利用ID選擇符，引用t-bot樣式-->
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Ø 首行縮排
text-indent:數字|百分比
<html>
<head>
<title>text-indent屬性</title>
<style type="text/css">
.indent1{text-indent:30pt}
</style>
</head>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>text-indent屬性的應用效果</font>
</center>
<font size=4 color=blue>首行不縮排效果:</font>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<font size=4 color=blue>首行縮排30pt:</font>
<p class=indent1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
l 顏色及背景
Ø 顏色屬性：color
h1{color:red}
h2{color:#000080}
Ø 背景顏色屬性：background-color （預設為透明transparent）
body{background-color:while}
h1{background-color:#000080}
Ø 背景影象屬性：background-image
格式：background-image: url(影象檔名)|none(無)
<HTML>
<HEAD>
<TITLE>background-image屬性</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
#bc-1 {background-color:blue; font-size:25pt; color:red}
#bi-1 {background-image:url(3200.jpg);}
-->
</STYLE>
</HEAD>
<BODY ID=bc-1>
<CENTER>
<FONT SIZE=5 COLOR=lightyellow>background-color屬性的應用</FONT>
<P ID=bi-1>
春望 <BR>
國破山河在，城春草木深。<BR>
感時花濺淚，恨別鳥驚心。<BR>
烽火連三月，家書抵萬金。<BR>
白頭搔更短，渾欲不勝簪。<BR>
</P>
</CENTER>
</BODY>
</HTML>
Ø 背景圖片重複屬性：background-repeat
格式：background-repeat:repeat|repeat-x|repeat-y|no-repeat
<HTML>
<HEAD>
<TITLE>background-repeat屬性</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
#bi{background-image:url(sky.jpg); background-repeat:repeat-x}
-->
</STYLE>
</HEAD>
<BODY ID=bi>
<CENTER>
<FONT SIZE=4 COLOR=blue>background-repeat屬性設定背景圖片橫向重複</FONT>
</CENTER>
</BODY>
</HTML>
Ø 固定背景圖片屬性：background-attachment
格式：backfround-attachment:scroll|fixed
<HTML>
<HEAD>
<TITLE>background-attachment屬性</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
#bi {background-image:url(river.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
font-size:14pt; color:white}
-->
</STYLE>
</HEAD>
<BODY ID=bi>
<CENTER>
<FONT SIZE=3 COLOR=yellow>
background-attachment固定背景圖片屬性的應用
</FONT>
</CENTER>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</BODY>
</HTML>
Ø 背景圖片位置屬性
格式：background-position:<百分比>|<長度>|<關鍵字>
按百分比定位 格式：background-position:x% y%
按長度定位 格式：background-position:x y
按關鍵字定位 格式：background-position: top|center|bottom left|center|right
p{background-position:70% 50%;repeat-y;url(..\pic\sky.jpg)}
p{background-position:70px 50px;url(..\pic\sky.jpg)}
p{background-position:right top;url(..\pic\sky.jpg)}
Ø background屬性
格式：{background:背景顏色||背景影象||背景重複||背景附件||背景位置}
body{background:#000080 url(tree.jpg) no-repeat bottom right}
l 列表樣式
格式：list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none;
list-style-image: url(影象檔名);
list-style-position: inside|outside;
list-style 屬性：{list-style: type值||image 值 ||position 值 }
.item{list-style:url(IMAGES/ITEM.GIF) inside}
l 美化網頁與超連結的設定
Ø 網頁連結屬性anchor語法
|
a:link |
尚未連結過的超連結文字的樣式 |
|
a:visited |
已連結過的超連結文字的樣式 |
|
a:active |
當滑鼠單擊超鏈後文字所顯示的樣式 |
|
a:hover |
當滑鼠拖動到超鏈上文字所顯示的樣式 |
|
a |
在此屬性內設定樣式時，上述4種將同時引用此值 |