CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

Transcription

1 CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe Le code html sera alors : <p classe = «ma_classe»> Type id : On peut modifier une structure avec le type id (une seule fois dans la page ) : #theme_specifique Le code html sera alors : <p id = «theme_specifique»> Une balise multitâche : La balise <span> en html est une balise utile pour isoler une partie d un texte pour pouvoir introduire une classe du code css. ( balise inline) De même la balise <div> pour le même résultat sur un block. Sélection universelle : *

2 Formatage du texte : La taille relative des caractères : font-size : xx-small : minuscule x-small : très petit small : petit medium : moyen large :grand x-large :très grand xx-large : encore plus grand Une deuxième méthode consiste à déterminer une taille de référence, et de renvoyer les autres tailles de façon proportionnelle : font-size : 1em : taille de référence 3em : trois fois plus grande 1.5 : augmentation de 50% Les polices : Il est possible de proposer plusieurs polices ( si le navigateur n a pas celle désirée ) en les séparant d unes virgule. En dernier lieu, l attribut :sanserif, utilise une police par default. Les polices les plus courantes : font-family : Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet S ; Verdana ; Le style : font_style : italic : le texte sera en italique. oblique : légèrement penché. normal : texte par défaut font-weight : bold : texte en gras normal : texte par défaut text-decoration : underline : souligné line-through : barré

3 overline : ligne au dessus. blink : clignotant. none : normal Alignement : text-align : left : alignement sur la gauche. center : right justify : prend toute la largeur possible L attribut float pour faire «flotter une image autour du texte : float : left : l élément flotte à gauche rigth Pour arrêter le texte et son flottant : clear : left : le texte se poursuit en dessous après un float : left rigth : le texte se poursuit en dessous après un float : rigth both : le texte se poursuit en dessous après l un des deux précédents. Couleur du texte : color : white silver (argent) gray (gris) black red maroon lime ( citron vert ) green yellow olive blue navy ( bleu marine ) fuchsia purple ( pourpre) aqua ( cyan ) teal : sarcelle ( bleu-vert ) ou en hexadécimal : de # pour le noir à #FFFFFF pour le blanc ( les composants sont rouge, vert et bleu )

4 Couleur du fond : background-color : les couleurs précédentes background-image : url(«mon_image») background-attachement : fixed ( l image du fond reste fixé ) scroll ( par défaut elle défile ) Par défaut l image est répétée en mosaïque, pour éviter cela : background-repeat : no-repeat repeat-x : uniquement sur la première ligne. repeat-y : uniquement sur la première colonne. repeat : par défaut. On peut positionner l image de fond ( si elle n est pas répétée ) background-position : 30px 50px ( soit à 30 pixel de la gauche, et 50 du haut). top : en haut bottom : en bas left center right top rigth ( on peut combiner ) Il est possible en une instruction de cumuler toutes ces méthode : Exemple : body background : url(«mon_image») fixed no-repeat top rigth ; On peut placer plusieurs images, la première est placée en dessus, et ainsi de suite Il est possible de faire un fond sur les différents blocks, et de négocier la transparence du block ( pour laisser entrapercevoir le fond ) : opacity : 1 ( l élément est totalement opaque ) 0.5 ( à moitié ) 0 ( l élément est transparent ) Bordures et ombres border : none ( par defaut) solid (trait simple) dotted (pointillé ) dashed (tiret) double ( double)

5 groove ( en relief ) ridge ( crête ) inset ( effet 3d entrant ) outset ( effet 3d sortant ) Il faut associée à la bordure sa taille et sa couleur : border : 5px green dashed Il est possible de moduler les effets sur les différents cotés du cadre : border-top : border-bottom : border-left : border-right : On peut négocier les coins arrondis en rajoutant : border-radius : 5px ( pour le rayon ) Il est aussi possible d ajouter un ombrage sur les bordures : box-shadow : 6px 6px 0px black ( décalage horizontal + décalage vertical + dégradé + couleur ) Ou sur les textes : text-shadow : 6px 6px 0px black Page dynamique : ( speudo-format) Il est possible de changer la présentation d un bloc en cas de survole par la souris : p :hover Ou quand on clic dessus : p :active Ou pour sélectionner un élément p :focus Ou lorsque le lien à déjà été sélectionné : a :visited