Quelle est la différence entre une propriété et un sélecteur? En quoi une déclaration est-elle différente d'un bloc de déclaration et qu'est-ce qu'une règle CSS? Comment faire la différence entre une pseudo classe et un pseudo élément?
Cette série servira d'introduction de base à certains termes que chaque nouveau concepteur de sites Web devrait ajouter à son vocabulaire. Ce ne sera pas une liste de vocabulaire exhaustive, mais plutôt une introduction à quelques termes que j'ai eu du mal à comprendre lorsque j'ai commencé. Nous avons commencé avec HTML plus tôt cette semaine et nous passons aujourd’hui à quelques composants structurels de CSS.
CSS
Les feuilles de style en cascade (CSS) fournissent un style et une mise en forme au contenu généralement brut fourni via HTML. Comme nous l'avons fait avec HTML dans notre article précédent, nous pouvons trancher cette terminologie pour en tirer un sens.
Commençons par la fin. CSS est un langage de feuille de style par opposition à un langage de balisage comme HTML ou un langage de script comme JavaScript. Comme nous venons de le dire, les langages de feuilles de style sont principalement utilisés pour formater des documents. CSS est la cerise sur le gâteau HTML, ce qui signifie que la substance est vraiment dans le code HTML, mais que cela aurait l'air terriblement simple sans l'aide de CSS.
La partie la plus compliquée de cette définition est la? Cascade? partie. La façon dont les feuilles de style fonctionnent est qu’un ensemble de règles donné situé à un emplacement donné peut en réalité? Cascade? et affecter d'autres parties d'un document, que vous le vouliez ou non.
La cascade a en fait tout un ensemble de règles à respecter pour déterminer la manière dont les styles sont appliqués dans le document. Pour en savoir plus à ce sujet, consultez l'article récent de Nicolas Gallagher, CSS: la cascade, la spécificité et l'héritage. Il s'agit d'une discussion brève mais très bien expliquée sur la façon dont la cascade diffère d'autres concepts tels que la spécificité et l'héritage.
CSS3
CSS3 est la troisième itération majeure de CSS. Dans CSS2, il y avait une grande spécification, mais avec CSS3, tout a été divisé en morceaux appelés modules. Certains exemples de modules sont les suivants: couleur CSS, requêtes multimédia, animations CSS, mise en forme de boîtes flexibles, etc. Vérifiez ici la liste complète.
Chaque module est traité comme une unité et son statut est largement indépendant des autres modules. Par exemple, le module Selectors Level 3 a atteint la recommandation? statut, ce qui signifie qu'il est prêt à être mis en œuvre, alors que CSS Flexible Box Layout est toujours un? brouillon de travail? qui est en cours de révision.
La chose intéressante à propos de cette modularité est que les développeurs sont tout simplement impatients de jouer avec tous ces bonus. Ainsi, même si un module donné ne prend que très peu en charge les navigateurs et constitue un brouillon très expérimental, il est probablement toujours utilisé dans les sites en direct sur le Web. Soyez toujours prudent lorsque vous utilisez de nouvelles fonctionnalités CSS3 et assurez-vous de vérifier la compatibilité du navigateur.
L'anatomie du CSS
Lors de l'utilisation de CSS, vous devez comprendre le principe de référence aux différentes parties. Prendre le temps de maîtriser cette langue vous aidera considérablement à comprendre les didacticiels, les livres et d’autres sources d’apprentissage de CSS. Ensuite, lorsque vous lisez ou entendez le mot "propriété"? vous savez immédiatement ce qui est discuté.
Pour commencer, voici un tableau de base d’une ligne de CSS. Comme vous pouvez le voir, il y a trois pièces individuelles ici: un sélecteur, une propriété et une valeur.
Sélecteur
La première pièce du puzzle ci-dessus s'appelle un sélecteur. C’est à peu près exactement ce que cela ressemble: un moyen de sélectionner ou cible quelque chose pour le style. CSS utilise des modèles simples faisant référence à des parties du DOM (que nous avons décrites dans la première partie), puis applique des styles à cette sélection spécifique. Le code ci-dessus, par exemple, cible tous les éléments de paragraphe et définit leur valeur de couleur sur noir.
Certains sélecteurs, comme celui ci-dessus, sont incroyablement simples alors que d'autres sont très complexes. Nous discuterons plus tard de la terminologie la plus compliquée entourant les sélecteurs.
Propriété
La propriété est l’aspect de la chose ciblée que vous souhaitez modifier. Chaque élément HTML est un objet compliqué qui peut être associé à une série de propriétés. Par exemple, l'exemple ci-dessus cible tous les éléments de paragraphe, qui contiennent les paramètres par défaut pour la taille de police, la famille de polices, la couleur, la hauteur de ligne et bien plus encore, chacun pouvant être remplacé par CSS.
Certaines propriétés sont liées à des choix esthétiques mineurs, mais d’autres peuvent avoir un effet considérable sur la mise en page de votre document. Pour compliquer encore les choses, différents navigateurs attribuent souvent des valeurs par défaut différentes à diverses propriétés. Des projets comme Normalize.css vous épargnent beaucoup de travail en tentant de prendre en compte et d’éliminer ces différences.
Valeur
Après avoir ciblé quelque chose à changer et choisi la partie de l'objet à modifier, il est temps de changer quelque chose! La partie valeur vous permet de définir la propriété sur quelque chose de nouveau. Par exemple, les paramètres par défaut du navigateur peuvent en fait déjà définir vos paragraphes sur noir, mais vous pensez qu'un gris foncé est préférable, de sorte que la valeur que vous définissez pour la couleur pourrait être # 4b4b4b.
Le terme? Valeur? est un peu déroutant parce que vous l'associez probablement immédiatement à quelque chose de numérique. En effet, de nombreuses valeurs CSS sont de nature numérique. Les valeurs peuvent être exprimées en pixels (taille de police: 10px), en pourcentages (largeur: 33,33%), en em (ligne-hauteur: 1em), etc., mais elles peuvent également être exprimées d'une autre manière. Considérez les exemples suivants:
Comme vous pouvez le constater, il s'agit d'un gros bloc de CSS avec beaucoup de valeurs, mais il n'y a pas un seul chiffre en vue! Il suffit de garder à l’esprit que le terme? Valeur? est assez générique ici et peut faire référence à un certain nombre de types d’entrées.
Déclaration contre bloc de déclaration contre règle
Ce sont des termes qui me font constamment trébucher et pour être honnête, je ne l’avais pas beaucoup exploré avant d’écrire cet article. Les déclarations, les blocs de déclaration et les règles sont tellement similaires qu'il est facile de mélanger les étiquettes et d'utiliser une terminologie erronée.
En fin de compte, ce n’est pas la pire chose au monde si vous le dites mal, mais encore une fois si vous lisez ou regardez un tutoriel, il est utile de savoir précisément de quoi parle l’enseignant. Voici un tableau rapide qui, espérons-le, permet de clarifier instantanément le sens de chaque terme:
Comme vous pouvez le constater, nous avons un cas clair de hiérarchie. Commençons petit et progressons. UNE déclaration est composé d'une propriété et d'une valeur (couleur: rouge). UNE bloc de déclaration est une ou plusieurs déclarations contenues entre accolades et séparées par des points-virgules: {color: red; width: 20px;}. Enfin, lancez un sélecteur dans ce mélange et vous aurez une règle.
Types de sélecteurs
Vous devriez maintenant avoir une bonne idée de ce que sont les sélecteurs, mais saviez-vous qu'il existe de nombreux types de sélecteurs? En voici quelques-unes que vous devriez connaître.
Sélecteurs de type
Ce sont le type le plus fondamental de sélecteur. Selon le module de sélecteurs de niveau 3, un sélecteur de type? Représente une instance du type d'élément dans l'arborescence du document.? Les exemples de sélecteurs de type incluent ceux qui ciblent simplement un type spécifique d'élément HTML:
Sélecteurs de classe ou sélecteurs d'ID
Outre les sélecteurs de type, deux des types de sélecteurs les plus courants que vous verrez en CSS sont les sélecteurs de classe et les sélecteurs d'ID. Comme nous l'avons appris la dernière fois, la principale différence entre les classes et les identifiants réside dans le fait que les classes sont réutilisables et que les identifiants sont uniques.
Vous pouvez cibler une classe donnée à partir de votre code HTML avec un sélecteur de classe, toujours précédé d'un point. De même, vous pouvez cibler n'importe quel identifiant de votre code HTML avec un sélecteur d'identifiant, toujours précédé d'un symbole de hachage.
Sélecteurs d'attributs
Les classes et les ID sont en fait des attributs HTML assez communs pour mériter des sélecteurs spéciaux, mais il existe également de nombreux autres attributs. Par exemple, considérons l'extrait suivant:
Ici, nous avons deux éléments d'ancrage qui contiennent attributs href. Vous savez probablement que vous pouvez utiliser CSS pour cibler toutes les balises d'ancrage en même temps, mais saviez-vous que vous pouviez spécifiquement cibler une valeur href spécifique?
Ici nous avons utilisé un sélecteur d'attribut pour ne cibler que le href avec la valeur 'https://designshack.net/' et changer sa couleur en blanc. Ceci ignore complètement l'autre ancre dans notre exemple. Les sélecteurs d'attributs donnent lieu à certains des sélecteurs CSS les plus complexes que vous aurez jamais vus.
Heureusement, nous avons un excellent article qui vous apprend tout sur les sélecteurs d'attributs et sur l'interprétation des sélecteurs loufoques comme celui-ci.
Descendants, sélecteurs pour enfants et frères et soeurs
Quelques sélecteurs commencent à ressembler à un arbre généalogique (ce qui rejoint notre discussion sur le DOM de la dernière fois). Par exemple, voici le combinateur descendant:
Cela ciblera tous les paragraphes qui sont des descendants des éléments d’en-tête. Notez que les descendants ne sont pas les mêmes que les enfants. Comme avec votre famille, tous les enfants d'un objet sont des descendants, mais tous ses descendants ne sont pas ses enfants. Le sélecteur au-dessus des cibles tout des paragraphes ici:
Disons que nous voulions cibler uniquement les enfants de l'élément header. Pour ce faire, nous utiliserions le combinateur enfant. Cela ciblera uniquement les deux premiers paragraphes du code HTML ci-dessus.
Il existe également des combinateurs frères et soeurs (généraux et adjacents). Vous les trouverez dans notre article CSS Selectors: Just the Tricky Bits. Voici à quoi ils ressemblent:
Le premier sélecteur cible tout paragraphe immédiatement précédé d'un élément h1 (frère adjacent) tandis que le second sélecteur cible tout paragraphe précédé d'un h1, qu'il s'agisse ou non de l'élément précédent (frère général).
Pseudo-classes vs pseudo-éléments
Un autre domaine particulier des sélecteurs est le sujet des pseudo-classes et des pseudo-éléments. Pour rendre cette discussion plus claire, voici un graphique que j'ai créé pour The Lowdown sur: Before et: After en CSS.
Nous pouvons voir ici quelques pseudo-classes familières telles que flotter avec certains qui un peu plus rares tels que premier enfant. Mais comment sont-ils différents que les pseudo-éléments tels que :avant et :Première ligne?
La réponse est plutôt simple. Rappelez-vous simplement que les pseudo-classes ciblent éléments complets ou états des éléments tandis que les pseudo-éléments ciblent sous-parties d'un élément. Par exemple, le flotter La pseudo-classe peut être appliquée à une ancre, un paragraphe, un div, etc. :Première ligne ne cible pas un paragraphe entier mais juste un morceau de celui-ci.
Avec quels termes CSS vous débattez-vous?
Je voulais que cet article soit un peu plus complet, mais je me suis tellement intégré à la structure de base de CSS que je devais m'arrêter là. Je vais probablement continuer et écrire une troisième partie de cette série qui couvre un autre jargon CSS commun qui n'a pas été discuté ici.
Pour aider à alimenter le prochain article, laissez un commentaire ci-dessous et indiquez les concepts et termes CSS avec lesquels vous êtes confrontés. Quelles phrases entendez-vous être utilisées de manière interchangeable même si elles ne signifient pas nécessairement la même chose?