導讀：Microsoft WebMatrix是一個免費的工具，可用於建立、自訂和在Internet上發布網站。
WebMatrix使您能夠輕鬆建立網站。您可以從一個開源應用程式（比如WordPress、Joomla、 DotNetNuke或Orchard）開始，WebMatrix會為您處理下載、安裝和配置這些應用程式的任務。或者您可以使用許多內建的模板自行編寫代碼，這些模板有助於您迅速上手。無論您做何選擇，WebMatrix都提供了您的網站運行所需的一切內容，包括Web伺服器、資料庫和架構。通過在您的開發案頭使用與您將在Web主機上使用的相同堆棧，將網站上線的過程變得既輕鬆又順利。
您可以從http://web.ms/webmatrix下載它。
現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.Net、SQL、資料庫等知識以及如何編寫簡單的Web應用程式。內容如下：
在第2部分，您看到了如何使用WebMatrix建立非常簡單的網頁，以及此頁面如何在多種不同瀏覽器中運行。在這一部分中，您將瞭解如何更改網頁的視覺樣式，使用階層式樣式表(CSS)技術。
這裡是您在網頁上內建的簡單電影列表：
使用階層式樣式表準備設定網頁樣式
在接下來的幾步中，您將看到更多的HTML標記，它們可用於實現超連結、網頁分區和指令碼標記等功能，您還將瞭解如何使用階層式樣式表(CSS) 編輯此網頁，設定它的外觀。最後將使用布局擷取此網頁和網站上其他網頁之間相同的內容，這樣可以更輕鬆地編輯相同內容。
使用分隔線
在HTML中，可以使用<div>標記以邏輯方式將網頁劃分為幾塊。這在您在本文後面查看樣式時尤其有用，您可以通過設定相應的div來指定網頁某個部分的樣式。
這裡是第一部分中您的網頁的HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <h1>A list of my Favorite Movies</h1> <ol> <li>Its a wonderful life</li> <li>Lord of the Rings</li> <li>The Fourth World</li> <li>The Lion King</li> </ol> </body> </html>
要做的第一件事是將包含電影的列表封裝到它自己的<div>中，如下所示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <h1>A list of my Favorite Movies</h1> <div id="movieslist"> <ul> <li>Its a wonderful life</li> <li>Lord of the Rings</li> <li>The Fourth World</li> <li>The Lion King</li> </ul> </div> </body> </html>
現在可以看到，包含電影的<ol><li>列表現在包含在<div>標記中。如果現在查看該網頁，會發現與之前沒什麼不同。這是因為<div>標記是一個邏輯分隔線。它沒有任何物理外觀。
使用超連結
您可能已經熟悉超連結–一個頁面上連結到另一個頁面的可單擊地區。儘管這些地區稱為超連結，但在HTML中它們最初稱為錨點(anchor)，因此只要您希望建立超連結，就可以使用<a>標記。
<a>（或定位）標記使<a>和</a>之間的內容可以單擊。當使用者單擊此內容時，瀏覽器將重新導向到<a>標記中使用href屬性指示的一個HREF（超引用）。
屬性在標記本身上定義，而不是在標記內定義，類似於：
<tag attribute=”attributevalue”>content</tag>
因此，要建立超連結，您可以使用這樣的文法：
<a href=”http://www.microsoft.com”>Click Here</a>
href不必是一個像上面這樣的網站，也可以是一個執行編程人員所使用的操作的JavaScript函數。一種特殊的href可在開發期間用作預留位置，這樣您可以測試超連結的樣式是否有效。為此，使用“#”字元作為href。
所以，為了將所有包含電影的<li>項轉換為超連結，我們將電影的文本封裝在<a>標記中，將HREF設定為#，類似於以下形式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <h1>A list of my Favorite Movies</h1> <div id="movieslist"> <ol> <li><a href="#">Its a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> </html>
如果運行網頁，您將看到列表上的元素將使用熟悉的超連結樣式，也就是所謂的藍色底線：
添加頁首和頁尾
將要做的下一件事是向網頁添加頁首和頁尾。您將使用Html5中提供的新<header>和<footer>標記來完成此任務。可以在w3cschools網站上瞭解HTML5的更多資訊：http://w3schools.com/html5/default.asp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <header> <h1>A list of my Favorite Movies</h1> </header> <div id="movieslist"> <ol> <li><a href="#">Its a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> <footer> This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
可以看到，它們是非常簡單的HTML代碼。
對於頁首，我們將前面建立的<h1>封裝在<header>標記中，對於頁尾，我們建立一些文本和一個超連結。
在瀏覽器中查看網頁，它現在將類似於以下介面：
除了頁尾不同，它沒有太多差異，但不用擔心，這種情況很快就會改變！
定義網頁的外觀
在前面一節中，在介紹錨點時您瞭解了屬性，屬性描述元素的行為。對於錨點，您通過指定HREF屬性定義了在單擊時發生的行為。
可以想象，您可以使用屬性指定元素的外觀，包括字型樣式、字型大小、顏色、邊框等等。
所以，舉例來說，對於我們前面在網頁上定義的<h1>（其內容為“A list of my Favorite Movies”），您可以更改它的字型和顏色如下：
<h1 style="color:blue; font-size:32; font-family:Verdana; text-decoration:underline">A list of my Favorite Movies</h1>
可以看到，<h1>標記的樣式屬性包含該樣式的定義列表。上面的標記將顏色設為藍色，將字型設定為 32，將字型系列設定為Verdana，並將文本裝飾設定為底線.
儘管這樣能很好地生效，但它並不是設定網頁樣式的最好方式。想象一下，如果您必須通過這種方式設定每個元素的樣式，將會是什麼結果。您的網頁上最終會有很多文本，減緩下載和瀏覽的速度。
幸運的是，還有另一種方式，那就是在網頁上使用樣式表。樣式表使用階層式樣式表概念來定義，其中元素上的樣式集可以由子項目繼承。舉例來說，如果您在<div>上設定了一個樣式，並且<div>具有子項目<ol>和<li>，那麼該樣式也將應用於它們，除非開發人員改寫了此樣式。w3cschools是一個瞭解CSS的好地方：http://w3schools.com/css/default.asp。
我們看一下如何在<h1>標記上定義樣式，而無需在樣式屬性上使用很多內聯代碼。
不用將所有樣式代碼放在<h1>標記本身內，我們只需要指定它的類屬性，如下所示：
<h1 class="Title">A list of my Favorite Movies</h1>
現在標記有了一個類，我們可以告訴瀏覽器為擁有此類的所有內容使用一種特定樣式。這使用CSS代碼文法來完成，類似於：
.Title { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; }
樣式“語言”包括一組以分號分隔並包含在花括弧（{..}）中的屬性。如果要將此樣式應用到一個類，該類會使用“點”文法進行定義，也就是在類名稱前添加一個點。
此代碼放在網頁頁首中的<style>標記內。您的網頁標記應該類似於：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> <style type="text/css"> .Title { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; } </style> </head> <body> <header> <h1 class="Title">A list of my Favorite Movies</h1> </header> <div id="movieslist"> <ol> <li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> <footer> This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
當運行它時，樣式將生效，您將看到以下介面：
請記住<h1>擁有一個“Title”類，所以通過設定.Title，您可以設定擁有相同類的所有元素的樣式。
當希望設定特定元素時，可以為該元素使用一個類（假設該類只有一個執行個體），或者可以使用一個id命名該元素，然後設定該id的類。如果看一下您的HTML，您將會注意到電影列表儲存在一個id為“moviesList”的<div>中。您可以通過在樣式表定義中在“moviesList”之前添加 # 來設定它的樣式，如下所示：
#movieslist{font-family: Geneva, Tahoma, sans-serif;}
這樣就定義了 <div> 的樣式，並且因為樣式表可以級聯（只需為它們提供該名稱），此div中的任何元素都將應用此樣式。所以，即使我沒有專門設定包含這些文本的<li>元素的樣式，仍然會應用該樣式：
請記住，瀏覽器預設會將<ol>列表中的<li>對象呈現為編號項。我們可以設定樣式來刪除編號項。因為這些對象位於我們稱為“movieslist”的div的內部，我們可以輕鬆訪問它們來更改其樣式。
下面是文法：
#movieslist ol { list-style: none; margin: 0; padding: 0; border: none; }
該文法表明，對於#movieslist中的每個<ol>，將樣式設定為不是列表（也即沒有項目符號）、沒有外邊距、沒有邊框、沒有內邊距。
下面是設定後的結果：
可以看到，現在沒有編號。
每個清單項目的文本儲存在一個<a>標記中，所以我們可以使用以下文法，定義#movieslist中的每個<li>標記內的每個<a>標記的外觀：
#movieslist li a { font-size: large; color: #000000; display: block; padding: 5px; }
這裡的設定不言自明，我們現在看一下運行網頁時的外觀。
以上就是WebMatrix進階教程(3)：如何?某種樣式的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
