Markup Language-Simplified tag _ HTML/Xhtml _ webpage Creation

Click here to return to the webpage tutorial section HTML. above: Markup Language-let's talk about the source of the original list. Chapter9. Simplified labels. We 've mentioned that structured content can classify structure and design details and streamline labels. How can we do this? We can use XHTML and CSS that conform to the standard to replace the table, and create the layout we need. click here to return to the webpage tutorial section HTML. above: Markup Language-let's talk about the source of the list. Chapter 9. Streamline labels. We 've mentioned that structured content can classify structure and design details and streamline labels. What should we do? We can use XHTML and CSS that conform to the standard to replace the table, and create the layout we need. Click here to return to the script home HTML tutorial section.
Above: Markup Language-review the list
Original article source Chapter 9 simplified tag
Previously, we constantly mentioned that structured content can classify structure and design details and streamline labels. How can this problem be solved? We can use XHTML and CSS that conform to the standard to replace the table, and create the layout we need.
When using standard technologies to create websites (especially those that are very dependent on CSS), we often develop a bad habit of adding redundant labels and class attributes, and technology does not need them at all.
By using the descendant selectors in CSS, we can eliminate unnecessary

, And category attributes. the simplified tag indicates that the page can be read faster and easier to maintain. In this chapter, we will discuss several simple practices for completing this task. how to streamline tags when using standard technology to create websites?
Streamlining tags is an important topic worth discussing. When creating a website, you can use valid XHTML to write and set the display effect with CSS. One of the major benefits is streamlining tags. the short code represents faster download speeds. for users who use 56 K dial-up Internet access, this is definitely the key. The short code also represents the server space demand and reduced bandwidth consumption, which allows the boss, system Administrators are happy.
The problem is that simply determining that the page complies with W3C standards does not mean that the code used by the content will be shortened. Of course, you can add unnecessary tags to the standard-compliant TAG content, he does comply with the standards, but may add a lot of extra code to facilitate CSS design.
Don't be afraid! Here are some tips for you to design concise and standard-compliant TAG content, while at the same time keeping enough CSS style control capabilities. next, let's learn some simple tips for streamlining tags. inheritance Selector
Here we will look at two ways to mark the sidebar (including information, links, and other things) on a personal website. To put all the good things into one id is "sidebar"

So that it can be placed somewhere in the browser window later (the second part will discuss the CSS layout/typographical function). Method A: Happy Classification

About This Site

This is my site.

My Links

• Archives


• About Me

I have seen the TAG content similar to method A on many websites. When the designer just found out the power of CSS, it was easy to move too far and specify A class for each label that wants to develop A special style.
In the previous example, we may think that specifying class = sideheading is to help them specify styles different from other headers on the page.

And
• It is also for the same reason to specify a class.
  If you want to change the title to orange, use the serif font, and add a light gray edge to the bottom. In the unordered list of "sidelinks", remove the dot symbol and change the configuration item to bold.
  The CSS content required by method A looks 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 specify a special style for these labels by referring to the class name specified in the tag. You can even imagine that other parts of the page are organized in this way: navigation bar, at the end of the page and in the content area, each tag is added with a messy classification to gain full control over them.
  Yes, it does work, but there is a simple way to save these class attributes, at the same time make your CSS easier to read, more organized, then look at method B. method B: natural choice

  
  

  
  About This Site
  

  This is my site.

  
  My Links
  

  
  
  • Archives
  
  
  • About Me
  
  

  
  

  
  Method B is short and concise! But wait, where are all categories? Well... you will soon find that we don't really need them, mainly because we put these labels into a unique name (in this example, sidebar ).

  .
  This is where the inheritance selector works. You only need to directly specify the tag in the sidebar with the tag name to remove these redundant Classification attributes. Specify CSS based on the relationship between the front and back of the content.
  Let's take a look at the same style as method A, but this time we use the inheritance selector to specify the tag located in 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 # sidebar ID, you can specify a special style for the tags contained in it. For example, only

  The above CSS rules will be set for the labels in.
  This method of specifying a style based on the relationship between the content and the content is the key to shortening the content of the tag. Generally, after a semantic structure is designed for the content, Classification attributes are not required for the tag.
  We only show one section of the page (that is, the sidebar), but this method can be applied to the entire page structure, as long as the marked content is logically divided into several paragraphs (maybe # nav, # content, # sidebar, # footer), and then use the inheritance selector to define special styles for the labels in this section.
  For example, if tags are used in the # content and # sidebar sections on the page and you want them to all use the serif font, however, you want a section to be displayed in purple, the other is orange.
  This does not need to modify any tags, and adds the classification attribute. We can use a global style to specify the rules shared by all tags, and then use the inheritance selector to set the color based on the tag location.

  
  H3 {
  Font-family: Georgia, serif;/* All h3s to be serif */
  }
  # Content h3 {
  Color: purple;
  }
  # Sidebar h3 {
  Color: orange;
  }

  
  Specify that all labels use the senif font, and the color must be purple or orange based on the context of the content. In this case, we do not need to share the rules again (font-family in this example ), therefore, it can shorten the content of CSS and prevent repeated rules in multiple declarations.
  We can not only reduce the additional tag space required for the class attribute, but also make the CSS structure more meaningful. This makes it easier for us to read its content and organize it according to page segments, modifying specific rules is also very easy, especially for large and complex typographical la s, because you may have hundreds of CSS rules at the same time.
  For example, in this example, if you want to add the sharing rule to each declaration, and later you want to replace all the rules with the sans serif font, You have to modify them in three places. fewer categories, better maintenance
  In addition to reducing the source code space that needs to be used, replacing redundant classes with the inheritance selector also indicates that the marked content will be easy to expand in the future.
  For example, let's assume that you want to change the link in the sidebar to red instead of using blue as the rest of the page, so you have created a red class, add it to the anchor tag as follows:

  
  

  
  About This Site
  

  This is my site.

  
  My Links
  

  
  
  • Class = "red"> Archives
  
  
  • Class = "red"> About Me
  
  

  
  

  
  To turn these links into red (assuming the preset link color is not red), CSS like this is required:

  
  A: link. red {
  Color: red;
  }

  
  These actions are fine and can work properly. But what if you change your mind and want to change these links to green in the future? Or, more practically, your boss occasionally says, "This year's red is outdated. Change these sidebar links to green "! No problem. You only need to modify the red class in CSS, but the class attribute in the TAG content is still red, which obviously does not fully conform to the semantics, just like using other colors as classification names.
  This is not a good place to use the display effect as the category name, but if no category is specified at all, we can save a lot of effort (and Code) to process the classification and make the content semantics more reasonable, instead, use the inheritance selector to select links in these sidebar and specify the style as needed.
  The content of the tag is exactly the same as Method B, and the CSS required to set the link on the sidebar will be as follows:

  
  # Sidebar li a: link{
  Color: red;
  }

  
  Basically, this indicates that "only

  Within

• The anchor tag that uses the href attribute in the tag should also be displayed in red ".
  Now, we have maintained a brief and flexible TAG content, and in the future, we only need to use CSS for updates, no matter whether we want to change the link to red, green, bold, or italic.
  Next, let's take a look at another simple tag approach: eliminate unnecessary

  Tags.
  # P # unnecessary

  
  In addition to reducing the Classification attributes required by a specified style, there is another simple method to streamline the labels:

  When a tag contains block-level elements

  Remove the preceding two examples. Method A: Use

  
  

  
  

  
  
  • Archives
  
  
  • About
  
  

  
  

  
  This is a very small navigation bar consisting of only one unordered list.

  Nav is specified as the id.
  However

  And

  It is also a block-level element. Why not directly specify an id for it? Let's take a look at Method B. Method B: Remove

  
  

  
  
  • Archives
  
  
  • About
  
  

  
  Method B shows that ul can be used directly, throwing away unnecessary

  Any style settings such as positioning and internal and external patches can also be specified

  To

  It's just as simple. So I threw away the outsourcing tag and saw part of the tag source code.
  Note that this practice is not included in nav.

  For example, there cannot be any extra paragraph,

  Or
  

  
  In fact, it can be written in a simpler way:

  
  

  
  Similarly, if the end of a website contains only a single section, in addition to the following:

  
  

  
  

  Copyright 1999-2004 Dan cederhoma

  
  

  
  It can also be written as follows:

  
  

  Copyright 1999-2004 Dan cederhoma

  
  Of course, this can be modified only when only one paragraph is included at the end of the page.
  # P # Induction
  I have read two simple methods to streamline the tag code. The first is to use the classification attribute in a controlled manner and set the style with the inheritance selector. Then, I directly specify the id for the existing single block-level element, instead of unnecessary

  Outsource them.
  These methods seem to save only a little bit of effort, but when the implementation of these methods for the entire website is simplified, Structured code will become clearer and more flexible, content that is semantic and easier to maintain in the future.
  In "tip extension", let's see how to further exert the power of the inheritance selector, specify a style for the nested list, and make it a website map. Tip Extension
  In this unit, we will discuss how to develop special styles at different levels of a set of nested lists using the inheritance selector. what we made is part of a map of a small website. we will find that the very basic markup code is retained, and the style can be specified for each layer without adding additional Classification attributes.
  First, let's take a look at the tag code. The original tag.
  Nesting. A list of unspecified styles can provide the most basic hierarchy for outlines and so on (of course, it is also very suitable for website maps in this example ). because of the nested list, we can be sure that all browsers and devices can correctly display its structure and can easily use CSS to specify styles later.
  The markup code of the map of a small website may be like this. There are three top-level projects and several nested projects.

  
  

  
  
  • Weblog
  
  
  • Articles
    
    
    
    • How to Beat the Red Sox
    
    
    • Pitching Past the 7th Inning
      
      
      
      • Part I
      
      
      • Part II
      
      
      
      
    
    
    • Eighty-Five Years Isn't All That Long, Really
    
    
    
    
  
  
  • About
  
  

  
  Figure 9-1 shows the results of this example in most browsers. You can find that the structure we are pursuing is roughly shaped by using the preset values. even if no style is specified, the structure is still very obvious, although it is indeed a bit boring, so I began to add some CSS.
  Figure 9-1 adding a style to the nested list with no styles set
  Suppose we want to add some style definitions to a certain layer of the website map, we need to add something to the tag code, which is actually just an id, in this way, we can specify a different style for this list and other parts of the list on the page without adding any other TAG content.

  
  

  Id = "sitemap">
  
  • Weblog
  
  
  • Articles
    
    
    
    • How to Beat the Red Sox
    
    
    • Pitching Past the 7th Inning
      
      
      
      • Part I
      
      
      • Part II
      
      
      
      
    
    
    • Eighty-Five Years Isn't All That Long, Really
    
    
    
    
  
  
  • About
  
  

  
  With the inheritance selector, you can create unique styles for each layer of the list. for example, if you want to make the outermost font method bold, use orange, and gradually shrink the inner layer, You can first specify the size, width, and color of the entire list.

  
  # Sitemap {
  Font-size: 140%;
  Font-weight: bold;
  Color: # f63;
  }

  
  In this way, the entire list will be changed to the orange bold text, followed by any layer of nested Structure

  • Label to reduce the font and change the color.

    
    # Sitemap {
    Font-size: 140%;
    Font-weight: bold;
    Color: # f63;
    }
    # Sitemap li ul {
    Font-size: 90%;
    Color: #000;
    }

    
    The previous section of CSS will display all top-level projects in uppercase and orange bold, while the List in inner Nesting is displayed in black and 90% (140% in this case, the result is shown in Figure 9-2.
    Now each layer of the list has a automatically reduced font-size, followed by some bullets. Custom bullets
    Remove the preset style and use the background attribute to add decorative bullets to the third-level project.

  • Labels remove the pre-configured list style, and then specify the endoscopic image for the level-3 project. For further differences, the font-weight: normal will also be set for the level-3 project -- override the bold setting value of the list.

    
    # Sitemap {
    Font-size: 140%;
    Font-weight: bold;
    Color: # f63;
    }
    # Sitemap li {
    List-style: none;/* turns off bullets */
    }
    # Sitemap li ul {
    Font-size: 90%;
    Color: #000;
    }
    /* Layer 3 */
    
    # Sitemap li ul li {
    Font-weight: normal;
    Padding-left: 16px;
    Background: url(bullet.gif) no-repeat 0 50%;
    }

    
    Figure 9-3 shows the completed website map on the third layer.

  • The label uses the custom dot symbol, a common font. add a 16-pixel patch on the left to leave the position of the dot image for decoration (and leave some blank space ). it also tells the browser to display the image from 0 pixels on the left and 50% above, which will basically align the left side of the image and align the text midline. although we can specify vertical alignment in pixels here, if the percentage is specified, the dot image can still maintain the correct arrangement when the text size changes.
    Figure 9-3 add a custom dot on the third-level project and a border
    Add a dot border to the left of the second-level list to complete the map of our website. This will further prompt readers that the top-level project has its sub-project.
    To achieve this effect only in the second-level list, these rules will be added:

    
    # Sitemap {
    Font-size: 140%;
    Font-weight: bold;
    Color: # f63;
    }
    # Sitemap li {
    List-style: none;/* turns off bullets */
    }
    # Sitemap li ul {
    Margin: 6px 15px;
    Padding: 0 15px;
    Font-size: 90%;
    Color: #000;
    Border-left: 1px dotted #999;
    }
    /* For third-level */
    # Sitemap li ul {
    Border: none;
    }
    # Sitemap li ul li {
    Font-weight: normal;
    Padding-left: 16px;
    Background: url(bullet.gif) no-repeat 0 50%;
    }

    
    We slightly adjusted the outer patch of the second layer and added the dot edge. After this rule, we used border: none; to remove the border of the third layer.
    Figure 9-4 shows how to change the font, border, and image list.
    Figure 9-5 conclusion of the expanded website map with CSS and nested list
    At the beginning of this chapter, we have explored two methods to streamline the tag source code. One is to use the inheritance selector, and the other is to discard unnecessary

    Tag.
    The integration selector does not need to be redundant, so it is easy to mark Classification attributes that become hard to read by source code, and remove the block-level elements that directly have a unique connotation.

    Tags allow us to save as much byte as possible, and simplify the source code for building complex la S.
    Using these methods seems to save only a few bytes, but after applying these methods to the entire website, the savings will begin to accumulate. You can regard it as another flexible way of writing, A good tool for structured marking.
    In addition to streamlining the tag source code, we also see how the inheritance selector can specify a style for a website map using a nested list, and you can specify a unique style for each level of outline, without the need to use additional Classification attributes, it saves several bytes again, and makes it easier to design new styles in the future.
    Long live streamlined tag code!
    This book "part I starts with the markup Syntax" is all over. I hope these simple statements will inspire you.