Une propriété CSS ne peut s'appliquer si on ne lui attribue pas de valeur, on parle donc du couple indissociable Propriété : Valeur. Le couple Propriété : Valeur se compose de trois éléments :
Si plusieurs couples Propriété : Valeur se suivent, ils doivent être séparés par des points-virgules.
Si vous n'avez qu'un seul couple Propriété : Valeur ou si celui-ci est situé en fin de ligne, le point-virgule n'est pas obligatoire. Il est cependant fortement recommandé au cas où vous ajouteriez ultérieurement d'autres couples Propriété : Valeur. Voir l'exemple ci-dessous :
width:80%; margin:20px; text-align:justify; display:inline;
Les espaces entre les noms, les valeurs et les signes de ponctuations n'ont aucune importance. Par contre ATTENTION, l'absence de l'un ou l'autre des signes de ponctuation inhibe le fonctionnement des propriétés qui sont écrites à l'aval de cette erreur dans le code CSS.
Il existe quatre possibilités d'incorporer les propriété CSS au sein d'une page HTML :
Je décrit ces modes d'incorporation des propriété CSS dans l'ordre du plus loin au plus proche de l'élément html, car c'est l'ordre dans lequel ils apparaissent dans le code.
Je vous rappelle qu'en vertu du principe C'est le dernier qui a parlé qui a raison, priorité est donnée aux propriétés de la dernière feuille de style incorporée dans le code. Dans cette logique, le style En ligne a priorité sur tous les modes d'incorporation qui le précèdent.
La feuille de style peut être extérieure au site et jointe par un lien hypertexte. Ainsi, si vous ouvrez le code de la page d'accueil de Yahoo, vous trouverez dans head la ligne ci-dessous qui ouvre le lien vers la feuille de style de cet opérateur :
<link rel="stylesheet" type="text/css" href="http://l.yimg.com/d/lib/eu/nw/200810131314/story.css"/>
Notons entre parenthèses, que vous pouvez entièrement reconstituer une page Yahoo en recopiant son code dans un fichier html vierge, car même les images sont accessibles par des adresses url non verrouillées.
Les recommandations du W3C offrent également la possibilité d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @import url immédiatement après l'élément style. Le lien vers la feuille de style de Yahoo aurait ainsi pu s'écrire :
<style type="text/css">
@import url(http://l.yimg.com/d/lib/eu/nw/200810131314/story.css);
</style >
La feuille de style externe est idéale lorsque les styles que vous avez définis doivent s’appliquer à plusieurs pages de votre site, voire à son ensemble. Avec une feuille de style externe, vous pouvez changer le style de l'intégralité votre site uniquement en changeant le code d’un fichier (celui de la feuille de style).
Chaque page de votre site doit alors faire référence à la feuille de style. Cela se fait en utilisant la balise <link> à insérer dans l’entête de votre page, c'est à dire entre les balises <head> et </head>.
L'adresse de la feuille de style que l'on souhaite joindre, doit être placé comme valeur de l'attribut href de <link>
Ainsi pour cette page, les liens vers les feuilles de style externes du site sont les suivants :
<link rel="stylesheet" media="all" href="../../../TutosNP_Tous.css" type="text/css">
<link rel="stylesheet" media="all" href="../Initiation.css" type="text/css">
<link rel="stylesheet" media="screen" href="../../../TutosNP_Ecran.css" type="text/css">
<link rel="stylesheet" media="print" href="../../../TutosNP_Impr.css" type="text/css">
Dans cet exemple, vous pouvez remarquer deux choses :
<head>
<style type="text/css">
body {
background-image: url("images/back40.gif")
}
h1{
color:#9D8;
}
p {
font-family: helvetica;
}
</style>
</head>
Une feuille de style interne peut être utilisée quand un seul document doit adopter un style unique.
Dans le cas de la méthode imbriquée, les styles sont définis dans l’en-tête du document HTML : il suffit d’en faire la déclaration dans l'élément <head> de la page en utilisant la balise <style> et son attribut type="text/css", voir ci-contre.
Si deux propriétés de même identifiant figurent à la fois dans la feuille de style externe et dans la feuille de style interne ce sont les propriétés de cette dernière qui ont priorité sur la précédente, car bien sûr selon le principe ...., elle est placée en dernier dans le code.
Le style En ligne consiste à incorporer les couples propriété : valeur dans l'attribut style des éléments html du corps de la page (entre <body> et </body>) . Cette dernière option mélange style et contenu, et on perd de ce fait les avantages d’une feuille de style CSS, elle est donc déconseillée dans tous les bons manuels. Elle est pourtant bien pratique dans deux cas :
<p class="PseudoTADr" style="width:44%; margin-top:-25px">
Le style En ligne est le dernier qui s'applique dans un élément, donc il a toujours priorité sur toutes les feuilles de style qui peuvent être placées en amont dans le code.
Si dans le style en ligne les couples Propriété : Valeur sont attachés directement à l'élément HTML par l'attribut style, dans les feuilles de style internes ou externes, les propriétés sont regroupées par blocs de règles, délimités par les accolades { }.
Chaque bloc est identifié par un Sélecteur qui permet de le lier aux éléments structurels de la page HTML auxquels les propriétés concernées doivent être appliquées. La syntaxe d'écriture des blocs de règles peut donc se schématiser comme suit :
Sélecteur{ propriété : valeur ; propriété : valeur ; propriété : valeur ; }
p { width:300px; height:50px; padding:10px; color:#000; }
Comme dans la syntaxe du HTML, le respect des signes de ponctuation est impératif :
Ces possibilités sont adaptées aux propriétés padding, margin, border, background ou font .
Pour padding et margin, les valeurs des propriétés des différents côtés de l'élément, peuvent être regroupées en une seule ligne, dans l'ordre top, right, bottom, left.
En outre si les valeurs des margin verticales sont identiques ainsi que celles des margin horizontales, elles peuvent regroupées dans l'ordre margin : verticales horizontales. Ce mode de regroupement condensé peut s'appliquer également aux padding. Voyez les deux exemples ci-dessous :
#Cadre{
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
}
peut être abrégé en :
#Cadre{
padding:10px 20px;
}
.Bandeau{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:50px;
}
peut être abrégé en :
.Bandeau {
margin:10px 20px 30px 50px;
}
Les couples Propriété : Valeur, margin : 10px ou padding : 20px signifient que les valeurs attribuées ici à margin ou à padding s'appliquent aux quatre côtés de l'élément.
.Exemple{
border-width:3px;
border-style:solid;
border-color:#fCf8e9;
}
peut être abrégé en :
.Exemple{
border:3px solid #fCf8e9;
}
Pour border, on peut regrouper les propriétés épaisseur, style et couleur en une seule commande en respectant l'ordre dans lequel ces propriétés sont ici décrites.
Dans l'exemple ci-contre, les propriétés de border s'appliquent aux quatre côtés de l'élément. Cependant comme pour margin et padding ces propriétés peuvent être détaillés pour chaque côté, par exemple :
p{
font-family:"Comic Sans MS";
font-style:italic;
font-weight:bold;
font-size:14px;
line-height:16px
}
peut être abrégé en :
p{font: italic bold 14px/16px "Comic Sans MS"}
}
Pour font, les propriétés peuvent être regroupées en respectant l'ordre style de police, taille et éventuellement interligne enfin, famille de police.
Dans une feuille de style qui peut être longue, il est judicieux d'ajouter des éléments d'information, de division ou de repérage.
Comme dans le code HTML, ces éléments doivent insérés entre des balises de commentaires, celles-ci sont pour l'ouverture :
/* et pour la fermeture :
*/. Voici un exemple de division de la feuille de style de ce site:
/*-----Style14092011-----*/
Notons que comme dans le code html, les balises de commentaires peuvent également être utilisées pour désactiver momentanément des lignes du code CSS durant les essais de mise en page.
Un sélecteur est une sorte d'étiquette qui identifie un bloc de règle dans une feuille de style et permet de lier
ce bloc de règle à un élément de la page HTML. Un sélecteur peut consister en un sélecteur simple ou en une
succession d'un, ou plusieurs, sélecteurs simples, séparés par des combinateurs.
Ces combinateurs sont : les caractères blancs et les
caractères">" et "+". Des caractères blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.
Un sélecteur simple peut être :
Nous nous limiterons ici à la description des caractéristiques et du fonctionnement des sélecteurs simples. Pour des informations plus pointues sur les sélecteurs consultez le site très complet de YoyoDesign .
Le sélecteur universel, noté * , est vérifié pour n'importe quel type d'élément. Il agit sur chacun des éléments de l'arbre du document.
h1{
margin-top:140px;
margin-bottom:30px;
border-bottom-style:dotted;
text-align:left;
font-size:170%;
text-transform:uppercase;
}
Un sélecteur de type ou de balise est tout simplement un sélecteur désigné par la balise de la page HTML à laquelle sont attachés des éléments de style. Toute balise peut ainsi servir de sélecteur.
Voici ci-contre, le propriétés du sélecteur h1 (titre principal) de ce site.
Écriture du sélecteur de Class .texte dans le code CSS :
.texte {
color:#fff;
font-weight: bold;
}
Attribution du sélecteur de Class .texte à l'élément <p> :
<p class="texte">
Le sélecteur de classe ou (class) permet de définir un style qui pourra être appliqué à n'importe quel élément HTML du site.
Dans la feuille de style, le bloc de règles est identifié par un nom quelconque précédé d'un point.
Dans le code HTML le nom du sélecteur SANS LE POINT est placé comme valeur de l'attribut class de l'élément, voir ci-contre :
Un sélecteur de classe peut être appliqué à n'importe quel élément, tous les éléments ayant le même sélecteur de class auront donc le même style. Ainsi la classe .PseudoTADr de l'exemple précédent pourrait, outre à p,aussi bien être appliqué à div, à span ou à em.
Un même élément peut également se voir doter de propriétés différentes selon le sélecteur qu'on lui attrivbue. Un élément p peut par exemple avoir un texte de couleur blanche si on lui attribue le sélecteur class="texteBlanc" (color:#fff). Mais nous pourrions tout aussi bien lui attribuer un nouveau sélecteur class="texteJaune" qui lui confèrerait un texte de couleur jaune (color:#0f0).
Par contre, attention! On ne peut en principe utiliser qu'un seul attribut class dans un élément HTML.
Si par mégarde on place deux attributs class dans la balise ouvrante d'un élément, cela n'empêche pas l'affichage, mais ce sont les propriétés du premier sélecteur qui s'appliquent.
Écriture du sélecteur Identifiant #Conteneur dans le code CSS :
#Conteneur{
background-color:#fff;
margin-left:auto;
width:900px;
}
Attribution du sélecteur Identifiant #Conteneur à l'élément <div> :
<div id="conteneur">
Le sélecteur d'identifiant comme le sélecteur de classe permet de définir un style qui pourra
être appliqué à n'importe quel élément HTML du site.
Dans la feuille de style, le bloc de règles est identifié par un nom
quelconque précédé du symbole dièse #.
Dans le code HTML le nom du sélecteur sans le symbole dièse #
est placé comme valeur de l'attribut id de l'élément.
Voyez ci-contre l'exemple de l'identifiant #Conteneur :
Il y a néanmoins une différence fondamentale avec le sélecteur de classe : un attribut id sert à identifier un élément unique. L'attribut id ne peut donc être utilisé qu’une seule fois dans une page. On peut bien sûr définir autant d'id que l'on veut dans la feuille de style, mais il faut que ceux-ci soient uniques dans la page html.
L'id doit être utilisé systématiquement pour les éléments uniques et structurants de la page, pour faciliter la lecture du code. Par exemple, il faut attribuer un sélecteur d'id au Conteneur, au bloc d'EnTete, , au bloc Menu, ou aux blocs Gauche ou Droit s'il y en a, ainsi qu'au Pied de Page.
<div id="Pied">
<a href="#Haut" class="Bouton">Haut de Page</a>
</div>
L'id peut servir d'ancre nommée, car il remplace name.
Ainsi dans cette page, l'id #Haut permet le retour en haut de page :
Par contre pour le stylage des éléments répétitifs tels les paragraphes ou les listes de menu l'usage des sélecteurs de class est indispensable puisqu'il existe plusieurs objets identiques dans la même page.
Aveux d'un ancien néophyte : Lorsque je faisait mes premiers pas en CSS et que je n'avais pas encore très bien compris la distinction entre id et class, j'ai allègrement utilisé dans de nombreuses pages des sélecteurs id à de multiples reprises dans la même page comme des sélecteurs class.
Ces pages qui ont été publiées s'affichaient sans problème. Or tous les bons manuels et tutos martèlent qu'il ne faut utiliser les id qu'une seule fois dans la même page sans préciser vraiment pourquoi.
À la lumière de cette expérience j'ai compris que la principale distinction entre ces deux sélecteurs réside dans la possibilité d'établir des liens vers un sélecteur d'id.
Les pseudo-classes constituent des classes prédéfinies en CSS. Elles s’appliquent à certains éléments dont l’état peut changer. Les plus connues et plus populaires concernent les liens hypertextes qui possèdent plusieurs états : visité, actif et non visité. Pour leur capacités d'nimamtion d'une page, on les appelle également pseudo-classes dynamiques.
Aussi, chaque état possède-t-il une pseudo-classe correspondante, soit, :visited, :active et :link. Il existe également la pseudo-classe : hover qui indique que le lien est survolé.
a:link { color: #00f }
a:visited { color: #0f0 }
a:hover {color: #f00}
a:active { color: #ff0 }
À titre d’exemple, définissons ci-contre les couleurs des liens selon chaque état.
Ici, le lien normal sera bleu (:link), quand on le survolera (:hover) il deviendra rouge, quand on clique dessus(:active) et qu’on maintient le clic, il est orange et une fois le lien cliqué (:visited) il devient vert.
Il est important de respecter l’ordre d’écriture pour que le tout fonctionne.
la pseudo-classe :hover doit suivre :link et :visited pour fonctionner, de même :active doit suivre :hover.
Par rapport aux autres pseudo-classes dynamiques, l'intérêt de :hover qui réagit au survol d'un élément par le curseur, réside dans le potentiel
de mise en forme dynamique qu'elle offre.
La fonction initiale de :hover est de mettre en valeur des liens. Son utilisation pour animer des menus est donc tout à fait légitime.
Mais, au prix d'un petit détournement sémantique et fonctionnel, :hover peut aussi être utilisée pour animer des images survolées, sans aucun lien. Ce qui ouvre des perspectives intéressantes de réalisation, avec un minimum de code, de pages interactives simples.
Enfin, citons pour mémoire la pseudo-classe :lang et les pseudo-éléments :first lign et :first letter. Vous pouvez vous documenter sur ces sélecteurs dans le site de YoyoDesign cité plus haut.
h1, h2, h3, h4, h5, h6{
color:#C03;
text-align:left;
font-weight:bold;
}
Au lieu de répéter la même règle pour plusieurs sélecteurs, on peut regrouper ces sélecteurs en les séparant par des virgules.
Ainsi comme le montre l'exemple ci-dessus, dans la feuille de style attachée à cette page, les sélecteurs de type h1 à h6 ayant les même propriétés de couleur de texte, d'alignement et de graisse de police sont regroupés.
La hiérarchie des éléments de la page peut être utlisée pour créer des sélecteurs imbriqués ce qui évite de surcharger le code html de sélecteurs de class redondants.
Il existe une dizaine de propriétés dont la connaissance suffit pour réaliser 80% des feuilles de style. Il est donc indispensable que vous les mémorisiez.
Et bien sûr, le TP de la Semaine 40 portera sur les propriétés du premier groupe de ce tableau.
| Propriétés | En français | Valeurs Possibles | |
|---|---|---|---|
| width | Largeur de l'élément | px, %, em | |
| height | Hauteur de l'élément | px, %, em | |
| margin | -top |
Largeur de la marge extérieure (haute, droite, basse, gauche) |
En px, %, em |
| -right | |||
| -bottom | |||
| -left | |||
| padding | -top |
Largeur de la marge intérieure (haute, droite, basse, gauche) |
px, %, em |
| -right | |||
| -bottom | |||
| -left | |||
| font | -size | Taille de police | px, %, em |
| -style | Style de police | inherit, italic, normal | |
| -weight | Graisse | bold, bolder, inherit, lighter, normal | |
| -family | Famille de police | arial, verdana, helvetica, times new roman, etc... | |
| color | Couleur du texte | Code couleur | |
| text | -align | Alignement du texte | center, inherit, justify, left, right |
| text | -transform | Casse de police | capitalize, inherit, lowercase, none, uppercase |
| Propriétés qui seront vues lors d'un prochain atelier | |||
| border | -width | Épaisseur de bordure | thin, medium, thick ou épaisseur en px, %, em |
| -style | Style de bordure | none, solid, dotted, dashed, double, groove, ridge, inset, outset | |
| -color | Couleur de bordure | Code couleur | |
| Comme margin et padding, border peut se décliner en border-top, border-right, border-bottom, border-left | |||
| background | -image | Image d'arrière-plan | url de l'image |
| -repeat | Répétition de l'image | repeat, repeat-x, repeat-y, no-repeat | |
| -position | Position de l'image | top, right, bottom, left ou abcisse et ordonnée de l'image en px, %, em | |
| -color | Couleur d'arrière-plan | Code Couleur | |
Pour mettre en pratique ce tuto, consultez le TP Semaine 40.