Les styles CSS en HTML

CSS signifie Feuilles de style en cascade.

CSS décrit la façon dont les éléments HTML doivent être affichés sur l'écran, sur le papier ou sur d'autres supports.

CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois.

CSS peut être ajouté aux éléments HTML de 3 façons:

En ligne - en utilisant l'attribut style dans les éléments HTML
Interne - en utilisant un élément <style> dans la section <head>
Externe - à l'aide d'un fichier CSS externe
Le moyen le plus courant d'ajouter des CSS, c'est de conserver les styles dans des fichiers CSS distincts. Cependant, nous utiliserons ici le style interne et interne, car cela est plus facile à démontrer et plus facile pour vous de l'essayer vous-même.

CSS en ligne :

Un CSS en ligne est utilisé pour appliquer un style unique à un seul élément HTML.

Un CSS en ligne utilise l'attribut de style d'un élément HTML.

Cet exemple définit la couleur du texte de l'élément <h1> en bleu:

<h1 style="color:blue;"> C'est un titre en bleu </h1>

C’est un titre en bleu

 

CSS interne: :

Un CSS interne est utilisé pour définir un style pour une seule page HTML.

Un CSS interne est défini dans la section <head> d'une page HTML, dans un élément <style>:

<!DOCTYPE html>
<html>
    <head>
         <style>
              body {background-color: powderblue;}
              h1   {color: blue;}
              p    {color: red;}
        </style>
    </head>
    <body>

        <h1>C’est un titre</h1>
        <p>c’est un paragraphe </p>
    </body>
</html>




CSS externe :

Une feuille de style externe est utilisée pour définir le style de plusieurs pages HTML.

Avec une feuille de style externe, vous pouvez modifier l'aspect d'un site Web entier en changeant un fichier!

Pour utiliser une feuille de style externe, ajoutez un lien à celle-ci dans la section <head> de la page HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>C’est un titre </h1>
<p>C’est un paragraphe.</p>
</body>
</html>


Une feuille de style externe peut être écrite dans n'importe quel éditeur de texte. Le fichier ne doit contenir aucun code HTML et doit être enregistré avec une extension .css.

Voici comment ressemble le style.css:


Références externes ou style importé:
Les feuilles de style externes peuvent être référencées avec une URL complète

Gestion de la priorité des styles CSS :
Lorsque vous définissez un style à un document ou une balise vous pouvez le faire de différentes manières. Si vous le faites de deux (ou plus) manières différentes, il faut bien que le navigateur choisisse le style qu'il devra utiliser pour afficher correctement l'élément en cause. Il existe donc des priorités d'affichage. Voici les priorités d'affichage par ordre décroissant :
  • Le style en ligne : 

<h1 style="color :blue"></h1>

  • Le style dans le document  : <style type="text/css">
h1  {
color : blue ;
}
</style>
  • Le style importé : <style type="text/css">@import url('mon-style.css');</style>


  • Le style externe : <link rel="stylesheet" href="style.css" media="screen" type="text/css" />


Exemple:

<!DOCTYPE html>
<html>
    <head>

              

          <link rel=”stylesheet” href =”style.css” media=”screen” type=”text/css”>
         <style>
            
              h1   {color: blue;}
              p    {color: red;}
        </style>
    </head>
    <body>

        <h1 style = “color:red”>C’est un titre</h1>
        <p style =”color:blue”>C’est un paragraphe </p>
    </body>
</html>

Donne le résultat suivant :

C’est un titre

C’est un paragraphe

 h1  et p prennent les couleurs rouge et bleu dont le style est affectée en ligne ,les navigateurs prennent en priorité les styles en ligne puis les styles internes  qui existent dans le document  puis les styles externes liés à ce document (style.css)
La cascade :


C'est la faculté de certains langages de feuilles de style, tel que CSS, d'assembler les informations de style provenant de plusieurs sources. Celles-ci pourraient être, par exemple, la charte de style d'une entreprise, les styles communs à un groupe de documents et les styles propres à un seul document. En les stockant séparément, les feuilles de style peuvent être réutilisées, ce qui simplifie l'édition et utilise plus efficacement les caches du réseau. La cascade définit une séquence ordonnée de feuilles de style dans laquelle les dernières feuilles de style ont une priorité plus élevée que les premières. Certains langages de feuille de style ne gèrent pas la cascade.

Les dépendances aux médias:

HTML permet aux auteurs de spécifier les documents indépendamment du média. Cela permet aux utilisateurs l'accès aux pages Web au moyen d'une grande variété d'appareils et de médias, par exemple, les écrans graphiques des ordinateurs tournant sous Windows, Macintosh OS ou X11, les appareils de télévision, les téléphones portables spéciaux et les agendas électroniques, les navigateurs à synthèse vocale et les appareils tactiles Braille.
Les feuilles de style, par contraste, s'applique à un média spécifique ou à un groupe de médias. Une feuille de style prévue pour un écran peut être éventuellement utilisable pour l'impression, mais sera de peu d'utilité pour un navigateur à synthèse vocale. Cette spécification permet de définir les catégories générales de médias pour lesquels une feuille de style donnée peut s'appliquer. Ceci permet aux agents utilisateurs d'éviter la recherche de feuilles de style inappropriée. Les langages de feuilles de style peuvent inclure des mécanismes décrivant les dépendances aux médias dans la même feuille de style.









Aucun commentaire

Inscription à : Articles ( Atom )
Fourni par Blogger.