Documentation CSS Oxatis

NOTIONS DE BASE CSS

Il serait inconcevable de fournir ici une documentation exhaustive sur les CSS tant les possibilités offertes par cette technologie sont vastes. Néanmoins, ce chapitre permettra d’éclairer les néophytes sur le principe des feuilles de style.

Syntaxe

Les balises HTML permettent de structurer les pages web. Elles sont définies par les symboles < et >. Comme par exemple <p> qui permet de créer un paragraphe. La plupart des balises vont par paires (balise ouvrante / balise fermante). Pour créer un paragraphe, la syntaxe exacte est donc :
<p>votre paragraphe</p>
Une feuille de style est un fichier, distinct de la page HTML, qui permettra de définir l’ensemble des règles qui vont s’appliquer aux balises du code HTML. Chaque règle contient un ou plusieurs para-mètres (nommés aussi propriétés). La syntaxe est la suivante :
regle1 {
parametre1 : valeur ;
parametre2 : valeur ;
parametre3 : valeur ;
}
regle2 { parametre : valeur ; }
Il est possible de « commenter » le code en utilisant des balises /* et */ que l’on peut placer à l’inté-rieur ou à l’extérieur des accolades. Exemple :
/* la règle suivante sera commentée */
regle1 {
parametre1 : valeur ; /* voici un commentaire */ }
Plusieurs règles peuvent avoir des paramètres communs, il suffit pour cela de les séparer par des vir-gules.
regle1, regle2 {
parametre1 : valeur ;
parametre2 : valeur ;
}
La définition des règles peut être morcelée.
regle1 {
parametre1 : valeur ;
}
regle1 {
parametre2 : valeur ;
parametre3 : valeur ;
}
Cette notion de morcellement est cumulable avec celle des paramètres communs. Ainsi, il est possible de définir des paramètres communs à 2 règles, puis de compléter les règles.
regle1, regle2 {
parametre1 : valeur ;
}
regle1 {
parametre2 : valeur ;
parametre3 : valeur ;
}
regle2 {
parametre4 : valeur ;
parametre5 : valeur ;
}
Les règles peuvent être « surchargées » selon leur ordre d’apparition dans le code source. En clair, la valeur d’un paramètre d’une règle définie dans le CSS sera remplacée, si le même paramètre de la même règle est à nouveau défini, par la suite, dans la feuille de style.
(Ceci s’appliquerait aussi à une autre feuille de style qui serait appelée, après la première, dans le code HTML).
Dans les 2 exemples suivants, c’est la valeur2 du paramètre qui sera appliquée.
Exemple 1 :
regle1 {
parametre1 : valeur1 ;
parametre1 : valeur2 ;
}
Exemple 2 :
regle1 {
parametre1 : valeur1 ;
}
regle2 {
}
regle1 {
parametre1 : valeur2 ;
}

Les règles CSS

Les CSS permettent de définir le style de chaque balise HTML grâce à 3 types de règles :
• Soit définissant le style pour la balise elle-même. Toutes les balises du même nom dans le document afficheront alors le même style.
HTML CSS résultat
<p>Paragraphe 1</p> p { Paragraphe 1
<p>Paragraphe 2</p> color : Blue ; } Paragraphe 2
• Soit en créant une classe. Les propriétés définies pour cette classe s’appliqueront alors à toute ba-lise appelant ladite classe. Une classe est définie en CSS en précédant son nom par un « . »
• Soit en définissant un ID. Un ID est unique dans une page web, la mise en forme est donc spécifique à cet élément. En CSS un ID est défini par le caractère « # ».
Il est également possible d’indiquer un « chemin » pour cibler un élément précis dans une imbrication de balises. Dans l’exemple suivant, la règle #monId span.maClasse permet d’identifier les éléments contenus dans une balise <span> dont la classe est maClasse présents à l’intérieur du bloc ayant l’ID monId.
Les CSS sont basés sur une arborescence de classes et sous-classes dont certains paramètres se trans-mettent de manière héréditaire. Dans l’exemple suivant, les éléments contenus dans la balise <p> conservent les propriétés du conteneur. Il est bien sûr possible de les surcharger pour annuler l’effet d’hérédité par le biais d’une nouvelle règle.

Pseudo-éléments

Les pseudo-éléments sont des règles s’appliquant dans des conditions spécifiques.
Le pseudo-élément le plus utilisé est hover qui permet de spécifier les propriétés d’un élément survolé par le curseur de la souris. Le pseudo-élément hover est théoriquement compatible avec toutes les ba-lises, mais certains navigateurs un peu anciens ne seront pas capables de l’interpréter dans tous les cas. Pour cette raison, hover est principalement utilisé avec les balises de type « lien » (balise a).
Par exemple, la règle a.maClasse:hover permet de définir les paramètres des liens dont la classe est maClasse lorsqu’un utilisateur les survole avec la souris.

Types d’éléments

En CSS, il existe deux grandes familles d’éléments : les éléments de type block et les éléments de type inline.
• Les éléments de type block (DIV, UL, FORM, BLOCKQUOTE, PRE, …) servent, le plus souvent, à la mise en page générale de la page en créant de grands rectangles ou conteneurs.
Ils peuvent contenir soit d’autres éléments de type block, soit des éléments de type inline.
• Les éléments de type inline (A, B, FONT, IMG, INPUT, U, SPAN, …) sont juste des conteneurs plus petits que block, avec un comportement spécifique. La balise u, par exemple, impose que le texte contenu soit souligné, et ce comportement n’est pas modifiable.
Notez que :
• Les éléments de type inline ne peuvent contenir que d’autres éléments de type inline.
• Les éléments de type inline s’adaptent à la dimension des éléments contenus. Il n’est pas possible de leur imposer des dimensions à l’aide des paramètres height et width.
Par défaut, les éléments de type block vont s’afficher les uns en dessous des autres, alors que des élé-ments de type inline vont s’afficher les uns à la suite des autres.
La propriété CSS display permet de modifier le type des éléments.
Ainsi, un élément <div> défini, par défaut, comme un élément de type block peut changer de type grâce au paramètre display : inline ;
Le paramètre display : block ; permet de définir les éléments en type block

Notion de Flux

Le flux correspond à l’ordre d’affichage des éléments. Par défaut, le navigateur parcourt la page HTML, récupère les différents éléments et les affiche selon leur ordre d’apparition dans le code source.
Comme mentionné au chapitre précédent, les éléments de type block vont s’afficher les uns en des-sous des autres, alors que des éléments de type inline vont s’afficher les uns à la suite des autres.
Il est cependant possible de « sortir » les éléments du flux (voir chapitre « Position des éléments »).
Notez qu’un élément « inclus » dans le flux, peut contenir des éléments « sortis » du flux. Vous êtes alors libre de leur spécifier une position dans les limites définies par celles du conteneur.

Position des éléments

La propriété CSS position permet de modifier le comportement d’affichage des blocs.
• Position : relative ; place simplement le bloc concerné dans le flux. Cette position peut être déca-lée à l’aide des propriétés bottom, left, right ou top, mais en référence au bloc précédent.
• Position : absolute ; retire complètement l’élément concerné du flux et le place aux coordonnées définies par les propriétés bottom, left, right ou top. Le point 0 correspond au bloc supérieur gauche de son conteneur. Si aucun conteneur n’est présent, il s’agit du coin supérieur gauche du navigateur.
• Position : inherit ; déclare que l’élément en question hérite de la propriété position de son parent. Si la position du parent est de type absolute, l’élément concerné le sera aussi…
• Position : fixed ; permet de placer un élément sur la page fixe quel que soit le défilement. Toutefois, certains navigateurs non conformes aux standards CSS2 ne prennent pas en compte cette propriété.
Par défaut, un élément se comportera comme si sa position était définie comme relative. Toutefois, pour pouvoir utiliser les paramètres top, bottom, left ou right, le paramètre position doit obligatoi-rement être renseigné dans la règle.

Propriété z-index

Lorsque des éléments de la page sortent du flux avec l’utilisation du paramètre position : absolute ou : fixed, il peut arriver un effet de superposition. La propriété z-index permet alors de gérer «qui passe au dessus de l’autre» en attribuant à chaque élément un ‘niveau’, celui ayant le plus grand z-index se retrouvant au-dessus.

Propriétés Float et Clear

Cette propriété permet de sortir un élement du flux en le positionnant le plus à gauche (float:left;) ou le plus à droite (float:right;) de son conteneur. Le reste des éléments du conteneur s’affichera en suivant les contours des éléments flottants.

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia, elit sit amet mollis ornare, mi lectus placerat libero, sed dignissim felis ligula quis urna. Quisque nec massa nec mauris viverra malesuada. Mauris tellus vehicula pretium. Sed consectetur anter eros felis, tempus ut tristique vitae, fringilla in massa. In vel lectus mauris. Proin elementum, justo quis sodales ullamcorper, nisl lorem ullamcorper massa, facilisis facilisis eros elit vel magna. Nullam tincidunt, magna vel sodales sollicitudin, augue enim suscipit erat, et dignissim enim sapien vitae leo. Sed ac purus eu diam convallis sollicitudin. Nunc enim ipsum, scelerisque nec adipiscing non, malesuada a lacus.
Par défaut, l’élément standard suivant un élément flottant s’affichera donc dans l’espace laissé par la lar-geur du flottant. Ce comportement n’étant pas forcément voulu, la propriété clear permet préciser que cet élément ne sera pas influencé par le comportement d’un flottant.
Cette précision peut se faire sur chaque côté (clear:left; ou clear:right;) ou sur les deux à la fois (clear:both;). Tout le contenu situé entre le flottant et le libéré restera sous l’influence du flottant.

Liste des propriétés CSS

Cette liste, aussi bien au niveau des paramètres que de leurs valeurs, est loin d’être exhaustive et n’a pour but que d’éclairer les novices sur les principales propriétés utilisées dans les modèles de présen-tation CSS proposés sur les sites.
• POLICE DE CARACTÈRES
– font-family : Nom de la police. Il est possible de proposer plusieurs polices au cas où la première n’est pas disponible sur l’ordinateur de l’utilisateur.
– font-size : Taille du texte. Plusieurs unités sont disponibles : px (pixels), % (pourcentage), em (taille relative), etc.
– font-weight : Gras (bold : gras, bolder : plus gras, lighter : plus fin , normal : sans modification )
– font-style : (italic : italique, none : normal)
– text-decoration : Décoration (underline : souligné, overline : ligne au-dessus, line-through : barré, blink : clignotant, none : normal)
– text-transform : Majuscules/minuscules (uppercase : tout mettre en majuscules, lowercase : tout mettre en minuscules, capitalize : début des mots en majuscules, none : normal)
– color : Couleur du texte . Plusieurs méthodes sont disponibles : le nom de la couleur en anglais (black, blue, green, white, red…), le code couleur en hexadécimal (exemple #CC48A1), le code couleur en
RGB : ( rgb (128, 255, 0) )
• ALIGNEMENT
– text-align : Alignement horizontal des éléments (pas exclusivement les textes)
– vertical-align : Alignement vertical des éléments
– line-height : Hauteur de ligne
– text-indent : Alinéa des paragraphes
– white-space : Passage à la ligne (Césure)
• ARRIÈRE PLAN
– background-image : Permet de définir l’url de l’image d’arrière plan
– background-repeat : Répétition du fond ( repeat, repeat-x, repeat-y, no-repeat)
– background-position : Position du fond
– background-color : Couleur du fond
• DIMENSIONS, MARGES
– width : Largeur (s’applique uniquement aux éléments de type block)
– height : Hauteur (s’applique uniquement aux éléments de type block)
– min-width : Largeur minimale (Attention: ne s’applique pas dans Internet Explorer)
– max-width : Largeur maximale (Attention: ne s’applique pas dans Internet Explorer)
– min-height : Hauteur minimale (Attention: ne s’applique pas dans Internet Explorer)
– max-height : Hauteur maximale (Attention: ne s’applique pas dans Internet Explorer)
– margin : Marges extérieures ( max. 4 paramètres : « haut » – « droite » – « bas » – « gauche ».
Exemple : margin:10px 0 13px 6px; si le paramètre « bas » n’est pas renseigné, il prend la valeur du « haut ». Idem pour le « droite », qui prend la valeur du « gauche ».)
– margin-top : Marge supérieure extérieure
– margin-left : Marge gauche extérieure
– margin-right : Marge droite extérieure
– margin-bottom : Marge inférieure extérieure
– padding : Marges intérieures ( max. 4 paramètres : « haut » – « droite » – « bas » – « gauche ».
Exemple : padding:10px 0 13px 6px; si le paramètre « bas » n’est pas renseigné, il prend la valeur du « haut ». Idem pour le « droite », qui prend la valeur du « gauche ».)
– padding-top : Marge supérieure intérieure
– padding-left : Marge gauche intérieure
– padding-right : Marge droite intérieure
– padding-bottom : Marge inférieure intérieure
• BORDURES
– border-width : Epaisseur de la bordure (en px)
– border-color : Couleur de la bordure
– border-style : Type de bordure (none : pas de bordure , hidden : bordure cachée, solid : ligne pleine, double : ligne double , dashed : en tirets, dotted : en pointillés, inset : effet 3D «en-foncé», outset : effet 3D «surélevé», ridge : effet 3D)

1. Introduction
2. Notions de base CSS
3. La feuille de style Oxatis
4. Les éléments
4.1 Bloc principal
4.2 Bloc header
4.2.a Menu horizontal
4.2.b Sous-menu horizontal
4.3 Bloc Central
4.3.a Menu vertical
4.3.b Sous-menu vertical
4.3.c Langage
4.3.d Aire de données
4.3.e Boutique / Catalogue
4.3.f Fil d’Ariane
4.3.g Composant blog
4.3.h Tableau
4.3.i Panier d’achat
4.3.j Blocks de raccourcis et Edito
4.4 Pied de page
4.5 Divers
5. Annexes