Malentendus courants sur l'utilisation de CSS et HTML

Cette fois, je vais vous apporter les malentendus courants dans l'utilisation du CSS et du HTML. Quelles sont les précautions lors de l'utilisation du CSS et du HTML. Voici des cas pratiques, jetons un coup d'oeil.

Mythe 1. Syndrome des polypes

<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>

La situation ci-dessus d'utilisation de balises p redondantes est appelée "Syndrome des polypes" devrait être simplifié en

<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>

Malentendu 2. Syndrome multi-classes Notez que les classes peuvent être appliquées à n'importe quel nombre d'éléments sur la page, ce qui est très approprié pour identifier les types de contenu ou autres éléments similaires. Une entrée de

une actualité (titre de l'actualité, détails de l'actualité)

<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>

Le nom de classe ci-dessus utilise news-head et news-text et est appelé Performance "Plusieurs classes ", il n'est pas nécessaire d'avoir autant de classes pour distinguer les styles d'éléments

Il est préférable d'utiliser p (pision ) pour représenter des parties au lieu d'aucune sémantique (la plupart des gens comprennent à tort que p n'a aucune signification ! !), en fait, p peut diviser le document en plusieurs zones significatives

nom de classe news. identifier l’intégralité de l’actualité. Ensuite, vous pouvez utiliser le style cascade pour identifier les titres et les textes d'actualités, qui doivent être modifiés comme suit :

<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 grouper ou marquer

<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>

Mythe 3. Un malentendu sur l'utilisation de l'identifiant est utilisé pour identifier des éléments spécifiques sur la page (tels que la navigation du site, l'en-tête, le pied de page) et doit être unique ; il peut également être utilisé Utilisé pour identifier des éléments structurels persistants (tels que la navigation principale, les zones de contenu)

/*大量的使用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;
}

Utilisé pour identifier des éléments spécifiques sur la page (tels que navigation du site, en-têtes, pieds de page) et doit Unique ; peut également être utilisé pour identifier des éléments structurels persistants (tels que la navigation principale, la zone de contenu)

Je vous crois avoir maîtrisé la méthode après avoir lu le cas dans cet article, et plus encore. Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Effet de retournement 3D de Baidu Tieba

CSS3 pour obtenir un effet de vélo animé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!