Home > Web Front-end > CSS Tutorial > Common misunderstandings about using CSS and HTML

Common misunderstandings about using CSS and HTML

php中世界最好的语言
Release: 2018-03-22 11:41:30
Original
1658 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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.

## class name news to identify the entire news item. Then you can use the cascade style to identify news titles and texts. You should modify it as follows

<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>
Copy after login

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>
Copy after login

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;
}
Copy after login

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)

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Recommended reading:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template