Plusieurs programmeurs webs débutants code leur site web comme bon leur
semble, sans ce soucier de la compatibilité, de la facilité de
programmation et de la compréhension de sa propre programmation ...
C'est pourquoi j'ai décidé de vous aidez à débuter dans la conception
web standardisé avec CSS. Prenez donc papier et crayon, ou préparé
votre imprimante car, plusieurs détails sont à retenir. Pour tout
commentaire ou question sur le tutoriel, passez par le forum ou laissez un
commentaire à l'endroit prévue à cet effet à la fin de l'article.** Des connaissances en HTML sont requisent pour ce tutoriel.
Qu'est-ce que le CSS ?
Le CSS (Cascading Style Sheet) est un "langage" qui permet d'ajouté du style (couleurs, images, bordures, marges ...) à votre site en respectant les normes de développement web. Ce langage est très simple mais plus vous avancerez, plus vous aurez quelques mots de tête. CSS ne sert pas a intégré du contenu, il sert essentiellement à améliorer l'aspect visuel de votre contenu.
Par où commencer ?
La première chose à faire est de créer un fichier vide nommer "style.css" (Vous pouvez lui donner le nom que vous voulez) et à l'inclure dans votre page html entre les balises <head> </head> de la manière suivante :
<link rel="stylesheet" xhref="style.css" type="text/css">
Jetons maintenant un coup d'oeil à l'intérieur du fichier style.css. Nous allons ici utilisé quelques exemple simple afin que vous compreniez le fonctionnement du CSS et non que vous appreniez la syntaxe par coeur.
EXEMPLE :
h1 {
font-size: 40px;
height: 200px;
}
.avertissement {
color: Red;
font-weight: bold;
}
#pied {
background-color: Gray;
}
Vous avez ici 3 sélecteurs h1, .avertissement et #pied. Un sélecteur est une entité qui pointe quelque part dans votre page HTML. Ils peuventt être créé de plusieurs manières et peuvent être une combinaison de blocs :
* Element
* Class
* Id
Explication :
- Element : Un Element pointe quelque part dans votre page. Dans l'exemple, nous voulons appliquer le style à la balise <h1>. Noté que d'utilisé un Element affectera tous vos balises du même nom tel que p { margin-left: 100px; } affectera une marge de 100px à tous les balises <p>.
- Class : Utilisé une Class est très simple. Lorsque vous écrivez .Votre_Class, vous appliquez le style sur toute les balises avec le nom "Votre_Class". Dans l'exemple, nous avons .Avertissement. Nous pouvons l'utilisé où bon nous semble : <div class="Avertissement"> et <em class="Avertissement">. C'est tout. Les Class sont utilisés lorsque vous voulez appliquer un style sur quelques balises seulement et non toutes les balises de même appélation.
- Id : L'Id fonctionne comme une Class, exeption faite, que vous ne
pouvez avoir plus d'un Id avec un même nom dans chaque document HTML.
Si vous regardez l'exemple, il peut y avoir plusieurs avertissement
dans une page HTML mais qu'un seul pied de page ; <div
id="pied">. L'Id est donc à utilisé lorsque vous voulez appliquez un
style à une seule balise.
Utilisé ces 3 blocs peut paraitre abstrait, mais plus vous avancerez dans la compréhension du CSS, plus il vous viendra facile pour vous de combiné ces blocs aisément.
Le Code :
À chaque sélecteur appartient une déclaration et à chaque déclaration appartient des propriétés décrivant ce que nous voulons modifier ainsi que leur valeur. Voyons un exemple: a { color: Blue; font-size: 3em; }. Le code est ici constitué du sélecteur a, ce qui veut dire que pour chaque balise <a> sera appliqué le style. Vous avez aussi 2 déclarations ; color: Blue; et font-size: 3em;. Chaque déclaration est constitué de 2 parties: la propriété et la valeur ; color: Blue;
Maintenant vous allez surment me demander que font les propriétés de l'exemple précédent et quelles sont les autres disponibles ? Ils y a une multitudes de propriété disponible pour chaque balise. Les énumérés ici serait long et fastidieux. Pour celà la meilleur chose à faire est de chercher sur Internet sur des sites plus spécialisé. Vous viendrez rapidement famillier avec la pluspart de ces propriétés. Pour ce qui est des balises vue : font-size et color elles permettent respectivement de modifier la taille de la police d'écriture ainsi que la coleur du texte.
CSS, une question de séparation
Le CSS est aussi une question de séparation. Je m'explique, l'idée principale est de séparé le contenu du contenant. Ceci facilie le design de vos page. En général, le design est défini au tout départ de la conception de votre site et par la suite, le contenu vient agrémenté votre design. Mais vous pouvez aussi faire l'inverse comme dans le cas ou vous redessinez le design de votre site web déjà établie. Dans votre page HTML, vous ne mettez que du contenu. Le lien effectué précédement vers votre feuille de style se chargera du reste.
Aujourd'hui, l'écriture d'une telle ligne de code : <font size="3">Bienvenu sur ma première page web standardisé CSS</font> à l'intérieur même de votre document HTML est obsolète et incorrecte à la vue des standards de programmation. Mais qu'est ce qui ne va pas aujourd'hui et qui allais il y à deçà quelques années ? La balise <font size> fait partie du design. Donc elle ne devrait pas se retrouver dans le document HTML mais bien dans la feuille de style. Oui, à votre écran, tout s'affichera normalement, mais si vous voulez apprendre comment bien programmer et rapidement, il est préférable d'apprendre les bonnes manières.
Vous devrez à l'avenir faire comme ci-dessous :
HTML¸:
<h1>Bienvenu sur ma première page web standardisé CSS</h1>
CSS :
h1 { font-size: 2em; }
Voici un autre exemple qui ne respecte pas les règles de programmation : <b>Une erreur est survenue!</b>. Qu'est-ce qui cloche ici ? la valise <b> et ici aussi une partie du design, on entend par design tout ce qui a attrait à l'apparence. Donc la balise <b> devra est inclus dans la feuille de style :
HTML :
<em>Une erreur est survenue!</em>
CSS :
em {
font-weight: bold;
color: Red;
}
Un dernier exemple ;
<table>
<tr><td><a xhref="">first link</a></td></tr>
<tr><td><a xhref="">second link</a></td></tr>
...
</table>
Plusieurs personnes consoivent par exemple leur manu de navigation comme suit. les balises <table> sont à évité lorsqu'on veut aligner le contenu tel un menu. La balise <table> sera utilisé afin d'afficher un tableau de donnée par exemple. Dans l'exemple précédent, on peut se poser la question : Est-ce qu'un menu est un tableau ? Je dirais que non! Plusieurs personnes vous dirons : Oui, mais j'utilise un tableau car il est facile d'y mettre une bordure une couleur de fond ... pour mon menu! Oui, mais votre CSS est exactement là pour celà. Alors que devez-vous faire ? Un menu n'est qu'une simple liste d'élément tel que <ul> :
HTML:
<ul>
<li><a xhref="">Lien #1</a></li>
<li><a xhref="">Lien #2</a></li>
...
</ul>
CSS:
li {
border: 1px solid;
}
Il peut être difficile au début de pensé d'une telle manière mais plus vous le pratiquerez, plus vous serez efficace croyez-moi. Vous verrez tout le pouvoir et la force du CSS à mesure que vous progresserez. Le CSS ne fera pas qu'améliorer vos connaissances, il permettera d'avoir une structure et aussi il améliorera votre rang dans les outils de recherche ainsi que l'accessibilité de votre site web.
Ajouter aux favoris
Bookmarker
Envoyer par mail
Vu: 1753
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
