Home-theater-designers
CSS appartient à un triplet de technologies Web de base aux côtés de HTML et JavaScript. Avec une planification minutieuse, CSS contribue à une séparation des préoccupations. Des ressources indépendantes contrôlent la structure d'un contenu, sa présentation et son comportement.
Les feuilles de style jouent un rôle important dans l'accessibilité, l'évolutivité et même les performances Web. En tant qu'auteur de contenu ou concepteur de sites Web, ils vous permettent de contrôler la manière dont les appareils affichent le contenu. De la mise en page à la taille et à la couleur de la police, CSS transforme le contenu en de belles pages.
À quoi ressemble le CSS ?
CSS est un grand langage, il y a beaucoup de choses différentes à styliser ! Mais sa syntaxe est simple, avec seulement quelques règles à apprendre.
Les éléments HTML ont diverses propriétés que CSS peut styliser. Les Couleur La propriété définit la couleur de premier plan (par exemple, le texte). La taille de la police dépend du taille de police biens.
Chaque propriété peut être définie sur une valeur prise en charge. L'affectation d'une valeur à une propriété est une « déclaration ». Généralement, ils ressemblent à ceci :
property: valuePar exemple:
désactiver l'accès réseau au registre Windows
color: redLes valeurs de différentes propriétés peuvent sembler très différentes, même les valeurs de la même propriété. Par exemple, voici deux autres manières d'écrire la déclaration précédente :
color: #ff0000
color: rgb(255, 0, 0)
Comment le HTML et les feuilles de style se rejoignent
Vous pouvez combiner HTML et CSS de différentes manières, chacune avec ses avantages.
Styles d'écriture en ligne
La méthode la plus simple consiste à attacher des déclarations de style directement à un élément du fichier HTML. Vous pouvez le faire en utilisant le style attribut comme ceci :
Most of this text is red …
… but this isn’t!
Bien que des éléments de style en ligne comme celui-ci puissent être pratiques, ils présentent plusieurs inconvénients. Pour commencer, cela complique le HTML, le rendant plus difficile à lire en un coup d'œil. C'est aussi gênant à maintenir : imaginez un long document dans lequel on veut définir la couleur de chaque paragraphe. C'est du CSS, mais pas des 'Feuilles de style'.
Intégrer les styles dans la tête
Vous pouvez commencer à voir à quoi ressemble une feuille de style avec le deuxième mécanisme, encastrement . En utilisant cette approche, nous rassemblons toutes les déclarations de style dans un style élément dans le diriger de notre document. Cela ressemblera à quelque chose comme ceci :
/* style instructions go here */
...Nos instructions de style ont cependant besoin d'un peu plus de détails qu'auparavant. Depuis que nous les avons déplacés vers la tête, chaque règle n'est plus associée à un élément. On aurait pu déclarer La couleur rouge , mais qu'est-ce qui devrait avoir cette couleur ?
C'est là qu'interviennent les sélecteurs CSS. Ils nous permettent de cibler des parties spécifiques de la page et de définir leur style en un seul endroit, en utilisant cette syntaxe :
comment débloquer mon téléphone gratuitement
selector {
declaration1;
declaration2;
/* etc. */
}
Par exemple, pour styliser le texte des paragraphes en bleu, nous pouvons spécifier les éléments suivants :
p {
color: blue;
}Dans cet exemple, le sélecteur est simplement p , qui correspond à tous les éléments de paragraphe de notre document. Il colorera tout le texte en bleu, tant qu'il est dans La dernière méthode à couvrir est la liaison. C'est, de loin, l'approche la plus utile, et celle que vous devriez opter pour la plupart du temps. Au lieu d'intégrer des règles CSS dans le style élément directement dans votre document, vous pouvez les déplacer vers un fichier séparé. Collez ce code dans le balises de votre fichier HTML pour lier votre feuille de style externe. Avec la méthode liée, nous exploitons une puissance essentielle du CSS : la séparation des préoccupations. Toutes les informations sémantiques (ce que signifie le contenu) sont contenues dans le document HTML. Le style, à quoi il ressemble, se trouve dans un fichier séparé, la feuille de style. Voici quelques avantages de cette séparation : Vous avez beaucoup appris sur les styles et les feuilles de style, mais qu'en est-il de la partie en cascade du CSS ? La cascade est ce qui décide quels styles utiliser lorsque plusieurs feuilles de style sont présentes. Vous avez vu comment un auteur peut spécifier des styles pour son contenu. Mais une autre caractéristique de CSS est qu'il donne également aux lecteurs et aux fabricants de navigateurs leur mot à dire en la matière. Vous vous êtes peut-être déjà interrogé sur les styles par défaut. Par exemple, comment un H1 l'élément semble-t-il grand et audacieux, même sans feuilles de style d'auteur ? Ceci grâce à un ensemble de règles spéciales qui constituent la feuille de style de l'agent utilisateur. Ces règles sont initialement appliquées par votre navigateur Web à chaque page que vous visitez. La cascade spécifie qu'une feuille de style d'auteur s'applique après les styles d'agent utilisateur. Si notre navigateur dit que les en-têtes sont en gras mais que l'auteur de la page déclare que les en-têtes de cette page sont légers, ils finiront par être légers. Il existe une autre source de feuille de style qui laisse un certain contrôle au lecteur. Tout internaute peut, en théorie, maintenir une feuille de style utilisateur avec des règles personnalisées. Celles-ci se situent au milieu : les règles de l'utilisateur remplaceront les paramètres par défaut du navigateur, mais seront elles-mêmes remplacées par les styles de l'auteur. Malheureusement, la prise en charge des feuilles de style utilisateur n'a jamais été généralisée. Vous pouvez utiliser les feuilles de style dans différents contextes, au-delà de l'écran. Les demi attribut de la relier L'élément définit les types de médias auxquels la feuille de style s'applique. Par exemple, vous pouvez définir un feuille de style à imprimer en utilisant un balisage comme suit : Vous pouvez rassembler des styles communs dans une feuille de style globale et des styles spécifiques au support dans des fichiers séparés. Il existe même des types de supports pour les présentations sonores ou en braille de votre contenu. CSS est un outil essentiel pour améliorer l'accessibilité. En rapport: Comment naviguer sur le Web si vous êtes aveugle ou malvoyant Des sites tels que Wikipedia utilisent CSS pour contrôler leur style d'impression, masquer les éléments indésirables et simplifier la mise en page. Les feuilles de style en cascade couvrent beaucoup de choses : la cascade, l'héritage, les sélecteurs, les sources, les médias, etc. Mais leur puissance permet le Web moderne. Il s'agit d'un support qui offre des fonctionnalités de réutilisation, de flexibilité et d'accessibilité intégrées. Pour voir toute la puissance de CSS et ce qu'il a à offrir, consultez notre aide-mémoire couvrant toutes les propriétés essentielles de CSS3. Maîtrisez la syntaxe CSS essentielle avec notre aide-mémoire des propriétés CSS3. Bobby est un passionné de technologie qui a travaillé comme développeur de logiciels pendant près de deux décennies. Il est passionné par les jeux, travaillant comme rédacteur de critiques au Switch Player Magazine, et est immergé dans tous les aspects de la publication en ligne et du développement Web. Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !Lier une feuille de style externe
La puissance du CSS
Expliquer la cascade
Cibler différents médias
annonces apparaissant au hasard sur Android
CSS rend le HTML beau
A propos de l'auteur Bobby Jack(58 articles publiés) Abonnez-vous à notre newsletter