CSS.

Présentation au sujet: "CSS."— Transcription de la présentation:

1 CSS

2 Règle Le "sélecteur" en place de tag (balise) du code pur HTML  h2 { font-size: 16pt ; } La "déclaration" s'applique à l'ensemble  font-size: 16pt Cette déclaration se compose de deux parties : La "propriété"   h2 { font-size: 16pt ; }   La "valeur"   h2 { font-size: 16pt ; }  Le mot "bloc" s'applique à un ensemble précis qui pourrait se limiter à  font-size: 16pt ; }

3 Définition d’une feuille de style
Il y a trois façons différentes de définir une feuille de style : Définition spécifique Ex. : <p style="font-size: 16pt ;"> Définition interne Ex. : <style type="text/css">...</style> Définition externe Ex. : <link rel="stylesheet"type="text/css"href="styles.css">

4 Mise en forme de la police
"font-family"   famille de polices "font-size"  taille de police "font-style"  style de police "font-variant"  variante de police "font-weight"  étirement de police "font-stretch"  chasse de police

5 Mise en forme du texte Color  couleur du texte
Letter-spacing  espacement entre les lettres Word-spacing  espacement entre les mots Text-transform None  aucun effet sur le texte Uppercase  change les lettres en majuscule Lowercase  change les lettres en minuscules Capitalize  premières lettres en majuscules Text-decoration None  par défaut Overline  souligné dessus Line-trough  barré Underline  souligné dessous Blink  clignote (Netscape et Firefox) Text-shadow  ajoute une ombre au texte

6 Mise en forme de l’arrière-plan
Background-color  couleur d’arrière-plan Background-image  image d’arrière-plan Background-repeat-x  répétition horizontale Background-repeat-y  répétition verticale Background-attachment  image fixe au défilement Background-attachement y  image fixe verticalement au défilement Background-position  position d’une image

7 Class Avec le sélecteur CLASS, vous pouvez définir plusieurs règles différentes à l'aide des tags HTML. Ainsi avec le même tag HTML "b" vous pouvez déclarer un style : b { color: black ; }, et vous pouvez ensuite créer une "class" : b.red { color: red ; } . Dans le même genre vous pouvez continuer à ouvrir d'autres "class" comme b.blue { color: blue ; } etc..

8 Mise en forme de zones SPAN  Lorsque dans votre page pour certains cas particuliers vous avez besoin d'utiliser rarement une déclaration, pour un caractère, un mot ou un groupe de mots, on utilise la balise SPAN. DIV  Pour appliquer cette présentation non plus seulement à un mot ou un groupe de mots, mais à un ou plusieurs paragraphes placés dans un texte, il suffira d'utiliser la balise DIV.

9 Liens hypertexte a:link  couleur des liens non visités
a:visited  couleur des liens visités a:hover  mouseUp a:active  mouseDown a:focus 

10 Mise en forme des paragraphes
Text-indent  retrait des paragraphes Text-align  alignement horizontal Vertical-align  alignement vertical Line-weight  espace entre les lignes White-space  gestions des blancs

11 Positionnement Relatif Top Bottom Right Left Absolu Width Height

12 Mise en forme des marges
"margin-top"  "margin-right" "margin-bottom" "margin-left"

13 Mise en forme des bordures
border width border-color border-style Dotted Dashed Solid Double Groove Inset Outset padding

14 Mise en forme des listes
list-style-type Disc Circle Square list-style-position Outside Inside Iist-style-image

15 Calques Position Z-index Visibility