CSS-how to use different styles for elements in different positions

Many people have gradually become accustomed to using CSS layout in an all-round way and try to separate presentation from content. However, in the process of getting used to it, you may encounter various difficult problems. One of my experiences is: check more CSS manuals, try more, and ponder over experts' webpages. You can save some pages and analyze them slowly.

Okay, let's get started. There is often a situation where I want to define the hyperlink style at different locations on the same page. For example, I do not want to underline the page navigation section, in other places, underlines are required.

There are two ways to achieve this:

1. You can directly use CSS to specify hyperlinks in different places, for example :. This method is obvious, most powerful, and flexible. The style of any hyperlink on the page is different. However, we do not need to be so flexible, and it is too cumbersome to implement this definition for every hyperlink.

2. The style of hyperlinks is developed in batches using the support of CSS object level. For example, in general, I define hyperlinks on the entire page as underscores, but only menus are not used. You can use the following method:

a{color:Black;font-size:12px;text-decoration:underline;}

If the menu is defined by UL, as described in the previous blog, I can define it as follows:

.Menu a{color:Black;font-size:12px;text-decoration:none;}

The. menu here refers to the CSS used for the menu's outer boundary. In this way, this style is used as long as the hyperlink in this menu is used.

Of course, there are many ways to specify this method. For example:

# Mymenu A {...} indicates all hyperlink styles in the element whose ID is mymenu;

# Mymenu Li a {...} indicates the hyperlink style inside the Li element of the element whose ID is mymenu;

**************************************** **************************************** *****
When CSS encounters XHTML -- from display: inline to float: left

A few days ago, I wrote a tab control with the following style:

I used CSS to describe this style. The HTML and CSS code is as follows:

<Ul> <li> <a href = "#" class = "selected"> file </a> </LI> <li> <a href = "#"> Edit </a> </LI> <li> <a href = "#"> View </a> </LI> <li> <a href = "#"> site </a> </LI> <li> <a href = "#"> compile </a> </LI> <li> <a href = "#"> Tool </a> </LI> </ul>

ul{border-bottom:solid 1px #999999;border-left:solid 1px #999999;height:30px;width:100%;margin-left:0px;}li{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#cccccc;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}.selected{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#eaeaea;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}

There is no problem with using it on a master page. In the afternoon, drag the tab control to a page generated by vs2005. when running the tab, it turns out to be like this:

For the same piece of code and the same browser, how does one achieve different results? After careful check, it is found that the original master page is normal because the master page uses html4.0, and the new page is defined by xhtml1.0, is it because of the strict definition requirements of XHTML? Go to W3C and other resource websites to find out the root cause.

It turns out that the previous statements are always incorrect. By default, the "Li" element is always vertically arranged, so I used display: inline to force it to be arranged in the row direction to achieve the desired effect, however, in XHTML, this not rigorous writing method is not supported, so setting the height and width does not work here. When formatting XHTML labels, the concept of "box" is enhanced. To use some padding effects such as margin and padding, you must first convert the elements into box elements, then you can set the desired effect. So, how to convert an element into a box element? The answer is: float: left/right can be used to float the elements and convert them into boxes, so that the CSS attributes supported by the box element can be used at will.

Based on the above ideas, I changed the display: inline In the CSS above to float: Left. Everything is OK!

The above is just a special case. Many CSS effects will change during the process of converting html4.0 to XHTML. However, such changes have regular rules and guidelines. As long as you master this idea, most problems should be solved.