Rumah > Artikel > hujung hadapan web > WebMatrix进阶教程(3):如何实现某种样式
Csdn.NET近期将发布微软全新Web开发工具WebMatrix的进阶教程,帮助开发人员人士认识这一号称微软史上最强的Web开发工具。继上次发布的如何安装和使用微软全新开发工具WebMatrix 和 教您如何使用WebMatrix创建第一个网页 后。本期将继续为您介绍接下来的教程。
导读: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中,可以使用dc6dce4a544fdca2df29d5ac0ea9906b标记以逻辑方式将网页划分为几块。这在您在本文后面查看样式时尤其有用,您可以通过设置相应的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>
要做的第一件事是将包含电影的列表包装到它自己的dc6dce4a544fdca2df29d5ac0ea9906b中,如下所示
<!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>
现在可以看到,包含电影的c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6列表现在包含在dc6dce4a544fdca2df29d5ac0ea9906b标记中。如果现在查看该网页,会发现与之前没什么不同。这是因为dc6dce4a544fdca2df29d5ac0ea9906b标记是一个逻辑分隔线。它没有任何物理外观。
使用超链接
您可能已经熟悉超链接–一个页面上链接到另一个页面的可单击区域。尽管这些区域称为超链接,但在HTML中它们最初称为定位标记(anchor),因此只要您希望创建超链接,就可以使用3499910bf9dac5ae3c52d5ede7383485标记。
3499910bf9dac5ae3c52d5ede7383485(或定位)标记使3499910bf9dac5ae3c52d5ede7383485和5db79b134e9f6b82c0b36e0489ee08ed之间的内容可以单击。当用户单击此内容时,浏览器将重定向到3499910bf9dac5ae3c52d5ede7383485标记中使用href属性指示的一个HREF(超引用)。
属性在标记本身上定义,而不是在标记内定义,类似于:
f047133524e5d3becb585ca1fc7a6fbfcontentbaa3ea5ae7414741617ff7b18b3fb09e
因此,要创建超链接,您可以使用这样的语法:
3a22334c00bfd66460b6915828460d7eClick Here5db79b134e9f6b82c0b36e0489ee08ed
href不必是一个像上面这样的网站,也可以是一个执行编程人员所使用的操作的JavaScript函数。一种特殊的href可在开发期间用作占位符,这样您可以测试超链接的样式是否有效。为此,使用“#”字符作为href。
所以,为了将所有包含电影的25edfb22a4f469ecb59f1190150159c6项转换为超链接,我们将电影的文本包装在3499910bf9dac5ae3c52d5ede7383485标记中,将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中提供的新1aa9e5d373740b65a0cc8f0a02150c53和c37f8231a37e88427e62669260f0074d标记来完成此任务。可以在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代码。
对于页眉,我们将前面创建的4a249f0d628e2318394fd9b75b4636b1包装在1aa9e5d373740b65a0cc8f0a02150c53标记中,对于页脚,我们创建一些文本和一个超链接。
在浏览器中查看网页,它现在将类似于以下界面:
除了页脚不同,它没有太多差异,但不用担心,这种情况很快就会改变!
定义网页的外观
在前面一节中,在介绍定位标记时您了解了属性,属性描述元素的行为。对于定位标记,您通过指定HREF属性定义了在单击时发生的行为。
可以想象,您可以使用属性指定元素的外观,包括字体样式、字体大小、颜色、边框等等。
所以,举例来说,对于我们前面在网页上定义的4a249f0d628e2318394fd9b75b4636b1(其内容为“A list of my Favorite Movies”),您可以更改它的字体和颜色如下:
4f449a3f0adab4d35544e6b8d1eb7c9cA list of my Favorite Movies473f0a7621bec819994bb5020d29372a
可以看到,4a249f0d628e2318394fd9b75b4636b1标记的样式属性包含该样式的定义列表。上面的标记将颜色设为蓝色,将字体设置为 32,将字体系列设置为Verdana,并将文本装饰设置为下划线.
尽管这样能很好地生效,但它并不是设置网页样式的最好方式。想象一下,如果您必须通过这种方式设置每个元素的样式,将会是什么结果。您的网页上最终会有很多文本,减缓下载和浏览的速度。
幸运的是,还有另一种方式,那就是在网页上使用样式表。样式表使用级联样式表概念来定义,其中元素上的样式集可以由子元素继承。举例来说,如果您在dc6dce4a544fdca2df29d5ac0ea9906b上设置了一个样式,并且dc6dce4a544fdca2df29d5ac0ea9906b具有子元素c34106e0b4e09414b63b2ea253ff83d6和25edfb22a4f469ecb59f1190150159c6,那么该样式也将应用于它们,除非开发人员改写了此样式。w3cschools是一个了解CSS的好地方:http://w3schools.com/css/default.asp。
我们看一下如何在4a249f0d628e2318394fd9b75b4636b1标记上定义样式,而无需在样式属性上使用很多内联代码。
不用将所有样式代码放在4a249f0d628e2318394fd9b75b4636b1标记本身内,我们只需要指定它的类属性,如下所示:
df52c756d4f8326b7768cdab256ec4d6A list of my Favorite Movies473f0a7621bec819994bb5020d29372a
现在标记有了一个类,我们可以告诉浏览器为拥有此类的所有内容使用一种特定样式。这使用CSS代码语法来完成,类似于:
.Title { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; }
样式“语言”包括一组以分号分隔并包含在花括号({..})中的属性。如果要将此样式应用到一个类,该类会使用“点”语法进行定义,也就是在类名称前添加一个点。
此代码放在网页页眉中的c9ccee2e6ea535a969eb3f532ad9fe89标记内。您的网页标记应该类似于:
<!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>
当运行它时,样式将生效,您将看到以下界面:
请记住4a249f0d628e2318394fd9b75b4636b1拥有一个“Title”类,所以通过设置.Title,您可以设置拥有相同类的所有元素的样式。
当希望设置特定元素时,可以为该元素使用一个类(假设该类只有一个实例),或者可以使用一个id命名该元素,然后设置该id的类。如果看一下您的HTML,您将会注意到电影列表保存在一个id为“moviesList”的dc6dce4a544fdca2df29d5ac0ea9906b中。您可以通过在样式表定义中在“moviesList”之前添加 # 来设置它的样式,如下所示:
#movieslist{font-family: Geneva, Tahoma, sans-serif;}
这样就定义了 dc6dce4a544fdca2df29d5ac0ea9906b 的样式,并且因为样式表可以级联(只需为它们提供该名称),此div中的任何元素都将应用此样式。所以,即使我没有专门设置包含这些文本的25edfb22a4f469ecb59f1190150159c6元素的样式,仍然会应用该样式:
请记住,浏览器默认会将c34106e0b4e09414b63b2ea253ff83d6列表中的25edfb22a4f469ecb59f1190150159c6对象呈现为编号项。我们可以设置样式来删除编号项。因为这些对象位于我们称为“movieslist”的div的内部,我们可以轻松访问它们来更改其样式。
下面是语法:
#movieslist ol { list-style: none; margin: 0; padding: 0; border: none; }
该语法表明,对于#movieslist中的每个c34106e0b4e09414b63b2ea253ff83d6,将样式设置为不是列表(也即没有项目符号)、没有外边距、没有边框、没有内边距。
下面是设置后的结果:
可以看到,现在没有编号。
每个列表项的文本保存在一个3499910bf9dac5ae3c52d5ede7383485标记中,所以我们可以使用以下语法,定义#movieslist中的每个25edfb22a4f469ecb59f1190150159c6标记内的每个3499910bf9dac5ae3c52d5ede7383485标记的外观:
#movieslist li a { font-size: large; color: #000000; display: block; padding: 5px; }
这里的设置不言自明,我们现在看一下运行网页时的外观。
以上就是WebMatrix进阶教程(3):如何实现某种样式的内容,更多相关内容请关注PHP中文网(www.php.cn)!