Crealyse

A quoi servent les feuilles de style ? Quel est leur intérêt ? Quand on est débutant, par où commencer pour apprendre les notions du langage CSS ?

Actuellement l'utilisation des CSS ("Cascading Style Sheets") est omniprésente et surtout pratique dans la création de sites Internet, mais aussi pour faire des mises à jours régulières rapidement sans reprendre les pages une par une.Les CSS permettent de réaliser des mises en pages claires pour vos sites web. Elles permettent d'avoir une cohérence sur toutes les pages de vos sites.
Cet article est dédié aux débutants, vous y trouverez les généralités et vous pourrez faire vos premiers avec les CSS.

• 1. Généralités

Balises en-ligne
Les élements en ligne servent à définir la mise en forme de groupes de motd ou d'éléments au sein de blocs ( liens, images, mise en exergue..)
Ils peuvent s'imbriquer entre eux mais ne peuvent contenir d'éléments blocs.
<a> <abbr> <acronym> <b> <bdo><big> <br/> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <q> <select> <small><span><strong> <sub> <textarea><tt> <var>

Balises bloc et tables
Les éléments de type bloc définissent la mise en forme applicable à des paragraphes, entêtes, titres et autres zones de la page. Ils s'affichent les uns sous les autres. Un élément de type bloc peut contenir d'autres éléments blocs ou des éléments en-ligne.
<address> <blockquote> <dd><div> <di> <dl> <dt> <fieldset> <form><h1><h2><h3><h4><h5><hr/> <li> <noscript><ol><p><pre><table><tbody><td><tfoot><th><thead><r><ul>

Balises mixtes, selon contenu
Ces éléments sont traités comme des blocs s'ils contiennent un élément de type bloc.
<button><del><ins><object><script>

1.1. Sélecteurs

Dans cette liste, les sélecteurs div et span sont cités à titre d'exemple.
Ils représentent les balises HTML <div> et <span> mais peuvent être remplacés par d'autres balises.
*{} sélecteur universel désigne tous les éléments
div {} sélecteur de balise désigne la balise <div>
.maclasse{} sélecteur de classe désigne l ‘ élément ayant reçu la classe= « maclasse »
div.maclasse{} sélecteur de classe désigne les éléments div{} ayant reçu la classe= « maclasse »
#monld{} sélecteur d'identificateur désigne les éléments unique ayant reçu id= « monld »
div#monld{} sélecteur d'identificateur désigne l'élément <div> ayant reçu id= « monld »
div span element{} hiérarchie désigne les éléments contenus dans un élément <span> lui même contenu dans les éléments <div>
<div> span, element{} sélecteur collectif désigne les éléments <div>, les éléments <span> et les éléments <element>
div + span {} sélecteur adjacent désigne tout élément <span> immédiatement précédé par un élément <div>
div >span {} sélecteur d'enfants désigne tout élément <span> directement enfant de l'élément <div>
a :link|visited {} pseudo-classes de liens désigne le lien <a> non visité (link) ou déjà visité (visited)
element :active|hover|focus {} où element peut etre toute balise ou classe

Pseudo-classes dynamiques

Active : entre le moment où l'utilisateur presse le bouton de la souris et le relâche
Hover : l'élément est survolé
Focus : quand un élément reçoit l'attention, que ce soit au clavier ou d'autres formes d'entrées de texte

Div :lang(fr) {} pseudo-classe lang désigne tout élément <div> qui emploie une langue désignée, ici le français
Div[class]{} sélecteur par attributs désigne tout élément <div> qui posséde un attribut class
Div[class= « ma classe »] {} sélecteur par attributs désigne tout élément <div> qui posséde un attribut class ayant pour valeur maClasse
Div[class~= « ma classe »] {} sélecteur par attributs désigne tout élément <div> qui posséde un attribut class ayant plusieurs valeurs séparées par des espaces et dont l'une d'entre-elles est maClasse
Div[class|= « ma classe »] {} sélecteur par attributs désigne tout élément <div> qui posséde un attribut class ayant plusieurs valeurs séparées par des tirés et dont l'une d'entre-elles est maClasse
Div :first-child {} pseudo-élément désigne le premier enfant de l'élément <div>
Div :first-line {} pseudo-élément s'applique à la première ligne de l'élément <div>
Div :first-letter {} pseudo-élément désigne la première lettre de texte de l'élément <div>

Ordre des pseudo-classes de liens

1. :link
2. :visited
3. :hover (:focus)
4. :active
moyen mnémotechnique : "LoVe Hate"

1.2. Unités de valeurs

0 inutile de préciser pour une unité pour la valeur zéro (0)
cm centimétres
em cadratin unité relative : 1em correspond à la taille de texte hauteur de la lettre majuscule M de l'élément parent
ex unité relative : 1ex correspond à la taille de texte largeur de la lettre x de l'élément parent
in inches
mm millimétres
pc picas conseillés pour le média imprimante
pt point picas pour le média imprimante
px pixels d'écran

• 2. Typographie

Font-family : nom de police
générique
(sans sérif | monospace...) ;
Permet de choisir la police appliquée à l'élément sélectionné. Possibilité d'indiquer plusieurs valeurs par ordre décroissant de choix. Les noms de polices contenant des espaces sont à placer entre guillemets
Exemple : font-family : « trebuchet MS », arial, helvetica, sans-serif ;

Font-size : taille,
pourcentage ;
Détermine la taille de police de l'élément. Les unités recommandées sont en em, ex et % afin de préserver la fluidité des textes.
Exemple : font-size : 1.2em ;

Color : couleur rgb ()
Couleur hexa
Mot-clés ( silver|fushia|navy|...)
Transparent
inherit ;
Applique une couleur de police au texte de l'élément sélectionné. Une palette de 16 couleurs de base (black, white, yellow...) est prise en charge par l'ensemble es navigateurs graphiques et écrans. La palette élargie (256 couleurs) peut également être définie par des mots-clés (antiquewhite, chocolate, olive...)
Exemple : color : #ff00ff ;

Font-style : normal
Italic
Oblique
Inherit ;
Détermine l'orientation de police.
Exemple : font-style : italique ;

Font-weight : mots-clés (bold|bolder|normal...)
Valeur numérique ;
Choisit la graisse de police dans l'élément sélectionné. Les mots-clés (thin, thick) et les valeurs numériques (100, 200...) ne sont pas reconnues par l'ensemble des navigateurs. Il e st préférable de se restreindre aux seuls mots-clés bold, bolder et normal.
Exemple : font-weight : bold ;

Font-variant : normal
Small-caps ;
Permet d'afficher la police d'un élément en petites majuscules
Exemple : font-variant : small-caps ;

Text-decoration : none
Underline
Overline
Line-throught ;
Détermine le soulignement ou le surlignement de l'élément. Un texte peut être souligné, surligné, barré. Il est possible de cumuler les valeurs.
Exemple : text-decoration : underline overline ;

Text-align: left
Right
Center
Justify
Inherit ;
Définit l'alignement du texte dans un élément.
Exemple : text-align : justify ;

Tex-transform : none
Capitalize
Uppercase
Lowercase
Inherit ;
Mise en majuscule ou minuscule du texte. La valeur capitalize affiche les premiéres lettres en majuscule. Uppercase affiche toutes les lettres en majuscules et lowercase en minuscules.
Exemple : text-transform :uppercase ;

Text-indent : valeur
Pourcentage ;
Détermine la valeur de l'alinéa (retrait de la premiére ligne)
Exemple : text-indent : 1em ;

Line-height : normal
Nombre
Longueur
Pourcentage
Inherit ;
Précise la hauteur de ligne de texte. A ne pas confondre avec les marges entre chaque paragraphe.
Exemple : line-height : 1em ;

Letter-spacing : normal
Longueur
Inherit ;
Précise l'espace entre chaque lettre de texte. Une valeur négative est autorisée afind de rapprocher les lettres.
Exemple : letter-spacing : -2px ;

Word-spacing : normal
Longueur
Inherit ;
Précise l'espace entre chaque mot. Une valeur négative est autorisée afin de rapprocher les mots.
Exemple : word-spacing : 3px ;

Ordre pour la syntaxe raccourcie :
Font : 1. font-style,
2. font-variant,
3. font-weight,
4. font-size/line-height,
5. font-family;

• 3. Bordures

Applicables à tous les éléments, qu'ils soient de type bloc ou en-ligne.
NOTE : il est cependant préférable de ne pas les appliquer aux éléments en-ligne car ceux-ci, en régle générale, ne permettent pas d'être dimensionnés.

Border : epaisseur
Style
Couleur
Inherit ;
Peut contenir les différentes valeurs d'épaisseur (width), de style (style) et de couleur (color) et s'applique aux quatres bordures.
Border est la forme condensée des propriétés border-top, border-right, border-left, et border-bottom.
Exemple : border-width : 5px double black ;

Border : epaisser
Inherit ;
Spécifie la valeur de l'épaisseur de bordure du haut, de droite, du bas et de gauche d'un élément.
Border-width est la forme condensée de border-top-width, border-left-width, border-right-width, border-bottom-width.
Exemple : border-width : 2em ;

Border-color : couleur
Transparent
Inherit ;
Détermine la couleur des quatres bordures d'un élément. Border-color est la forme condensée des propriétés border-top-color, border-bottom-color, border-left-color, border-right-color.
Exemple : border-color : #ff9
NOTE : la valeur transparent conservera l'épaisseur de la bordure

Border-style : style (dashed|solid) ;
Indique de quel style sera la bordure de l'élément et s'applique aux quatres bordures à la fois.
Border-style est la forme condensée des propriétés border-top-style, border-bottom-style, border-right-style, border-left-style.
Exemple : border-style : groove ;

• 4. Arriéres plans

Applicables a tous les élméents, qu'ils soient de type bloc ou en-ligne.

Background : couleur
url (image)
répétition
attachement
position
inherit ;

background-color (la couleur du fond d'écran), background-image ( qui spécifie une image d'arrière plan qui vient se superposer à la couleur de fond de l'élément.) fonctionnent de la même manière que background.
exemple : background : white
url (image.png) no-repeat scroll
left top ;

Background-repeat : repeat
Repeat-x
Repeat-y
No-repeat
Inherit ;
Permet de gérer la répétition de l'image d'arriére plan (repeat est la valeur par défaut). La valeur repeat-y spécifie que l'image ne doit se répéter que dans le sens verticlae, dans le sens horizontal pour la valeur repeat-x.
La valeur no-repeat empêche la répétition de l'image.

Background-attachment : scroll
Fixed
Inherit ;
Indique si l'image est fixée par rapport au document, c'est-à-dire si elle défile ou non selon la zone de visualisation et l'ascenseur. Un arrire-plan dont la valeur est fixed ne se déplace pas lorsque l'ascenseur fait défiler l'élément.

Background-position : pourcentage
Longueur
Mots-clés
Inherit ;

Indique la position initiale de l'image. Lorsqu'une seule valeur est indiquée, celle-ci correspond à la postition horizontale, l'image étant verticalement centrée. Lorsque deux valeurs sont indiquées (ex : background-position : right top ;), la premiére correspond à la position horizontale et la seconde à la position verticale.
Exemple : background-position : 50% 20% ;

• 5. Tableaux

Caption-side : top
Bottom
Left
Right
Inherit ;
Cette propriété indique où va se placer la boite de légende (balise <caption>) par rapport à la table.
Exemple : caption-side : top ;

Table-layout : auto
Fixed
Inherit ;
Elle contrôle l'algorithme employé pour la disposition des cellules, des rangées et des colonnes de la table.

Border-collapse : collapse
Separate
Inherit ;
Détermine le chois dumodéle de bordures d'un tableau : bordures fusionnées (collapse) ou séparées (separate)

Border-spacing : longueur
Inherit ;
Détermine la distance qui sépare les bordures des cellules adjacentes.
Exemple : border-spacing : 0.5em ;

Empty-celles : show
Hide
Inherit ;
Indique si les bordures doivent être affichées (show) ou non (hide) pour les cellules vides de contenu.

Vertical-align : baseline
Top
Bottom
Middle
Inherit ;
Appliquée à une cellule de tableau ( <td>) ou à un élément de type table-cell, cette propriété définit l'alignement verticale du contenu dans l'élément.