Présentation CSS
Présentation CSS
-
Objectif
- Connaitre le CSS
-
Introduction
- Cascading Style Sheets ou CSS est un langage de feuille de style utilisé pour décrire la présentation d’un document écrit en HTML ou en XML
- CSS vous permet de définir l’apparence des textes (comme la police, la couleur, la taille, etc…), ainsi que l’agencement de la page (comme les marges, l’arrière-plan, etc…). CSS définit donc la présentation du document.
- CSS décrit la façon dont les éléments doivent être affichés à l’écran, sur du papier, ou sur d’autres supports.
- CSS est initialement conçues pour être utilisées avec des documents HTML.
- fournir un mécanisme pour associer différents styles à un même document
- Une feuille de style contient la définition de différentes règles CSS. C’est en appliquant ces règles qu’on peut mettre en forme les éléments, ou plus concrètement leur donner du style.
- Un style définit la façon dont un élément HTML (par exemple <h1>) sera affiché.
-
Principes
- Une Feuille de style est un ensemble de règles Chaque règle spécifie les valeurs que prendre les propriétés associées aux éléments du document.
- Une règle CSS est divisée en 2 parties :
- Le sélecteur: Détermine ou identifie les parties du document auxquelles sera appliqué le style.
- Le bloc de déclaration: Dans un bloc de déclaration, on liste tous les styles que l’on veut utiliser pour l’élément sélectionné
-
La syntaxe
- La syntaxe de base de CSS est composée de 3 parties :
- Ces trois parties sont écrites de la façon suivante :
sélecteur {propriété:valeur}- Un sélecteur correspond à une balise HTML (<p>, <h1>, etc…) et la propriété est un attribut dont on veut changer la valeur.
h1 {font-size:100px}- Dans cet exemple, tous les titres principaux (<h1>) du document auront une taille de 100 pixels.
- Il est possible de définir plusieurs attributs pour un même sélecteur. Dans ce cas, chaque propriété sera séparée par un point-virgule :
p {font-family:"sans serif"; font-size: 90%; color: blue}
-
– un sélecteur
– une propriété
– une valeur
Exemple :
Si la valeur d’un attribut contient un espace, alors la valeur de l’attribut s’écrit en guillemets :
h2 {font-family:”sans serif”}
ou
p
{
font-family:"sans serif";
font-size: 90%;
color: blue;
}
