Problème à signaler:


Télécharger Cours CSS3 : Les effets de texte



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:



HTML  5

Une référence

pour le développeur web

Rodolphe Rimelé

Préface de Raphaël Goetter

© Groupe Eyrolles, 2011, ISBN : 978-2-212-12982-3


Tout n’est que cascade, style et volupté. Ainsi, du moins, devrait se présenter tout document HTML.

 

Figure 2–1 background:red ; color:white

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 <font>) 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)

B

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 <link>, présente dans la section <head>.

 <link rel="stylesheet" href="">

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

<style> et </style>, situées également dans <head> 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 <p> (les paragraphes) et deux aux éléments <img> situés dans <header>.

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 { }

<nav>

<p>

<ul>

Sélecteur de classe

.remarque { } div.remarque { }

Tout élément portant l’attribut

class="remarque"

<div class="remarque">.

Sélecteur d’id

#intro { } header#intro { }

Tout élément portant l’attribut id="intro"

<header id="intro">.

Sélecteur d’attribut

[alt] { }

input[type=submit] { } [rel=nofollow] { }

Tout élément possédant un attribut alt

<input type="submit">.

Tout élément portant l’attribut rel="nofollow".

Sélecteur d’enfant direct

ul>li { }

Tout élément <li> enfant direct d’un <ul>.

Sélecteur d’élément adjacent

h1+p { }

Tout élément <p> immédiatement précédé par un élément <h1>.

Sélecteur d’éléments frères



h2~p { }

Un ou plusieurs éléments <p> précédés par un élément <h2>.

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 <li> enfants directs de <ul>, lui-même situé dans un quelconque <nav>.

 #intro p.remarque { }

Ce sélecteur s’adresse aux éléments <p> 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 <li> enfants directs de <ul>, lui-même situé dans un quelconque <nav> et indépendamment aux éléments <p> 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;

}

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 <section> 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



1291