Démonstration de soupe Div

Publié le 11 juillet 2009

Texte Lorem ipsum bla bla bla.

Balises : HMTL, code, démo

<à part>

Informations tangentielle

Texte Lorem ipsum bla bla bla.

Balises : HMTL, code, démo

div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

en-tête {}
pied de page {}
à part {}

C'est un progrès, mais il reste encore certains problèmes à résoudre. Dans l'instance

, nous devons appeler l'élément dans la page via l'attribut class ou id. Cette logique nous permettra d'appliquer des styles à n'importe quel élément du document, que ce soit dans son ensemble ou individuellement. Par exemple, dans l'exemple

, les éléments .section et .content sont facilement positionnés. Mais dans l’exemple HTML5, il y aura de nombreux éléments de section dans le document lui-même. En fait, nous pourrions ajouter des sélecteurs d'attributs spécifiques pour appeler ces différents éléments de section, mais heureusement, je n'ai pas quelques sélecteurs CSS avancés pour cibler différents éléments de section maintenant.

N'utilisez pas de classe et d'identifiant pour localiser les éléments HTML-5

Voyons maintenant comment localiser une instance d'un élément de page HTML5 sans utiliser de classe et d'identifiant. Nous pouvons utiliser trois sélecteurs CSS pour localiser et identifier les éléments dans l'instance. Comme suit :

Sélecteur descendant : [CSS 2.1] : EF
Sélecteur frère : [CSS 2.1] : E F
Sélecteur enfant : [CSS 2.1] : E >

Voyons comment positionner les éléments de section dans le document sans utiliser de classe et d'identifiant :

Localisez l'élément

Étant donné que notre exemple n'est pas un ensemble complet de code HTML5, nous supposons qu'il y a un élément

sous l'élément et que l'élément

Dans ce cas, nous pouvons localiser la

la plus externe comme indiqué dans le code suivant :

Copier le codeLe code est le suivant :

section de navigation corporelle {}

Localisez l'élément

le plus externe, cet élément

Copier le code

Le code est le suivant :

section>section {}

Positionnez l'élément

Il existe de nombreuses façons de localiser l'élément

, mais la méthode la plus simple est bien sûr le sélecteur de descendant :

Copier le code

Le code est le suivant :

section section article {}

Positionnement des éléments

,

Ces trois éléments apparaissent respectivement à deux endroits, l'un dans l'élément

, l'autre dans l'élément

Cette différence nous permet de localiser facilement chaque élément.

Copier le code

Le code est le suivant :en-tête de l'article {}

section article {}

pied de page de l'article {}

Ou définir ensemble :

Copier le code

Le code est le suivant :section en-tête de section {}

section section section {}

section section pied de page {}

Jusqu'à présent, nous avons utilisé des sélecteurs CSS2.1 pour exclure toutes les classes et tous les identifiants. Alors pourquoi devons-nous encore utiliser CSS3 ? Je suis content que vous ayez demandé...

Positionnement avancé des éléments HTML5 à l'aide de CSS3

Bien que nous ayons utilisé des sélecteurs CSS2.1 pour exclure toutes les classes et tous les identifiants, il existe évidemment de nombreuses situations plus complexes qui nécessitent la résolution des sélecteurs avancés CSS3. Apprenons à utiliser CSS3 pour positionner les éléments de la page sans utiliser d'attributs class et id inutiles en complétant l'exemple suivant.

Localisez toutes les publications à l'aide d'un identifiant de publication (post) unique

Wordpress nous fournit une sortie de code source pour chaque publication qui inclut l'identifiant. Ces informations sont généralement utilisées pour la navigation et/ou pour comprendre l'intention du contenu, mais CSS3 peut utiliser ces identifiants uniques pour styliser ces publications. Bien sûr, vous pouvez ajouter l'attribut class="post" à chaque message comme d'habitude, mais cela irait à l'encontre du but de notre exercice (en plus, ce ne serait pas amusant). À l'aide du "Substring Match Selector", nous pouvons localiser tous les journaux et leurs différents éléments comme indiqué ci-dessous.

Copier le code

Le code est le suivant :

article[id*=post-] {} /* Localiser tous les journaux*/
article[id*=post-] header h1 {} /* Localiser tous les journaux balise h1*/
article[id*=post-] section p {} /* Localisez la balise p dans tous les journaux*/

On peut toujours positionner les éléments de commentaire et leurs enfants de la même manière.

Copier le code

Le code est le suivant :

article[id*=comment -] { } /* Localisez tous les commentaires*/
article[id*=comment-] header h1 {} /* Localisez les balises h1 dans tous les commentaires*/
article[id*=comment-] section p { } / * Localiser les balises p dans tous les commentaires*/

Localisez certaines sections ou articles spécifiés

Il existe de nombreux blogs avec un grand volume de journaux et de commentaires. HTML 5 sera composé d'éléments

Afin de localiser des éléments

ou

spécifiques, nous devons nous tourner vers le puissant sélecteur ":nth-child" :

Copier le code

Le code est le suivant :

section :ntième-enfant( 1) { } /* Sélectionnez la première

*/
article:nth-child(1) {} /* Sélectionnez la première

*/
section:nth-child(2) { } /* Sélectionnez la deuxième

*/
article:nth-child(2) {} /* Sélectionnez la deuxième

*/

De même, nous pouvons utiliser le sélecteur ":nth-last-child" pour localiser certains éléments dans l'ordre inverse.

Copier le code

Le code est le suivant :

section : énième-dernier- child(1 ) {} /* Sélectionnez le dernier

*/
article:nth-last-child(1) {} /* Sélectionnez le dernier

section:nth-last-child(2) {} /* Sélectionnez l'avant-dernier

*/
article:nth-last-child(2) {} /* Sélectionnez l'avant-dernier

*/

Utilisez davantage de façons de sélectionner des éléments spécifiques

Une autre façon de sélectionner des éléments spécifiques en HTML5 (tels que l'en-tête, la section et le pied de page) consiste à profiter du sélecteur ":only-of-type". Étant donné que ces éléments HTML5 apparaissent souvent plus d'une fois à plusieurs endroits, cette méthode est pratique lorsque nous voulons localiser une balise qui n'apparaît qu'une seule fois sous l'élément parent. Par exemple, ce que nous voulons sélectionner est le seul élément dans un certain élément, comme le code suivant :

Copier le code

Le code est le suivant :

>

< section>Localisez cet élément de section

Mais ne positionnez pas cet élément de section

section> ; et l'élément section

Nous pouvons simplement utiliser le sélecteur d'une ligne suivant :

Copier le code

Le code est le suivant :

section>section : uniquement- de type {}

Encore une fois, vous pouvez obstinément ajouter un attribut ID à chaque élément, mais vous perdrez l'évolutivité, la maintenabilité et la simplicité absolue du code en dissociant la structure de la présentation. CSS3 nous permet de localiser rapidement et facilement presque tous les éléments de page qui n'ont pas d'attributs d'ID et de classe.

Résumé

Je crois qu'à mesure que le temps passe et que de plus en plus de navigateurs le prennent en charge, HTML5 et CSS3 deviendront de plus en plus populaires. Ils apporteront une énergie plus illimitée aux concepteurs Web et rendront nos étapes Web encore meilleures. (Texte/Onimusha)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Explication détaillée des compétences du didacticiel _html5 de l'application HTML5 CSS3

Démonstration de soupe Div

Informations tangentielle

Démonstration de soupe Div

Informations tangentielle

Articles Liés