Premiers pas avec CSS

Feuille de style externe

Une feuille de style CSS externe peut être appliquée à n’importe quel nombre de documents HTML en plaçant un élément <link> dans chaque document HTML.

L’attribut rel de la balise <link> doit être défini sur "stylesheet", et l’attribut href sur le chemin relatif ou absolu de la feuille de style. Bien que l’utilisation de chemins d’URL relatifs soit généralement considérée comme une bonne pratique, des chemins absolus peuvent également être utilisés. En HTML5, l’attribut type peut être omis.

Il est recommandé de placer la balise <link> dans la balise <head> du fichier HTML afin que les styles soient chargés avant les éléments qu’ils stylisent. Sinon, [les utilisateurs verront un flash de contenu sans style] (http://stackoverflow.com/a/1642259/2397327).

Exemple

hello-world.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

Assurez-vous d’inclure le chemin correct vers votre fichier CSS dans le href. Si le fichier CSS se trouve dans le même dossier que votre fichier HTML, aucun chemin n’est requis (comme dans l’exemple ci-dessus), mais s’il est enregistré dans un dossier, spécifiez-le comme ceci href="foldername/style.css".

<link rel="stylesheet" type="text/css" href="foldername/style.css">

Les feuilles de style externes sont considérées comme le meilleur moyen de gérer votre CSS. Il y a une raison très simple à cela : lorsque vous gérez un site de, disons, 100 pages, toutes contrôlées par une seule feuille de style, et que vous souhaitez modifier les couleurs de vos liens du bleu au vert, il est beaucoup plus facile d’effectuer le changement. dans votre fichier CSS et laissez les modifications “cascade” sur les 100 pages plutôt que d’aller dans 100 pages distinctes et d’effectuer la même modification 100 fois. Encore une fois, si vous souhaitez changer complètement l’apparence de votre site Web, il vous suffit de mettre à jour ce fichier.

Vous pouvez charger autant de fichiers CSS dans votre page HTML que nécessaire.

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

Les règles CSS sont appliquées avec quelques règles de base, et l’ordre est important. Par exemple, si vous avez un fichier main.css contenant du code :

p.green { color: #00FF00; }

Tous vos paragraphes avec la classe ‘vert’ seront écrits en vert clair, mais vous pouvez remplacer cela par un autre fichier .css simplement en l’incluant après main.css. Vous pouvez faire en sorte que override.css avec le code suivant suive main.css, par exemple :

p.green { color: #006600; }

Maintenant, tous vos paragraphes avec la classe ‘vert’ seront écrits en vert plus foncé plutôt qu’en vert clair.

D’autres principes s’appliquent, tels que la règle ‘!important’, la spécificité et l’héritage.

Lorsqu’une personne visite votre site Web pour la première fois, son navigateur télécharge le code HTML de la page actuelle ainsi que le fichier CSS lié. Ensuite, lorsqu’ils naviguent vers une autre page, leur navigateur n’a qu’à télécharger le code HTML de cette page ; le fichier CSS est mis en cache, il n’a donc pas besoin d’être téléchargé à nouveau. Étant donné que les navigateurs mettent en cache la feuille de style externe, vos pages se chargent plus rapidement.

Styles internes

CSS inclus dans les balises <style></style> dans un document HTML fonctionne comme une feuille de style externe, sauf qu’il vit dans le document HTML qu’il stylise au lieu d’être dans un fichier séparé, et ne peut donc être appliqué qu’au document dans qu’il habite. Notez que cet élément doit être à l’intérieur de l’élément <head> pour la validation HTML (bien qu’il fonctionnera dans tous les navigateurs actuels s’il est placé dans body).

<head>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        p {
            font-size: 25px;
            font-family: 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
</body>

CSS @import rule (l’une des règles CSS at)

La règle @import CSS est utilisée pour importer des règles de style à partir d’autres feuilles de style. Ces règles doivent précéder tous les autres types de règles, à l’exception des règles @charset ; comme il ne s’agit pas d’une instruction imbriquée, @import ne peut pas être utilisé à l’intérieur des règles at du groupe conditionnel. @import.

Comment utiliser @import

Vous pouvez utiliser la règle @import des manières suivantes :

UN. Avec étiquette de style interne

   <style>
    @import url('/css/styles.css');
   </style>

B. Avec feuille de style externe

La ligne suivante importe un fichier CSS nommé additional-styles.css dans le répertoire racine dans le fichier CSS dans lequel il apparaît :

@import '/additional-styles.css';

L’importation de CSS externes est également possible. Un cas d’utilisation courant sont les fichiers de police.

@import 'https://fonts.googleapis.com/css?family=Lato';

Un deuxième argument facultatif de la règle @import est une liste de requêtes multimédia :

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);

Styles en ligne

Utilisez des styles en ligne pour appliquer un style à un élément spécifique. Notez que ce n’est pas optimal. Placer des règles de style dans une balise <style> ou un fichier CSS externe est encouragé afin de maintenir une distinction entre le contenu et la présentation.

Les styles en ligne remplacent tout CSS dans une balise <style> ou une feuille de style externe. Bien que cela puisse être utile dans certaines circonstances, ce fait réduit le plus souvent la maintenabilité d’un projet.

Les styles de l’exemple suivant s’appliquent directement aux éléments auxquels ils sont attachés.

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>

Les styles en ligne sont généralement le moyen le plus sûr d’assurer la compatibilité du rendu entre divers clients de messagerie, programmes et appareils, mais peuvent prendre du temps à écrire et un peu difficiles à gérer.

Changer CSS avec JavaScript

JavaScript pur

Il est possible d’ajouter, de supprimer ou de modifier les valeurs des propriétés CSS avec JavaScript via la propriété style d’un élément.

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

Notez que les propriétés de style sont nommées en minuscules camel. Dans l’exemple, vous voyez que la propriété css font-family devient fontFamily en javascript.

Au lieu de travailler directement sur les éléments, vous pouvez créer un élément <style> ou <link> en JavaScript et l’ajouter au <body> ou `` du document HTML.

jQuery

Modifier les propriétés CSS avec jQuery est encore plus simple.

$('#element').css('margin', '5px');

Si vous devez modifier plusieurs règles de style :

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQuery inclut deux façons de modifier les règles CSS contenant des tirets (c’est-à-dire font-size). Vous pouvez les mettre entre guillemets ou mettre en majuscule le nom de la règle de style.

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});

Voir également

  • [Documentation JavaScript – Lire et modifier le style CSS][1].
  • [Documentation jQuery – Manipulation CSS][2]

[1] : https://www.wikiod.com/fr/javascript [2] : https://www.wikiod.com/fr/jquery/manipulation-css

Styliser les listes avec CSS

Il existe trois propriétés différentes pour styliser les éléments de liste : list-style-type, list-style-image et list-style-position, qui doivent être déclarées dans cet ordre. Les valeurs par défaut sont disc, outside et none, respectivement. Chaque propriété peut être déclarée séparément ou en utilisant la propriété abrégée list-style.

list-style-type définit la forme ou le type de puce utilisé pour chaque élément de liste.

Certaines des valeurs acceptables pour list-style-type :

  • disque
  • cercle
  • carré
  • décimal
  • bas-romain
  • haut-romain
  • rien

(Pour une liste exhaustive, voir le W3C spécification wiki)

Pour utiliser des puces carrées pour chaque élément de liste, par exemple, vous utiliseriez la paire propriété-valeur suivante :

li {
    list-style-type: square;
}

La propriété list-style-image détermine si l’icône de l’élément de liste est définie avec une image et accepte une valeur de none ou une URL qui pointe vers une image.

li {
    list-style-image: url(images/bullet.png);
}

La propriété list-style-position définit où positionner le marqueur d’élément de liste et accepte l’une des deux valeurs : “inside” ou “outside”.

li {
  list-style-position: inside;
}