Click here to return to the Wulin.com HTML tutorial column.
Above: Markup Language - Talk about the list again
Original source Chapter 9 Lite tags
Previously, we kept mentioning that structured content can classify structure and design details and streamline tags. What should we do? We can use XHTML and CSS that meet the standards instead of tables and pictures to create the layout we need.
When using standard technology to create websites (especially websites that rely heavily on CSS), we often develop a bad habit, which is to add extra tags and class attributes, and the technology does not need them at all.
By using descendant selectors in CSS, we can eliminate unnecessary <div>, <span> and classification properties. Simplified tags mean that pages will be read faster and easier to maintain. In this chapter, we will discuss several simple ways to accomplish this task. How to streamline tags when creating a website with standard technology?
Simplified tags are an important topic worth discussing. When creating a website, one of the huge benefits that can be obtained by writing in legitimate XHTML and setting display effects with CSS is streamlined tags. Short code represents faster download speed, which is definitely the key for users who use 56k dial-up to access the Internet. Short code also represents server space requirements and reduce bandwidth consumption, which can make the boss and system manager happy.
The problem is that simply confirming that the page complies with the W3C standard specification does not mean that the code used in the content will be shortened. Of course, you can add various unwanted tags to the tag content that meets the standards. Yes, it does meet the standards, but it may have added a lot of unnecessary code to make it easier to design CSS.
Don't be afraid! There are some tips here that allow you to design concise and have standard marking content, but also retain sufficient CSS style control capabilities. Then let's learn a few simple tips to streamline tags. Inheritance selector
Here we will look at two ways to mark the sidebar (including information, links and other things) in a personal website. Stuff all the good stuff into a <div> with an id is a sidebar so that it can be placed in a browser window later (the second part will discuss CSS layout/type functionality). Method A: Happy classification
<div id=sidebar>
<h3 class=sideheading>About This Site</h3>
<p>This is my site.</p>
<h3 class=sideheading>My Links</h3>
<ul class=sidelinks>
<li class=link><a href=archives.html>Archives</a></li>
<li class=link><a href=about.html>About Me</a></li>
</ul>
</div>
I have seen tagged content similar to Method A on many websites. When the designer first discovered the power of CSS, it is easy to be overwhelmed and specify a class for each tag that wants to create a special style.
In the previous example, perhaps we think that <h3> specifies class=sideheading to help them specify styles different from other titles within the page; specifying class for <ul> and <li> is also for the same reason. Classification CSS
When specifying the style, suppose we want the title to turn orange, use the serif font, with a light gray edge at the bottom, and the sidelinks unordered list needs to remove the small dot symbol and change the list item to bold.
The CSS content required by method A will look like this:
.sideheading {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.link {
font-weight: bold;
}
We can refer to the class names (classes) established in the tags to specify special styles for these tags, and you can even imagine that other parts of the page are organized in this way: navigation bars, end of the page and content area, each tag is cluttered in order to have full control over them.
Yes, it does work, but there is a simple way to save these class attributes, while making your CSS easier to read and more organized. Then look at Method B. Method B: Natural choice
<div id=sidebar>
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href=archives.html>Archives</a></li>
<li><a href=about.html>About Me</a></li>
</ul>
</div>
Method B is short and concise! But wait, where are the categories going? Well... you will soon find that we don't really need them, mainly because we stuff these tags into a <div> relationship with a unique name (in this case, sidebar).
This is where the inheritance selector is used. We just need to directly specify the tags located within the sidebar with the label name to remove these unnecessary classification properties. Specify CSS with the content before and after relationship.
Let's look at the same style as method A, but this time we use the inheritance selector to specify the tag located in the sidebar.
#sidebar h3 {font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
#sidebar ul {list-style-type: none;
}
#sidebar li {font-weight: bold;
}
By referring to the #sidebar ID, you can specify a special style for the tags contained therein. For example, only the <h3> tags located within <div id=sidebar> will set the above CSS rules.
This method of specifying styles based on the relationship between the content before and after is the key to shortening the content. Usually, after designing the semantic structure for the content, there is no need to add classification attributes to the label. It is not only used in the sidebar
We only display one paragraph of the page (that is, the sidebar), but this approach can be applied to the entire page structure. Just divide the tag content into several paragraphs according to the logic (perhaps #nav, #content, #sidebar, #footer), and then use the inheritance selector to create special styles for the tags in this paragraph.
For example, suppose that the #content and #sidebar paragraphs within the page use the <h3> tag, and you want them to use the serif font, however, you want the <h3> of one paragraph to be displayed in purple and the other to be orange.
This does not require any tag modification, plus classification properties. We can specify rules for all <h3> tags to be shared by a global style, and then use the inheritance selector to set the color according to the tag's position.
h3 {
font-family: Georgia, serif; /* All h3s to be serif */
}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}
Specify that all <h3> tags use senif fonts, and the colors must be selected to use purple or orange according to the content context. At this time, we do not need to repeat the sharing rules (in this example, font-family), so the content of the CSS can be shortened and the duplicate rules can be prevented from occurring in multiple statements.
Not only can we reduce the extra marking space required by the class attribute, but the CSS structure also becomes more meaningful, making it easier for us to read its content and organize it according to the page segments. It also becomes very simple to modify specific rules, which is particularly obvious for large and complex typesettings, because at this time you may have hundreds of CSS rules at the same time.
For example, in this example, if you add the sharing rules to each declaration and want to replace all <h3> with sans serif fonts later, you have to modify three places, and there is no way to do it at once. The fewer classifications, the better maintenance
In addition to reducing the source code space that needs to be used, replacing redundant categories with inheritance selectors also represents the future ease of marking content to be expanded.
For example, let's assume that you want the links inside the sidebar to turn red instead of using blue like the rest of the page, so you create a red class that adds to the anchor tag like this:
<div id=sidebar>
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li> <a href=archives.html class=red > Archives</a></li>
<li> <a href=about.html class=red > About Me</a></li>
</ul>
</div>
To turn these links into red (assuming the preset link color is not red) requires a CSS like this:
a:link.red {
color: red;
}
These actions are fine and can work normally. But what if you change your mind in the future and want to change these links to green? Or more practical, your boss occasionally says that the red this year is outdated, so change these sidebar links to green! No problem, you just need to modify the red class in CSS and get it done, but the class attribute in the marking content is still red. Obviously, this is not completely in line with the semantics, just like using other colors as the classification name.
This is not a good place to use display effects as a classification name, but if we do not specify a classification at all, we can save a lot of effort (and code) in handling classification, and make the content semantics more reasonable. We might as well select links to these sidebars with inheritance selectors and specify styles as needed.
The tag content is exactly the same as method B, and the CSS required to set the link in the sidebar will be like this:
#sidebar li a:link {color: red;
}
Basically, this means that only the anchor tags using the href attribute in the <li> tag within <div id=sidebar> should also be displayed in red.
Now, we maintain short and flexible tagging content, and future updates only require CSS, no matter if we want the link to turn red, green, bold, or italics.
Next, let’s take a look at another way to streamline tags: eliminate unnecessary <div> tags and directly use existing block-level tags.
Previous page 1 2 3 Next page Read the full text