diff options
Diffstat (limited to 'files/fr/apprendre/css/comment')
5 files changed, 938 insertions, 0 deletions
diff --git a/files/fr/apprendre/css/comment/créer_de_belles_boîtes/index.html b/files/fr/apprendre/css/comment/créer_de_belles_boîtes/index.html new file mode 100644 index 0000000000..8e6fdc1761 --- /dev/null +++ b/files/fr/apprendre/css/comment/créer_de_belles_boîtes/index.html @@ -0,0 +1,314 @@ +--- +title: Créer de belles boîtes +slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto/create_fancy_boxes +--- +<p class="summary">Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> + +<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition en CSS</a>.</p> + +<p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p> + +<p>Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :</p> + +<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> + +<p>Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?</p> + +<ul> + <li>Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc.</li> + <li>Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc.</li> + <li>Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}}</li> + <li>Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc.</li> +</ul> + +<p>En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.</p> + +<h2 id="Jouer_avec_le_modèle_de_boîte">Jouer avec le modèle de boîte</h2> + +<p>Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour <code>padding</code> et/ou <code>margin</code> ou quand on utilise un <code>border-radius</code> supérieur à la taille de la boîte.</p> + +<h3 id="Créer_des_cercles">Créer des cercles</h3> + +<div class="hidden"> +<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> +</div> + +<p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p> + +<pre class="brush: css">.joli { + /* Mieux vaut centrer le texte dans un + cercle. */ + text-align : center; + + /* On fait attention à ce que le texte + ne touche pas la bordure. On placera + donc le texte avec un remplissage, ce + qui donnera une meilleure impression + pour le cercle. */ + padding : 1em; + + /* La bordure marquera le cercle. On + pourrait également utiliser un arrière- + plan car celui-ci aurait été contenu + par border-radius */ + border : 0.5em solid black; + + /* Assurons-nous que la boîte soit carrée + pour obtenir un cercle bien rond plutôt + qu'une ellipse ;) */ + width : 4em; + height : 4em; + + /* Enfin, transformons le carré en cercle */ + border-radius: 100%; +}</pre> + +<p>Et voilà comment on obtient un cercle :</p> + +<p>{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}</p> + +<h2 id="Les_arrière-plans">Les arrière-plans</h2> + +<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> + +<p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> + +<ul> + <li>On peut définir <a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> + <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li> +</ul> + +<div class="hidden"> +<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> +</div> + +<p>Passons à la manipulation :</p> + +<pre class="brush: css">.joli { + padding : 1em; + width: 100%; + height: 200px; + box-sizing: border-box; + + /* La couche la plus basse sera + peinte avec un gris clair uni */ + background-color: #E4E4D9; + + /* Ensuite on applique des gradients + linéaires les uns sur les autres + pour créer un effet de bandes colorées. + Comme vous pouvez le voir, les gradients + sont considérés et manipulés comme des + images */ + background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), + linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), + linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), + linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), + linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), + linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), + linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), + linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), + linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), + linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), + linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), + linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); +}</pre> + +<p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> + +<div class="note"> +<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="http://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">notre article dédié</a>.</p> +</div> + +<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> + +<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/en-US/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> + +<h3 id="Un_nuage">Un nuage</h3> + +<div class="hidden"> +<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> +</div> + +<p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> + +<pre class="brush: css">.joli { + text-align: center; + + /* On utilise la même astuce que pour + cercles vus avant */ + box-sizing: border-box; + width : 150px; + height : 150px; + padding : 80px 1em 0 1em; + + /* On fait de la place pour les « oreilles » + du nuage */ + margin : 0 100px; + + position: relative; + + background-color: #A4C9CF; + + /* Enfin, le cercle n'est pas tout à fait complet + car on veut que la base soit plate. + Vous pouvez adapter ici comme bon vous semble + si vous souhaitez que la base ne soit pas + linéaire */ + border-radius: 100% 100% 0 0; +} + +/* Voici les styles qu'on appliquera aux deux + pseudo-éléments ::before et ::after. */ +.joli::before, +.joli::after { + /* Cette déclaration est nécessaire pour afficher + les pseudo-éléments même si leur valeur est la + chaîne vide */ + content: ''; + + /* On positionne les pseudo-éléments à droite et à + gauche de la boîte mais toujours en bas */ + position: absolute; + bottom : 0; + + /* On s'assure que les pseudo-éléments passent sous + le contenu qu'il y aurait. */ + z-index : -1; + + background-color: #A4C9CF; + border-radius: 100%; +} + +.joli::before { + /* Voici la taille pour l'oreille gauche + du nuage */ + width : 125px; + height : 125px; + + /* On la décale un peu à gauche */ + left : -80px; + + /* Pour que le bas du nuage reste droit, il + faut s'assurer que le coin en bas à gauche + soit bien un angle droit. */ + border-bottom-right-radius: 0; +} + +.joli::after { + /* Voici la taille pour l'oreille droite */ + width : 100px; + height : 100px; + + /* On la décale un peu à droite */ + right : -60px; + + /* Pour que le bas du nuage reste droit, il + faut s'assurer que le coin en bas à droite + soit bien un angle droit. */ + border-bottom-left-radius: 0; +}</pre> + +<p>{{EmbedLiveSample('Un_nuage', '100%', '160') }}</p> + +<h3 id="Une_citation">Une citation</h3> + +<p>Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :</p> + +<pre class="brush: html"><blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote> +<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote></pre> + +<p>Voici la feuille de style que nous allons utiliser :</p> + +<pre class="brush: css">blockquote { + min-height: 5em; + padding : 1em 4em; + font : 1em/150% sans-serif; + position : relative; + background-color: lightgoldenrodyellow; +} + +blockquote::before, +blockquote::after { + position: absolute; + height : 3rem; + font : 6rem/100% Georgia, "Times New Roman", Times, serif; +} + +blockquote::before { + content: '“'; + top : 0.3rem; + left : 0.9rem; +} + +blockquote::after { + content: '”'; + bottom : 0.3rem; + right : 0.8rem; +} + +blockquote:lang(fr)::before { + content: '«'; + top : -1.5rem; + left : 0.5rem; +} + +blockquote:lang(fr)::after { + content: '»'; + bottom : 2.6rem; + right : 0.5rem +} + +blockquote i { + display : block; + font-size : 0.8em; + margin-top: 1rem; + text-style: italic; + text-align: right; +}</pre> + +<p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> + +<h2 id="L'assemblage">L'assemblage</h2> + +<p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p> + +<div class="hidden"> +<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> +</div> + +<p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p> + +<pre class="brush: css">.joli { + position: relative; + background-color: #FFC; + padding: 2rem; + text-align: center; + max-width: 200px; +} + +.joli::before { + content: ""; + + position : absolute; + z-index : -1; + bottom : 15px; + right : 5px; + width : 50%; + top : 80%; + max-width: 200px; + + box-shadow: 0px 13px 10px black; + transform: rotate(4deg); +}</pre> + +<p>{{EmbedLiveSample("L'assemblage", '100%', '100')}}</p> + +<h2 id="La_suite">La suite</h2> + +<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition</a>.</p> diff --git a/files/fr/apprendre/css/comment/generated_content/index.html b/files/fr/apprendre/css/comment/generated_content/index.html new file mode 100644 index 0000000000..a8b6860177 --- /dev/null +++ b/files/fr/apprendre/css/comment/generated_content/index.html @@ -0,0 +1,159 @@ +--- +title: Contenu +slug: Apprendre/CSS/Comment/Generated_content +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Howto/Generated_content +--- +<p> </p> +<p>Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.</p> +<p>Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.</p> +<h3 id="Information_:_contenu" name="Information_:_contenu">Information : contenu</h3> +<p>Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document</p> +<p>Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. + <p>Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.</p> + <p>Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Contenu_textuel" name="Contenu_textuel">Contenu textuel</h4> +<p>CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez <code>:before</code> ou <code>:after</code> au sélecteur. Dans la déclaration, spécifiez la propriété <code>content</code> en lui donnant comme valeur le contenu textuel.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Cette règle ajoute le texte <span style="font-weight: bold; color: navy;">Référence :</span> devant chaque élément de la classe <code>ref</code> : + <div style="width: 30em;"> + <pre class="eval"> +.ref:before { + font-weight: bold; + color: navy; + content: "Référence : "; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> dans la spécification CSS. + <p>Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a>, ainsi que <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Contenu_sous_forme_d.27images" name="Contenu_sous_forme_d.27images">Contenu sous forme d'images</h4> +<p>Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété <code>content</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe <code>glossaire</code>: + <div style="width: 45em;"> + <pre class="eval"> +a.glossaire:after {content: " " url("../images/glossary-icon.gif");} +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<p><br> + Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété <code>background</code>. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. + <p>Le sélecteur spécifie l'id de l'élément. La valeur <code>no-repeat</code> fait que l'image apparaîtra une seule fois :</p> + <div style="width: 50em;"> + <pre class="eval"> +#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> dans la spécification CSS.</td> + </tr> + </tbody> +</table> +<h3 id="Action_:_ajout_d.27une_image_de_fond" name="Action_:_ajout_d.27une_image_de_fond">Action : ajout d'une image de fond</h3> +<p>Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :</p> +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> + </tr> + </tbody> +</table> +<p>(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)</p> +<p>Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.</p> +<div style="width: 40em;"> + <pre class="eval">background: url("ligne-bleue.png"); +</pre> +</div> +<p>La valeur <code>repeat</code> est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :</p> +<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em;"> + <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> + </div> + <div style="font-style: normal; padding-top: 2px; height: 8em;"> + <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> + </div> + </div> +</div> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Téléchargez cette image : + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"></td> + </tr> + </tbody> + </table> + <p>Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :</p> + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em; padding-top: 8px;"> + <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + <div style="font-style: normal; padding-top: 12px; height: 8em;"> + <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.</p> +<p>La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : <strong><a href="/fr/docs/CSS/Premiers_pas/Listes" title="fr/CSS/Premiers_pas/Listes">Listes.</a></strong></p> diff --git a/files/fr/apprendre/css/comment/index.html b/files/fr/apprendre/css/comment/index.html new file mode 100644 index 0000000000..28cc40c4fe --- /dev/null +++ b/files/fr/apprendre/css/comment/index.html @@ -0,0 +1,90 @@ +--- +title: Apprendre à utiliser CSS pour résoudre des problèmes +slug: Apprendre/CSS/Comment +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto +--- +<p> </p> + +<p class="summary">Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> + +<h2 id="Scénarios_fréquents">Scénarios fréquents</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basess">Basess</h3> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> +</ul> + +<h3 id="CSS_et_texte">CSS et texte</h3> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> +</ul> +</div> +</div> + +<h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2> + +<p>Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :</p> + +<h3 id="Général">Général</h3> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> +</ul> + +<h3 id="Effets_avancés">Effets avancés</h3> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> +</ul> + +<h3 id="Mise_en_page">Mise en page</h3> + +<ul> + <li><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes">Utiliser les boîtes flexibles CSS (<em>flexbox</em>)</a></li> + <li><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Utiliser une structure CSS avec plusieurs colonnes</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> diff --git a/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html b/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html new file mode 100644 index 0000000000..eedebc7ee6 --- /dev/null +++ b/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html @@ -0,0 +1,329 @@ +--- +title: Mettre en forme du texte +slug: Apprendre/CSS/Comment/Mettre_en_forme_du_texte +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p class="summary">La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.</p> + +<p>La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.</p> + +<h2 id="La_mise_en_forme_simple">La mise en forme simple</h2> + +<p>Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :</p> + +<ul> + <li>{{cssxref("color")}} : modifie la couleur de la police.</li> + <li>{{cssxref("font-family")}} : modifie la police utilisée.</li> + <li>{{cssxref("font-size")}} : modifie la taille de la fonte.</li> + <li>{{cssxref("font-style")}} : permet de passer d'une police italique à une police normale.</li> + <li>{{cssxref("font-weight")}} : permet de gérer la graisse d'une police.</li> + <li>{{cssxref("font-variant")}} : permet de choisir des variantes de police.</li> + <li>{{cssxref("letter-spacing")}} : permet d'ajuster l'interlettrage, quelles que soient les options de crénage (<em>kerning</em>) de la police originale.</li> + <li>{{cssxref("text-decoration")}} : permet d'afficher une ligne décorative, au-dessus, en-dessous ou au milieu du texte.</li> + <li>{{cssxref("text-shadow")}} : permet de définir une ou plusieurs ombres portées depuis le texte.</li> + <li>{{cssxref("text-transform")}} : permet de choisir la capitalisation du texte.</li> +</ul> + +<p>CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :</p> + +<ul> + <li>{{cssxref("length#em","em")}} : la taille calculée pour la police de l'élément, relative par rapport à la taille de la police de l'élément parent.</li> + <li>{{cssxref("length#rem","rem")}} : analogue à <code>em</code> mais toujours relative à la taille de la police pour l'élément racine.</li> + <li>{{cssxref("::first-letter")}} : permet de sélectionner la première lettre d'un élément de bloc.</li> + <li>{{cssxref("::first-line")}} : permet de sélectionner la première ligne d'un élément de bloc.</li> + <li>{{cssxref("::selection")}} : correspond au texte actuellement sélectionné par l'utilisateur.</li> +</ul> + +<p>Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules <code>font-size</code> et <code>font-family</code> sont obligatoires pour cette notation raccourcie.</p> + +<p>Prenons un exemple pour illustrer ce point.</p> + +<p>Voici le fragment de code HTML qu'on utilisera :</p> + +<pre class="brush: html"><p> + He dressed himself "all in his best," and at last got out into the streets. + The people were by this time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his hands behind him, Scrooge + regarded every one with a delighted smile. He looked so irresistibly pleasant, + in a word, that three or four good-humoured fellows said, "Good morning, sir! + A merry Christmas to you!" And Scrooge said often afterwards, that of all the + blithe sounds he had ever heard, those were the blithest in his ears. +</p> +<p class="fancy"> + He dressed himself "all in his best," and at last got out into the streets. + The people were by this time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his hands behind him, Scrooge + regarded every one with a delighted smile. He looked so irresistibly pleasant, + in a word, that three or four good-humoured fellows said, "Good morning, sir! + A merry Christmas to you!" And Scrooge said often afterwards, that of all the + blithe sounds he had ever heard, those were the blithest in his ears. +</p></pre> + +<p>Et voilà la feuille de style CSS qu'on appliquera :</p> + +<pre class="brush: css">/* Voici un disposition simple pour que + les paragraphes soient côte à côte. */ +p { + box-sizing: border-box; + width : 50%; + padding : 1em; + float : left; +} + +.fancy { + font: 0.85rem/150% Helvetica, Arial, sans-serif; +} + +.fancy::first-line { + font-variant: small-caps; +} + +.fancy::first-letter { + font-family: serif; + font-size : 3rem; + + float : left; + background : blanchedalmond; + color : goldenrod; + border : 0.5rem solid gold; + padding : 1rem; + margin : 0 0.5rem 0 0; +}</pre> + +<p>Ces deux éléments permettront d'aboutir au résultat suivant :</p> + +<p>{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}</p> + +<div class="note"> +<p><strong>Note :</strong> Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter <a href="http://www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans-vos">les différentes règles typographiques recommandées pour le Web</a>.</p> +</div> + +<h2 id="Paramètres_avancées_des_polices_d'écriture">Paramètres avancées des polices d'écriture</h2> + +<p>CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :</p> + +<ul> + <li>{{cssxref("font-kerning")}} : active ou désactive les options de crénage.</li> + <li>{{cssxref("font-feature-settings")}} : active ou désactive les différentes fonctionnalités des polices <a href="https://fr.wikipedia.org/wiki/OpenType">OpenType</a>.</li> + <li>{{cssxref("font-variant-alternates")}} : permet de contrôler l'utilisation de glyphes alternatifs pour une fonte donnée.</li> + <li>{{cssxref("font-variant-caps")}} : permet de contrôler l'utilisation de glyphes capitaux alternatifs.</li> + <li>{{cssxref("font-variant-east-asian")}} : permet de contrôler l'utilisation de glyphes alternatifs pour les scripts d'Asie orientale comme le japonais ou le chinois.</li> + <li>{{cssxref("font-variant-ligatures")}} : permet de contrôler les ligatures et formes contextuelles qui sont utilisées dans le texte.</li> + <li>{{cssxref("font-variant-numeric")}} : permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.</li> + <li>{{cssxref("font-variant-position")}} : permet de contrôler l'utilisation de glyphes alternatifs de moindre taille pour les textes positionnés en indice ou en exposant par rapport à la ligne de base.</li> + <li>{{cssxref("font-size-adjust")}} : permet d'ajuster la taille visuelle de la fonte sans modifier la taille intrinsèque de la fonte.</li> + <li>{{cssxref("font-stretch")}} : permet de choisir des formes alternatives, plus ou moins étirées, d'une police donnée.</li> + <li>{{cssxref("text-decoration-color")}} : définit la couleur utilisée lorsqu'une ligne est dessinée sur, sous ou à travers le texte.</li> + <li>{{cssxref("text-decoration-line")}} : définit le type de ligne décorative qui peut être ajoutée à un élément.</li> + <li>{{cssxref("text-decoration-style")}} : définit le style des lignes dessinées sur le texte.</li> + <li>{{cssxref("text-underline-position")}} : définit la position du soulignement mis en place lorsque la propriété <code>text-decoration-line</code> vaut <code>underline</code>.</li> + <li>{{cssxref("text-rendering")}} : essaie d'optimiser le rendu du texte.</li> +</ul> + +<h2 id="Appliquer_des_fontes">Appliquer des fontes</h2> + +<p>Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.</p> + +<p>La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.</p> + +<pre class="brush: css">body { + /* Si la police "Open Sans" est disponible, c'est + celle-ci qui serait utilisée pour mettre en forme + le texte. Sinon, ce sera la police Arial qui sera + utilisée et enfin, si Arial n'est pas disponible, + ce sera la police sans-serif disponible, par défaut + sur le système, qui sera utilisée. */ + font-family: "Open Sans", Arial, sans-serif; +}</pre> + +<h3 id="Les_polices_par_défaut">Les polices par défaut</h3> + +<p>Tout d'abord, CSS définit cinq noms de polices génériques : <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code>, et <code>fantasy</code>. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par <code>serif</code>, <code>sans-serif</code> et <code>monospace</code> devraient être assez prévisibles. En revanche, celles désignées par <code>cursive</code> et <code>fantasy</code> sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.</p> + +<div class="note"> +<p><strong>Note :</strong> On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété <code>font-family</code>.</p> +</div> + +<h3 id="Les_polices_adaptées_au_Web">Les polices adaptées au Web</h3> + +<p>Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « <em>web fonts</em> » car elles peuvent être utilisées sans trop de risque sur le Web.</p> + +<p>Bien entendu, les systèmes d'exploitation évoluent et la liste des <em>web</em><em> fonts</em> peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative <em><a href="https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> de Microsoft à la fin des années 90) :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col" style="white-space: nowrap;">Type générique</th> + <th scope="col">Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>On considère généralement qu'il est préférable d'ajouter également <em>Helvetica</em> devant <em>Arial</em>. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, <em>Helvetica</em> est plus appréciée (en termes de forme).</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée <em>Courier</em>. C'est une bonne pratique d'utiliser les deux tout en favorisant <em>Courier New</em> dans l'ordre des priorités.</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td> </td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée <em>Times</em>. C'est une bonne pratique d'utiliser les deux tout en favorisant <em>Times New Roman</em> dans l'ordre des priorités.</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>serif</td> + <td>Attention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles.</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td> </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note :</strong> Parmi les différentes ressources disponibles sur le sujet, <a href="http://www.cssfontstack.com/">cssfontstack.com</a> maintient une liste des <em>web fonts</em> disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.</p> +</div> + +<h3 id="Les_polices_personnalisées">Les polices personnalisées</h3> + +<p>Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.</p> + +<div class="warning"> +<p><strong>Attention :</strong> les polices sont sujettes au droit d'auteur (<em>copyright</em>) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme <a href="https://www.google.com/fonts">Google Fonts</a>. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, <a href="http://www.fonts.com/">fonts.com</a>.</p> +</div> + +<p>L'intégration d'une police personnalisée se fait en trois étapes :</p> + +<ol> + <li>Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format : + <ul> + <li><a href="https://fr.wikipedia.org/wiki/Web_Open_Font_Format">WOFF et WOFF2</a>, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)</li> + <li><a href="https://fr.wikipedia.org/wiki/Embedded_OpenType">EOT</a>, supporté par {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} avant sa version 9</li> + <li>SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)</li> + <li><a href="https://fr.wikipedia.org/wiki/OpenType">OTF</a>, supporté par les anciennes versions des navigateurs par défaut Android.</li> + </ul> + </li> + <li>Utilisez la déclaration {{cssxref("@font-face")}} en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)</li> + <li>Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété {{cssxref("font-family")}}.</li> +</ol> + +<p>Voici un exemple d'un telle mise en œuvre.</p> + +<p>On utilisera ce fragment de code HTML :</p> + +<pre class="brush: html"><p> + He dressed himself "all in his best," and at last + got out into the streets. The people were by this + time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his + hands behind him, Scrooge regarded every one with + a delighted smile. He looked so irresistibly + pleasant, in a word, that three or four good-humoured + fellows said, "Good morning, sir! A merry Christmas + to you!" And Scrooge said often afterwards, that of + all the blithe sounds he had ever heard, those were + the blithest in his ears. +</p> +<p class="fancy"> + He dressed himself "all in his best," and at last + got out into the streets. The people were by this + time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his + hands behind him, Scrooge regarded every one with + a delighted smile. He looked so irresistibly + pleasant, in a word, that three or four good-humoured + fellows said, "Good morning, sir! A merry Christmas + to you!" And Scrooge said often afterwards, that of + all the blithe sounds he had ever heard, those were + the blithest in his ears. +</p></pre> + +<p>Et on appliquera cette feuille de style CSS :</p> + +<pre class="brush: css">/* Une disposition simple pour voir + les paragraphes côte à côte. */ +p { + box-sizing: border-box; + width : 50%; + padding : 1em; + float : left; +} + +@font-face { + /* Là on définit le nom pour la police + personnalisé, on l'utilisera dans la + liste */ + font-family:"Open Sans"; + + /* Ici, on liste les fichiers de police, + la syntaxe est détaillée ici : + http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */ + src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot"); + src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg'); + + /* Ici, on définit la graisse et le style de la police */ + font-weight:normal; + font-style:normal; +} + +/* Enfin, il suffit simplement d'ajouter la + police personnalisée dans la liste des valeurs + pour font. */ +.fancy { + font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif; +} +</pre> + +<p>Le résultat obtenu sera :</p> + +<p>{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}</p> + +<h2 id="La_disposition_du_texte">La disposition du texte</h2> + +<p>La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.</p> + +<ul> + <li>{{cssxref("line-height")}} : définit la hauteur d'une ligne de texte, quelle que soit la taille actuelle de la police utilisée.</li> + <li>{{cssxref("text-align")}} : décrit la façon dont le texte est aligné par rapport à son bloc.</li> + <li>{{cssxref("text-indent")}} : définit l'espace qu'on ajoute à gauche du texte avant de commencer la première ligne du texte.</li> + <li>{{cssxref("text-overflow")}} : définit la façon dont le contenu qui « déborde » est affiché (ou non).</li> + <li>{{cssxref("white-space")}} : définit la façon dont les blancs et les sauts de ligne sont gérés au sein de l'élément.</li> + <li>{{cssxref("word-break")}} : définit si on ajoute ou non des césures au sein des mots pour passer à la ligne.</li> + <li>{{cssxref("word-spacing")}} : ajuste la distance entre les mots (inter mot).</li> +</ul> + +<p>De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).</p> + +<ul> + <li>{{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue utilisée et généralement, on laissera cette tâche à HTML car cet aspect est fortement lié au contenu même).</li> + <li>{{cssxref("hyphens")}} : active ou désactive l'ajout de trait d'union pour former les césures en fin de ligne.</li> + <li>{{cssxref("line-break")}} : active ou désactive les sauts de lignes pour les langues asiatiques.</li> + <li>{{cssxref("text-align-last")}} : définit la façon dont la dernière ligne d'un bloc (ou une ligne avant un saut à la ligne explicite) est alignée.</li> + <li>{{cssxref("text-orientation")}} : définit l'orientation du texte sur une ligne.</li> + <li>{{cssxref("word-wrap")}} : définit si le navigateur ajoute ou non des retours à la ligne automatiques pour éviter un débordement du texte.</li> + <li>{{cssxref("writing-mode")}} : définit si les lignes du texte sont disposées horizontalement ou verticalement et la direction selon laquelle le bloc s'étend.</li> +</ul> + +<h2 id="La_suite">La suite</h2> + +<p>Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : <a href="/fr/docs/Learn/CSS/Howto/create_fancy_boxes">créer de belles boîtes</a> contenant du texte.</p> diff --git a/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html b/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html new file mode 100644 index 0000000000..75baad8dba --- /dev/null +++ b/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html @@ -0,0 +1,46 @@ +--- +title: personnaliser une liste +slug: Apprendre/CSS/Comment/personnaliser_une_liste +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{draft}}</p> + +<p class="summary">Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.</p> + +<p>Les listes {{Glossary("HTML")}} sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises {{HTMLElement('ul')}}, {{HTMLElement('ol')}}, et {{HTMLElement('li')}}. Vous trouverez tous les détails dans <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">notre article dédié</a>, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :</p> + +<pre class="brush: html"><ul> + <li>Je suis un élément de liste</li> + <li>Je suis un autre élément de liste</li> + <li> + <ul> + <li>Je suis un élément de liste imbriqué</li> + <li>Je suis un autre élément de liste imbriqué</li> + </ul> + </li> +</ul></pre> + +<h2 id="Styles_dédiés">Styles dédiés</h2> + +<p>Les CSS fournissent un jeu complet de propriétés pour gérer les puces :</p> + +<ul> + <li>{{cssxref('list-style')}}<br> + Une propriété qui regroupe la gestion de toutes les propriétés suivantes</li> + <li>{{cssxref('list-style-type')}}<br> + Le type de puce à afficher au début de chaque élément de liste</li> + <li>{{cssxref('list-style-position')}}<br> + Indique si la puce doit être affichée à l'intérieur ou à l'extérieur de la boîte encadrant l'élement de liste.</li> + <li>{{cssxref('list-style-image')}}<br> + Permet d'utiliser une image personnalisée au lieu d'un type de puce prédéfini.</li> +</ul> + +<p>En complément, les CSS permettent également d'avoir des <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">styles de compteurs personnalisés</a> qui vont très bien avec les listes.</p> + +<div class="note"> +<p>Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition <a href="/fr/docs/Web/CSS/Compteurs_CSS">un article dédié</a>.</p> +</div> + +<h2 id="Indentation_de_liste">Indentation de liste</h2> + +<h2 id="Puces_personnalisées">Puces personnalisées</h2> |