CSS 簡介

HTML就像是個水泥建築，而真正裝潢的就得交給CSS。然而，裝潢這門事，其實有時也可以直接以HTML的屬性辦到。例如上一章介紹的type屬性。
在這一章節中，將學習如何在HTML中加入CSS，以便後面章節能更方便使用。

直接以屬性形式加入

對於簡易的CSS修飾，可以直接利用style屬性加入html標籤中。(以下的程式碼寫於<body>與</body>之內。)

style="color:green;"

style="background-color:white;"

style="color:green; background-color:white;"

行1：color可以指定「文字」上色
行2：background-color可以指定「背景」上色
行3：sytle內的css樣式，可以如此方式結合
color：顏色表示參考

寫入<head>與</head>之內

<head>

<style type="text/css">

#id1
{

color:green;

}

#id2
{

background-color:white;

}

.class1
{

color:green; background-color:white;

}

</style>

</head>

<body>

<p
id="id1"
>《紅樓夢》，原名《石頭記》，中國古典長篇章回小說，是中國四大小說名著之一。</p>

<p
id="id2"
>《紅樓夢》主要描寫一個美好世界的興起、發展，和最後無可避免的悲劇性幻滅。</p>

<p
class="class1"
>小說創造了兩個對比鮮明的世界~略~即第5回賈寶玉所夢見「太虛幻境」的人間投影。</p>

</body>

行2：CSS可以直接寫入<style type="text/css">與</style>之內。
行3：利用「#」與行15的「id=""」做對應。(行6及行16亦是如此)。
行9：利用「.」與行17的「class=""」做對應。
id：id通常只用來修飾唯一一個元素，即不會有兩個元素共用一個id值。
class：class可以一次修飾多個元素，即不同元素也可共有同一個class值。
同一個html標籤內可以同時有id屬性、class屬性、甚至是style屬性。

《紅樓夢》，原名《石頭記》，中國古典長篇章回小說，是中國四大小說名著之一。

《紅樓夢》主要描寫一個美好世界的興起、發展，和最後無可避免的悲劇性幻滅。

小說創造了兩個對比鮮明的世界，一為大觀園以外的現實世界，一為大觀園的理想世界，即第5回賈寶玉所夢見「太虛幻境」的人間投影。

將CSS另存新檔

行2：直接將css內容存成「.css」檔並用<link>引入。檔案路徑參考

<head>

你的css檔

</head>

< 前一節下一節 >