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

Les concepteurs Web peuvent réaliser des choses intéressantes en utilisant HTML4 et CSS2.1. Nous pouvons compléter la structure logique des documents et créer des sites Web riches en contenu sans utiliser l'ancienne disposition basée sur des tableaux. Nous pouvons ajouter un style magnifique et subtil à notre site Web sans utiliser les balises En fait, nos capacités de conception actuelles nous ont éloignés de cette terrible ère de guerres de navigateurs, de protocoles propriétaires et de ces pages Web laides pleines de scintillements, de défilements et de flashs.

Bien que nous utilisions désormais couramment HTML4 et CSS2.1, nous pouvons faire mieux ! Nous pouvons restructurer notre code et rendre le code de notre page plus sémantique. Nous pouvons réduire la quantité de code de style qui donne aux pages une belle apparence et les rendre plus évolutives. Maintenant, HTML5 et CSS3 attendent avec impatience tout le monde. Voyons s'ils peuvent vraiment amener notre design au niveau supérieur...

.

Dans le passé, les concepteurs utilisaient souvent des mises en page basées sur des tableaux sans aucune sémantique. Mais en fin de compte, grâce à des innovateurs comme Jeffrey Zeldman et Eric Meyer, les concepteurs intelligents ont lentement accepté la disposition

relativement plus sémantique au lieu de la disposition en tableau et ont commencé à appeler des feuilles de style externes. Mais malheureusement, une conception Web complexe nécessite de nombreux codes de structure de balises différents, nous appelons cela le syndrome "

-soup". Peut-être connaissez-vous le code suivant :

Copier le codeLe code est le suivant :

Démonstration de soupe Div

Texte Lorem ipsum bla bla bla.

> ;

Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.

Balises : HMTL, code, démo

class=" de côté">

Informations tangentielle

content"> ;

Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.

Lorem texte ipsum bla bla bla.

Bien que ce soit un peu réticent, l'exemple ci-dessus peut quand même illustrer que l'utilisation de HTML4 pour coder une conception complexe est encore trop lourde (en fait, xHTML1.1 n'est rien de plus). Mais ce qui est passionnant, c'est que HTML5 résout le syndrome "

-soupe" et nous offre un nouvel ensemble d'éléments structurels. Ces nouveaux éléments HTML5 ont une sémantique plus détaillée pour remplacer ces balises

dénuées de sens, et fournissent en même temps des hooks CSS « ​​naturels » pour les appels CSS.

Ce qui suit est un exemple de solution HTML5 :

Copier le code

Le code est le suivant :

Démonstration de soupe Div

Publié le 11 juillet 2009

ête>

Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.

Balises : HMTL, code, démo

Informations tangentielle

ête>

Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.

Balises : HMTL, code, démo

à part>

& lt;div>标签， Il s'agit d'un CSS3 qui utilise un identifiant de classe et un identifiant CSS3.所有class和id 的。

跟class属性说再见，欢迎整洁的标签　　

     的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

L'identifiant de classe et l'identifiant de la classe DIV sont associés à un CSS : div #actualités    {}

复制代码代码如下 :

div.section {}

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

我们再来看看基于HTML5的实例 : section {}

复制代码代码如下 :

article {}

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

suivant

En tant que seul élément de sous-ensemble immédiat sous 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 :

>

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)