Cours CSS3 : Les effets de texte
![Cours CSS3 : Les effets de texte](/images/remos_downloads/id-1508-2.1508.pdf_thumb_prev.jpg)
Cours CSS3 : Les effets de texte
Dans des temps reculés, lors de l’apparition du HTML et des premiers navigateurs, l’esthétisme des pages était très limité. L’essentiel de l’information n’était pas destiné à un large public et on pouvait se contenter d’une mise en pages sommaire. Peu à peu, des balises ont été ajoutées, et certains éléments ont été détournés de leur usage initial par les webdesigners/intégrateurs pour obtenir un rendu plus complexe à l’écran.
Ainsi, les tables ont été mises à profit pour disposer du contenu en colonnes puis en grilles, on a vu naître des artifices tels que les images de séparation (nommées ) ou encore l’imbrication de multiples balises de présentation (par exemple ) aujourd’hui obsolètes.
Ce qui palliait un manque intrinsèque du HTML en capacités de contrôle graphique est devenu au fur et à mesure un cauchemar en termes de maintenance du code, de lisibilité et d’accessibilité du contenu. La sémantique n’était que peu considérée, et la « soupe de tags » au menu de nombreux sites.
C’est pourquoi les feuilles de style en cascade (Cascading Style Sheets) ont été adoptées par le W3C pour régir l’apparence des éléments HTML d’une page, concernant la disposition, les dimensions, les couleurs, afin de séparer le contenu et la forme.
Une feuille de style est applicable à une infinité de documents HTML, ce qui en facilite la maintenance et réduit les temps de chargement.
Figure 2–2
Une feuille CSS pour de multiples pages HTML
L’objet de ce chapitre n’est pas de dresser un inventaire exhaustif de toutes les techniques afférentes à CSS, mais de proposer une introduction et un petit aide-mémoire vis-à-vis de HTML 5 auquel les feuilles de style sont intimement liées.
RESSOURCES
R Goetter Raphaël, CSS 3, Pratique du design web, Eyrolles 2011
R Goetter Raphaël, CSS avancées, Eyrolles 2011
Les spécifications sont nombreuses et pour certaines encore en mouvement.
RESSOURCE Spécifications CSS
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)
Tableau récapitulatif des spécifications
B
Cascading Style Sheets (CSS)
B
Principe général
L’application d’une feuille de style CSS s’effectue lorsque celle-ci est liée au document par la balise , présente dans la section .
Plusieurs feuilles de style peuvent être chargées de la sorte pour un seul document. Il est aussi envisageable de déclarer directement des instructions CSS entre les balises
, situées également dans ou dans une portion du document, mais cette façon de faire ne facilite pas la maintenance ni la mise en cache.
Dans le fichier de la feuille de style, on retrouve une ou plusieurs déclarations CSS. Elles comprennent un sélecteur dont le rôle est de cibler les éléments concernés par chaque déclaration, suivi d’un bloc entre accolades regroupant les propriétés à appliquer.
p {
text-align: center; font-weight: bold; color: orange;
} header img { border: 3px solid gray; margin-bottom: 3em;
}
Dans cet exemple, trois propriétés sont appliquées aux éléments
(les paragraphes) et deux aux éléments situés dans
.
Sélecteurs
L’art d’écrire de bons sélecteurs est somme toute un grand jeu d’assemblage parmi les quelques briques de base existantes, pour s’adapter à la structure du document HTML qui doit être stylé. Si HTML et CSS sont issus du même auteur, alors il lui appartient de nommer les éléments en conséquence grâce à des classes, des identifiants ou des attributs pour les lier aux déclarations CSS, et ce en toute simplicité pour faciliter la lecture du code source ainsi que son analyse par le navigateur.
Tableau 2–1 Quelques sélecteurs
Sélecteur |
Exemples |
Éléments concernés |
Sélecteur d’élément |
nav { } p { } ul { } |
|
Sélecteur de classe |
.remarque { } div.remarque { } |
Tout élément portant l’attribut class="remarque" . |
Sélecteur d’id |
#intro { } header#intro { } |
Tout élément portant l’attribut id="intro" . |
Sélecteur d’attribut |
[alt] { } input[type=submit] { } [rel=nofollow] { } |
Tout élément possédant un attribut alt . Tout élément portant l’attribut rel="nofollow". |
Sélecteur d’enfant direct |
ul>li { } |
Tout élément · enfant direct d’un . |
Sélecteur d’élément adjacent |
h1+p { } |
Tout élément immédiatement précédé par un élément . |
Sélecteur d’éléments frères |
h2~p { } |
Un ou plusieurs éléments précédés par un élément . |
Les sélecteurs peuvent s’enchaîner, séparés par des espaces, pour combiner leurs effets. nav ul>li { }
Ce sélecteur s’adresse aux éléments
- enfants directs de
, lui-même situé dans un quelconque
.
#intro p.remarque { }
Ce sélecteur s’adresse aux éléments
de classe remarque, situés dans l’élément possédant l’identifiant intro.
Séparés par des virgules, les sélecteurs s’appliquent à une énumération de plusieurs familles d’éléments.
nav ul>li, #intro p.remarque { }
Cette déclaration s’adresse aux éléments
- enfants directs de
, lui-même situé dans un quelconque
et indépendamment aux éléments
de classe remarque, situés dans l’élément possédant l’identifiant intro.
Propriétés
Les propriétés sont des paires de clés et valeurs. La clé est le nom de la propriété, suivie des deux-points, terminée par la valeur qui peut revêtir différentes formes : mots-clés, valeur numérique simple, valeur numérique avec unité, chaîne de texte, etc.
Les combinaisons offertes par les propriétés CSS, leurs valeurs et les techniques associées sortent du cadre de ce modeste chapitre qui pourrait à lui seul dépasser tous les autres en longueur. Pour en savoir plus, consultez les références proposées dans l’introduction.
Tableau 2–2 Quelques unités courantes
Unité |
Description |
Type d’unité |
px |
Pixels |
Relative |
% |
Pourcentage (en général par rapport à l’élément parent) ![]() |
Relative |
em |
Cadratin (relatif à la taille de la police) |
Relative |
ex |
Hauteur de la lettre x |
Relative |
in |
Pouces (= 2,54 cm) |
Absolue |
cm |
Centimètres (= 10 mm) |
Absolue |
mm |
Millimètre |
Absolue |
pt |
Points (= 1/72 in) |
Absolue |
pc |
Picas (= 12 pt) |
Absolue |
Les unités les plus pertinentes pour un affichage à l’écran restent px, %, et em.
Tableau 2–3 Texte
Propriété |
Rôle |
color |
Couleur du texte |
font |
(Déclaration groupée) |
font-weight |
Graisse |
font-size |
Taille de police |
font-family |
Famille de police |
font-variant |
Variante |
font-stretch |
Étirement du texte |
text-decoration |
Décoration de texte |
Tableau 2–3 Texte (suite)
Propriété |
Rôle |
text-transform |
Transformation de texte |
text-align |
Alignement |
text-justify |
Justification |
text-indent |
Indentation |
line-height |
Hauteur de ligne |
word-spacing |
Espacement de mot |
word-wrap |
Retour à la ligne |
Exemple
p { font-weight: bold; color: #005A9C; text-align: left; line-height: 150%; }
Tableau 2–4 Fonds
Propriété |
Rôle |
background |
(Déclaration groupée) |
background-color |
Couleur de fond |
background-image |
Image de fond |
background-repeat |
Répétition de l’image de fond |
background-position |
Position de l’image de fond |
background-attachment |
Attache de l’image de fond par rapport à la page |
background-origin |
Position du fond par rapport à la boîte de l’élément |
background-size |
Taille de l’image de fond par rapport aux dimensions de l’élément |
Exemple
div {
background-image: url(); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box; }
RESSOURCE Tutoriels CSS sur Alsacreations
Arrière-plans avec CSS 3 Backgrounds
B Tableau 2–5 Ombrages et transparence
Propriété |
Rôle |
text-shadow |
Ombrage du texte |
text-outline |
Contour du texte |
box-shadow |
Ombrage d’un élément boîte ![]() |
opacity |
Opacité |
Exemple
footer { opacity: 0.5;
text-shadow: 0px 0px 9px #777;
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px; }
RESSOURCE Tutoriels CSS sur Alsacreations
Les ombrages en CSS 3
B
Tableau 2–6 Bordures
Propriété |
Rôle |
border |
(Déclaration groupée) |
border-color |
Couleur du bord |
border-spacing |
Espacement du bord |
border-collapse |
Fusion du bord |
border-style |
Style du bord |
border-width |
Largeur de la bordure |
border-radius |
Rayon du bord arrondi |
border-image |
Style de bord avec image |
outline |
Contour |
outline-style |
Style du contour |
outline-color |
Couleur du contour |
outline-width |
Largeur du contour |
Exemple
.arrondi {
border: 5px solid yellow; border-radius: 20px;
}
:focus {
outline: thick solid #fc0; }
Tableau 2–7 Positionnement et dimensionnement
Propriété |
Rôle |
display |
Mode d’affichage |
float, clear |
Mode flottant |
position |
Positionnement |
z-index |
Ordre de recouvrement « vertical » |
overflow |
Mode de dépassement de bloc |
overflow-y |
Mode de dépassement de bloc vertical |
overflow-x |
Mode de dépassement de bloc horizontal |
width |
Largeur |
height |
Hauteur |
top |
Position par rapport au haut |
left |
Position par rapport à la gauche |
right |
Position par rapport à la droite |
bottom |
Position par rapport au bas |
padding |
Marge interne |
margin |
Marge externe |
min-height |
Hauteur minimale |
max-height |
Hauteur maximale |
min-width |
Largeur minimale |
max-width |
Largeur maximale |
vertical-align |
Alignement vertical |
visibility |
Visibilité |
rotation |
Rotation |
rotation-point |
Point de rotation |
Exemple
img.illustration { float: right; margin-left: 2em; max-width: 50%; rotation: 10deg; rotation-point: bottom left;
}
![](/images/remos_downloads/detail/15/id-1508-2.1508.pdf-062.jpg)
Tableau 2–8 Listes
Propriété |
Rôle |
list-style |
Style de liste |
list-style-type |
Type de puce pour les éléments de la liste |
list-style-image |
Image de puce pour les éléments de la liste |
list-style-position |
Position de la puce |
Exemple
ul li { list-style: disc; }
Tableau 2–9 Autres
Propriété |
Rôle |
cursor |
Apparence du curseur |
direction |
Direction d’écriture |
Exemple
input[type=submit] cursor: pointer; }
Tableau 2–10 Animations
Propriété |
Rôle |
animation |
(Déclaration groupée) |
animation-delay |
Délai d’animation |
animation-direction |
Sens d’animation |
animation-duration |
Durée d’animation |
animation-iteration-count |
Nombre d’itérations |
animation-name |
Nom d’animation |
animation-timing-function |
Fonction d’accélération |
Exemple
div {
animation-name: 'diagonale'; animation-duration: 3s; animation-iteration-count: 5;
}
@keyframes 'diagonale' { from { left: 0; top: 0; } to { left: 150px; top: 200px;
}
}
Tableau 2–11 Transformations
Propriété |
Rôle |
transform |
(Déclaration groupée) |
transform-origin |
Point d’origine de la transformation |
transform-style |
Style de transformation |
perspective |
Effet de perspective |
perspective-origin |
Point d’origine de la perspective |
backface-visibility |
Visibilité de l’arrière de l’élément transformé |
Exemple
h1 {
transform: rotate(8deg); }
Tableau 2–12 Transitions
Propriété |
Rôle |
transition |
(Déclaration groupée) |
transition-delay |
Délai de transition |
transition-duration |
Durée de transition |
transition-property |
Propriété à laquelle appliquer la transition |
transition-timing-function |
Fonction d’accélération pour la transition |
Exemple
img.transition.couleur { transition: transform .5s ease-in;
} img.transition.couleur:hover { transform: rotate(10deg);
}
RESSOURCE Tutoriels CSS sur Alsacreations
Transitions CSS 3
B
Une petite quantité de nouvelles propriétés CSS 3 ont été implémentées au fur et à mesure dans les moteurs de rendu, officiellement de manière expérimentale, avec des préfixes spécifiques. C’est par exemple le cas de border-radius qui existait initialement sous le nom de -moz-border-radius pour les navigateurs Gecko (Mozilla), -webkit-border-radius pour les navigateurs WebKit (Chrome, Safari). Opera a quant à lui choisi de l’intégrer directement, mais utilise le préfixe -o- pour ses propres expérimentations. Une fois tous les tests concluants, la propriété adopte son nom définitif, sans préfixe.
RESSOURCE Tutoriels CSS sur Alsacreations
Les préfixes vendeurs en CSS
B
Pseudo-classes et pseudo-éléments
Les pseudo-classes et pseudo-éléments affinent les capacités des sélecteurs. Ils s’écrivent à la suite du sélecteur initial, concaténés par un signe deux-points « : ».
Tableau 2–13 Quelques pseudo-classes et pseudo-éléments
Pseudo-* |
Rôle |
:link ![]() |
Lien |
:visited |
Lien visité |
:hover |
Élément survolé |
:active |
Élément actif |
:focus |
Élément ayant le focus |
:first-child |
Premier enfant |
:last-child |
Dernier enfant |
:nth-child(n) |
n-ième enfant |
:nth-last-of-child(n) |
n-ième dernier enfant |
:nth-of-type(n) |
n-ième type d’élément |
:nth-last-of-type(n) |
n-ième dernier type d’élément |
:first-of-type |
Premier type d’élément |
Tableau 2–13 Quelques pseudo-classes et pseudo-éléments (suite)
Pseudo-* |
Rôle |
:last-of-type |
Dernier type d’élément |
:only-child |
Enfant unique |
:only-of-type |
Élément de type unique |
:checked |
État coché |
:enabled |
État activé |
:indeterminate |
État indéterminé |
:not(expr) |
Négation de l’expression |
::first-letter |
Première lettre |
::first-line |
Première ligne |
Exemple
a:hover {
text-decoration:underline;
} p::first-letter { font-size: 2em;
}
Règles @
Les « règles @ » sont des instructions plus évoluées pouvant se retrouver dans les feuilles de style pour moduler leur comportement ou ajouter des informations qui ne pourraient trouver leur place dans des déclarations classiques.
Tableau 2–14 Quelques règles @
Propriété |
Rôle |
@import |
Importer une autre feuille de style CSS. |
@charset |
Déclaration de l’encodage des caractères. |
@page |
Définir des règles générales pour les médias paginés. |
@font-face |
Importer un fichier de police (fonte) externe. |
@media |
Définir des requêtes de média. |
Exemple
@import "";
@import url("") print;
@page { size: 15cm 20cm; margin: 2cm; marks: cross;
}
@font-face { font-family: maPolice; src: url(); font-weight: bold;
} p {
font-family: maPolice; }
@media print { body { font-size: 2em; background: white;
} nav {
display: none;
}
}
Media queries
Les media queries (ou requêtes de média) sont une fonctionnalité bien utile de CSS pour adapter le design et la présentation générale d’une page web selon le périphérique de consultation. Depuis la navigation sur mobiles jusqu’aux plages braille, la présentation est ajustée selon les capacités de rendu, par exemple en modifiant la taille du texte ou son agencement.
La syntaxe d’une media query est une suite de conditions à satisfaire. Au besoin, le navigateur évaluera l’expression et chargera les styles y correspondant ou les rechargera dynamiquement s’il y a lieu.
Exemple de media query
@media screen and (min-width: 200px) and (max-width: 640px) { section { display: block; clear: both; margin: 0;
}
}
Ici, l’on s’adresse à un écran (screen) dont la résolution en largeur est comprise entre 200 et 640 pixels. Si le navigateur se retrouve dans cette condition, les éléments de type
passeront tous en mode bloc, sans aucune marge, pour une meilleure disposition verticale sur un petit écran.
Pour découvrir la magie des media queries, consultez l’article en ligne rédigé par votre auteur dévoué.
RESSOURCE Tutoriels CSS sur Alsacreations
Les Media Queries CSS 3
B