Accueil
Dernières images
Rechercher
S'enregistrer
ConnexionLe CSS
Page 1 sur 1
Le CSS
par Squall Sam 26 Aoû 2006 - 16:10
1. Les standards du Web
Le W3C, ou Wolrd Wide Web Consortium, est une organisation de normalisation des standards du Web.
Cela est necessaire car il y'a de nombreux langages pour écrire les pages Webs et les navigateurs que l'on trouve ne les acceptent pas forcément de la même façon.
Le HTML est aujourd'hui déconseillé et remplacé par le XHTML 1.0 ou 1.1. Cela permet d'avoir un langage plus rigide et qui ne s'occupe que d'une partie du code : le fond. On peut enrichir notre page avec le XML pour les bases de données, le CSS pour la présentation, etc.
De plus cette normalisation permet à une page d'être lue de la même façon et par tout le monde quelque soit son handicap, sa langue ou son navigateur. Il existe par exemple des navigateurs en mode texte (Emacs sous Linux), des navigateurs braille, des navigateurs graphiques (Internet Explorer ou Firefox) ou sur assistant personnel.
Il y'a également eu au début du web des balises ditent propriétaires et qui ne sont reconnues que par le navigateur de la firme qui l'a inventé. C'était à l'époque de la "guerre" entre Internet Explorer et Nestcape.
Enfin, même aujourd'hui, certains navigateurs n'interprètent pas correctement ces standards (comme Internet Explorer 6) ce qui oblige au créateur de pages web de s'adapter pour que la page s'affiche partout pareil ce qui peut être contraignant : il faut parfois créer par exemple deux feuilles de style CSS qui seront chargés en fonction du navigateur utilisé pour éviter les bugs.
Comment respecter ces standards ?
Il existe quelques sites internet qui, grâce à un analyseur de code, vont pouvoir vous dire si votre site est conforme à ces nouveaux standards. Par exemple il est fortement conseillé de mettre un texte de substitution à la plaçe d'une image pour les navigateurs non graphiques ou de proposer plusieurs solutions à l'internaute. En effet créer un site entiérement en Flash qui ne pourrait être vu par les navigateurs où Flash est désactivé ne sert à rien.
Cependant personne ne vous en voudra si votre site perso ne respecte pas entiérement cela mais les sites gouvernementaux ou d'associations doivent respecter ces standards.
Vous pouvez trouver plus d'informations sur l'accessibilité à l'adresse http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=SANX0300217L.
HTML ou XHTML : quelle différence ?
La différence entre HTML et XHTML n'est que syntaxique. En effet XHTML est une reformulation du HTML en utilisant les règles du XML. Cela permet d'avoir un langage plus rigide ce qui augmente sa souplesse et améliore sa maintenance.
Voici donc la nouvelle syntaxe générale du XHTML :
-les noms et les attributs des balises sont en minuscules : on écrit <p> et pas <P>
-les valeurs des attributs sont plaçés entre apostrophes simples ou doubles : par exemple <p>
-tout attribut doit recevoir une valeur
-toute balise ouverte DOIT être refermée : <p>Bonjour</p> au lieu de <p>Bonjour
-si la balise n'a pas de balise fermante, comme <img>, on remplace le symbole > par />.
On écrit donc <img src="bateau.gif"> au lieu de <img src="bateau.gif">
-les balises doivent être correctement imbriquées : on a <p><i>Bonjour</i></p> et pas <p><i>Bonjour</p></i>
Enfin, pour améliorer le respect des standards, il faut écrire au début de chaque page html la version utilisée appelée DTD (définition de type de document). Il précise au navigateur le langage utilisé dans la page, si on utilise la version stricte ou la version transitionelle moins stricte.
On écrira donc :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Il est également imposé de spécifier la langue de la page et l'encodage. On rajoute alors pour la langue :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
Pour l'encodage, on rajoute entre les balises <head></head> :
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-15" />
Ici on utilise l'encodage iso-8859-15 qui contient presque tous les caractères utilisé dans l'Europe occidentale plus quelques caractères supplémentaires tels que €.
Il existe également utf-8 qui contient à peu près tous les caractères utilisés dans les langues du monde entier.
Valider son site
Pour réaliser un site conforme aux standards du web il faut préciser la version utilisée et respecter à la lettre la grammaire requise.
Il existe des validateurs de syntaxe qui ne vérifieront que la bonne utilisation de la syntaxe : le titre suivant passera par exemple inaperçue à leurs yeux alors qu'il est préférable d'utiliser la balise <h1></h1>: <p>Le titre principal de la page</p>
Le validateur du W3C s'appelle W3C Markup Validation Service et est disponible à l'adresse http://validator.w3.org.
Le W3C, ou Wolrd Wide Web Consortium, est une organisation de normalisation des standards du Web.
Cela est necessaire car il y'a de nombreux langages pour écrire les pages Webs et les navigateurs que l'on trouve ne les acceptent pas forcément de la même façon.
Le HTML est aujourd'hui déconseillé et remplacé par le XHTML 1.0 ou 1.1. Cela permet d'avoir un langage plus rigide et qui ne s'occupe que d'une partie du code : le fond. On peut enrichir notre page avec le XML pour les bases de données, le CSS pour la présentation, etc.
De plus cette normalisation permet à une page d'être lue de la même façon et par tout le monde quelque soit son handicap, sa langue ou son navigateur. Il existe par exemple des navigateurs en mode texte (Emacs sous Linux), des navigateurs braille, des navigateurs graphiques (Internet Explorer ou Firefox) ou sur assistant personnel.
Il y'a également eu au début du web des balises ditent propriétaires et qui ne sont reconnues que par le navigateur de la firme qui l'a inventé. C'était à l'époque de la "guerre" entre Internet Explorer et Nestcape.
Enfin, même aujourd'hui, certains navigateurs n'interprètent pas correctement ces standards (comme Internet Explorer 6) ce qui oblige au créateur de pages web de s'adapter pour que la page s'affiche partout pareil ce qui peut être contraignant : il faut parfois créer par exemple deux feuilles de style CSS qui seront chargés en fonction du navigateur utilisé pour éviter les bugs.
Comment respecter ces standards ?
Il existe quelques sites internet qui, grâce à un analyseur de code, vont pouvoir vous dire si votre site est conforme à ces nouveaux standards. Par exemple il est fortement conseillé de mettre un texte de substitution à la plaçe d'une image pour les navigateurs non graphiques ou de proposer plusieurs solutions à l'internaute. En effet créer un site entiérement en Flash qui ne pourrait être vu par les navigateurs où Flash est désactivé ne sert à rien.
Cependant personne ne vous en voudra si votre site perso ne respecte pas entiérement cela mais les sites gouvernementaux ou d'associations doivent respecter ces standards.
Vous pouvez trouver plus d'informations sur l'accessibilité à l'adresse http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=SANX0300217L.
HTML ou XHTML : quelle différence ?
La différence entre HTML et XHTML n'est que syntaxique. En effet XHTML est une reformulation du HTML en utilisant les règles du XML. Cela permet d'avoir un langage plus rigide ce qui augmente sa souplesse et améliore sa maintenance.
Voici donc la nouvelle syntaxe générale du XHTML :
-les noms et les attributs des balises sont en minuscules : on écrit <p> et pas <P>
-les valeurs des attributs sont plaçés entre apostrophes simples ou doubles : par exemple <p>
-tout attribut doit recevoir une valeur
-toute balise ouverte DOIT être refermée : <p>Bonjour</p> au lieu de <p>Bonjour
-si la balise n'a pas de balise fermante, comme <img>, on remplace le symbole > par />.
On écrit donc <img src="bateau.gif"> au lieu de <img src="bateau.gif">
-les balises doivent être correctement imbriquées : on a <p><i>Bonjour</i></p> et pas <p><i>Bonjour</p></i>
Enfin, pour améliorer le respect des standards, il faut écrire au début de chaque page html la version utilisée appelée DTD (définition de type de document). Il précise au navigateur le langage utilisé dans la page, si on utilise la version stricte ou la version transitionelle moins stricte.
On écrira donc :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Il est également imposé de spécifier la langue de la page et l'encodage. On rajoute alors pour la langue :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
Pour l'encodage, on rajoute entre les balises <head></head> :
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-15" />
Ici on utilise l'encodage iso-8859-15 qui contient presque tous les caractères utilisé dans l'Europe occidentale plus quelques caractères supplémentaires tels que €.
Il existe également utf-8 qui contient à peu près tous les caractères utilisés dans les langues du monde entier.
Valider son site
Pour réaliser un site conforme aux standards du web il faut préciser la version utilisée et respecter à la lettre la grammaire requise.
Il existe des validateurs de syntaxe qui ne vérifieront que la bonne utilisation de la syntaxe : le titre suivant passera par exemple inaperçue à leurs yeux alors qu'il est préférable d'utiliser la balise <h1></h1>: <p>Le titre principal de la page</p>
Le validateur du W3C s'appelle W3C Markup Validation Service et est disponible à l'adresse http://validator.w3.org.
Dernière édition par Squall le Jeu 28 Déc 2006 - 13:52, édité 11 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Mar 3 Oct 2006 - 17:35
2. Le HTML minimum
Pour répondre à ces standards, il faut un peu modifier notre connaissance du HTML puisque le HTML ne s'occupera plus que du fond, le CSS (ou d'autres langages) se chargeant du reste. Oubliez donc les balises pour mettre en gras, les balises pour positionner des informations ou ce genre de choses !
Deux types de balises
Avant de voir quelles sont les balises à connaître, il faut savoir qu'il existe deux types de balises :
les balises en lignes et les balises de type bloc.
Les balises en lignes sont, comme leur nom l'indique, sur la même ligne. Elles permettent de modifier une portion de texte comme les liens, la mise en gras, ...
Les balises de type bloc créent des blocs de diverses natures comme un paragraphe, une liste, un tableau, ...
Ces balises peuvent contenir des balises en ligne alors que l'inverse est faux.
De plus ces balises possèdent des dimensions (hauteur, largeur d'un paragraphe par exemple) alors que les balises en ligne n'en possèdent pas personnellement : leurs dimensions dépendent du contexte (par exemple la hauteur d'un caractère en gras dépend de la police d'écriture utilisée).
Les éléments (ou balises) de type bloc sont très utilisés dans la mise en page avec l'aide du CSS. Cela permet par exemple de mettre le menu à gauche, le texte au centre, le logo en haut au milieu, le paragraphe de moindre importance décalé par rapport au paragraphe plus important, etc.
Les principales balises en ligne
<a> : permet de faire un lien hypertext. L'attribut href contient la cible du lien. Balise fermante </a>
<em> : met en emphase une portion de texte, la plupart du temps on obtient un texte en italique. Balise fermante </em>
<img> : permet d'inclure une image dans le document. L'attribut alt permet de donner un texte alternatif (pour les mal-voyants, les navigateurs non-graphiques, etc) et l'attribut src contient le chemin vers l'image. Il n'y a pas de balise fermante donc on la termine par />
<q> : permet de faire une courte citation. Balise fermante </q>
<span> : conteneur en ligne qui peut servir à regrouper ou séparer des informations dans la mise en forme. Balise fermante </span>
<strong> : renforcement du texte. Souvent le résultat obtenu est un texte en gras. Balise fermante </strong>
Les principales balises de type bloc
<blockquote> : idem que <q> mais permet de faire des citations s'étendant sur plusieurs lignes. Balise fermante </blockquote>
<div> : équivalent à <span> mais est cette fois un élement de type bloc. Balise fermante </div>
<form> : permet de créer un formulaire (voir le Javascript pour plus d'informations). Balise fermante </form>
<h1> à <h6> : permet de créer un titre. Balise fermante </h1> à </h6>
<ol> et <ul> : permettent de créer des listes. Voir le HTML pour plus de précisions. Balise fermantes </ol> et </ul>
<p> : permet de créer un paragraphe. Balise fermante </p>
Il existe de nombreuses autres balises mais celles-ci sont les plus répandus.
Pour répondre à ces standards, il faut un peu modifier notre connaissance du HTML puisque le HTML ne s'occupera plus que du fond, le CSS (ou d'autres langages) se chargeant du reste. Oubliez donc les balises pour mettre en gras, les balises pour positionner des informations ou ce genre de choses !
Deux types de balises
Avant de voir quelles sont les balises à connaître, il faut savoir qu'il existe deux types de balises :
les balises en lignes et les balises de type bloc.
Les balises en lignes sont, comme leur nom l'indique, sur la même ligne. Elles permettent de modifier une portion de texte comme les liens, la mise en gras, ...
Les balises de type bloc créent des blocs de diverses natures comme un paragraphe, une liste, un tableau, ...
Ces balises peuvent contenir des balises en ligne alors que l'inverse est faux.
De plus ces balises possèdent des dimensions (hauteur, largeur d'un paragraphe par exemple) alors que les balises en ligne n'en possèdent pas personnellement : leurs dimensions dépendent du contexte (par exemple la hauteur d'un caractère en gras dépend de la police d'écriture utilisée).
Les éléments (ou balises) de type bloc sont très utilisés dans la mise en page avec l'aide du CSS. Cela permet par exemple de mettre le menu à gauche, le texte au centre, le logo en haut au milieu, le paragraphe de moindre importance décalé par rapport au paragraphe plus important, etc.
Les principales balises en ligne
<a> : permet de faire un lien hypertext. L'attribut href contient la cible du lien. Balise fermante </a>
<em> : met en emphase une portion de texte, la plupart du temps on obtient un texte en italique. Balise fermante </em>
<img> : permet d'inclure une image dans le document. L'attribut alt permet de donner un texte alternatif (pour les mal-voyants, les navigateurs non-graphiques, etc) et l'attribut src contient le chemin vers l'image. Il n'y a pas de balise fermante donc on la termine par />
<q> : permet de faire une courte citation. Balise fermante </q>
<span> : conteneur en ligne qui peut servir à regrouper ou séparer des informations dans la mise en forme. Balise fermante </span>
<strong> : renforcement du texte. Souvent le résultat obtenu est un texte en gras. Balise fermante </strong>
Les principales balises de type bloc
<blockquote> : idem que <q> mais permet de faire des citations s'étendant sur plusieurs lignes. Balise fermante </blockquote>
<div> : équivalent à <span> mais est cette fois un élement de type bloc. Balise fermante </div>
<form> : permet de créer un formulaire (voir le Javascript pour plus d'informations). Balise fermante </form>
<h1> à <h6> : permet de créer un titre. Balise fermante </h1> à </h6>
<ol> et <ul> : permettent de créer des listes. Voir le HTML pour plus de précisions. Balise fermantes </ol> et </ul>
<p> : permet de créer un paragraphe. Balise fermante </p>
Il existe de nombreuses autres balises mais celles-ci sont les plus répandus.
Dernière édition par le Mar 24 Oct 2006 - 14:21, édité 1 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Mar 24 Oct 2006 - 13:41
3. Le CSS
Dans cette première partie sur le CSS en lui-même, nous verrons ses caractéristiques typographiques ainsi que son emplacement dans le code d'un site web.
Ne vous en faites pas si ça paraît compliqué : je ne fait qu'expliquer en général et nous verrons plus précisément comment les utiliser après grâce à un projet de site web.
Qu'est-ce que le CSS
Le CSS, qui signifie Cascading Style Sheet ou feuilles de style en cascade, est un langage du web qui contient toutes les informations sur la forme d'une page web, laissant au HTML le soin du fond, c'est à dire tous les objets (textes, images, etc) qui vont apparaître sur la page.
Le CSS est apparût dans les années 90 à l'époque où Netscape Navigator et Internet Explorer se livraient bataille en créeant des balises propriétaires ce qui rendait la tâche du webmaster plus compliquée : il lui fallait créer une feuille de style pour chaque navigateur pour tout afficher correctement. La version actuelle de CSS est CSS 2 et une troisème version est en cours de préparation.
3.1 Les caractéristiques typographiques du CSS
Syntaxe du CSS : les bases
Une feuille de style CSS contient toujours un certain nombre de déclarations de la forme
h1 { color: blue }. Ici on attribue la couleur bleue à chacune des balises h1.
On a donc de gauche à droite : le nom de la balise sans les crochets à laquelle va s'appliquer la propriété (qui est appelé sélécteur), des accolades qui vont contenir la propriété et la propriété en elle même à l'intérieur.
Lorsque plusieurs propriétés sont décrites pour une balise, on place un point-virgule à la fin de chacune. Par exemple pour associer un texte bleu placé au centre à la balise h1 on écrit :
h1 { color: blue;
text-align: center;
}
Toutes les balises peuvent voir une propriété s'appliquer à elles !
Les identificateurs
Il existe également des identificateurs que l'on peut placer dans les balises dans le code HTML et qui peuvent recevoir une propriété.
Par exemple si on veut mettre en vert une seule partie du texte et pas les autres on affectera aux liens du sommaire l'identificateur textvert : <p>Le texte</p>.
Pour utiliser cet identificateur dans la feuille de style, on remplace le nom de la balise dans la syntaxe vue ci-dessus par le caractère dièse (#) suivi de l'identificateur :
#textvert { color: green }
L'identificateur textevert ne pourra dès lors plus servir dans aucune autre partie de notre code HTML.
Les classes
Comme nous venons de le voir les identifiant ne peuvent s'appliquer qu'a une seule balise. Pour appliquer les propriétés à plusieurs balises, il existe heureusement les classes.
Les classes se manipulent presque comme les identificateurs : on écrira par exemple, pour donner la classe text à un paragraphe, <p>...</p> .
Et pour l'utiliser dans le fichier CSS, on écrira .text { color : blue } .
Le regroupement des propriétés
Imaginons que nous avons les propriétés suivantes :
h1 { color: blue }
#textebleu { color: blue }
.text { color : blue }
On a trois lignes qui disent la même chose et il serait peut être utile de regrouper les balises pour n'avoir plus qu'une seule ligne. Car pour l'instant nous n'avons que trois balises mais le fichier CSS peut contenir plein de propriétés !
Pour regrouper les balises, on les écrira séparées par des virgules avant de mettre la propriété commune :
h1, #textebleu, .text { color: blue }
Les sélécteurs et l'hérédité
Je veux maintenant pouvoir afficher les liens qui sont dans les paragraphes <p> en vert mais pas les autres. Comment puis-je faire ?
Version 1 : les liens dans les paragraphes ont pour classe toto. Dès lors ma propriété CSS sera a.toto { color : green } . Cela signifie que les balises de classe toto auront la propriété qui suit.
Version 2 : mon paragraphe a pour identificateur text. Je peux alors écrire #text a { color : green } pour séléctionner tous les liens descendants de l'identificateur text, c'est à dire toutes les balises présentent entre les balises <p> et </p>.
Les commentaires
En CSS, les commentaires sont placés entre /* et */ .
Il peuvent tenir sur plusieures lignes et ne s'arrêtent que lorsqu'ils rencontrent */ .
N'oubliez pas les commentaires dans votre feuille de style CSS car les propriétés sont vite oubliées si on ne pratique pas couramment !
Dans cette première partie sur le CSS en lui-même, nous verrons ses caractéristiques typographiques ainsi que son emplacement dans le code d'un site web.
Ne vous en faites pas si ça paraît compliqué : je ne fait qu'expliquer en général et nous verrons plus précisément comment les utiliser après grâce à un projet de site web.
Qu'est-ce que le CSS
Le CSS, qui signifie Cascading Style Sheet ou feuilles de style en cascade, est un langage du web qui contient toutes les informations sur la forme d'une page web, laissant au HTML le soin du fond, c'est à dire tous les objets (textes, images, etc) qui vont apparaître sur la page.
Le CSS est apparût dans les années 90 à l'époque où Netscape Navigator et Internet Explorer se livraient bataille en créeant des balises propriétaires ce qui rendait la tâche du webmaster plus compliquée : il lui fallait créer une feuille de style pour chaque navigateur pour tout afficher correctement. La version actuelle de CSS est CSS 2 et une troisème version est en cours de préparation.
3.1 Les caractéristiques typographiques du CSS
Syntaxe du CSS : les bases
Une feuille de style CSS contient toujours un certain nombre de déclarations de la forme
h1 { color: blue }. Ici on attribue la couleur bleue à chacune des balises h1.
On a donc de gauche à droite : le nom de la balise sans les crochets à laquelle va s'appliquer la propriété (qui est appelé sélécteur), des accolades qui vont contenir la propriété et la propriété en elle même à l'intérieur.
Lorsque plusieurs propriétés sont décrites pour une balise, on place un point-virgule à la fin de chacune. Par exemple pour associer un texte bleu placé au centre à la balise h1 on écrit :
h1 { color: blue;
text-align: center;
}
Toutes les balises peuvent voir une propriété s'appliquer à elles !
Les identificateurs
Il existe également des identificateurs que l'on peut placer dans les balises dans le code HTML et qui peuvent recevoir une propriété.
Par exemple si on veut mettre en vert une seule partie du texte et pas les autres on affectera aux liens du sommaire l'identificateur textvert : <p>Le texte</p>.
Pour utiliser cet identificateur dans la feuille de style, on remplace le nom de la balise dans la syntaxe vue ci-dessus par le caractère dièse (#) suivi de l'identificateur :
#textvert { color: green }
L'identificateur textevert ne pourra dès lors plus servir dans aucune autre partie de notre code HTML.
Les classes
Comme nous venons de le voir les identifiant ne peuvent s'appliquer qu'a une seule balise. Pour appliquer les propriétés à plusieurs balises, il existe heureusement les classes.
Les classes se manipulent presque comme les identificateurs : on écrira par exemple, pour donner la classe text à un paragraphe, <p>...</p> .
Et pour l'utiliser dans le fichier CSS, on écrira .text { color : blue } .
Le regroupement des propriétés
Imaginons que nous avons les propriétés suivantes :
h1 { color: blue }
#textebleu { color: blue }
.text { color : blue }
On a trois lignes qui disent la même chose et il serait peut être utile de regrouper les balises pour n'avoir plus qu'une seule ligne. Car pour l'instant nous n'avons que trois balises mais le fichier CSS peut contenir plein de propriétés !
Pour regrouper les balises, on les écrira séparées par des virgules avant de mettre la propriété commune :
h1, #textebleu, .text { color: blue }
Les sélécteurs et l'hérédité
Je veux maintenant pouvoir afficher les liens qui sont dans les paragraphes <p> en vert mais pas les autres. Comment puis-je faire ?
Version 1 : les liens dans les paragraphes ont pour classe toto. Dès lors ma propriété CSS sera a.toto { color : green } . Cela signifie que les balises de classe toto auront la propriété qui suit.
Version 2 : mon paragraphe a pour identificateur text. Je peux alors écrire #text a { color : green } pour séléctionner tous les liens descendants de l'identificateur text, c'est à dire toutes les balises présentent entre les balises <p> et </p>.
Les commentaires
En CSS, les commentaires sont placés entre /* et */ .
Il peuvent tenir sur plusieures lignes et ne s'arrêtent que lorsqu'ils rencontrent */ .
N'oubliez pas les commentaires dans votre feuille de style CSS car les propriétés sont vite oubliées si on ne pratique pas couramment !
Dernière édition par le Lun 26 Mar 2007 - 20:35, édité 2 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Jeu 28 Déc 2006 - 17:57
3.2 Emplacement du CSS
Maitenant que nous savons comment s'écrit le CSS, il serait bon de savoir où il se place.
A cette question il existe trois réponses : dans un fichier, dans le fichier html ou encore dans la balise concernée.
Le CSS dans le fichier HTML
Le CSS peut se placer dans le fichier HTML et plus précisément dans l'en-tête, c'est à dire entre les balises <head> et </head> (qui vous a dit qu'elles ne servaient à rien ?).
Il suffit alors d'écrire le code suivant :
<style>
</style>
Les propriétés CSS seront alors présentent entre ces balises. Exemple :
<style>
h1 { color : blue }
</style>
Le CSS dans la balise concernée
On peut également placer le CSS dans la balise concernée par la propriété. Par exemple pour mettre les titres h1 en rouge on écrira :
<h1>Titre en rouge !!!</h1>
Le CSS dans un fichier séparé
La dernière solution est de séparer le CSS du code HTML de façon plus nette en attribuant à chacun un fichier. Le CSS sera alors présent dans un fichier nom_du_fichier.css où nom_du_fichier est le nom à attribuer au fichier. Le nom du fichier est libre mais évitez les espaces puisque la plupart des serveurs sont sur UNIX qui n'aime pas beaucoup les espaces (qui a eu des problèmes pour télécharger les anciens fichiers du film "Le Gîte" ?).
Dans le fichier CSS on trouvera alors juste les propriétés (et quelques commentaires) mais rien d'autre !
Ca sera au navigateur d'importer le fichier css en lui donnant l'adresse dans le fichier HTML.
Pour cela il existe deux méthodes.
La balise link
La balise link est une balise HTML qui permet de lier des fichiers au fichier HTML.
On écrira de manière générale :
<link> où fichier.css est le fichier qui contient les propriétés CSS.
La règle @import
La règle @import a le même impact que la balise link mais elle est propre au CSS. On écrira pour importer le fichier fichier.css :
<style>
@import url(fichier.css);
</style>
Que choisir
Tout d'abord je vous déconseille vivement de mettre le CSS dans le fichier HTML, que ce soit dans l'en-tête ou dans la balise concernée. En effet le CSS est là pour séparer le fond de la forme, et pas pour les séparer puis les remettre au même endroit !
Ensuite, la balise link et la règle @import font la même chose à deux détails près :
la balise link n'est pas propre au CSS contrairement à @import mais cela a peu d'importance
la règle @import n'est pas interprétée par les vieux navigateurs et l'utilisation de link risque de voir apparaître une page HTML avec des propriétés CSS mal interprétées. Et comme un site avec le CSS désactivé est toujours plus joli qu'un site où le CSS est mal interprété, @import est à préférer.
Maitenant que nous savons comment s'écrit le CSS, il serait bon de savoir où il se place.
A cette question il existe trois réponses : dans un fichier, dans le fichier html ou encore dans la balise concernée.
Le CSS dans le fichier HTML
Le CSS peut se placer dans le fichier HTML et plus précisément dans l'en-tête, c'est à dire entre les balises <head> et </head> (qui vous a dit qu'elles ne servaient à rien ?).
Il suffit alors d'écrire le code suivant :
<style>
</style>
Les propriétés CSS seront alors présentent entre ces balises. Exemple :
<style>
h1 { color : blue }
</style>
Le CSS dans la balise concernée
On peut également placer le CSS dans la balise concernée par la propriété. Par exemple pour mettre les titres h1 en rouge on écrira :
<h1>Titre en rouge !!!</h1>
Le CSS dans un fichier séparé
La dernière solution est de séparer le CSS du code HTML de façon plus nette en attribuant à chacun un fichier. Le CSS sera alors présent dans un fichier nom_du_fichier.css où nom_du_fichier est le nom à attribuer au fichier. Le nom du fichier est libre mais évitez les espaces puisque la plupart des serveurs sont sur UNIX qui n'aime pas beaucoup les espaces (qui a eu des problèmes pour télécharger les anciens fichiers du film "Le Gîte" ?).
Dans le fichier CSS on trouvera alors juste les propriétés (et quelques commentaires) mais rien d'autre !
Ca sera au navigateur d'importer le fichier css en lui donnant l'adresse dans le fichier HTML.
Pour cela il existe deux méthodes.
La balise link
La balise link est une balise HTML qui permet de lier des fichiers au fichier HTML.
On écrira de manière générale :
<link> où fichier.css est le fichier qui contient les propriétés CSS.
La règle @import
La règle @import a le même impact que la balise link mais elle est propre au CSS. On écrira pour importer le fichier fichier.css :
<style>
@import url(fichier.css);
</style>
Que choisir
Tout d'abord je vous déconseille vivement de mettre le CSS dans le fichier HTML, que ce soit dans l'en-tête ou dans la balise concernée. En effet le CSS est là pour séparer le fond de la forme, et pas pour les séparer puis les remettre au même endroit !
Ensuite, la balise link et la règle @import font la même chose à deux détails près :
Dernière édition par le Mer 31 Jan 2007 - 12:56, édité 3 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Sam 30 Déc 2006 - 18:09
4. Le projet
Vous trouverez à l'adresse ci-dessous la page de notre projet de site web.
Si vous avez tout bien suivi jusque là le code source ne devrait pas vous poser de problèmes
Dans cette page je n'ai fait que :
Et voici l'adresse avant que j'oublie de la mettre : http://pl.a.free.fr/web/css/projet1.html
Comme vous pouvez le voir la page s'affiche déjà convenablement sans le fichier CSS : c'est ça le XHTML
Vous trouverez à l'adresse ci-dessous la page de notre projet de site web.
Si vous avez tout bien suivi jusque là le code source ne devrait pas vous poser de problèmes
Dans cette page je n'ai fait que :
- mettre des liens
- mettre du texte avec de paragraphes et différentes sections
- mettre des images
- ajouter l'image qui indique que la page est valide en XHTML 1.1
Et voici l'adresse avant que j'oublie de la mettre : http://pl.a.free.fr/web/css/projet1.html
Comme vous pouvez le voir la page s'affiche déjà convenablement sans le fichier CSS : c'est ça le XHTML
Dernière édition par le Dim 25 Mar 2007 - 16:40, édité 3 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Lun 8 Jan 2007 - 19:24
4.1 Explications du projet
Dans notre projet de site web pour montrer ce qu'est le CSS et ce qu'il permet nous allonrs réaliser une page web type sur un sujet pris au hasard.
Dans toute page web, et donc dans celle-ci, il y a un titre, des paragraphes, des images, des liens regroupés dans un menu. Toute cette partie a été codée en XHTML 1.1 . A la fin du site une image récupérée du site du validateur du w3c nous indique que ce site est conforme avec la norme XHTML 1.1.
Le but du CSS et de la suite de ce projet sera de créer un fichier CSS contenant différentes propriétés pour rendre notre site web plus attrayant.
Je ne pourrais donc faire une liste exhaustive des possibilités, d'abord parcequ'il y en a beaucoup et ensuite parceque certaines sont compliqués à implémenter sur un site web. Et enfin le Web (et internet) fournit de nombreuses explications plus détaillées de tout cela.
Dans notre projet de site web pour montrer ce qu'est le CSS et ce qu'il permet nous allonrs réaliser une page web type sur un sujet pris au hasard.
Dans toute page web, et donc dans celle-ci, il y a un titre, des paragraphes, des images, des liens regroupés dans un menu. Toute cette partie a été codée en XHTML 1.1 . A la fin du site une image récupérée du site du validateur du w3c nous indique que ce site est conforme avec la norme XHTML 1.1.
Le but du CSS et de la suite de ce projet sera de créer un fichier CSS contenant différentes propriétés pour rendre notre site web plus attrayant.
Je ne pourrais donc faire une liste exhaustive des possibilités, d'abord parcequ'il y en a beaucoup et ensuite parceque certaines sont compliqués à implémenter sur un site web. Et enfin le Web (et internet) fournit de nombreuses explications plus détaillées de tout cela.
Dernière édition par le Mer 31 Jan 2007 - 12:58, édité 1 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Lun 8 Jan 2007 - 23:21
4.2 Modifications du fichier HTML pour pouvoir intégrer le CSS
Maintenant que nous avons notre projet, il va falloir modifier un peu le fichier html pour pouvoir y intégrer par la suite des propriétés CSS.
Ajout d'un fichier CSS
Pour commencer, nous allons dire à la page web d'importer le fichier CSS style.css .
Pour cela, il suffit simplement de rajouter les lignes suivantes entre les balises <head> et </head> :
<style>
@import url(style.css);
</style>
Il n'est pas nécessaire de créer tout de suite le fichier style.css . Si le navigateur ne le trouve pas il ignorera cette ligne et la page apparaîtra comme si il n'y avait pas de fichier de styles.
Hiérarchisation des balises
Dans le projet, nous avons au début de la page des liens. Pour faciliter notre travail dans le fichier CSS, nous allons dire que cette liste de liens a pour id "sommaire". On écrit donc <ul id="sommaire"> {suite du code} </ul>
Ensuite, nous avons de nombreux paragraphes de texte. On va supposer que l'on prévoit pour plus tard d'autres paragraphes qui ne contiennent pas de texte mais qui servent à autre chose. On écrira donc <p> {suite du code} </p> . Cette fois c'est class et pas id car il y'a plusieurs paragraphes de type texte alors qu'il n'y a qu'un seul sommaire !
Enfin, nous avons un album photo. Pour cela on a des listes contenant une image et une description.
On écrira alors <ul class="photo"> {suite du code} </ul>
De plus pour la description on utilisera la balise <span> {description} </span>
Les cadres ?
Mais que sont les cadres ? Les cadres sont des cadres comme pour les tableaux de peintre. Ici on va les utiliser dans notre page web pour que le texte ne soit pas dans toute la page web mais dans une partie au centre seuleument, comme sur le forum ou ici .
Nous allons en créer deux : un pour tout ce qu'on écrit dans notre page (le titre, le texte, les liens) et un autre seulement pour le texte.
Pour cela on ajoute deux balises <div></div> .
La première se place juste après la balise <body> : <div id="page"> {suite du code} </div>
La seconde se place après le sommaire : <div id="corps"> {suite du code} </div>
Les cadres sont très facile à mettre en place en CSS, au moins plus facile qu'en HTML. Cependant ici je ne détaillerais pas tout : cela sera fait après avoir fini le projet dans les compléments
Notre nouvelle page web
Maintenant que nous avons changer certains éléments dans notre code source, vous trouverez le nouveau fichier, qui est visuellement le même, à l'adresse suivante : http://pl.a.free.fr/web/css/projet2.html
De plus, notre fichier de style ne s'appelera jamais style.css sinon toutes les différentes pages du projet auront au final la même apparence. Au fur et à mesure il sera renommé en style1.css, style2.css, etc et les modifictations appropriées seront faites dans le code de la page html.
Maintenant que nous avons notre projet, il va falloir modifier un peu le fichier html pour pouvoir y intégrer par la suite des propriétés CSS.
Ajout d'un fichier CSS
Pour commencer, nous allons dire à la page web d'importer le fichier CSS style.css .
Pour cela, il suffit simplement de rajouter les lignes suivantes entre les balises <head> et </head> :
<style>
@import url(style.css);
</style>
Il n'est pas nécessaire de créer tout de suite le fichier style.css . Si le navigateur ne le trouve pas il ignorera cette ligne et la page apparaîtra comme si il n'y avait pas de fichier de styles.
Hiérarchisation des balises
Dans le projet, nous avons au début de la page des liens. Pour faciliter notre travail dans le fichier CSS, nous allons dire que cette liste de liens a pour id "sommaire". On écrit donc <ul id="sommaire"> {suite du code} </ul>
Ensuite, nous avons de nombreux paragraphes de texte. On va supposer que l'on prévoit pour plus tard d'autres paragraphes qui ne contiennent pas de texte mais qui servent à autre chose. On écrira donc <p> {suite du code} </p> . Cette fois c'est class et pas id car il y'a plusieurs paragraphes de type texte alors qu'il n'y a qu'un seul sommaire !
Enfin, nous avons un album photo. Pour cela on a des listes contenant une image et une description.
On écrira alors <ul class="photo"> {suite du code} </ul>
De plus pour la description on utilisera la balise <span> {description} </span>
Les cadres ?
Mais que sont les cadres ? Les cadres sont des cadres comme pour les tableaux de peintre. Ici on va les utiliser dans notre page web pour que le texte ne soit pas dans toute la page web mais dans une partie au centre seuleument, comme sur le forum ou ici .
Nous allons en créer deux : un pour tout ce qu'on écrit dans notre page (le titre, le texte, les liens) et un autre seulement pour le texte.
Pour cela on ajoute deux balises <div></div> .
La première se place juste après la balise <body> : <div id="page"> {suite du code} </div>
La seconde se place après le sommaire : <div id="corps"> {suite du code} </div>
Les cadres sont très facile à mettre en place en CSS, au moins plus facile qu'en HTML. Cependant ici je ne détaillerais pas tout : cela sera fait après avoir fini le projet dans les compléments
Notre nouvelle page web
Maintenant que nous avons changer certains éléments dans notre code source, vous trouverez le nouveau fichier, qui est visuellement le même, à l'adresse suivante : http://pl.a.free.fr/web/css/projet2.html
De plus, notre fichier de style ne s'appelera jamais style.css sinon toutes les différentes pages du projet auront au final la même apparence. Au fur et à mesure il sera renommé en style1.css, style2.css, etc et les modifictations appropriées seront faites dans le code de la page html.
Dernière édition par le Mer 31 Jan 2007 - 12:59, édité 2 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Mar 9 Jan 2007 - 14:20
4.3 CSS étape 1 : le texte
Nous passons maintenant aux choses sérieuses : la réalisation du fichier CSS. Ce premier fichier CSS sera nommé style1.css et sera utilisé par le fichier projet3.html .
Vous pouvez vous rendre à l'adresse http://pl.a.free.fr/web/css pour avoir la liste des fichiers présents dans le dossier. Il suffit ensuite de cliquer sur le fichier qui vous intéresse pour pouvoir le lire.
A modifier
Dans cette partie nous allons nous occuper du texte, c'est à dire des balises <h1> à <h6> ainsi que des paragraphes de classe texte.
Grâce au CSS, il est possible de modifier énormément de choses quant à l'aspect visuel des textes : police utilisée, taille du texte, formatage, bordures, etc.
Les caractères sont des textes contenant ... un seul caractère. Les propriétés s'appliquent donc également aux caractères.
Ici nous allons voir comment changer la police, la taille du texte, comment mettre en gras, en italique, etc.
La police
La propriété qui gère la police est font-family . Pour que le texte s'affiche suivant la police Arial pour le titre de taille h1, on écrira donc dans le fichier CSS :
h1 {
font-family: arial;
}
Il est également possible de spécifier plusieurs polices. Dans ce cas on les sépare par des virgules. De plus il est conseillé de mettre entre guillemets les noms de polices qui contiennent des espaces comme trebuchet ms. Enfin, pour ne pas avoir de problèmes, écrivez en minuscules !
L'utilité de mettre plusieurs polices est la suivante : tous les ordinateurs du monde n'ont pas forcément les polices que vous utilisez sur vote site. Cela est encore plus vrai suivant si vous êtes sous Windows, Mac ou sous un système Unix. Il est donc fortement conseillé de mettre, en plus de vos polices spéciales, des polices génériques présentes sur tous les ordinateurs. Lors de l'intérprétation du fichier CSS, si le navigateur ne trouve pas sur votre ordinateur la première police il prendra la seconde et ainsi de suite si la seconde n'est pas disponible.
Dans ce cas, pourquoi ne pas proposer aux internautes de télécharger la police que vous utilisez ? Cela est faisable mais avez vous pensé aux utilisateurs de Mac ou de systèmes Unix où les polices sont probablement gérés différemment que sous Windows. Et tout le monde ne sait pas installer une police de caractères
Voici les polices génériques : serif, sans-serif, cursive, fantasy et monospace.
Les sérifs sont ... Je ne vais pas le dire car ça serait mal expliqué ! Heureusement Wikipedia s'en est chargée pour moi ici
Cursive est une police qui imite l'écriture manuscrite.
Fantasy peut afficher n'importe quoi ! Ca dépend de la configuration du navigateur et du système d'exploitation.
Monospace donne des caractères comme ceux d'une machine à écrire.
En italique
Si vous voulez mettre le texte en italique, la propriété est font-style, qui peut prendre les valeurs italic, oblique, normal ou inherit.
Il n'y a pas de différences entre italic et oblique pour l'utilisateur, les deux produisant le même résultat. normal permet de revenir à un style normal et inherit prend la valeur font-style de l'élément parent (par exemple si on a un texte A dans un texte B, le texte B est parent de A).
Pour mettre le titre en italique, on écrit donc :
h1 {
font-style: italic;
}
En gras
La propriété font-weight qui permet de mettre en gras prend de nombreuses valeurs. Cependant seules deux d'entre elles ont une réelle incidence sur le texte : normal et bold. La propriété inherit existe également. bold permet de mettre en gras et normal enlève le gras.
Pour mettre le titre en gras, on écrit donc :
h1 {
font-weight: bold;
}
En petites capitales
La propriété font-variant permet de passer le texte en petites capitales : les lettres minuscules seront affichées en majuscules plus petites que les lettres majuscules du texte de départ.
Les attributs sont normal, inherit et small-caps.
Pour mettre le titre en petites capitales, on écrit donc :
h1 {
font-variant: small-caps;
}
En couleurs
La propriété color permet de changer la couleur. La couleur peut être donnée en héxadécimale, comme #00FF00 pour le vert, en texte comme red ou blue ou en décimal.
En décimal il faut utiliser la propriété rgb(n1,n2,n3) où n1, n2 et n3 sont des nombres de 0 à 255 qui correspondent respectivement à l'intensité de rouge, de vert ou de bleu.
Pour mettre le titre en vert, on écrit donc :
h1 {
color: #00FF00 /* ou green ou rgb(0,255,0) */;
}
Le soulignement
La propriété text-decoration gère le soulignement. Les valeurs possibles sont none, underline, overline, line-through et blink.
none ne met pas de soulignement; underline souligne; overline surligne; line-through barre et blink fait clignoter.
Pour mettre le titre clignotant, on écrit donc :
h1 {
text-decoration: blink;
}
La taille
La propriété font-size permet de modifier la taille de la police. La taille peut être définie de nombreuses façons mais nous n'en retiendront que deux.
On peut tout d'abord définir la taille dans certaines unités comme les pixels ou les points. Cependant les pixels sont préférables car avec les points l'affichage dépend du navigateur utilisé.
Pour afficher un titre avec une taille de 15 pixels on écrit :
h1 {
font-size: 15px;
}
15 pixels est la taille d'un texte normal environ.
On peut également définir la taille comme plus grande ( larger ) ou plus petite ( smaller ) que la taille de l'élément parent.
Pour afficher un titre avec une taille plus petite que l'élément parent :
h1 {
font-size: smaller;
}
L'alignement
Enfin, la propriété text-align va permettre d'aligner le texte. Les valeurs possibles sont right pour un alignement à droite, left pour un alignement à gauche et center pour un texte centré.
Pour afficher un titre centré on écrit :
h1 {
text-align: center;
}
Le projet
Dans le projet, j'ai utilisé certaines de ces propriétés. A vous de les découvrir !
Mise à jour
Je viens de me rendre compte que j'avais laissé un bout de texte sans le mettre dans un paragraphe (il est juste en dessous du titre "la vie sur Mars").
Comme vous pouvez le voir aucun style ne s'applique à ce texte et il est "normal".
Nous passons maintenant aux choses sérieuses : la réalisation du fichier CSS. Ce premier fichier CSS sera nommé style1.css et sera utilisé par le fichier projet3.html .
Vous pouvez vous rendre à l'adresse http://pl.a.free.fr/web/css pour avoir la liste des fichiers présents dans le dossier. Il suffit ensuite de cliquer sur le fichier qui vous intéresse pour pouvoir le lire.
A modifier
Dans cette partie nous allons nous occuper du texte, c'est à dire des balises <h1> à <h6> ainsi que des paragraphes de classe texte.
Grâce au CSS, il est possible de modifier énormément de choses quant à l'aspect visuel des textes : police utilisée, taille du texte, formatage, bordures, etc.
Les caractères sont des textes contenant ... un seul caractère. Les propriétés s'appliquent donc également aux caractères.
Ici nous allons voir comment changer la police, la taille du texte, comment mettre en gras, en italique, etc.
La police
La propriété qui gère la police est font-family . Pour que le texte s'affiche suivant la police Arial pour le titre de taille h1, on écrira donc dans le fichier CSS :
h1 {
font-family: arial;
}
Il est également possible de spécifier plusieurs polices. Dans ce cas on les sépare par des virgules. De plus il est conseillé de mettre entre guillemets les noms de polices qui contiennent des espaces comme trebuchet ms. Enfin, pour ne pas avoir de problèmes, écrivez en minuscules !
L'utilité de mettre plusieurs polices est la suivante : tous les ordinateurs du monde n'ont pas forcément les polices que vous utilisez sur vote site. Cela est encore plus vrai suivant si vous êtes sous Windows, Mac ou sous un système Unix. Il est donc fortement conseillé de mettre, en plus de vos polices spéciales, des polices génériques présentes sur tous les ordinateurs. Lors de l'intérprétation du fichier CSS, si le navigateur ne trouve pas sur votre ordinateur la première police il prendra la seconde et ainsi de suite si la seconde n'est pas disponible.
Dans ce cas, pourquoi ne pas proposer aux internautes de télécharger la police que vous utilisez ? Cela est faisable mais avez vous pensé aux utilisateurs de Mac ou de systèmes Unix où les polices sont probablement gérés différemment que sous Windows. Et tout le monde ne sait pas installer une police de caractères
Voici les polices génériques : serif, sans-serif, cursive, fantasy et monospace.
Les sérifs sont ... Je ne vais pas le dire car ça serait mal expliqué ! Heureusement Wikipedia s'en est chargée pour moi ici
Cursive est une police qui imite l'écriture manuscrite.
Fantasy peut afficher n'importe quoi ! Ca dépend de la configuration du navigateur et du système d'exploitation.
Monospace donne des caractères comme ceux d'une machine à écrire.
En italique
Si vous voulez mettre le texte en italique, la propriété est font-style, qui peut prendre les valeurs italic, oblique, normal ou inherit.
Il n'y a pas de différences entre italic et oblique pour l'utilisateur, les deux produisant le même résultat. normal permet de revenir à un style normal et inherit prend la valeur font-style de l'élément parent (par exemple si on a un texte A dans un texte B, le texte B est parent de A).
Pour mettre le titre en italique, on écrit donc :
h1 {
font-style: italic;
}
En gras
La propriété font-weight qui permet de mettre en gras prend de nombreuses valeurs. Cependant seules deux d'entre elles ont une réelle incidence sur le texte : normal et bold. La propriété inherit existe également. bold permet de mettre en gras et normal enlève le gras.
Pour mettre le titre en gras, on écrit donc :
h1 {
font-weight: bold;
}
En petites capitales
La propriété font-variant permet de passer le texte en petites capitales : les lettres minuscules seront affichées en majuscules plus petites que les lettres majuscules du texte de départ.
Les attributs sont normal, inherit et small-caps.
Pour mettre le titre en petites capitales, on écrit donc :
h1 {
font-variant: small-caps;
}
En couleurs
La propriété color permet de changer la couleur. La couleur peut être donnée en héxadécimale, comme #00FF00 pour le vert, en texte comme red ou blue ou en décimal.
En décimal il faut utiliser la propriété rgb(n1,n2,n3) où n1, n2 et n3 sont des nombres de 0 à 255 qui correspondent respectivement à l'intensité de rouge, de vert ou de bleu.
Pour mettre le titre en vert, on écrit donc :
h1 {
color: #00FF00 /* ou green ou rgb(0,255,0) */;
}
Le soulignement
La propriété text-decoration gère le soulignement. Les valeurs possibles sont none, underline, overline, line-through et blink.
none ne met pas de soulignement; underline souligne; overline surligne; line-through barre et blink fait clignoter.
Pour mettre le titre clignotant, on écrit donc :
h1 {
text-decoration: blink;
}
La taille
La propriété font-size permet de modifier la taille de la police. La taille peut être définie de nombreuses façons mais nous n'en retiendront que deux.
On peut tout d'abord définir la taille dans certaines unités comme les pixels ou les points. Cependant les pixels sont préférables car avec les points l'affichage dépend du navigateur utilisé.
Pour afficher un titre avec une taille de 15 pixels on écrit :
h1 {
font-size: 15px;
}
15 pixels est la taille d'un texte normal environ.
On peut également définir la taille comme plus grande ( larger ) ou plus petite ( smaller ) que la taille de l'élément parent.
Pour afficher un titre avec une taille plus petite que l'élément parent :
h1 {
font-size: smaller;
}
L'alignement
Enfin, la propriété text-align va permettre d'aligner le texte. Les valeurs possibles sont right pour un alignement à droite, left pour un alignement à gauche et center pour un texte centré.
Pour afficher un titre centré on écrit :
h1 {
text-align: center;
}
Le projet
Dans le projet, j'ai utilisé certaines de ces propriétés. A vous de les découvrir !
Mise à jour
Je viens de me rendre compte que j'avais laissé un bout de texte sans le mettre dans un paragraphe (il est juste en dessous du titre "la vie sur Mars").
Comme vous pouvez le voir aucun style ne s'applique à ce texte et il est "normal".
Dernière édition par le Sam 28 Avr 2007 - 16:32, édité 3 fois
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Sam 17 Fév 2007 - 14:31
4.4 CSS étape 2 : les bordures
Les fichiers de cette partie
Les noms de la page web et du fichier CSS associés à cette partie sont "projet4.html" et "style2.css".
Ils sont toujours au même endroit : http://pl.a.free.fr/web/css .
Introduction
Les bordures permettent d'entourer des zones de la page web pour la démarquer du reste de la page.
Par exemple on pourra encadrer le titre, un bout de texte important ou encore les liens de la page.
Elles s'appliquent donc à des balises (comme body, h1, p, etc).
Les styles de bordure
Tout d'abord on peut modifier le style d'une bordure. Cependant tous les styles ne sont pas reconnus par tous les navigateurs !
C'est la propriété border-style qui met en place la bordure. Voici ses attributs possibles :
- dashed : la bordure est composée de tirets
- dotted : la bordure est composée de pointillés
- double : la bordure est formée de 2 traits pleins
- none : pas de bordure
- ridge : effet 3D sortant de la page
- groove : effet 3D
- hidden : la bordure est là mais invisible. Comme elle est là elle prend de la plaçe alors que avec none elle n'est pas là donc elle ne prend pas de plaçe.
- inset : effet entrant
- outset : effet sortant
- solid : trait plein
L'application de la bordure
Avec border-style, on applique le style sur les quatres cotés de la bordure. Mais on peut également appliquer le style séparémment sur chacun des cotés de la bordure :
- border-top-style : applique le style en haut
- border-bottom-style : applique le style en bas
- border-right-style : applique le style à droite
- border-left-style : applique le style à gauche
L'épaisseur de la bordure
On peut également changer l'épaisseur de la bordure, pour tous les cotés ou séparémment.
Pour changer l'épaisseur pour tous les cotés, il faut utiliser border-width avec :
- 0 : pas de bordure
- thin : épaisseur pas épaisse
- medium : épaisseur normale
- thick : grosse épaisseur
Pour les cotés, il y'a dans le même style qu'au dessus :
- border-top-width : applique l'épaisseur en haut
- border-bottom-width : applique l'épaisseur en bas
- border-right-width : applique l'épaisseur à droite
- border-left-width : applique l'épaisseur à gauche
La couleur
Pour changer la couleur de la bordure il faut utiliser la propriété border-color.
La couleur peut être un nom (green, red, black, etc) ou un code RGB en héxadécimal (#FF0000 pour rouge, #FFFFFF pour blanc, etc).
Pour changer la couleur de l'arrière plan (dans une bordure ça ne changera que la couleur de l'arrière plan de la bordure, ce qui est le but de la bordure), il faut utiliser background-color, de la même façon que border-color.
Les fichiers de cette partie
Les noms de la page web et du fichier CSS associés à cette partie sont "projet4.html" et "style2.css".
Ils sont toujours au même endroit : http://pl.a.free.fr/web/css .
Introduction
Les bordures permettent d'entourer des zones de la page web pour la démarquer du reste de la page.
Par exemple on pourra encadrer le titre, un bout de texte important ou encore les liens de la page.
Elles s'appliquent donc à des balises (comme body, h1, p, etc).
Les styles de bordure
Tout d'abord on peut modifier le style d'une bordure. Cependant tous les styles ne sont pas reconnus par tous les navigateurs !
C'est la propriété border-style qui met en place la bordure. Voici ses attributs possibles :
- dashed : la bordure est composée de tirets
- dotted : la bordure est composée de pointillés
- double : la bordure est formée de 2 traits pleins
- none : pas de bordure
- ridge : effet 3D sortant de la page
- groove : effet 3D
- hidden : la bordure est là mais invisible. Comme elle est là elle prend de la plaçe alors que avec none elle n'est pas là donc elle ne prend pas de plaçe.
- inset : effet entrant
- outset : effet sortant
- solid : trait plein
L'application de la bordure
Avec border-style, on applique le style sur les quatres cotés de la bordure. Mais on peut également appliquer le style séparémment sur chacun des cotés de la bordure :
- border-top-style : applique le style en haut
- border-bottom-style : applique le style en bas
- border-right-style : applique le style à droite
- border-left-style : applique le style à gauche
L'épaisseur de la bordure
On peut également changer l'épaisseur de la bordure, pour tous les cotés ou séparémment.
Pour changer l'épaisseur pour tous les cotés, il faut utiliser border-width avec :
- 0 : pas de bordure
- thin : épaisseur pas épaisse
- medium : épaisseur normale
- thick : grosse épaisseur
Pour les cotés, il y'a dans le même style qu'au dessus :
- border-top-width : applique l'épaisseur en haut
- border-bottom-width : applique l'épaisseur en bas
- border-right-width : applique l'épaisseur à droite
- border-left-width : applique l'épaisseur à gauche
La couleur
Pour changer la couleur de la bordure il faut utiliser la propriété border-color.
La couleur peut être un nom (green, red, black, etc) ou un code RGB en héxadécimal (#FF0000 pour rouge, #FFFFFF pour blanc, etc).
Pour changer la couleur de l'arrière plan (dans une bordure ça ne changera que la couleur de l'arrière plan de la bordure, ce qui est le but de la bordure), il faut utiliser background-color, de la même façon que border-color.
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Ven 9 Mar 2007 - 0:55
4.5 CSS complément : Le positionnement
Complément ?
Après avoir longuement réfléchi (Lyric me connaît bien pour ça) j'ai décidé de na pas vous présenter le positionnement en CSS, qui est pourtant quelque chose de fabuleux, grâce à la puissance du CSS.
En voici quelques raisons :
Tout d'abord, je trouve que je ne dit pas grand chose de plus que la plupart des autres sites sur le CSS.
Ensuite, j'ai plein de choses à faire à coté de ça et ça ne me laisse pas beaucoup de temps pour ça.
De plus, ça ne me paraît pas vraiment utile pour un site simple, vu que je ne m'en suis pas vraiment servi moi-même.
Enfin, je sens que j'aurais du mal à l'expliquer.
Pour cela, je vous renvoie à quelques ouvrages et sites internet :
- http://openweb.eu.org/css/ : un site internet en couleurs, avec des exemples. Voici le nom des trois pages sur le positionnement que vous pourrez consulter:
Initiation au positionnement CSS : 1.flux et position relative
Initiation au positionnement CSS : 2.position float
Initiation au positionnement CSS : 3. position absolue et fixe
- CSS 2 pratique du design web de Raphaël Goetter chez Eyrolles : un excellent ouvrage, que j'utilise pour ce tutorial. Il liste vraiment tout mais ne donne peut être pas assez d'exemples.
- CSS en action de Christopher Schmitt chez O'Reilly : tous les exemples que vous avez toujours demandé sont là ! En plus il est écrit qu'on a le droit d'utiliser les codes présents pour ses propres sites. En ce moment il est, avec celui du dessus, juste derrière moi
Complément ?
Après avoir longuement réfléchi (Lyric me connaît bien pour ça
) j'ai décidé de na pas vous présenter le positionnement en CSS, qui est pourtant quelque chose de fabuleux, grâce à la puissance du CSS.En voici quelques raisons :
Tout d'abord, je trouve que je ne dit pas grand chose de plus que la plupart des autres sites sur le CSS.
Ensuite, j'ai plein de choses à faire à coté de ça et ça ne me laisse pas beaucoup de temps pour ça.
De plus, ça ne me paraît pas vraiment utile pour un site simple, vu que je ne m'en suis pas vraiment servi moi-même.
Enfin, je sens que j'aurais du mal à l'expliquer.
Pour cela, je vous renvoie à quelques ouvrages et sites internet :
- http://openweb.eu.org/css/ : un site internet en couleurs, avec des exemples. Voici le nom des trois pages sur le positionnement que vous pourrez consulter:
Initiation au positionnement CSS : 1.flux et position relative
Initiation au positionnement CSS : 2.position float
Initiation au positionnement CSS : 3. position absolue et fixe
- CSS 2 pratique du design web de Raphaël Goetter chez Eyrolles : un excellent ouvrage, que j'utilise pour ce tutorial. Il liste vraiment tout mais ne donne peut être pas assez d'exemples.
- CSS en action de Christopher Schmitt chez O'Reilly : tous les exemples que vous avez toujours demandé sont là ! En plus il est écrit qu'on a le droit d'utiliser les codes présents pour ses propres sites. En ce moment il est, avec celui du dessus, juste derrière moi
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Lun 26 Mar 2007 - 21:18
4.6 CSS étape 4 : le menu
Il existe deux types différents de menu : les menus en ligne (les différentes rubriques de www.fnac.com) et les menus en colonne (les sous-rubriques de www.fnac.com par exemple).
Mais dans les deux cas, les menus sont composés du même élément de base : un lien.
On va donc tout d'abord voir comment faire pour modifier le lien et le rendre plus attrayant, en enlevant par exemple le souligné et la couleur bleue. Comment créer un menu vertical et comment créer un menu horizontal sera le sujet du prochain post (car c'est un peu long et super interéssant).
4.6.1 Les liens
Les fichiers de cette partie
Les noms de la page web et du fichier CSS associés à cette partie sont "projet5.html" et "style3.css".
Ils sont toujours au même endroit : http://pl.a.free.fr/web/css .
Les liens sous forme de texte
Ici on va traiter les liens sous forme de texte (voir le site de la Fnac : les boutons sont en haut, le texte à gauche).
Pour modifier la mise en forme du texte on modifie la mise en forme du texte comme pour du texte normal, c'est à dire qu'on peut appliquer sur un lien (représenté par la balise a) les mêmes propriétés que celles qu'on peut appliquer sur un texte.
Voici comment faire pour que le texte soit vert et pas souligné :
#menu a {
text-decoration: none;
color: green;
}
Mais il existe une autre possibilité super géniale : comme vous l'aurez remarqué sur cette page (http://www.abandonware-france.org/) lorsqu'on passe la souris sur un lien le texte se retrouve encadré de deux barres. Et c'est le CSS qui fait ça !
En effet il exite 4 états différents pour les liens en CSS qui permettent de changer le style du lien
-par défaut : :link
-lorsqu'il a déjà été visité : :visited
-lorsqu'il est survolé par le pointeur de la souris : :hover
-lorsqu'il est en cours de séléction : :active
Il est recommandé de respecter cette ordre dans le fichier CSS pour une meilleur interprétation, soit dit en passant.
Voici par exemple comment grossir le lien et changer sa couleur et le souligner lorsqu'on le survole :
#sommaire a:hover { /* dans notre projet le menu a pour identificateur sommaire et pas menu ! */
text-decoration: underline;
color: red;
font-weight: bold;
}
Enfin, si on veut changer la police il est préferable de le faire non pas pour le lien mais pour la liste : on va utiliser la balise ul. On va aussi supprimer les puces sur le coté car c'est moche :
ul#sommaire {
font-family: georgia, times, serif;
list-style-type: none; /* pour supprimer les puces */
}
Les liens sous forme de boutons
Pour créer un lien sous forme de bouton, il suffit de créer des bordures autour du lien. Tout ce qu'il faut est donc dans la rubrique sur les bordures.
On va reprendre notre menu de tout à l'heure et l'afficher sous forme de boutons en créant donc des bordures. Il va de plus falloir espacer les liens car sinon ils se touchent.
On va également définir la largeur du bouton, par exemple 120 pixels. cependant pour que cela fonctionne il faut dire au navigateur d'afficher les boutons sous forme de bloc. On va également définir une marge de 5px en haut et en bas :
#sommaire a{
display: block; /* affiche sous forme de bloc */
margin: 5px 0; /* définit une marge de 5px en haut et en bas et 0px à droite et à gauche */
text-decoration: none;
color : green;
width: 120px; /* largeur */
text-align: center;
border-style : solid;
border-color : black;
background-color : pink;
}
Comme vous pourrez le remarquer, la bordure ne disparaît pas lorsqu'on survole le lien.
Il existe deux types différents de menu : les menus en ligne (les différentes rubriques de www.fnac.com) et les menus en colonne (les sous-rubriques de www.fnac.com par exemple).
Mais dans les deux cas, les menus sont composés du même élément de base : un lien.
On va donc tout d'abord voir comment faire pour modifier le lien et le rendre plus attrayant, en enlevant par exemple le souligné et la couleur bleue. Comment créer un menu vertical et comment créer un menu horizontal sera le sujet du prochain post (car c'est un peu long et super interéssant).
4.6.1 Les liens
Les fichiers de cette partie
Les noms de la page web et du fichier CSS associés à cette partie sont "projet5.html" et "style3.css".
Ils sont toujours au même endroit : http://pl.a.free.fr/web/css .
Les liens sous forme de texte
Ici on va traiter les liens sous forme de texte (voir le site de la Fnac : les boutons sont en haut, le texte à gauche
).Pour modifier la mise en forme du texte on modifie la mise en forme du texte comme pour du texte normal, c'est à dire qu'on peut appliquer sur un lien (représenté par la balise a) les mêmes propriétés que celles qu'on peut appliquer sur un texte.
Voici comment faire pour que le texte soit vert et pas souligné :
#menu a {
text-decoration: none;
color: green;
}
Mais il existe une autre possibilité super géniale : comme vous l'aurez remarqué sur cette page (http://www.abandonware-france.org/) lorsqu'on passe la souris sur un lien le texte se retrouve encadré de deux barres. Et c'est le CSS qui fait ça !
En effet il exite 4 états différents pour les liens en CSS qui permettent de changer le style du lien
-par défaut : :link
-lorsqu'il a déjà été visité : :visited
-lorsqu'il est survolé par le pointeur de la souris : :hover
-lorsqu'il est en cours de séléction : :active
Il est recommandé de respecter cette ordre dans le fichier CSS pour une meilleur interprétation, soit dit en passant.
Voici par exemple comment grossir le lien et changer sa couleur et le souligner lorsqu'on le survole :
#sommaire a:hover { /* dans notre projet le menu a pour identificateur sommaire et pas menu ! */
text-decoration: underline;
color: red;
font-weight: bold;
}
Enfin, si on veut changer la police il est préferable de le faire non pas pour le lien mais pour la liste : on va utiliser la balise ul. On va aussi supprimer les puces sur le coté car c'est moche :
ul#sommaire {
font-family: georgia, times, serif;
list-style-type: none; /* pour supprimer les puces */
}
Les liens sous forme de boutons
Pour créer un lien sous forme de bouton, il suffit de créer des bordures autour du lien. Tout ce qu'il faut est donc dans la rubrique sur les bordures.
On va reprendre notre menu de tout à l'heure et l'afficher sous forme de boutons en créant donc des bordures. Il va de plus falloir espacer les liens car sinon ils se touchent.
On va également définir la largeur du bouton, par exemple 120 pixels. cependant pour que cela fonctionne il faut dire au navigateur d'afficher les boutons sous forme de bloc. On va également définir une marge de 5px en haut et en bas :
#sommaire a{
display: block; /* affiche sous forme de bloc */
margin: 5px 0; /* définit une marge de 5px en haut et en bas et 0px à droite et à gauche */
text-decoration: none;
color : green;
width: 120px; /* largeur */
text-align: center;
border-style : solid;
border-color : black;
background-color : pink;
}
Comme vous pourrez le remarquer, la bordure ne disparaît pas lorsqu'on survole le lien.
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Re: Le CSS
par Squall Sam 28 Avr 2007 - 16:56
Les fichiers des deux parties suivantes
Les noms de la page web et du fichier CSS associés à cette partie sont "projet6.html" et "style4.css".
Ils sont toujours au même endroit : http://pl.a.free.fr/web/css .
4.6.2 Créer un menu vertical
Nous avons déjà pu voir au paragraphe 4.6.1 comment créer un menu, et celui que nous avons créer était un menu vertical. Cependant cette fois on va mettre des puces, et on va enlever l'aspect bouton du lien pour ne garder que le texte.
Il existe deux propriétés qui s'appliquent aux puces :
- la propriété list-style-type qui permet de changer le style des puces
- la propriété list-style-image qui permet de mettre comme puce une image.
Pour list-style-type, il existe 21 styles différents.
Voici les principaux :
- none : pas de puce
- disc : disque (cerlce plein)
- circle : cercle
- square : carré
Les autres styles sont par exemple mettre des chiffres décimaux ou romains.
Pour la liste complète et quelques exemples, voir http://www.laltruiste.com/courscss/listestyle.html .
Avec list-style-image, on précise le chemin d'accès au fichier image, qui peut être aux formats jpg, gif ou png : list-style-image : url(icone.png) par exemple.
Ne soyez pas trop gourmand sur la taille de l'image (10*15 pixels suffisent) !
On écrira alors par exemple :
ul#sommaire {
font-family: georgia, times, serif;
list-style-image : url(icone.jpg); /* ou list-style-type: quelque-chose */
margin: 0;
padding: 0;
}
Cependant comme on peut le voir, les puces ne font pas partie du document mais sont à l'extérieur. Pour remédier à cela il suffit de rajouter la propriété list-style-position : inside;/b].
On a donc au final :
[b]ul#sommaire {
font-family: georgia, times, serif;
list-style-image : url(icone.jpg); /* ou list-style-type: quelque-chose */
list-style-position : inside;
margin: 0;
padding: 0;
}
4.6.2 Créer un menu horizontal
Pour créer un menu horizontal, on procède de la même façon que pour créer un menu vertical sauf que cette fois ci il faut dire au navigateur d'afficher les boutons sur une ligne.
Pour cela on ajoute une nouvelle propriété qui va permettre de garder le style de nos boutons mais en les mettant les uns à la suite des autres : float : left. On applique cette propriété à la balise li :
#sommaire li {
float : left;
}
Cependant, comme vous pourrez le voir, les boutons sont collés les uns à la suite des autres, et déjà qu'ils ne sont pas super jolis (j'allais quand même pas mettre les boutons les plus beaux du monde) ça fait encore plus moche. En fait ils sont moches car la bordure est trop grosse.
Pour définir la taille de la bordure, il faut rajouter la propriété border-width. On va la mettre à 1 pixel.
Mais un nouveau problème est apparu : le titre "Mars" est au même niveau que les liens ! Pour enlever cela on définit une marge de 100 pixels au dessus de la balise h2 : margin-top : 100px;.
Pour ce qui est de décoller les boutons, souvenez vous qu'on avait définit une marge de 10 pixels en haut et en bas lorsque le menu était vertical. On a qu'a reprendre ça mais cette fois avec la marge à gauche et à droite : margin: 0 10px;.
Le menu est quand même plus joli maintenant. Le seul problème c'est peut être la taille mais on va dire que les martiens sont mal voyants
4.6.3 D'autres menus
Si vous voulez avoir plein d'exemples de menu, voici deux sites :
- http://css.maxdesign.com.au/listamatic : en anglais, ce site contient plein d'exemples de menus en tous genres.
- http://css.alsacreations.com/Galeries-de-menus-en-CSS : devinez ce qui se trouve à cette page !? Mais cette fois le site est en français.
Les noms de la page web et du fichier CSS associés à cette partie sont "projet6.html" et "style4.css".
Ils sont toujours au même endroit : http://pl.a.free.fr/web/css .
4.6.2 Créer un menu vertical
Nous avons déjà pu voir au paragraphe 4.6.1 comment créer un menu, et celui que nous avons créer était un menu vertical. Cependant cette fois on va mettre des puces, et on va enlever l'aspect bouton du lien pour ne garder que le texte.
Il existe deux propriétés qui s'appliquent aux puces :
- la propriété list-style-type qui permet de changer le style des puces
- la propriété list-style-image qui permet de mettre comme puce une image.
Pour list-style-type, il existe 21 styles différents.
Voici les principaux :
- none : pas de puce
- disc : disque (cerlce plein)
- circle : cercle
- square : carré
Les autres styles sont par exemple mettre des chiffres décimaux ou romains.
Pour la liste complète et quelques exemples, voir http://www.laltruiste.com/courscss/listestyle.html .
Avec list-style-image, on précise le chemin d'accès au fichier image, qui peut être aux formats jpg, gif ou png : list-style-image : url(icone.png) par exemple.
Ne soyez pas trop gourmand sur la taille de l'image (10*15 pixels suffisent) !
On écrira alors par exemple :
ul#sommaire {
font-family: georgia, times, serif;
list-style-image : url(icone.jpg); /* ou list-style-type: quelque-chose */
margin: 0;
padding: 0;
}
Cependant comme on peut le voir, les puces ne font pas partie du document mais sont à l'extérieur. Pour remédier à cela il suffit de rajouter la propriété list-style-position : inside;/b].
On a donc au final :
[b]ul#sommaire {
font-family: georgia, times, serif;
list-style-image : url(icone.jpg); /* ou list-style-type: quelque-chose */
list-style-position : inside;
margin: 0;
padding: 0;
}
4.6.2 Créer un menu horizontal
Pour créer un menu horizontal, on procède de la même façon que pour créer un menu vertical sauf que cette fois ci il faut dire au navigateur d'afficher les boutons sur une ligne.
Pour cela on ajoute une nouvelle propriété qui va permettre de garder le style de nos boutons mais en les mettant les uns à la suite des autres : float : left. On applique cette propriété à la balise li :
#sommaire li {
float : left;
}
Cependant, comme vous pourrez le voir, les boutons sont collés les uns à la suite des autres, et déjà qu'ils ne sont pas super jolis (j'allais quand même pas mettre les boutons les plus beaux du monde
) ça fait encore plus moche. En fait ils sont moches car la bordure est trop grosse.Pour définir la taille de la bordure, il faut rajouter la propriété border-width. On va la mettre à 1 pixel.
Mais un nouveau problème est apparu : le titre "Mars" est au même niveau que les liens ! Pour enlever cela on définit une marge de 100 pixels au dessus de la balise h2 : margin-top : 100px;.
Pour ce qui est de décoller les boutons, souvenez vous qu'on avait définit une marge de 10 pixels en haut et en bas lorsque le menu était vertical. On a qu'a reprendre ça mais cette fois avec la marge à gauche et à droite : margin: 0 10px;.
Le menu est quand même plus joli maintenant. Le seul problème c'est peut être la taille mais on va dire que les martiens sont mal voyants
4.6.3 D'autres menus
Si vous voulez avoir plein d'exemples de menu, voici deux sites :
- http://css.maxdesign.com.au/listamatic : en anglais, ce site contient plein d'exemples de menus en tous genres.
- http://css.alsacreations.com/Galeries-de-menus-en-CSS : devinez ce qui se trouve à cette page !? Mais cette fois le site est en français.
Squall- Administrateur Adjoint
-
Nombre de messages : 246
Localisation : entre Andromède et le Soleil
Date d'inscription : 29/04/2006 -
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|