Feuilles de style (CSS)

CREER UNE CLASSE PERSONNALISEE

Une classe personnalisée va être utilisée ponctuellement dans les pages du site. Le nom de la classe doit être précédé d’un point, ne doit pas commencer par un chiffre et ne doit contenir ni espaces, ni accent, ni caractère de ponctuation, ni tiret.
Exemple pour une classe qui met du texte en rouge sur un paragraphe :
CSS :
.txtrouge {
color: red;
}
HTML :
<p class= »txtrouge »> mon paragraphe en rouge</p>
La valeur de la propriété de couleur peut être un mot-clef (red, green, transparent, …), un code Hexadécimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex: color: rgb(255,125,32); ).
NOTE : L’indication hexadécimale d’une couleur peut parfois être raccourcie en regroupant par paire les lettres et chiffres. Ainsi, « #ff00ee » pourra s’écrire « #f0e ». Mais « #ff00de » ne pourra pas être raccourcie.
Les classes personnalisées peuvent s’appliquer à toutes les balises html.
Pour appliquer plusieurs classes à une même balise :
CSS :
.txtrouge {color: red;}
.italique {font-style:italic}
HTML :
<p class= »txtrouge italique »>mon paragraphe en rouge</p>
Les deux classes sont séparées par un espace, l’attribut « class » n’est indiqué qu’une seule fois.

COMMENTAIRES

/* Ceci est un commentaire de feuille de style */
Ils peuvent être multi-lignes
/*
Ceci est un commentaire de feuille de style
un commentaire sur plusieurs lignes
*/

DIFFERENCE ENTRE CLASS ET ID

Ce sont tous les deux des sélecteurs qui permettent d’appliquer des règles à un élément.
« id » définit un élément de manière unique, alors que « class » peut être utilisé plusieurs fois dans la page.
Nous allons donc privilégier « id » pour les boîtes à positionner, car deux éléments ne devraient logiquement pas avoir la même position dans l’interface. De plus on peut ainsi donner des paramètres propres à chaque élément (typo, taille, couleur, positionnement, arrière-plan, bordure …) avec un seul id.
Il est possible de cumuler id et class. Alors l’id est plus fort que la classe en cas de conflit. De plus JavaScript peut manipuler les balises avec un id.
Rappelons pour terminer qu’au sein de la CSS, les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom).
Exemple de CSS :
/* Définition des balises HTML */
body {
background-color: silver;
}
p {
color: #000;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
/* Définition des ID */
#container {
width: 950px;
background-color: #fff;
margin: 0 auto;
}
/* Définition des classes */
.txtImportant {
color: red;
font-style: italic;
}

Cascade, conflits et héritages

Les ID l’emportent sur les « class ». Les « class » l’emportent sur les sélecteurs contextuels, pseudo-class et pseudo éléments. La feuille interne l’emporte sur la feuille externe si elle est placée après dans l’ordre du code. C’est toujours le dernier appelé qui l’emporte.
CONFLITS
p { color : red; }
p { color : green; }
c’est le vert qui l’emporte. Il écrase la valeur « red » précédemment définie.

HERITAGE

C’est le mécanisme par lequel les styles s’appliquent à un élément, mais aussi à ses descendants.
Structure d’une page html : en haut de la hiérarchie : le html qui contient body qui contient d’autres éléments.
HTML est l’ascendant de tout (aussi appelé élément racine). BODY est l’ascendant de tout ce que montre le navigateur.
Souvent les éléments héritent des propriétés de leur parent : la couleur d’arrière-plan du body sera la même pour toutes les couleurs d’arrière-plan de la page, par défaut. Quelques propriétés ne sont pas héritées, en général il s’agit de bon sens (comme border par exemple).

UNITES DE LONGUEUR ABSOLUES – (A EVITER)

 cm (centimètre = 1cm = 10 mm) Risque d’affichage différent sur plusieurs écrans.
 mm (millimètre) Même remarque.
 pc (pica = 1pc = 12pt) Un autre terme de typographie, donc même remarque.
 pt (point = 1pt = 1/72 in) Le point est une mesure typographique utilisée par les imprimeurs (d’où les « points par pouce » de certaines résolutions) et les traitements de texte.
NOTE : Il ne peut y avoir d’espace à l’intérieur de cette valeur et pour les nombres décimaux, la virgule est impérativement remplacée par un point.
En accessibilité, ces valeurs ne sont pas recommandées, car elles empêchent l’internaute de redimensionner la taille d’affichage des caractères.
Ces valeurs sont donc à éviter côté web ! (Mais restent éventuellement utilisables pour une CSS dédiée à l’impression).

UNITES DE LONGUEUR RELATIVES – (RECOMMANDEES)

 px (pixel)
 em (largeur de la letttre m, 1 em correspond à 100% de la taille en cours de la police, 1.2 em à 120 %, 0.8 em à 80%… Son usage est donc limité aux polices.)
 ex(hauteur de la lettre x. Assez pauvrement implémentée, donc à éviter.).
 % L’élément défini prendra un pourcentage donné de la taille de son élément parent.
 small  xx-large
 x-small  medium
 xx-small  larger
 large  smaller
 x-large
NOTE : Là encore, il ne peut y avoir d’espace à l’intérieur de cette valeur et pour les nombres décimaux, la virgule est impérativement remplacée par un point.
En accessibilité, ces valeurs sont recommandées, car elles permettent à l’internaute de redimensionner la taille d’affichage des caractères.
Il est conseillé de se cantonner aux unités % et em pour un affichage fluide ou pour du texte, et à px quand on a besoin de placer les éléments au pixel près… Les autres valeurs seront le plus souvent évitées.
NOTE : Il existe 2 écoles sur l’utilisation de ces valeurs. Certains intégrateurs préfèreront le « em » et en mettront partout, d’autres préfèrent les « px » et n’utilisent que ça.

QU’EST-CE QUE LES CSS ?
VERSIONS DE CSS
QU’EST CE QU’UN STYLE ?
PROPRIETES DES CSS
DEFINITION DES REGLES CSS
IL Y A 4 TYPES DE REGLES
OU PLACER LES REGLES CSS?
CREATION DE LA FEUILLE EXTERNE
SYNTAXE DES REGLES CSS
CASSE
CREER UNE CLASSE PERSONNALISEE
COMMENTAIRES
CLASS ET ID
DIFFERENCE ENTRE CLASS ET ID
CASCADE, CONFLITS ET HERITAGES
CONFLITS
HERITAGE
UNITES DE LONGUEUR
UNITES DE LONGUEUR ABSOLUES – (A EVITER)
UNITES DE LONGUEUR RELATIVES – (RECOMMANDEES)
PROPRIETES
PROPRIETES DU TEXTE
PROPRIETES DES LISTES
LES RACCOURCIS
POUR LE TEXTE
POUR LES LARGEURS DE MARGES ET REMPLISSAGE
LES BORDURES
LES COULEURS
LES BOITES : REMPLISSAGE ET MARGES
LES MARGES
LE REMPLISSAGE (PADDING)
LES BOITES
DEFINITION
LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU
Notion de flux
Statique (par défaut)
Relatif (dans le flux) = position : relative
Absolu (hors du flux) = position : absolute
LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT
Comprendre le flottement
Faire des colonnes
Sortir du flottement = clear : left, right ou both
LA NOTION DE DEBORDEMENT : OVERFLOW
ARRIERE-PLAN : IMAGES
REPETITION
REPETITION HORIZONTALE
REPETITION VERTICALE
PAS DE REPETITION
REMPLACEMENT DE LA PUCE DE LISTE
PSEUDO CLASSES DE LIENS
« DECORATION » DU TEXTE
ELEMENTS DE TYPE : BLOCK
ELEMENTS DE TYPE : INLINE
ELEMENTS NON AFFICHES
AFFICHAGE DE TYPE TABLEAU
AUTRES TYPES D’AFFICHAGE
DISPLAY: INLINE-BLOCK
DISPLAY: LIST-ITEM
STYLES DIVERS
CURSEUR
UNE FEUILLE PAR MEDIA
LIENS
LIVRES