Common misunderstandings about using CSS and HTML

This time I will bring you common misunderstandings in the use of CSS and HTML. What are the precautions when using CSS and HTML? Here are practical cases, let’s take a look.

Myth 1. Polyp syndrome

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>

The above situation of using redundant p tags is called "Polyp syndrome " should be simplified to the following

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

Myth 2. Multiple class syndrome Note that class can be applied to any number of elements on the page, which is very suitable for identifying content types or other similar items

A piece of news (news title, news details)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

The above category names using news-head and news-text are called "multiple categories"Performance, there is no need for so many classes to distinguish element styles

It is better to use p (pision) to represent part instead of having no semantics (most people misunderstand that p has no semantics! ! !), in fact, p can divide the document into several meaningful areas.

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

span to group or identify the inline elements

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

Misunderstanding 3. Misunderstanding about the use of id is used to identify specific elements on the page (such as sitenavigation, header, footer) and must be unique; it can also be used to identify persistent Structural elements (such as main navigation, content area)

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}

are used to identify specific elements on the page (such as site navigation, headers, footers) and must be unique; can also be used Identify persistent structural elements (such as main navigation, content area)

3D flop effect of Baidu Tieba

css3 to achieve animated bicycle effect

The above is the detailed content of Common misunderstandings about using CSS and HTML. For more information, please follow other related articles on the PHP Chinese website!