CSS Tutoriel => Démarrer avec CSS

Remarques

Les styles peuvent être créés de plusieurs manières, ce qui permet divers degrés de réutilisation et de portée lorsqu'ils sont spécifiés dans un document HTML source. Les feuilles de style externes peuvent être réutilisées dans les documents HTML. Les feuilles de style incorporées s'appliquent à l'ensemble du document dans lequel elles sont spécifiées. Les styles en ligne s'appliquent uniquement à l'élément HTML individuel sur lequel ils sont spécifiés.

Versions

Version	Date de sortie
1	1996-12-17
2	1998-05-12
3	2015-10-13

Feuille de style externe

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

L'attribut rel de la <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 de style. Sinon, les utilisateurs verront un flash de contenu non stylé .

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 d'accès correct à 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 100 pages, par exemple, toutes contrôlées par une seule feuille de style et que vous souhaitez modifier les couleurs de votre lien du bleu au vert, il est beaucoup plus facile de faire la modification. dans votre fichier CSS et laissez les changements "en cascade" dans toutes les 100 pages que dans 100 pages distinctes et faites le même changement 100 fois. Encore une fois, si vous souhaitez modifier complètement l'aspect 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 des règles de base, et l'ordre compte. Par exemple, si vous avez un fichier main.css contenant du code:

p.green { color: #00FF00; }

Tous vos paragraphes avec la classe 'green' seront écrits en vert clair, mais vous pouvez remplacer cela par un autre fichier .css en l'incluant juste après main.css. Vous pouvez avoir override.css avec le code suivant, suivi de main.css, par exemple:

p.green { color: #006600; }

Maintenant, tous vos paragraphes avec la classe «verte» 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.

Lorsque quelqu'un visite votre site Web pour la première fois, son navigateur télécharge le code HTML de la page en cours et le fichier CSS lié. Ensuite, lorsqu'ils naviguent vers une autre page, leur navigateur doit uniquement télécharger le code HTML de cette page. le fichier CSS est mis en cache, il n'est donc pas nécessaire de le télécharger à nouveau. Comme les navigateurs mettent en cache la feuille de style externe, vos pages se chargent plus rapidement.

Styles internes

Le <style></style> CSS inséré dans les balises <style></style> dans un document HTML fonctionne comme une feuille de style externe, sauf qu'il se trouve dans le document HTML qu'il filtre plutôt que dans un fichier distinct. Il ne peut donc être appliqué qu'au document dans lequel il se trouve. vies. Notez que cet élément doit être dans l'élément <head> pour la validation HTML (bien qu'il fonctionnera dans tous les navigateurs actuels s'il est placé dans le 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>

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 les règles de style dans une <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 les CSS dans une <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 différents clients, programmes et périphériques de messagerie, mais leur écriture peut être longue et difficile à gérer.

CSS @import rule (une règle CSS)

La règle @import CSS est utilisée pour importer des règles de style provenant 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é dans les règles de groupe conditionnelles. @import .

Comment utiliser @import

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

A. 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. Les fichiers de polices sont un cas d'utilisation courant.

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

Un second argument facultatif à la règle @import est une liste de requêtes de média:

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

Changer de CSS avec JavaScript

JavaScript pur

Il est possible d'ajouter, de supprimer ou de modifier les valeurs de propriété CSS avec JavaScript via la propriété de style 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 dans le style de casse camel inférieur. Dans l'exemple, vous voyez que la propriété font-family propriété css devient fontFamily en javascript.

Au lieu de travailler directement sur des éléments, vous pouvez créer un élément <style> ou <link> dans JavaScript et l'ajouter à <body> ou <head> du document HTML.

jQuery

La modification des 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. font-size ). Vous pouvez les mettre entre guillemets ou avec le nom de la règle de style.

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

Voir également

Listes de styles avec CSS

Il existe trois propriétés différentes pour les éléments de list-style-type : list-style-type , list-style-image et list-style-position , qui doivent être déclarés dans cet ordre. Les valeurs par défaut sont respectivement disque, extérieur et aucun. Chaque propriété peut être déclarée séparément ou en utilisant la propriété raccourcie de list-style .

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

Certaines des valeurs acceptables pour list-style-type :

disque
cercle
carré
décimal
bas-roman
haut-roman
aucun

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

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 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ù placer le marqueur d'élément de liste et accepte l'une des deux valeurs suivantes: "inside" ou "outside".

li {
  list-style-position: inside;
}

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS Tutoriel
Démarrer avec CSS

Recherche…