Team-Masters.com
Que du Gratuit pour Webmasters
Les feuilles de style : règles et syntaxe
Le but d’une feuille de style, c’est d’agir sur la présentation d’un document HTML. L’avantage des feuilles de style (CSS en anglais pour Cascading Style Sheet) est immense. Contrairement au HTML, les feuilles de style rendent possible une mise en page efficace et avancée (couleur, police, taille, marges, positionnement...). Les feuilles de style sont composées à la base de règles de style. Il est donc important de comprendre comment elles fonctionnent. Nous allons voir la composition des règles de style, comment les insérer au document HTML. Nous verrons également quels sont les différents types de sélecteur.
Avant toute chose, il nous est important de vous dire de respecter le fil de ce tutoriel si vous débutez en CSS. Cela ne vous sera que plus profitable. Autrement si vous avez déjà flirté avec les CSS, vous pouvez consulter nos différents exemples commentés. En avant ! Let’s go ! An nou alé ! Avanti !
Les notions de base : la syntaxe des CSS
Créer une feuille de style simple est facile, c’est pour cela qu’il ne faut pas s’en priver. Vous avez besoin de connaître un peu de HTML, car nous aurons en effet besoin pour mettre en pratique nos exemples de connaître les balises HTML. S’attaquer aux feuilles de style suppose donc que vous connaissiez un minimum de HTML. Par exemple, pour écrire les éléments ’h1’ en bleu, on écrit :
h1 {color: blue}
L’exemple ci-dessus est une simple règle CSS. Voyons comment se décompose cette règle. Les règles de style se composent d’un sélecteur et d’une déclaration. Ici, un sélecteur (’h1’) et une déclaration (’color : blue’) :
| sélecteur | déclaration |
| h1 | color : blue |
La déclaration se subdivise ensuite comme suit : la propriété (’color’) et la valeur associée (’blue’)
La syntaxe des CSS peut donc se résumer comme suit :
sélecteur {propriété: valeur}
Bien que cet exemple n’agisse que sur une seule des propriétés nécessaires au rendu d’un document HTML, cela suffit pour qu’elle soit qualifiée de feuille de style. Le sélecteur est en général un élément HTML que vous souhaitez définir. La propriété est l’attribut (du sélecteur) que vous souhaitez changer, et chaque propriété peut prendre une valeur. La propriété et sa valeur sont séparées par ’ :’ et comprises entre accolades :
body {color: black}
Le sélecteur représente donc les éléments HTML sur lesquels la déclaration s’applique. Celle-ci définit le style ou l’apparence des éléments liés au sélecteur. Ainsi, la valeur de chacune des propriétés de la déclaration détermine les caractéristiques du style. Par exemple, certaines propriétés servent à modifier les couleurs, la police et la taille de caractères, le positionnement, etc.
Dans le premier exemple, le sélecteur est constitué du marqueur h1 auquel s’applique la couleur bleue spécifiée par la propriété color. Ceci a pour effet d’afficher tous les titres h1 en bleu. Mais Nous ne sommes pas limités à une seule propriété. En effet, la déclaration peut en rassembler plusieurs. C’est ce que nous verrons un peu plus loin.
Lire la suite >>
22 décembre 2004
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
