Révision du niveau de priorité du style CSS

La feuille de style en cascade (CSS) est, je pense, le plus simple des langages comparé aux autres langages liés au Web, il n’est donc pas surprenant de constater que de nombreuses personnes qui commencent tout juste à apprendre à créer un site Web apprendront principalement ce langage et HTML en premier.

Dans cet article, nous allons revenir aux bases de CSS. Nous allons examiner comment les styles CSS sont appliqués à l’origine, quels styles s’appliqueront, comment certaines déclarations de styles s’écraseront, d’autres non..

Cet article est donc spécifiquement destiné aux débutants qui commencent tout juste à comprendre les défis, et qui font probablement encore des erreurs lors de la compilation de leur première feuille de style. Alors commençons.

Styles de navigateur par défaut

Firefox, Chrome, Safari, Opera et Internet Explorer sont actuellement les cinq principaux navigateurs de bureau du marché. Ces navigateurs et tous les autres navigateurs suivent une règle standard pour inclure les styles par défaut intégrés pour le rendu des éléments HTML..

Ainsi, lorsque nous ajoutons des éléments HTML aléatoires sans aucun style, vous verrez qu'il est toujours correctement rendu dans le navigateur..

Mais si nous inspectons ces éléments avec soin, chacun des navigateurs a des valeurs (légèrement) différentes pour leur “défaut” déclaration qui provoque des incohérences entre les navigateurs, en particulier dans les anciens, comme IE6, 7 et Firefox 3.0.

Par exemple, comme vous pouvez le voir sur la capture d'écran ci-dessus, le dernier Firefox a rendu le blockquote par défaut avec marge: 16px 40px 16px 40px, tandis que de l'autre côté le Internet Explorer 7 rendra blockquote avec marge: 0px 40px.

Pour surmonter les incohérences présentées ci-dessus, de nombreux concepteurs et développeurs Web préfèrent écraser tous ces styles avec CSS Réinitialiser. Ce fichier CSS contient généralement presque tout le HTML Type des sélecteurs, en les définissant avec des règles identiques.

Il existe de nombreuses réinitialisations CSS disponibles, mais voici mes trois principaux favoris:

Normalize.css
CSS Réinitialiser
HTML5 Réinitialiser la feuille de style

Sélecteurs

Vous lisez probablement souvent ce terme sur les blogs de conception / développement de sites Web que vous avez visités; Sélecteurs.

Le sélecteur en CSS est la syntaxe utilisée pour cibler les parties du document HTML auxquelles les styles doivent être appliqués. Nous allons discuter ici de trois sélecteurs de base, qui seront probablement les sélecteurs courants utilisés sur votre premier site Web. Nous en couvrirons d'autres dans les prochains articles.

Sélecteur de type

Nous avons mentionné une fois ci-dessus, le sélecteur de type ciblera tous les éléments HTML spécifiés sur le document. Par exemple:

 p / ** déclaration ** /

correspondra à tous les p ou la paragraphe éléments et l’utiliser finira par écraser les styles par défaut fournis par les navigateurs.

Sélecteur de classe

Lorsque vous avez ajouté une classe ou même plusieurs classes à un élément, vous pouvez également cibler ces classes. le Sélecteur de classe commence par un point paramètre.

 .box / ** declaration ** /

Le fragment de code ci-dessus correspond à tous les éléments de la classe box. Nous pouvons également sélectionner plus spécifiquement.

 p.box / ** declaration ** /

Il ciblera uniquement les p élément qui a le boîte classe.

Quand on utilise le Classe sélecteur, tous les mêmes styles déclaration de la Type sélecteur et le Navigateur par défaut sera écrasé.

Sélecteur d'identifiant

le ID est un attribut très restrictif, on ne peut en avoir qu'un identifiant sur un élément et il doit être unique aussi bien.

 Contenu

Si nous avons un identifiant dans un élément, on peut utiliser le sélecteur d'identifiant cibler cet élément; le sélecteur d'identifiant est défini avec un hachage # paramètre.

 #uniqueID / ** declaration ** /

Depuis le ID est unique, il possède le niveau de priorité le plus élevé du type de sélecteur. Ainsi, lorsque nous déclarons des styles avec le ID sélecteur, il va finalement écraser toute la même déclaration de la Classe, Type sélecteurs et le Navigateur par défaut modes.

Intégrer les styles

Nous avons passé en revue tous les sélecteurs de base essentiels et nous allons maintenant examiner comment ces styles sont incorporés dans un document HTML..

Styles externes

Les styles externes sont les styles ajoutés dans un fichier séparé, généralement dans un fichier. .css fichier qui sont ensuite liés au document HTML en utilisant le balise pour appliquer ces styles.

Et tous les styles déclarés dans les fichiers se comporteront comme ce que nous avons mentionné dans le Sélecteurs section ci-dessus, à savoir, il écrasera principalement le navigateur par défaut style et écraser dans une autre déclaration de style en fonction du niveau de priorité des sélecteurs.

Cette pratique est le moyen le plus recommandé d’attacher les styles, en particulier lorsque vous avez des milliers de lignes de codes CSS avec plusieurs pages à attacher..

De cette manière, les styles seront également faciles à gérer. Par exemple, vous pouvez séparer les fichiers CSS en plusieurs fichiers en fonction de leur rôle spécifique, tel que typography.css pour contrôler tous les styles liés à la typographie, etc..

Styles Internes

Les styles internes sont les styles directement incorporés dans un document HTML, généralement à l'intérieur du document. étiquette.

Toutefois, cette pratique n’est pas recommandée lorsque vous avez des centaines de lignes de styles, car votre page HTML sera trop longue et le style n’affectera que l’endroit où les styles sont incorporés. Une fois que vous avez laissé dix pages, vous devez copier ces styles et les incorporer dans toutes les pages. Lorsque vous devez modifier les styles, vous devez le modifier en dix pages différentes, ce qui est évidemment une tâche fastidieuse..

En fonction de son niveau de priorité, le style interne est plus élevé, de sorte qu'il écrasera les styles externes..

Styles en ligne

Les styles en ligne sont les styles directement incorporés dans l'élément HTML..

Ceci est un paragraphe

Cet exemple ci-dessus va ajouter 5px margin à l'élément paragraph et écrasera également les marges déclarées pour cet élément dans les styles interne et externe.

Mais évitez cela, car votre balisage sera encombré de toutes ces déclarations de style; si vous avez un tas de styles intégrés, il deviendra même un cauchemar de voir et de gérer tous vos styles et styles HTML..

Lectures complémentaires: Trois façons d'insérer du CSS - W3CSchools.

La règle! Importante

Il existe certaines circonstances dans lesquelles nous devons appliquer un style spécifique pour un élément mais le même style pour cet élément a également été déclaré ailleurs dans la feuille de style ou dans le document. Par exemple:

Nous avons la balise d'ancrage suivante avec des styles intégrés

 Ceci est un lien

Et nous avons également un style séparé pour cette balise d'ancrage dans la feuille de style.

 un border: 1px solid # 333; couleur de fond: # 555;

Dans cet exemple, nous pouvons utiliser le !important règle pour forcer le navigateur à utiliser les styles de la feuille de style au lieu de ceux de l'élément.

 un border: 1px solid # 333! important; couleur de fond: # 555! important;

le !important règle indiquera que ce style est le plus important et doit être appliqué sur l'autre style même s'il est directement intégré à l'élément (Styles en ligne).

Lectures complémentaires:! importantes déclarations CSS: comment et quand les utiliser - Smashing Magazine.

Conclusion

Nous avons abordé tout le sujet dans cet article. Nous pouvons voir maintenant que chaque sélecteur et la manière dont nous intégrons les styles ont des niveaux de priorité différents dans le mécanisme du navigateur. Comme je l'ai déjà mentionné, ces sujets sont destinés aux novices et ne sont donc certainement pas une nouveauté pour les concepteurs Web chevronnés..

Mais, je pense que tous les concepteurs de sites Web conviendront en général qu’il est parfois nécessaire de revenir à la base pour revoir nos connaissances fondamentales sur un sujet donné. En fait, certains éléments de base nous manquent souvent, car nous avons tendance à être plus impressionnés par des trucs géniaux (et fous) comme celui-ci..

Enfin, j'ai fourni une démo et un fichier source pour que vous puissiez examiner plus en détail notre discussion dans cet article..

Démo
Source de téléchargement

J'espère que vous apprécierez ce message et que si vous trouvez des imprécisions dans ce message ou si j'ai manqué des points importants, n'hésitez pas à m'en informer dans la section commentaires ci-dessous..