WebMatrix 고급 튜토리얼(3): 특정 스타일을 구현하는 방법
- 黄舟원래의
- 2016-12-26 16:25:271289검색
Csdn.NET은 개발자의 이해를 돕기 위해 Microsoft의 새로운 웹 개발 도구인 WebMatrix에 대한 고급 튜토리얼을 곧 출시할 예정입니다. WebMatrix는 Microsoft 역사상 가장 강력한 웹 개발 도구로 알려져 있습니다. Microsoft의 새로운 개발 도구인 WebMatrix를 설치 및 사용하는 방법에 대한 마지막 릴리스에 이어 WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 교육합니다. 이번 호에서는 계속해서 다음 튜토리얼을 소개합니다.
소개: Microsoft WebMatrix는 인터넷에서 웹 사이트를 생성, 사용자 정의 및 게시하는 데 사용할 수 있는 무료 도구입니다.
WebMatrix를 사용하면 웹사이트를 쉽게 만들 수 있습니다. 오픈 소스 애플리케이션(예: WordPress, Joomla, DotNetNuke 또는 Orchard)으로 시작할 수 있으며 WebMatrix가 애플리케이션 다운로드, 설치 및 구성 작업을 처리합니다. 또는 빠르게 시작하는 데 도움이 되는 다양한 내장 템플릿을 사용하여 직접 코드를 작성할 수도 있습니다. 무엇을 선택하든 WebMatrix는 웹 서버, 데이터베이스 및 프레임워크를 포함하여 웹 사이트를 실행하는 데 필요한 모든 것을 제공합니다. 웹 호스트에서 사용할 것과 동일한 스택을 개발 데스크탑에서 사용하면 웹 사이트를 온라인으로 전환하는 과정이 쉽고 원활해집니다.
http://web.ms/webmatrix에서 다운로드할 수 있습니다.
이제 단 몇 시간 만에 WebMatrix, CSS, HTML, HTML5, ASP.Net, SQL, 데이터베이스 등을 사용하는 방법과 간단한 웹 애플리케이션을 작성하는 방법을 배울 수 있습니다. 내용은 다음과 같습니다.
2부에서는 WebMatrix를 사용하여 매우 간단한 웹 페이지를 만드는 방법과 이 페이지가 다양한 브라우저에서 어떻게 실행되는지 살펴보았습니다. 이 섹션에서는 CSS(Cascading Style Sheets) 기술을 사용하여 웹 페이지의 시각적 스타일을 변경하는 방법을 알아봅니다.
다음은 웹 페이지에 구축할 수 있는 간단한 영화 목록입니다.
캐스케이딩 스타일 시트를 사용하여 웹 페이지 스타일을 준비하세요.
In 앞으로 며칠 동안 이 단계에서는 하이퍼링크, 웹 페이지 섹션 및 스크립트 태그와 같은 기능을 구현하는 데 사용할 수 있는 더 많은 HTML 태그를 볼 수 있으며 CSS(Cascading Style Sheet)를 사용하여 이 웹을 편집하는 방법도 배우게 됩니다. 페이지를 선택하고 모양을 설정합니다. 마지막으로 레이아웃은 이 페이지와 사이트의 다른 페이지 간에 동일한 콘텐츠를 가져오는 데 사용되므로 동일한 콘텐츠를 더 쉽게 편집할 수 있습니다.
구분 기호 사용
HTML에서는
첫 번째 부분에 있는 페이지의 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>가장 먼저 해야 할 일은 아래와 같이 영화가 포함된 목록을 자체
<!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>이제 영화가 포함된
- 목록이 지금 페이지를 보시면 이전과 크게 다르지 않은 것을 보실 수 있습니다. 이는태그가 논리적 구분 기호이기 때문입니다. 육체적인 모습은 없습니다.
하이퍼링크 사용
한 페이지에서 클릭할 수 있고 다른 페이지로 연결되는 영역인 하이퍼링크에 이미 익숙하실 것입니다. 이러한 영역을 하이퍼링크라고 부르지만 HTML에서는 원래 앵커 태그(앵커)라고 불렀으므로 하이퍼링크를 만들 때마다 태그를 사용합니다.
(또는 위치 지정) 태그는 사용자가 이 콘텐츠를 클릭하면 브라우저는 태그의 href 속성을 사용하여 표시된 HREF(하이퍼참조)로 리디렉션됩니다.
속성은 다음과 유사하게 태그 내부가 아닌 태그 자체에 정의됩니다.
content 따라서 하이퍼링크를 만들려면 다음과 같은 구문을 사용할 수 있습니다.
href는 위와 같은 웹사이트일 필요는 없으며, 프로그래머가 사용하는 작업을 수행하는 JavaScript 함수일 수 있습니다. 하이퍼링크 스타일이 작동하는지 테스트할 수 있도록 개발 중에 특수 href가 자리 표시자로 사용됩니다. 이렇게 하려면 "#" 문자를 href로 사용하세요.
따라서 영화가 포함된 모든
- 항목을 하이퍼링크로 변환하기 위해 영화의 텍스트를 태그로 묶고 다음과 같이 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中提供的新
和 <!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代码。
对于页眉，我们将前面创建的包装在
标记中，对于页脚，我们创建一些文本和一个超链接。 在浏览器中查看网页，它现在将类似于以下界面：
除了页脚不同，它没有太多差异，但不用担心，这种情况很快就会改变！
定义网页的外观
在前面一节中，在介绍定位标记时您了解了属性，属性描述元素的行为。对于定位标记，您通过指定HREF属性定义了在单击时发生的行为。
可以想象，您可以使用属性指定元素的外观，包括字体样式、字体大小、颜色、边框等等。
所以，举例来说，对于我们前面在网页上定义的
（其内容为“A list of my Favorite Movies”），您可以更改它的字体和颜色如下：
A list of my Favorite Movies
可以看到，
标记的样式属性包含该样式的定义列表。上面的标记将颜色设为蓝色，将字体设置为 32，将字体系列设置为Verdana，并将文本装饰设置为下划线.
尽管这样能很好地生效，但它并不是设置网页样式的最好方式。想象一下，如果您必须通过这种方式设置每个元素的样式，将会是什么结果。您的网页上最终会有很多文本，减缓下载和浏览的速度。
幸运的是，还有另一种方式，那就是在网页上使用样式表。样式表使用级联样式表概念来定义，其中元素上的样式集可以由子元素继承。举例来说，如果您在
上设置了一个样式，并且具有子元素- 和
- ，那么该样式也将应用于它们，除非开发人员改写了此样式。w3cschools是一个了解CSS的好地方：http://w3schools.com/css/default.asp。
我们看一下如何在
标记上定义样式，而无需在样式属性上使用很多内联代码。
不用将所有样式代码放在
标记本身内，我们只需要指定它的类属性，如下所示：
A list of my Favorite Movies
现在标记有了一个类，我们可以告诉浏览器为拥有此类的所有内容使用一种特定样式。这使用CSS代码语法来完成，类似于：
.Title { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; }样式“语言”包括一组以分号分隔并包含在花括号（{..}）中的属性。如果要将此样式应用到一个类，该类会使用“点”语法进行定义，也就是在类名称前添加一个点。
此代码放在网页页眉中的
<!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>当运行它时，样式将生效，您将看到以下界面：
请记住
拥有一个“Title”类，所以通过设置.Title，您可以设置拥有相同类的所有元素的样式。
当希望设置特定元素时，可以为该元素使用一个类（假设该类只有一个实例），或者可以使用一个id命名该元素，然后设置该id的类。如果看一下您的HTML，您将会注意到电影列表保存在一个id为“moviesList”的
中。您可以通过在样式表定义中在“moviesList”之前添加 # 来设置它的样式，如下所示：#movieslist{font-family: Geneva, Tahoma, sans-serif;}这样就定义了
的样式，并且因为样式表可以级联（只需为它们提供该名称），此div中的任何元素都将应用此样式。所以，即使我没有专门设置包含这些文本的- 元素的样式，仍然会应用该样式：
请记住，浏览器默认会将
- 列表中的
- 对象呈现为编号项。我们可以设置样式来删除编号项。因为这些对象位于我们称为“movieslist”的div的内部，我们可以轻松访问它们来更改其样式。
下面是语法：
#movieslist ol { list-style: none; margin: 0; padding: 0; border: none; }该语法表明，对于#movieslist中的每个
- ，将样式设置为不是列表（也即没有项目符号）、没有外边距、没有边框、没有内边距。
- 标记内的每个标记的外观：
下面是设置后的结果：
可以看到，现在没有编号。
每个列表项的文本保存在一个标记中，所以我们可以使用以下语法，定义#movieslist中的每个
#movieslist li a { font-size: large; color: #000000; display: block; padding: 5px; }这里的设置不言自明，我们现在看一下运行网页时的外观。
以上就是WebMatrix进阶教程(3)：如何实现某种样式的内容，更多相关内容请关注PHP中文网（www.php.cn）！
- 元素的样式，仍然会应用该样式：
- 항목을 하이퍼링크로 변환하기 위해 영화의 텍스트를 태그로 묶고 다음과 같이 HREF를 #으로 설정합니다.