Web page making must learn the skill of using CSS to beautify your Web page

css| Skills | Web page

Now we have to design the Web page has been inseparable from CSS, using CSS can beautify our web page, this has been a shared knowledge of the!

CSS is the abbreviation for "cascading style Sheets", translated as a style sheet. HTML allows us to use CSS to achieve the style of display, for example: we can use the <b> tag to make the font of the page bold. Such as:

　　<b> Web Teaching Network bold font display </b>

If you enable us to display the font as red, Arial, and bold, we can use the following code:

　　<font color= "#FF0000" face= "XXFarEastFont-Arial" ><strong> Web Teaching Network font demo </strong></font>

When we look at the above code, we found that there are more elements in the Web page, when we write it may appear very messy, then we should think of a way to use less code, but also to achieve the requirements shown above? The answer is yes, then we are going to use CSS. Use CSS to set a style, set the features we need, give it a unique name, and save it somewhere else on the site, and then we can do that by quoting the name of the style we wrote in HTML. Such as:

<p class= "Mynewstyle" > Web teaching CSS style text </p>

Then add the styling code between the head

　　<style type= "Text/css" >

<!--

. mynewstyle {

Font-family: Song body;

Font-weight:bold;

Color: #FF0000;

}

-->

</style>

If you want to make the above CSS control on every page of your page, then we copy and paste the above code on it, if you feel more trouble or you think the head of the Web page is messy, we can also set the style of CSS to save a separate file (file name extension. CSS), then we can reference the style by referencing that saved file directly in HTML. If the name of your saved file is: Myfirststylesheet.css, then we can use the following code to refer to:

　　<link href= "Myfirststylesheet.css" rel= "stylesheet" type= "Text/css" >

Note: The above code should be placed in the

As for the CSS settings are not mentioned here, we can specifically open a Notepad, or use specialized design tools such as DW.

In the edit CSS note Do not add the following code:

　　<style type= "Text/css" >

</style>

We can just set CSS style in the CSS file, such as:

　　. mynewstyle {

Font-family: Song body;

Font-weight:bold;

font-size:8pt;

Color: #FF0000;

}

. my2ndnewstyle {

Font-family: Song body;

Font-weight:bold;

font-size:9pt;

Color: #FF0000;

}

. my3rdnewstyle {

Font-family: Song body;

Font-weight:bold;

font-size:12pt;

Color: #FF0000;

}

Then just save it as a file with the extension CSS (e.g. myfirststylesheet.css)

Finally, we add the following code to the body area of the HTML code to quote our settings:

　　<p class= "Mynewstyle" > Web teaching Network CSS font display 1</p>

<H2 class= "My2ndnewstyle" > Web teaching Network CSS font display 2

We use the

　　H1 {Font-family:garamond, "times New Roman", serif; font-size:200%;}

Then we can add it directly to the code:

　　

Then the same style as we set it to show.

We can also set the style for other tags, for example: we set the entire page border:

　　body {margin-left:15%; margin-right:15%;}

We can also set the div tag:

　　div {

Background:rgb (204,204,255);

Padding:0.5em;

border:1px solid #000000;

}

In HTML code as long as the content between <div> and </div> will be displayed in the style described above.

And finally, for example, about the discoloration of a super connection:

　　. a:link {color:rgb (0, 0, 153)}/* No access to the connection * *

. a:visited {Color:rgb (153, 0, 153)}/* Connection after access to connection * *

. a:hover {Color:rgb (0, 96, 255)}/* Mouse hover state * *

. a:active {Color:rgb (255, 0, 102)}/* Connection activated state/*

Then add in the HTML code:

　　<a href= "http://www.webjx.com" > Web Teaching Network </a>

The above code can be displayed in the style we set.

Finally to expand for everyone, because recently there are always netizens in the forum to ask, how to make the connection on the same page different? Let me introduce you to the last example. Then we need to set a different style of CSS:

　　. a1:link {COLOR: #ff0000; Text-decoration:underline}/* Red, underlined * *

. a1:hover {COLOR: #ff0000; Text-decoration:underline}

. a1:visited {COLOR: #000000; Text-decoration:none}/* Black, no underline * *

. a1:active {COLOR: #0000ff; Text-decoration:none}

Then add in the HTML code:

　　<a href= "http://www.webjx.com" > Web Teaching Network </a>

<a href= "http://www.webjx.com" class= "A1" > Web Teaching Network </a>

There will be two kinds of connection effects.

CSS in our web page when the function is very powerful, I hope everyone in the production of web pages to be skilled use, so that our pages more beautiful and unified. In this site there are a lot of CSS textbooks hope that we study it! I hope this article can play the role of the finishing touches.