WebMatrix Advanced Tutorials (3): How to implement a style

Csdn.net will soon be releasing the advanced tutorials on Microsoft's new Web development tool, WebMatrix, to help developers understand the most powerful Web development tool in Microsoft's history. Following the last release of how to install and use Microsoft New development tools WebMatrix and teach you how to use WebMatrix to create the first page. This issue will continue to introduce you to the next tutorial.

Guide: Microsoft WebMatrix is a free tool that you can use to create, customize, and publish Web sites on the Internet.

WebMatrix makes it easy for you to create sites. You can start with an open source application (such as WordPress, Joomla, DotNetNuke, or Orchard), and WebMatrix will handle the tasks of downloading, installing, and configuring these applications for you. Or you can use many of the built-in templates to write your own code that will help you get started quickly. Whatever your choice, WebMatrix provides everything you need to run your site, including Web servers, databases, and frameworks. By using the same stack that you will use on the web host on your development desktop, the process of getting your site online is easy and smooth.

You can download it from Http://web.ms/webmatrix.

Now you can learn to use WebMatrix, CSS, HTML, HTML5, ASP, SQL, database, and more, and how to write simple Web applications in just a few hours. The contents are as follows:

In part 2nd, you see how you can use WebMatrix to create very simple Web pages and how this page runs in several different browsers. In this section, you'll learn how to change the visual style of a Web page using Cascading style sheet (CSS) techniques.
Here is a list of simple movies you have built on your Web page:

Use cascading style sheets to prepare page styles

In the next few steps, you'll see more HTML tags that you can use to implement features such as hyperlinks, page partitioning, and script tagging, and you'll also learn how to edit this page with cascading style sheets (CSS) to set its appearance. You'll end up using layouts to get the same content between this page and other pages on the site, which makes it easier to edit the same content.

Use separator lines

In HTML, you can use the <div> tag to logically divide a page into blocks. This is especially useful when you look at styles later in this article, and you can specify the style of a section of a Web page by setting the appropriate Div.

Here is the HTML for your page in the first section:

<! DOCTYPE html>     
The first thing to do is wrap the list containing the movie into its own <div>, as shown below

<! DOCTYPE html>  
Now you can see that the <ol><li> list containing the movie is now included in the <div> tag. If you look at the page now, you'll find nothing different. This is because the <div> tag is a logical divider. It does not have any physical appearance.

Using hyperlinks

You may already be familiar with hyperlinks – a click of a region on one page that links to another page. Although these areas are called hyperlinks, they are originally called anchor (anchor) in HTML, so you can use the <a> tag whenever you want to create a hyperlink.

<a> (or positioning) marks allow the content between <a> and </a> to be clicked. When the user clicks this content, the browser redirects to an href (the Hyper-reference) indicated in the <a> tag using the href attribute.

The attribute is defined on the tag itself, not within the tag, similar to the following:

<tag attribute= "AttributeValue" >content</tag>

Therefore, to create a hyperlink, you can use this syntax:

<a href= "http://www.microsoft.com" >click here</a>

The href does not have to be a Web site like the one above, or it can be a JavaScript function that performs the operations used by the programmer. A special href can be used as a placeholder during development, so you can test whether the style of the hyperlink is valid. To do this, use the "#" character as an href.

So, in order to convert all <li> items that contain movies to hyperlinks, we wrap the text of the movie in the <a> tag and set the href to #, similar to the following form:

<! DOCTYPE html>  
If you run the Web page, you will see that the elements on the list will use the familiar hyperlink style, which is the so-called blue underline:



Add headers and footers

The next thing you'll do is add headers and footers to the page. You will use the new 
<! DOCTYPE html> 


As you can see, they are very simple HTML code.
For the header, we'll create the 
To view the Web page in a browser, it will now resemble the following interface:

In addition to the footer, it's not much different, but don't worry, this situation will soon change!

Define the appearance of a Web page

In the previous section, when you introduced the anchor tag, you learned about properties that describe the behavior of the element. For anchor tags, you define the behavior that occurs when you click by specifying the HREF attribute.

As you can imagine, you can use attributes to specify the appearance of an element, including font style, font size, color, border, and so on.

So, for example, for the 

You can see that the style property of the,

While this works well, it's not the best way to set a page style. Imagine what the result would be if you had to set the style of each element in this way. There will eventually be a lot of text on your page, slowing down the download and browsing speed.

Fortunately, there is another way to use style sheets on a Web page. Style sheets are defined using cascading style sheet concepts, where the set of styles on an element can be inherited by child elements. For example, if you set a style on <div> and <div> has child elements <ol> and <li>, the style will also be applied to them unless the developer overrides the style. W3cschools is a great place to learn about CSS: http://w3schools.com/css/default.asp.

Let's look at how to define a style on the 
Instead of putting all of the style code inside the 
<H1 class= "Title" >a List of my favorite movies
Now that the tag has a class, we can tell the browser to use a particular style for all the content that owns the class. This is done using CSS code syntax, similar to the following:

. Title {  font-size:xx-large;  Font-weight:normal;  padding:0px;  margin:0px;  }
The style "language" includes a set of semicolon-delimited and enclosed curly braces ({...} ) in the properties. If you want to apply this style to a class, the class is defined using the point syntax, which is to add a point before the class name.

This code is placed inside the <style> tag in the page header. Your page tag should look similar to:

<! DOCTYPE html>  
When you run it, the style will take effect and you will see the following interface:

Keep in mind that 
When you want to set a specific element, you can use a class for that element (assuming that the class has only one instance), or you can use an ID to name the element, and then set the class for that ID. If you look at your HTML, you'll notice that the movie list is saved in a <div> with an ID of "movieslist". You can set its style by adding # before "Movieslist" in the style sheet definition, as follows:

#movieslist {Font-family:geneva, Tahoma, Sans-serif;}
This defines the styles for <div>, and any element in this div will apply this style because the style sheets can be cascaded (just give them the name). So, even if I don't have a style that specifically sets the <li> element that contains the text, the style is still applied:

Keep in mind that the browser by default renders the <li> objects in the <ol> list as numbered items. We can set styles to delete numbered items. Because these objects are inside the div we call "movieslist", we can easily access them to change their style.

Here's the syntax:

#movieslist ol {  list-style:none;  margin:0;  padding:0;  Border:none;  }
This syntax indicates that for each <ol> in #movieslist, the style is set to not a list (that is, there are no bullets), no margins, no borders, and no padding.

The following is the result of the setting:

As you can see, there is no number now.

The text for each list item is saved in a <a> tag, so we can use the following syntax to define the appearance of each <a> tag within each <li> tag in #movieslist:

#movieslist Li a {  font-size:large;  Color: #000000;  Display:block;  padding:5px;  }
The settings here are self-explanatory, so let's look at how the page looks when it runs.



The above is WebMatrix Advanced Tutorial (3): How to implement a certain style of content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!


 