2. CSS Learning-IT software staff Learning series articles

Above we talked about HTML, this article is about CSS.

Last time we talked about CSS is the decoration part of HTML page, is a variety of tiles, washed walls. Illustrates the importance of CSS in HTML pages. Without CSS, the HTML page would be rough, just like our hairy-Pooh room. Let's start with the CSS content.

The content of CSS is simple, that is, selectors, attributes, property values. The following is a simple CSS content.

#nav {

color:red;

}

The CSS content above sets the font color of NAV's HTML page label.

One, the CSS file embedding has 3 kinds of forms: File embedding, page embedding, HTML tag embedding.

1, file embedding. Embed the following between the head tags of the HTML page:

<link rel= "stylesheet" href= "Css/style.css" >

The HTML page above will find the Style.css file in the CSS directory and render the page when it is loaded.

2, page embedding. Embed the following between the head tags of the HTML page:

<style type= "Text/css" >

Body, UL, OL, Li, p {

margin:0;

padding:0;

}

</style>

The above HTML page will execute the above CSS settings for page rendering at load time.

3, HTML tag embedding. Embed CSS settings within the Style property within the HTML tag.

<asp:label id= "Label1" runat= "Server" text= "Label" style= "color:red;" ></asp:Label>

The HTML page above will render the tag using the CSS settings in the style when it loads.

Two, the CSS file selector has 3 kinds: Tag Selector, class selector, ID selector.

1. ID selector. Select the HTML tag directly in the CSS settings. Start with the # sign.

#nav {

color:red;

}

2, class selector. Set the tag directly in the CSS settings (using the. Start), set it in the HTML element, and use the class attribute to mark it.

<div class= "CLS" ></div>

<style type= "Text/css" >

. cls {

margin:0;

padding:0;

}

</style>

3, Tag Selector. Set the tag directly in the CSS and define the tag in the HTML element.

<div></div>

<style type= "Text/css" >

div {

margin:0;

padding:0;

}

</style>

The following describes the label selector's sub-label selection.

<div>

<ul>

<li></li>

</ul>

</div>

<style type= "Text/css" >

Div ul Li {

margin:0;

padding:0;

}

</style>

Above the DIV under the UL under the LI tag is selected settings. The middle of the tag is divided by spaces.

<div id= "box" >

<ul>

<li></li>

</ul>

</div>

<style type= "Text/css" >

#box ul Li {

margin:0;

padding:0;

}

</style>

The above uses the ID selector to set the Li tag under the DIV under UL. The middle is also divided by spaces.

Due to the limited space, the above is a brief introduction to the CSS settings, specific learning can see the following links provided by the book (mainly to learn CSS settings of the property content):

Http://pan.baidu.com/s/1o6JpZeE

PS. Today is the first day of work after the New Year holiday. I wish you a happy 2015 ...

2. CSS Learning-IT software staff Learning series articles