La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Feuilles de style CSS Un document Différentes présentations Contenu … Une présentation Différentes documents Feuille de style … … - XHTML est un langage.

Présentations similaires


Présentation au sujet: "Feuilles de style CSS Un document Différentes présentations Contenu … Une présentation Différentes documents Feuille de style … … - XHTML est un langage."— Transcription de la présentation:

1 Feuilles de style CSS Un document Différentes présentations Contenu … Une présentation Différentes documents Feuille de style … … - XHTML est un langage impur - CSS permet la séparation Forme et Fond

2 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 sadresse Aux utilisateurs Aux développeurs

3 Pélissier C. Définition et structure CSS (1/2) Syntaxe : Balise dapplication {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…) nont pas dimportance. 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 °/

4 Feuilles de style CSS interne : dans dans le CDthèque h4 {background-color:#FFCCCC;} h2 {font-family:Verdana, Arial, sans-serif;} body {font-family:sans-serif;font-size:10pt;}

5 Feuilles de style CSS interne : dans balise dans les différentes Bienvenue Faites comme moi, Pour faire de la musique. Ces liens vous permettrons de visiter nos produits : …..

6 Définition et structure CSS (2/2) Couleur bleu à la balise p et h1 : p, h1 {color:blue;} Espace avant ou après la, na pas dimportance 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 lutilise quune seule fois le ciel est bleu #introduction {color:blue;} class identifiant réutilisable le ciel est bleu Marcel.toto {text-align:center;}

7 XHTML et CSS interne CDthèque h4 {background-color:#FFCCCC;} h2 {font-family:verdana,arial,sans-serif;} body {font-family:sans-serif;font-size:10pt;} Inconvénient ? Obligé de copier les règles dun document à un autre => Feuille de style externe

8 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;

9 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 linfini) ) (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;

10 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 ; = lorsquon passe dessus a :visited {color :green; font-style:italic; a :active{background-color :red ; = lorsquon sapprê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)

11 XHTML et CSS externe CDthèque Fichier css : style1.css body {font-family:sans-serif;font-size:10pt;} TD 6

12 CSS et les blocs (prochain cours SRC2) et balises génériques de type bloc de type ligne XHTML : CSS :


Télécharger ppt "Feuilles de style CSS Un document Différentes présentations Contenu … Une présentation Différentes documents Feuille de style … … - XHTML est un langage."

Présentations similaires


Annonces Google