DIV CSS 佈局教程網

1.先編寫如下文本文檔，存成文件abc.XML

<?XML-stylesheet type="text/css" href="abc.CSS"?>
<?XML version="1.0" ?>
<!--File Name:Inventory.XML-->
<INVENTORY>
<BOOK>
<TITLE>The Adventures of Huckleberry
Finn</TITLE>
<AUTHOR>Mark Twain</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>298</PAGES>
<PRICE>$5.49</PRICE>
</BOOK>
<BOOK>
<TITLE>Leaves of Grass</TITLE>
<AUTHOR>Walt Whitman</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>462</PAGES>
<PRICE>$7.75</PRICE>
</BOOK>
<BOOK>
<TITLE>The Legend of Sleepy Hollow</TITLE>
<AUTHOR>Washington Irving</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>98</PAGES>
<PRICE>$2.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Marble Faun</TITLE>
<AUTHOR>NathanIEl Hawthorne</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>473</PAGES>
<PRICE>$10.95</PRICE>
</BOOK>
<BOOK>
<TITLE>Moby_Dick</TITLE>
<AUTHOR>Herman Melville</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>724</PAGES>
<PRICE>$9.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Portrait of a Lady</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>256</PAGES>
<PRICE>$4.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Scarlet Letter</TITLE>
<AUTHOR>NathanIEl Hawthorne</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>253</PAGES>
<PRICE>$4.25</PRICE>
</BOOK>
<BOOK>
<TITLE>The Turn of the Screw</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>384</PAGES>
<PRICE>$3.35</PRICE>
</BOOK>
</INVENTORY>

-------------------------------------------------------------------------------------------------------

2.編寫如下文本文檔，存成abc.CSS文件。和上述abc.XML存放在同一文件夾。

/*File Name:abc.CSS */
BOOK
{display:block;
margin－top:12pt;
font－size:10pt}
TITLE
{font－style:italic}
AUTHOR
{font－weight:bold}

--------------------------------------------------------------------------------------------------------

3.用浏覽器打開abc.XML文件，就變成下面的樣子：

-------------------------------------------------------------------------------------------------------- 4.解釋該CSS文件的功能是： 每一個BOOK 元素之間以12 Points 的空間來顯示（ margin－top:12pt），並在元素的前後放置一個換行（display:block），並且使用10 Points（font－size:10pt）的字體來顯示元素。
 以斜體方式顯示每一個TITLE 元素（font－style:italic）：
以粗體方式顯示每一個AUTHOR 元素（font－weight:bold）：