h1 { text-align: center; } h1 { text-align: center; color: blue; } p > img { vertical-align: middle; } balise1 { background-color: white; color: blue; text-decoration: underline; } balise2 { background-color: white; color: blue; text-decoration: underline; } balise1, balise2 { background-color: white; color: blue; text-decoration: underline; } body > * .exemple { text-decoration: underline; } p.exemple { color: red; } p.exemple a { background-color: yellow; } p {} .important {} div > p {} ======================================================= body { background-color: #BADBFF; /* Fond de page bleu clair */ margin: 0; /* Supprimer toute marge à la page : le texte colle les bordures */ } body { background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */ font: 14px sans-serif; /* Style et taille de la police de la page */ margin: 1em; /* Marge du document HTML */ } body { background: white url('katie.jpg') no-repeat 50% 50%; /* Fond blanc *non répété* et centré */ background-attachment: fixed; /* Même si la page scroll, l'image reste au centre de l'écran. Vous pouvez tester sans : dans ce cas (et avec de grandes pages) l'image restera collée au bord/centre de la page et pas de l'écran */ } body { background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */ font: 14px serif; /* Style et taille de la police de la page */ margin: 1em; /* Marge du document HTML */ } p, li { text-align: justify; /* Justifier le texte des pararaphes et des lignes de listes */ } p:first-letter { /* Pour la première lettre de chaque paragraphes : */ font-size: x-large; /* Utiliser une police large */ font-weight: bold; /* Et grasse */ color: #0000AA; /* De couleur bleu foncée */ } h1 { /** gros titre */ font-family: serif; /* On se permet un changement de police : pas plus de deux par page, et à utiliser avec parcimonie (c'est le cas) */ background: #0066CC none; /* Fond du titre bleu (et sans image de fond) */ color: white; /* Donc on utilise une police blanche pour que le texte soit visible */ border: 3px dotted #9999FF; /* On encadre le titre d'un bleu clair de 3 pixels de largeur */ padding: 0.3em; /* Espacement intérieur non nul pour que le texte ne colle pas à la bordure du cadre */ text-align: center; /* Le titre doit être centré ! */ letter-spacing: 0.3em; /* On espace les caractères pour que ce soit joli :-) */ } h2 { /** Les titres de paragraphes */ text-decoration: underline; /* On souligne ces titres */ font-variant : small-caps /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */ color: #000077; /* Texte de couleur bleu très foncé, presque noir (donc lisible) */ } h2 { /** Les sous-titres (titres de niveau 3) */ color: #2222CC; /* Texte de couleur bleu, plus clair que le titre h2 */ font-style: italic; /* Texte en italique */ text-indent: 1em; /* Et indenté par rapport aux autres titres et paragraphes, pour montrer la hierarchie */ } h2 { margin-bottom: 0; /* Pas de marge en bas pour coller le titre au paragraphe */ padding: 0; /* Sinon le titre a aussi un léger espacement à gauche : on veut l'aligner */ /* avec le paragraphe, qui n'a pas d'espacement. */ color: blue; /* Classique : couleur... */ font: bold 14px sans-serif; /* ... et police */ } p { margin-top: 0; /* Là aussi, pas de marge au dessus du paragraphe */ font: 12px serif; /* Là aussi, classique */ } li { list-style-image: url("dossier.png"); } a { color: #0066CC; } /* Liens en bleu (entre clair et foncé) */ a:visited { color: black; } /* et en noir (comme le texte normal, mais souligné) si déjà visités */ a:hover, a:active { color: white; /* Lors du passage de la souris ou activation, */ background-color: #0066CC; } /* couleur blanc sur fond bleu */ img { border: none; /* Ne pas entourer les images, même s'ils contiennent des liens */ vertical-align: middle; /* Dans le cas d'une icône suivie d'un texte, par exemple */ } table { width: 50%; /* La largeur c'est pour le test, mais ça montre qu'il est aussi possible de la spécifier en CSS */ border: 1px dashed gray; /* Et on met une jolie bordure originale autour du tableau */ } caption { text-align: center; /* Classique : texte centré */ font-style: italic; /* en italique */ font-weight: bold; /* en gras */ color: #0066CC; /* et en bleu */ } th { /* Préférable à thead car offre plus de possibilités */ background-color: #D3E2ED; /* Chaque case d'en-tête aura un fond bleu */ color: gray40; /* Et un gris un peu plus foncé que la moyenne */ } td { /*border: 1px inset gray;*/ /* Vous pouvez essayer de décommenter : cela produit un affichage classique des cases */ } hr.f1 { /* Premier filet bleu clair */ border: none; /* On supprime la bordure (inset par défaut)... */ background-color: #66A8E7; /* ... que l'on remplace par un fond bleu uni */ height: 1px; /* On définit la hauteur de 1 pixel pour que le fond soit visible ! */ width: 70%; /* Et on précise que l'on désire un filet de longueur 70%... */ text-align: center; /* ... et centré, par exemple */ } hr.f2 { /* Second filet bleu foncé, en pointillés */ border: none; /* Idem : on ne veut pas des bordures... */ border-top: 6px dashed #000099; /* ... on en veut juste UNE en pointillés, de hauteur 6 pixels */ height: 0px; /* Le filet est rendu grace à la bordure haute : pas besoin du "contenu" (si on peut dire) */ width: 80%; text-align: center; } hr.f3 { /* Troisième type de filet, avec une image de fond, cette fois */ border: none; /* Encore une fois, pas de bordures */ background-image: url('travaux.png'); /* L'image à répéter... */ height: 4px; /* ... sur une hauteur de 4 pixels */ width: 90%; text-align: center; } hr.f4 { /* Dernier filet */ border: none; background: url('hr_gradiant.png') #89B5FF; /* Cette fois on veut une image (image dégradé blanc vers bleu), */ background-repeat: no-repeat; /* non répétée, et on poursuit avec la couleur bleu une fois l'image terminée */ height: 2px; } abbr, acronym, .aide { border-bottom: 1px dotted #333; cursor: help; } em{ /* Dans le cas des balises em : */ font-style: normal; /* Plus d'italique */ text-transform: uppercase; } strong { /* Et si vous souhaitez appliquer ce style aux balises strong : */ font-weight: normal; /* Plus de gras */ text-transform: uppercase; } /* Évitez les deux en même temps : il faut quand même reconnaitre le "degrès d'importance" de ces deux balises */ /* Par contre, vous pouvez laisser en majuscule, mais garder le gras et l'italique */ ins { color: green; } del { color: red; } pre { /* Des gros passages de code */ margin-left: 1em; /* Petite marge à gauche */ padding-left: 1em; /* Et un espacement à gauche pour... epacer le texte de la bordure... */ border-left: 1em solid green; /* ... que nous définissons justement là (un peu gros, d'ailleurs) */ background-color: black; /* On ne se gène pas : Matrix rullezzzzzzzz..... */ color: green; font-weight: bold; /* Faut que ce soit visible quand même ;-) */ } p code, li code { /* Et des petites balises, fonctions, etc... dans le texte de la page */ background-color: #FFE9BB; /* Rien de bien secret : fond saumon (pour illustrer la possibilité d'avoir des styles différents) */ font-weight: bold; /* et texte gras */ } kbd { border: 2px outset; padding: 2px; background-color: #E5E5E5; } /* Specify pairs of quotes for two levels in two languages */ Q:lang(en) { quotes: '"' '"' "'" "'" } Q:lang(no) { quotes: "«" "»" "<" ">" } /* Insert quotes before and after Q element content */ Q:before { content: open-quote } Q:after { content: close-quote } a { color: #458EFF; } a:hover { text-decoration: none; } .menu { background-color: #458EFF; } .menu a { text-decoration: none; color: white; } .menu a:hover { text-decoration: underline; } a.lien1 { color: #0066cc; text-decoration: none; /* Suppression du soulignement normal */ border-bottom: 1px solid #ff8000; /* Simulation d'un soulignement dans une couleur différente */ } a.lien2 { color: #8000ff; text-decoration: none; /* Suppression du soulignement normal */ border-bottom: 2px dotted #8000ff; /* Simulation d'un soulignement dans un style différent */ } a.lien3 { color: #0066cc; text-decoration: none; /* Suppression du soulignement normal */ border-bottom: 3px double #0066cc; /* Simulation d'un soulignement dans un style différent */ } a.lien1:hover, a.lien2:hover, a.lien3:hover, a.lien1:active, a.lien2:active, a.lien3:active { color: white; border-color: white; /* Seule la couleur change, la forme et la taille ne changent pas */ background-color: #0066cc; } #ex-liens-2 a.ex--lien4 { text-decoration: none; color: #34558A; border: 1px solid transparent; /* Les bordures droites et gauches qui apparaîtront au passage de la souris déplaceraient */ border-bottom: 1px dotted #458EFF; /* le texte de deux pixels vers la droite. C'est pourquoi on les définit tout le temps à */ } /* 1 pixel mais invisibles au repos. Note : "transparent" ne fonctionne pas sous IE < 7. */ #ex-liens-2 a.ex--lien4:hover { border: 1px solid #FFA713; } #ex-def_listes dt { font-weight: bold; display: compact; } #ex-def_listes dd { margin-left: 20%; text-align: left; } h2.titre1 span { padding: 2px 10px 2px 5px; /* Dans l'ordre: padding-top padding-right padding-bottom padding-left */ margin-left: 10px; /* Décaler le titre par rapport aux paragraphs normaux */ border-left: 5px solid #458EFF; border-bottom: 2px dotted #458EFF; color: #804000; } h2.titre2 { display: inline; /* Ne plus considérer le titre comme un bloc */ /* Après, c'est la même chose que pour titre1 : */ margin-left: 10px; padding: 2px 10px 2px 5px; border-left: 5px solid #458EFF; border-bottom: 2px dotted #458EFF; color: #804000; } ------------------------------------------------ /** Page : */ body { background: #eaeaea url('images/body.png'); /* (grille grise et blanche) */ margin: 20px 30px; /* Donner plus de marge à gauche et à droite, et moins en haut et en bas */ font-family: sans-serif; /* Police moderne, sans empattements, du type Times New Roman */ } /** En-tête : */ #entete { background: #9f9f9f url('images/entete.png'); /* (grosse barre grise) */ border: 1px solid black; /* Une bordure noire de 1 pixel sur tous les côtés, sauf... */ border-bottom: none; /* ... en bas, pour ne pas faire double-emploi avec la bordure du haut de #page */ } h1 { height: 58px; /* La hauteur de l'image de fond entete.png (grosse barre grise) */ line-height: 58px; /* Centrer le texte sur toute la hauteur de l'image de fond */ border-bottom: 1px solid black; /* L'entête est composé de deux parties : h1 et #menu, il faut donc les séparer */ margin: 0; /* Par défaut les navigateurs assignent une marge aux titres. Ici on gère notre propre mise en page */ text-align: center; /* Centrer le texte horizontalement sur toute la largeur de la page */ /* Technique de substitution du texte par une image : */ background: url('images/h1.png') 50% 50% no-repeat; /* Cette jolie image, unique et centrée, remplace le texte ennuyeux */ text-indent: -32000px; /* On décale le titre autant que possible sur la gauche de l'écran, pour ne plus le voir */ } /** Menu principal : */ #menu { background: black url('images/menu.png'); /* (barre noire, avec un bandeau à rayures noir et orange juste en dessous) */ list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */ margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */ padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */ height: 29px; /* Hauteur de l'image menu.png */ } #menu li { float: left; /* Afin que chaque élément de la liste se positionne juste à droite de l'élément précédent, et non en dessous */ margin: 0 2px; /* Espacer horizontalement chaque bouton à l'intérieur du menu */ } #menu a { display: block; /* Afin de pouvoir assigner une hauteur au lien (la hauteur étant définir dans la règle "#menu span") */ text-decoration: none; /* Pas de soulignement des liens dans le menu, ils sont déjà identifiables en tant que liens par le visiteur */ color: #ffb400; /* Le texte est orange */ background: url('images/menu-lien.png'); /* Bande noir, mais devenant orange lorsque décalée vers le haut */ cursor: pointer; /* Curseur en forme de main, pour résoudre un bug sous IE, causé lors du changement du lien en affichage bloc, quelques lignes plus haut */ } #menu span { /* Ce span permet au menu survolé d'avoir un reflet de lumière sur sa droite */ display: block; /* Afin de pouvoir assigner une hauteur à cet élément (voir ci-dessous) */ height: 21px; /* Hauteur de l'image menu-lien.png, divisé par 2 */ line-height: 21px; /* Centrer le texte verticalement sur la barre noire */ padding: 0 10px; /* Espacement intérieur du bouton à gauche et à droite, pour plus d'aération */ background: url('images/menu-lien-droite.png') 100% 0 no-repeat; /* Une seule occurrence de l'image de fond, et aligné tout à droite */ } #menu a:hover, /* Au survol de la souris */ #menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */ #menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */ { color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */ background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */ background-position: 0 -21px; /* =42 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */ } #menu a:hover span, /* Au survol de la souris */ #menu a:focus span, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */ #menu a:active span /* Lorsque le lien a le focus, sous Internet Explorer */ { background-position: 100% -21px; /* =42 (la hauteur de l'image) / 2 ; mais toujours aligné à droite */ } #menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */ font-weight: bold; /* Gras... */ text-decoration: underline; /* ... et souligné */ } /** Page : */ #page { background: white url('images/sous-menu.png') repeat-y; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */ border: 1px solid black; /* Encadrer toute la page par une bordure noire de 1 pixel */ } /** Sous-menu : */ #sous-menu { background: black url('images/sous-menu.png') repeat-y; /* Fond noir si images non chargées, mais il faut remettre l'image de fond de #page */ float: left; /* Colonne de gauche sur la page */ width: 198px; /* Largeur de l'image sous-menu-lien.png */ list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */ margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */ padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */ } #sous-menu a { display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */ height: 22px; /* Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */ line-height: 22px; /* Centrer le texte verticalement sur la ligne */ background: url('images/sous-menu-lien.png'); /* Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */ text-align: center; /* Centrer le texte sur la colonne du sous-menu */ text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */ color: #ffb400; /* Le texte est orange */ margin: 2px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */ } #sous-menu a:hover, /* Au survol de la souris */ #sous-menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */ #sous-menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */ { color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */ background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */ background-position: 0 -22px; /* =44 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */ } #sous-menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */ font-weight: bold; /* Gras... */ text-decoration: underline; /* ... et souligné */ } /** Contenu : */ #contenu { margin: 10px 10px 10px 209px; /* 209px = 198px (largeur du menu) + 1 (bordure droite du menu) + 10 (la marge que l'on veut donner au contenu) */ } p { text-align: justify; /* Un long texte justifié est plus agréable à l'œil */ } /** Pied : */ #pied { clear: both; /* Si le menu de gauche est plus haut que le contenu de la page, s'assurer de positionner le pied juste en dessous du menu */ border-top: 1px solid black; /* Séparer le pied du contenu de la page */ background: #9f9f9f url('images/pied.png'); /* (bandeau à rayures noir et orange, avec une barre grise juste en dessous) */ font-size: 12px; /* Un peut moins que les 19 pixels de line-height */ padding-top: 9px; /* = 8 (la hauteur de la partie hachurée noir / orange) + 1 (bordure noire) */ height: 38px; /* = 47 (hauteur de pied.png) - 9 (le padding-top que l'on vient de définir ci-dessus) */ line-height: 19px; /* = 38 (hauteur définie ci-dessus) / 2 (on veut deux lignes de texte dans le pied de page) */ text-align: center; /* Center le texte horizontalement sur tout le pied de page */ color: #444444; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */ } #pied a { color: black; /* Les liens du pied de page doivent ressortir du reste du pied de page. C'est chose faite avec des liens noirs */ } /** Impression : */ @media print { #menu, #sous-menu { /* Les menus et sous-menus ne servent à rien sur une feuille */ display: none; /* (en effet, on ne peut malheureusement pas les cliquer, c'est assez ballot !) */ } body { background: none; /* Enlever l'image de fond en forme de "grille" (au cas où le visiteur ai activé l'impression des images de fond) */ } h1 { background-image: none; /* On remet le texte à la place de l'image, car par défaut, les images de fond ne sont pas imprimées */ text-indent: 0; /* Annule la technique de remplacement de texte par une image, le texte redevient visible */ } #page { background: none; /* Enlever l'image de fond simulant le sous-menu de gauche, car on a caché ce sous-menu */ border: none; /* Ne plus entourer le contenu avec une bordure noire. Cela est moche sur une page imprimée, */ } /* et il n'y a plus besoin de séparation car on a enlevé l'image de fond en forme de grille */ #contenu { margin: 0; /* Ne plus faire de place pour le menu de gauche, qui est supprimé */ } /* De plus, les 10px de marge ne sont plus nécessaire car on a enlevé les bordures de la page, */ /* et les feuilles imprimées ont déjà une marge */ #pied { border: 1px solid black; /* Les bordures bas, droite et gauche étaient réalisées par la bordure de la page */ } /* Hors, on l'a enlevée la bordure de la page. Entourer tout le pied par une nouvelle bordure */ } /** Avec la bordure de 1px sur la page, IE démarre l'image de fond juste sous la bordure au lieu de commencer l'image juste après la bordure. On remédie à ça avec une règle spécialement conçue pour IE : */ #entete { background-position: 0 1px; } #page { background-position: 1px 0; }