• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

    Tout ce que nous avons vu au Xbox Developer Direct d’aujourd’hui

    Tout ce que nous avons vu au Xbox Developer Direct d’aujourd’hui

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

    À la recherche d’un emploi en développement Web ?  Vérifiez la dernière date, le lien d’application, l’allocation ici

    À la recherche d’un emploi en développement Web ? Vérifiez la dernière date, le lien d’application, l’allocation ici

    À la recherche d’un emploi dans le développement Web ?  Voici une liste de stages auxquels postuler

    À la recherche d’un emploi dans le développement Web ? Voici une liste de stages auxquels postuler

  • Astuces
    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

    Shopify chute légèrement alors que les pertes et les licenciements se profilent

    Shopify chute légèrement alors que les pertes et les licenciements se profilent

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
ADVERTISEMENT
Home Developpement web Language HTML5

Que sont les feuilles de style en cascade et à quoi sert CSS?

Caleb by Caleb
mai 16, 2021
in Language HTML5
0
0
Que sont les feuilles de style en cascade et à quoi sert CSS?
334
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


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 Web, ils vous permettent de contrôler la manière dont les appareils rendent 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 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. le Couleur La propriété définit la couleur de premier plan (par exemple le texte). La taille de la police dépend de la taille de police propriété.

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: value

Par example:

color: red

Les 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 façons d’écrire la déclaration précédente:

color: #ff0000
color: rgb(255, 0, 0)

Comment HTML et feuilles de style s’associent

Vous pouvez combiner HTML et CSS de différentes manières, chacune avec ses avantages.

Écriture de styles 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:

<body style="color: red">
<p>Most of this text is red …</p>
<p style="color: blue">… but this isn’t!</p>
</body>

Bien que le style d’éléments en ligne comme celui-ci puisse être pratique, il présente 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 souhaite définir la couleur de chaque paragraphe. Il s’agit de CSS, mais pas de “Feuilles de style”.

Incorporer les styles dans la tête

Vous pouvez commencer à voir à quoi ressemble une feuille de style avec le deuxième mécanisme, incorporer. 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:

<!DOCTYPE html>
<html>
<head>
<style>
/* style instructions go here */
</style>
</head>
<body>
...

Cependant, nos instructions de style ont besoin d’un peu plus de détails qu’avant. Depuis que nous les avons déplacées vers la tête, chaque règle n’est plus associée à un élément. Nous aurions pu déclarer La couleur rouge, mais qu’est-ce qui devrait avoir cette couleur?

C’est ici que Sélecteurs CSS Entrez. 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:

selector {
declaration1;
declaration2;
/* etc. */
}

Par exemple, pour styliser le texte des paragraphes en bleu, nous pouvons spécifier ce qui suit:

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

Mots clés.

Lier une feuille de style externe

La dernière méthode à couvrir est la liaison. C’est, de loin, l’approche la plus utile et celle que vous devriez opter la plupart du temps. Au lieu d’incorporer des règles CSS dans le style élément directement dans votre document, vous pouvez les déplacer vers un fichier séparé.

<link rel="stylesheet" href="https://www.makeuseof.com/what-is-css-used-for/styles.css" />

Collez ce code dans le balises de votre fichier HTML pour lier votre feuille de style externe.

La puissance du CSS

Avec la méthode liée, nous exploitons une puissance fondamentale 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 pouvez changer une feuille de style simplement en modifiant la référence de fichier. Cela peut même se produire de manière dynamique. En une seule étape, vous pouvez modifier l’apparence et la convivialité d’une page.

  • De nombreuses pages peuvent partager les mêmes feuilles de style selon les besoins. En modifiant un seul fichier, vous pouvez mettre à jour l’aspect et la convivialité d’un site Web entier.

  • La division d’une page en «contenu» et «style» présente des avantages techniques. Les proxys et les navigateurs peuvent mettre en cache des fichiers individuels séparément. Cela signifie qu’un site peut envoyer ses informations de style une fois, plutôt que de les inclure dans chaque page.

  • Lors de la collaboration, différentes équipes peuvent exploiter leurs atouts, en créant et en modifiant des fichiers séparés sans s’affecter mutuellement.

Expliquer la cascade

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 des 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 du 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 grand et audacieux, même sans aucune feuille de style d’auteur? C’est grâce à un ensemble de règles spéciales qui composent 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 «les titres sont en gras» mais que l’auteur de la page déclare «les titres de cette page sont légers», ils finiront par être légers.

Il existe une autre source de feuille de style qui confie un certain contrôle au lecteur. Tout utilisateur Web 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 utilisateur remplaceront les paramètres par défaut du navigateur, mais seront elles-mêmes remplacées par les styles d’auteur. Malheureusement, la prise en charge des feuilles de style utilisateur n’a jamais été répandue.

Vous pouvez utiliser les feuilles de style dans différents contextes, au-delà de l’écran. le médias attribut du relier L’élément définit les types de supports auxquels la feuille de style s’applique. Par exemple, vous pouvez définir un feuille de style pour impression en utilisant un balisage comme celui-ci:

<link rel="stylesheet" href="https://www.makeuseof.com/what-is-css-used-for/print.css" media="print" />

Vous pouvez rassembler des styles communs dans une seule 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.

Page CSS Wikipédia

CSS donne une belle apparence au HTML

Les feuilles de style en cascade couvrent beaucoup: la cascade, l’héritage, les sélecteurs, les sources, les médias, etc. Mais leur puissance permet au Web moderne. Il s’agit d’un support qui offre des fonctionnalités intégrées de réutilisabilité, de flexibilité et d’accessibilité.

Pour voir toute la puissance du CSS et tout ce qu’il a à offrir, consultez notre aide-mémoire couvrant toutes les propriétés CSS3 essentielles.


Capture d'écran d'exemples de propriétés CSS utilisées dans un extrait de code
Aide-mémoire sur les propriétés CSS3 essentielles

Maîtrisez la syntaxe CSS essentielle avec notre feuille de triche sur les propriétés CSS3.

Lire la suite


A propos de l’auteur

Bobby Jack
(42 articles publiés)

Bobby est un passionné de technologie qui a travaillé comme développeur de logiciels pendant la majeure partie de deux décennies. Il est passionné de jeux vidéo, travaille en tant que rédacteur de critiques chez Switch Player Magazine et est immergé dans tous les aspects de la publication en ligne et du développement Web.

Plus de Bobby Jack

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives!

Un pas de plus…!

Veuillez confirmer votre adresse e-mail dans l’e-mail que nous venons de vous envoyer.

.



— to www.makeuseof.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5600 shares
    Share 2240 Tweet 1400
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1700 shares
    Share 680 Tweet 425
  • GOLDEN FARM BIZ: earn unlimited money online

    346 shares
    Share 138 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    512 shares
    Share 205 Tweet 128
  • Erreur C14a du code d’assistance Snapchat : comment y remédier ?

    556 shares
    Share 222 Tweet 139

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

GOLDEN FARM BIZ: earn unlimited money online

GOLDEN FARM BIZ: earn unlimited money online

février 4, 2023
Les 7 actions technologiques révolutionnaires les plus prometteuses à acheter en février

Les 7 actions technologiques révolutionnaires les plus prometteuses à acheter en février

février 2, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.