Introduction
Alors voila, la définition de la colonne de droite est forte intéressante mais elle ne vous explique pas comment marche une feuille de style.
Je ferai cela étapes par étapes sans entrer dans de longs et complexes détails.
Commencons donc par une vue d'ensemble.
CSS en francais signifie feuille de style en cascade, je vais donc utiliser le mode d'écriture de haut en bas et non par ligne ( les modes restent aux choix en fonction de la préférences du webmaster ).
Tout d'abord on doit indiquer au navigateur qu'il va etre en présence d'une feuille de style. Deux choix s'offrent à nous:
1) créer une feuille de style qui prendera donc l'extension de fichier ".css"
2) écrire la css dans la page HTML, sans oublié de préciser les balises : "style type="text/css"" et "/style"
Nous allons nous contenter de la deuxième solution.
Mais comment ca marche?
1) Relation css et div
Lorsque l'on rédige une css on doit comprendre que celle ci va nous permettre de definir des cadres qui auront en fonction des attributs, des comportements différents à l'affichage du navigateur.
Attention: la difficulté de rédaction d'un code réside dans le fait que les navigateurs ne comprennent pas toujours le code de la meme manière, votre site pourrat donc être différent sur Firefox et sur Internet explorer.
Nous verrons bien plus tard ce que l'on nomme les Hack Css et surtout, bien plus intéressant, les bugs de Internet Explorer ou vous comprendrez la nécessité de stopper la navigation avec celui ci et de passer à un navigateur comme Mozilla.
La CSS fonctionne de la même manière qu'un arbre généalogique avec des ancêtres, parents, et enfants.
Explication :
Comme nous l'avons vu précédemment la css permet de définir des cadres ( et pas seulement ) afin de structurer une page internet.
Chaque cadre se verra porter un identifiant qui permettera de faire la relation entre son orientation sur la page et ses attributs.
Cas pratique:
Nous créons dans notre feuille de style notre cadre appelé "cadre1", il suffit d'ajouter un dièze devant l'identifiant du cadre :
#cadre1{
}
Il nous reste plus qu'a placer notre "cadre1" dans le coeur de notre page HTML donc entre les balises "BODY".
Les cadres sont appellés "DIV" et son identifié par leurs noms dans la CSS (ici cadre1). On va donc écrire :
div id="cadre1"
/div
Entre les deux balises nous pouvons écrire le contenu du cadre "cadre1".
Nous n'avons donné aucun attributs au cadre "cadre1" dans la CSS.
Propriété CSS
Je ne vais pas vous exposer la liste des propriétés des feuilles de style mais pour une bonne comprehension du fonctionnement nous utiliserons les propriétés les plus courantes.
Pour information, voila une des meilleures liste du web par Jack Daniel.
Une css se presente donc en cascade (rédaction de haut en bas). Les propriétés d'un css sont en anglais, un tout petit niveau d'anglais est donc nécéssaire.
Nous allons maintenant voir l'écriture dans une css d'un cadre ayant les propriétés suivantes:
Le cadre est noir, de taille 400 pixels en largeur et 300 pixels en hauteur, décallé sur la gauche d'une marge de 20 px
( px = pixels ).
Ne vous affolez pas vous allez comprendre.
Comme nous l'avons vu au premier chapitre un cadre se definit dans la CSS comme suit:
#cadre1{
}Nous allons établir une liste des attributs :
Cadre noir -> le cadre "cadre1" doit donc avoir une couleur de fond noir :background-color: #000000; ou background-color: black; ou background-color: #000 background: #000000; ou background: black; ou background: #000
Nous préfererons la notation backgroud-color même si la seconde convient.
Personnellement je ne vois pas la nécéssité de connaitre les codes couleurs par coeur, retenez les principaux: noir (#000000), blanc (#FFFFFF) , gris (#CCCCCC) et en comprenant le fonctionnement d'un code hexadécimale vous pouvez vous même éclaircir ou foncer les couleurs. (pour plus d'information voir couleurs hexadécimale sur Google).
Le cadre doit avoir une largeur de 400px :
width: 400px; (width = largeur)
Le cadre doit avoir une hauteur de 300px :
height: 300px; (height = hauteur)
Le cadre doit être décallé de 30px sur la gauche (donc une marge de 30px a gauche de la page) :
margin-left: 30px; (margin = marge et left = gauche)
Récapitulatif : Pour un cadre noir, de taille 400 pixels en largeur et 300 pixels en hauteur, décallé sur la gauche d'une marge de 20 px
( px = pixels ).
La css s'écrira donc:
#cadre1{
width: 400px;
height: 300px;
margin-left: 30px;
background-color: #000;
}
Attention pour que le cadre1 apparaisse sur notre page, il ne faut pas avoir oublier d'écrire entre les deux balises "body",
div id="cadre1"
/divEt il vous suffit d'écrire entre les balises "div" le contenu de votre cadre1. ( petit piège, vous ne verrez rien dans le cadre 1 même si il existe du contenu au cadre, pourquoi?)
Et oui à ne pas oublier, la couleur par default du texte et la couleur noir. Il faut donc ajouter la propriété "color" et la couleur associé (#fff) pour obtenir un fond noir et un texte blanc.
#cadre1{width: 400px;height: 300px;margin-left: 30px;background-color: #000;color: #fff}Dans ce post je tenté de vous expliquer trés sommairement le fonctionnement d'une feuille de style, mais le plus compliqué reste à venir.Aprés une grande expérience de construction de feuille de style, le plus complexe est de créer des sites internet conforme aux standards W3C et aussi, des sites ayant le même rendu sur tous les navigateurs (souvent les deux sont liés, bien que certains navigateurs et en particulier celui de Microsoft ne respecte pas à la lettre les standards.C'est pourquoi je vous recommande vivement de vous familiariser avec les standards. Pour faire verifier votre feuille de style ainsi que votre page HTML : http://validator.w3.org/
Articles
0 comments