Le but de cette page est de vous faire construire, en quelques minutes, une feuille de style css.Pour cela, je vous donnerai des modèles de fichiers .html et .css, que vous pourrez copier et modifier, pour les adapter rapidement à vos besoins personnels.
Il existe 3 méthodes pour introduire du code css dans une page.
La méthode locale consiste à écrire du code entre la balise body et /body
La méthode interne consiste à ecrire du code entre les balises head et /head.
Enfin, la méthode externe consiste à placer le code css dans un fichier .css. On indique au navigateur oû trouver ce fichier .css, par une instruction link, placée entre les balises head et /headCette instruction s'écrit, pour le fichier modele.css :
<LINK REL=stylesheet HREF="modele.css" TYPE="text/css">
Ici, le fichier modele.css est placé dans le répertoire courant du site studyvox, oû se trouve aussi le fichier modele.html
Vous pouvez faire appel à n'importe quel autre .css, à condition de mentionner son chemin, ou son URL.
Cette remarque est importante, pour bénéficier des présentations que l'on peut trouver sur son PC ou sur le WEB.Par exemple, vous pouvez copier un fichier .css qui vous semble intéressant et lui ajouter des instructions personnelles supplémentaires.
Ainsi, j'ai simplement ajouté les boîtes h1 et h2 dans le .css, d'un site consacré à l'apprentissage de l'espéranto.Le lien ci-dessous affiche la page modele.html, qui utilise le fichier modele.css, et des styles locaux et internes :
Exemple d'une présentation avec les méthodes locale interne et externe
On utilise des instructions locales ou internes, quand on n'a besoin que de très peu de mise en forme.
La méthode conseillée, pour l'usage des feuilles css, est la méthode externe.Cette méthode présente 2 avantages essentiels :Elle permet d'alléger le contenu des pages html, ce qui facilite le chargement des pages, ainsi que le travail des moteurs de recherche.Elle permet de définir un jeu de présentation adapté à l'ensemble des pages d'un document, et de pouvoir faire des modifications de présentation, sans avoir besoin de toucher aux pages html
Ces avantages sont de la même nature que ceux obtenus par des fichiers d'en tête, que l'on inclut dans des sources, par des instruction #include, en programmation c ou c++
On peut mélanger les 3 méthodes, locale, interne et externe.C'est ce que l'on fait, par exemple, quand on veut construire des exemples d'instructions du langage css.
A titre d'exemple, j'ai écris dans la tage modèle.html, les instructions qui définissent une boîte h2, que vous trouverez dans la source modèle.html, entre les balises head et /head
Quand un style est défini dans une page css, et qu'il est redéfini localement ou d'une manière interne, c'est la redéfinition locale ou interne qui est utilisée, comme vous le vérifierez pour la boîte h2
On peut définir jusqu'à 8 boîtes de style h1, h2...h8ce qui est largement suffisant.
J'ai introduit des instructions locales, entre la balise body et /body, entre les balises span et /span
On remarque des instructions pour les polices de caractères à utiliser, leur taille, leur couleur, la couleur du fond...
Il n'est pas nécessaire de décrire tous les éléments et attributs du langage css, que vous trouverez dans les liens externes utiles, sur css, css2 et css3, dans les traductions en français des recommandations du W3CIci, vous vous contenterez de copier la source modèle.html, pour changer dans celle-ci les propriétés des attributs, par des valeurs de votre choix.Vous constaterez alors les modifications d'apparence, quand vous consulterez votre source modifiée, dans votre navigateur courant.
Vous remarquez que plusieurs polices sont indiquées, pour l'écriture du texte contenu dans la boîte h2Ceci est une précaution, car le navigateur utilisera la police indiquée en deuxième position, si la police indiquée en première position n'est pas disponible, et ainsi de suite.Vous aurez ainsi intérêt à placer en dernière position, une police standard, supportée par tous les navigateurs, comme la police sans-serif, par exemple.
Ces quelques remarques simples vous suffiront, pour saisir des textes, dans des boîtes pour des titres, des sous-titres, pour écrire des formules avec une police appropriée comme la police Symbol, pour les mathématiques...
Vous pourrez faire beaucoup mieux, car les possibilités du langage css sont nombreuses.
Vous pouvez consulter et copier le contenu du fichier modele.css, que j'ai placé dans le fichier modele.txt, pour que le lien ci-dessous vous permette de l'ouvrir dans le bloc note :
ouverture ou téléchargement du fichier modele.txt : exemple de fichier css externe
Vous remarquerez, dans cet exemple de fichier css, que la syntaxe utilise des accollades et des ; pour séparer les attributs.
Pour des exemples plus conséquents, vous pouvez rechercher les fichiers de suffixe .css sur votre PC.Il n'est pas utile que je vous donne ici, un tutoriel complet sur le css, car il existe de nombreux sites pratiques sur ce sujet.
Vous les trouverez facilement avec google ou yahoo, avec des mots clefs comme :
css css2 css3 tutoriel site pratique...
Pour vous aider dans vos recherches, j'ai rassemblé, dans les liens externes utiles sur les langages du WEB, des exemples de présentation css, des tutoriels d'approfondissement, et des liens avec des outils de création comme le blocnote xml ou amaya...
Vous commencerez par consulter les recommandations officielles du W3C, et vous essayerez d'écrire quelques lignes de code, avec un éditeur de texte ordinaire, plutôt que d'utiliser un outil de création de pages html
Il est plus important de connaître la syntaxe de quelques éléments du langage, plutôt que de laisser à un logiciel, le soin d'écrire le code à votre place.
Pour vous en convaincre, vous pouvez faire l'essai suivant :
Entrez dans le traitement de texte "word" et saisissez quelques symbole de la police Symbol dans un texte, puis enregistrez votre document sous la forme d'une page htmlOuvrez ensuite votre document dans votre navigateur, et consultez sa source, avec l'item "source" du menu "afficher" par exemple.
Vous comprendrez alors que le logiciel "word" ne fait pas dans la simplicité !De plus, il mélange le contenu et le style, ce qui est à déconseiller.
liens externes utiles : les langages du WEB, xhtml, css2, mathml...
Si vous avez encore du courage, vous pouvez consulter d'autres liens externes sur l'accessibilité, sur les langues...que vous trouverez dans la page sommaire de la rubrique webtutor.
suivant : Conclusions et perspectives sur l'évolution des langages pour le WEB
retour dans le sommaire de la rubrique webtutor du site studyvox webups