Feuilles de style CSS - XHTML est un langage impur - CSS permet la séparation Forme et Fond Différentes présentations Différentes documents Un document Une présentation Contenu Feuille de style … … …
Définition CSS Cascading Style Sheets : feuille de style en cascade = un ensemble de règles Initialement conçues pour les documents HTML Peuvent être utilisées avec des documents XML CSS 1 CSS 2 (media) CSS 3 La norme s’adresse Aux utilisateurs Aux développeurs
Définition et structure CSS (1/2) Syntaxe : Balise d’application {propriété : valeur; propriété : valeur; …} Sélecteur {ensemble de bloc de déclaration} Sélecteur { propriété : valeur; /* une déclaration */ propriété : valeur; /* une 2ième déclaration */ } Caractères blancs (espace, tabulation ou retour à la ligne…) n’ont pas d’importance. Exemple : h4 {background-color:#FFCCCC;} h2 {font-family:verdana, arial,sans-serif; color:red;} body {font-family:sans-serif; font-size:10pt;} Commentaires : /* Poser le commentaire °/ Pélissier C.
Feuilles de style CSS interne : dans <style> <style> dans le <head> <head> <title>CDthèque </title> <style type="text/css"> h4 {background-color:#FFCCCC;} h2 {font-family:Verdana, Arial, sans-serif;} body {font-family:sans-serif;font-size:10pt;} </style> </head>
Feuilles de style CSS interne : dans balise <style> dans les différentes <balises> <body> <h1>Bienvenue </h1> <h2> Faites comme moi, </h2> <center> <img src="guitariste.gif"/> </center> <p style="color:navy;font-size:18px;"> Pour faire de la musique. Ces liens vous permettrons de visiter nos produits : </p> …..
Définition et structure CSS (2/2) Couleur bleu à la balise p et h1 : p, h1 {color:blue;} Espace avant ou après la , n’a pas d’importance Couleur bleu aux p situées dans les h1 : h1 p {color:blue;} Espace entre h1 et p id identifiant unique, on donne un nom unique, on l’utilise qu’une seule fois <p id=« introduction »> le ciel est bleu </p> #introduction {color:blue;} class identifiant réutilisable <p class=« toto »> le ciel est bleu </p> <q class=« toto »> Marcel</q> .toto {text-align:center;}
XHTML et CSS interne Inconvénient ? <head> <title>CDthèque </title> <style type="text/css"> h4 {background-color:#FFCCCC;} h2 {font-family:verdana,arial,sans-serif;} body {font-family:sans-serif;font-size:10pt;} </style> </head> Inconvénient ? Obligé de copier les règles d’un document à un autre => Feuille de style externe
Propriétés et valeurs en CSS (1/3) font-family : times, sans-serif ; font-size : 14pt; (0,5em = la moitié de la taille normale, 1,5em= 1,5 fois plus grande) (0,5ex = la moitié de la hauteur de la lettre normale, 1,5em= 1,5 fois plus grande) (120% = 20 % de plus que la taille normale) font-style : italic ; (oblique) font-weight : bold; (bolder (plus gras), lighter (moins gras), normal) text-décoration :blink (texte clignotant) ; (overline=ligne au dessus, underligne=texte souligné) (line-through=barré) text-transform:uppercase (majuscule) ; (lowercase=minuscule, capitalize= première lettre en majuscule, none=texte non modifié) font-variant:small-caps (petites capitales); letter-spacing :-0.1em; (espace entre les lettres) word-spacing :+0.2em; (espace entre les mots) border-style:solid (pleine); (double, dashed (tirets), dotted (poitillés), inset (3D enfoncé), ouset (3D surélevé) border-width:1px border-color:blue border-left:solid; border-right:solid; border-top:solid; border-bottom:solid;
Propriétés et valeurs en CSS (2/3) text-align :center; (left, center, right, justify) text-indent :30 px; (alinéa de la première ligne constant) margin-left : 2%; (+ -, + - avec %) margin-right : 2%; (+ -,+ - avec %) margin-top : 2%; (+ -,+ - avec %) (marge du haut) margin-bottom : 2%; (+ -, + - avec %) (marge du bas) line-height (interligne) : 2.0 em; color :red; body {background-color :black; body {background-image : url(“brique.jpg”); background-attachment : fixed; (scroll = image défile avec le texte) background-repeat: repeat (se repete hori et verti a l’infini)) (no-repeat=ne se repete pas, repeat-x=se repete horizontalement) (repeat-y= se repete verticalement) background-position: 300px 100px; background-position: top right; (top middle bottom left center right) on peut aussi écrire : background: url(“brique.jpg”) no-reapeat top right fixed;
Propriétés et valeurs en CSS (3/3) body {color : black; a {color : blue; = apparence du lien par default a :link {color : blue; font-weight:bold; a :hover{color :red; = lorsqu’on passe dessus a :visited {color :green; font-style:italic; a :active{background-color :red; = lorsqu’on s’apprête à cliquer dessus, il y a surbrillance dt {color :green; font-style:italic; ul {list-style-position :inside; = pas mis en retrait (ousitde = met en retrait) ul {list-style-type :disc; (circle, square, none = pas de puce) ul {list-style-imge :url(« dossier.png »); ol {list-style-type :decimal (1,2,3…); (decimal-leading-zero=01,02,03) (upper-roman=I,II,III,IV – lower-roman=i,ii,iii,iv) (upper-alpha=A,B,C – lower-alpha=a,b,c)
XHTML et CSS externe <head> <title>CDthèque </title> <link rel=«stylesheet» href=«style1.css» type=«text/css»/> </head> Fichier css : style1.css body {font-family:sans-serif;font-size:10pt;} TD 6
CSS et les blocs (prochain cours SRC2) <div> et <span> balises génériques <div> de type bloc <span> de type ligne XHTML : http://validator.w3C.org CSS : http://jigsaw.w3.org/validator/