1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: 'CSS : Feuilles de style en cascade'
slug: Web/CSS
tags:
- CSS
- Design
- Landing
- Reference
- Structure
- Styles
translation_of: Web/CSS
---
<p>{{CSSRef}}</p>
<div class="twocolumns">
<div class="hidden">
<div class="blockIndicator note">
<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> ou en <a href="/fr/docs/Glossaire/XML">XML</a> (on inclut ici les langages basés sur XML comme <a href="/fr/docs/Web/SVG">SVG</a> ou {{Glossary("XHTML", "",1)}}). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.</p>
</div>
</div>
</div>
<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a class="external" href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p>
<section id="sect1">
<ul class="card-grid">
<li><span>Introduction à CSS</span>
<p>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</p>
</li>
<li><span>Tutoriels CSS</span>
<p>Notre section <a href="/fr/Apprendre/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</p>
</li>
<li><span>La référence CSS</span>
<p><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Tutoriels">Tutoriels</h2>
<p>La section <a href="/fr/Apprendre/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p>
<dl>
<dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Introduction à CSS</a></dt>
<dd>Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.</dd>
<dt><a href="/fr/docs/Learn/CSS/Styling_text">Mettre en forme le texte</a></dt>
<dd>Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.</dd>
<dt><a href="/fr/docs/Learn/CSS/Styling_boxes">Mettre en forme les boîtes</a></dt>
<dd>Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.</dd>
<dt><a href="/fr/docs/Learn/CSS/CSS_layout">La disposition en CSS</a></dt>
<dd>Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (<em>viewport</em>). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (<em>flexbox</em>).</dd>
</dl>
</div>
<div class="section">
<h2 class="Tools" id="Références">Références</h2>
<dl>
<dt><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></dt>
<dd>Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.</dd>
<dt>Les concepts majeurs de CSS</dt>
<dd>Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
<ul>
<li><a href="/fr/docs/Web/CSS/Syntaxe">la syntaxe et les formes du langage</a></li>
<li><a href="/fr/docs/Web/CSS/Spécificité">la spécificité</a> et <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a></li>
<li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">les unités et valeurs CSS</a></li>
<li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li>
<li><a href="/fr/docs/Web/CSS/All_About_The_Containing_Block">le bloc conteneur</a></li>
<li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li>
<li>les concepts de <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>, <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a>, <a href="/fr/docs/Web/CSS/Valeur_utilisée">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/valeur_reelle">valeur réelle</a></li>
<li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Les propriétés raccourcies</a></li>
<li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles CSS (<u><em>flexbox</em></u>)</a></li>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">La grille CSS</a></li>
<li><a href="/fr/docs/Web/CSS/Requêtes_média">Les <em>media queries</em> (requêtes media)</a></li>
<li><a href="/fr/docs/Web/CSS/animation">Les animations</a></li>
</ul>
</dd>
</dl>
<h2 class="Tools" id="Livre_de_recettes">Livre de recettes</h2>
<p><a href="/fr/docs/Web/CSS/Layout_cookbook">Le livre de recettes de disposition CSS</a> contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.</p>
<h2 class="Tools" id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2>
<ul>
<li><a href="https://jigsaw.w3.org/css-validator/">Le service de validation CSS du W3C</a> permet de vérifier si une feuille de style CSS est valide.</li>
<li><a href="/fr/docs/Outils">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Outils/Inspecteur">l'inspecteur</a> et à <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de styles</a>.</li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">L'extension Web Developer</a> permet d'éditer le code CSS des sites visités à la volée.</li>
<li><a href="/fr/docs/Web/CSS/Tools">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li>
</ul>
</div>
</div>
</section>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/Apprendre/CSS">La partie CSS de la section Apprendre le Web.</a></li>
<li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossaire/XML">XML</a>.</li>
<li>Des technologies Mozilla qui emploient CSS : <a href="/fr/docs/Mozilla/Firefox">Firefox</a>, <a href="/fr/docs/Mozilla/Add-ons/Thèmes">les thèmes</a> et <a href="/fr/docs/Mozilla/Thunderbird">extensions Thunderbird</a>.</li>
</ul>
|
