Qu'est-ce que les CSS ?
Pourquoi utiliser des feuilles de style ? Cascading Style Sheet (CSS) Le principe de base est le suivant : il faut séparer le contenu de la page, de son apparence. La page html contient l'information, et non la façon dont l'information est affichée. Pour un unique contenu : plusieurs affichages sont possibles. Cours des Feuilles de style CSS en pdf | Cours css | Cours informatique gratuit On peut penser à des affichages monochrome, sur de petits écrans, oral (le contenu de la page web est lu), une impression papier, impression sur des transparents, impression en braille…
VERSIONS DE CSS Cours des Feuilles de style CSS en pdf | Cours css | Cours informatique gratuit
CSS1 publié en 1996 .
CSS-P (CSS positioning) permet le positionnement d'éléments.
CSS2 est une recommandation de mai 1998 qui inclut les attributs des deux précédentes versions. L'accent a été mis sur l'accessibilité et la capacité à avoir un style différent selon les media.
CSS3 : encore en cours de construction. Nouveautés : multicolonnage, SVG, styles sur les polices (embossage...), arrondir les coins des boîtes, utiliser des images de fond dans les
bordures, des ombres portées...
QU'EST CE QU'UN STYLE ?
Les styles regroupent différents attributs, tels que les choix de police, de taille, de couleur à appliquer à des titres, des sous-titres … C'est ce que va faire le CSS : permettre de définir ces attributs dans la page html à l'aide d'un code séparé. Par exemple, les balises html comme …
qui par défaut possèdent une taille ou une graisse non modifiable en html, verront ces caractéristiques complètement redéfinissables en CSS. Cours des Feuilles de style CSS en pdf | Cours css | Cours informatique gratuit
PROPRIETES DES CSS
Définition des règles CSS
IL Y A 4 TYPES DE REGLES
Les sélecteurs html. Il est possible de redéfinir les balises html en CSS.
Les classes. Il s'agit de règles librement choisies qu'on peut appliquer à n'importe quelle balise html.
les pseudo-classes de lien.
Les ID. À peu près le même principe que les classes, mais ne peuvent s'appliquer qu'une seule fois dans une page.
Toutes les règles ont la même structure :
Sélecteur (balise html, classe, pseudo-classe ou ID)
Propriétés qui identifient ce qui est défini.
Valeurs données à la propriété.
La paire propriété-valeur est appelée 'définition'
selecteur { propriété : valeur ;}
OU PLACER LES REGLES CSS? Cours des Feuilles de style CSS en pdf | Cours css | Cours informatique gratuit
Il y a 3 façons d'insérer les CSS :
- dans une balise html dans le corps du document.
- dans l'en-tête du document (balise ).
- relié au document html à l'aide d'une balise également dans l'en-tête.
Le navigateur lit la page, télécharge la feuille de style et l'utilise pour afficher le reste de la page.
CREATION DE LA FEUILLE EXTERNE.
À l'aide d'un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate,
TextWrangler sur Mac), créer un fichier enregistré au format texte seul, portant
l'extension .css.
Aucune balise html avec les signes ne doit figurer dans ce fichier !
Syntaxe des règles CSS
Contrairement au HTML qui n'était pas très standardisé, les CSS ne laissent pas de place aux erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html.
Chaque règle doit contenir un sélecteur et une déclaration.
Les propriétés de la déclaration doivent êtres séparées par des points-virgules. Cours des Feuilles de style CSS en pdf | Cours css | Cours informatique gratuit
Lorsque la valeur d'une propriété est une unité de mesure et sa valeur, il ne doit pas y avoir d'espace entre les deux :
Cours des Feuilles de style CSS en pdf | Cours css | Cours informatique gratuit