Cascading Style sheets

Transcription

1 Cascading Style sheets

2 height CSS3 : Bordures, marges et espacements Que l'élément soit de type bloc (div, p ou form, ou de type inline comme span, img, a, il se voit attribué sa propre boite suivant le schéma suivant. Margin (marge extérieure ) Border (bordure du conteneur ) Padding (espacement interieur) Contenu de l'élément width

3 CSS3 : Les marges Margin : nb entier en px,em,pt,%,mm,cm,in <p style= ''margin:10px ; ''>L'exemple de boite</p> Exemple d'écriture d'une marge. La marge extérieure sera de 10 pixels. La valeur de la marge peut etre négative. Dans ce cas, la boite d'un élément sort de celle de son parent. Il est possible de définir une valeur différente pour chacune des quatre marges. Soit en les définissant indépendamment : Soit en les définissant dans la même ligne dans le sens des aiguilles d'une montre. margin-top:10px ; margin-bottom:20px ; margin : 10px 5px 20px 50px ; margin-right:5px ; margin-left:50px ;

4 CSS3 : Les bordures border : width(epaisseur) color(couleur) type(style) ; WIDTH Une bordure est définie par son épaisseur qui peut être un nombre entier exprimé en px,em,ex,cm,mm,in,pt. Mais également par un des mot-clés suivant : thin (mince), medium (valeur par défaut) ou thick (epaisse). Enfin il est possible d'utiliser le mot inherit qui donne à la bordure la même valeur que l'élément parent.!

5 CSS3 : Les bordures border : width(epaisseur) color(couleur) type(style) ; COLOR La couleur est définie par : Une valeur hexadécimale précédée par #. (par ex : #f52485 ) De # à #FFFFFF Cette valeur est l'expression de la somme de trois composantes Rouge, Verte et Bleue. 00 étant la valeur nulle pour chacune d'entre elles. FF la valeur maximum de lumière. Un mot clé déterminant les couleurs HTML (cf ) les composantes RGB données en paramètres des fonction : rbg(), rgba() ou hsla(). r,g et b sont exprimés par un entier de 0 à 255. a est la valeur alpha (opacité) de 0 à 1exprimée par un décimal. h (hue) est la teinte de 0 à 360 :entre 0 et 119 : nuance de rouge, entre 120 et 239 : nuance de vert, entre 240 et 359 : nuance de bleu s (saturation) La saturation est une valeur de pourcentage, 100% équivalent à la couleur l (luminosity) La luminosité est une valeur en pourcentage: 0% est le sombre (noir), 50% est la moyenne et 100% est la lumiere (blanc)

6 CSS3 : Les bordures border : width(epaisseur) color(couleur) type(style) ; TYPE est définie par : None : Pas de bordure. Hidden : idem sauf pour cellules de tableau, Dotted : Pointillés courts Dashed :Pointillés longs Solid : bordure pleine continue Double bordure constituée de deux traits paralleles continus Groove : bordure en creux (deux couleurs) Ridge : bordure en relief (deux couleurs) Inset : bordure en creux (une couleur) Outset :bordure en relief (une couleur)

7 CSS3 : Les bordures Border-radius / border-shadow Border-radius permet d'arrondir les angles des boites. Cette propriété n'est cependant pas encore reconnue par tous les navigateurs. Il faut donc ajouter les lignes propres aux navigateurs via par exemple : pour obtenir : -moz-border-radius:10px -webkit-border-radius:10px; border-radius:10px; Exemple de CSS.

8 CSS3 : Les bordures Border-radius / border-shadow Border-radius permet de créer un ombrage autour de l'élément. Cette propriété n'est cependant pas encore reconnue par tous les navigateurs. Il faut donc ajouter les lignes propres aux navigateurs via par exemple : pour obtenir : Exemple de CSS. -moz-box-shadow: 10px 10px 5px 0px #656565; -webkit-box-shadow: 10px 10px 5px 0px #656565; -o-box-shadow: 10px 10px 5px 0px #656565; box-shadow: 10px 10px 5px 0px #656565; filter:progid:dximagetransform.microsoft.shadow(color=#656565, Direction=134, Strength=5);

9 CSS3 : Les espacements padding : nb entier en px,em,pt,%,mm,cm,in <p style= ''padding:10px ; ''>L'exemple de boite</p> Exemple d'écriture d'une marge. La marge intérieure sera de 10 pixels. La valeur de la marge ne peut être négative. Il est possible de définir une valeur différente pour chacuns des quatre espacements. Soit en les définissant indépendamment : Soit en les définissant dans la même ligne dans le sens des aiguilles d'une montre. padding-top:10px ; padding-bottom:20px ; padding : 10px 5px 20px 50px ; padding-right:5px ; padding-left:50px ;

10