Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

http://www.yoyodesign.org/doc/w3c/css1/ * memo css * +l'inc

http://www.yoyodesign.org/doc/w3c/css1/ *********** memo css *********** +l'incorporation dans htm________________________________________________ les 4 m thode possibles: <html> <head> <title>titre</title> <link rel=stylesheet type="text/css" href="http://style.com/cool" title="cool"> <style type="text/css"> @import url(http://style.com/basic); h1 { color: blue } </style> </head> <body> <h1>ce titre est en bleu</h1> <p style="color: green">et le paragraphe est en vert. </body> </html> <style type="text/css"></style> +le regroupement__________________________________________________________ h1, h2, h3 { font-family: helvetica } // des s lecteur h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; } //eq : h1 { font: bold 12pt/14pt helvetica } +h ritage :________________________________________________________________ pour donner une propri t de style par "d faut" un document body { color: black; background: url(texture.gif) white; } l'exemple ci-dessus donne un rendu du texte en noir et une image de fond. le fond sera blanc si l'image n'est pas disponible souvent, la valeur d'une propri t est un pourcentage de celle d'une autre propri t : p { font-size: 10pt } p { line-height: 120% } /* relatif 'font-size', c- -d 12pt */ +une classe comme s lecteur__________________________________________________ pour accro tre la granularit de l'action sur les l ments .pastoral { color: green } /* tous les l ments de la classe pastoral */ <h1 class=pastoral>beaucoup trop vert</h1> +un id comme s lecteur________________________________________________________ garantit le caract re d'unicit d'un objet dans un document. #z98y { letter-spacing: 0.3em } h1#z98y { letter-spacing: 0.5em } <p id=z98y>texte espac </p> dans l'exemple ci-dessus, le premier s lecteur vise l' l ment 'p' en raison de la valeur de l'attribut 'id'. le second s lecteur sp cifie la fois un type d' l ment ('h1') et une valeur d'id, il ne concernera donc pas l' l ment 'p'. +les commentaires_______________________________________________________________ em { color: red } /* rouge, vraiment rouge ! */ les commentaires ne peuvent pas tre imbriqu s. un interpr teur css1 consid re un commentaire comme un blanc. +les s lecteurs contextuels______________________________________________________ seuls les l ments 'em' dans 'h1' soient rouge: h1 em { color: red } div p { font: small sans-serif } .reddish h1 { color: red } #x78y code { background: blue } div.sidenote h1 { font-size: large } on peut regrouper plusieurs s lecteurs contextuels : h1 b, h2 b, h1 em, h2 em { color: red } +les pseudo-classes d'ancre __________________________________________________________________________________ habituellement, les agents utilisateurs diff rencient l'affichage les liens visit s des liens non-visit s. en css1, cela est fait par des pseudo-classes sur l' l ment 'a' : a:link { color: red } /* lien non-visit */ a:visited { color: blue } /* lien visit */ a:active { color: lime } /* lien activ */ +les pseudo- l ments typographiques________________________________________________ 1)first-line <style type="text/css"> p:first-line { font-variant: small-caps } </style> <p>la premi re ligne d'un article dans un journal. un agent utilisateur en mode texte donnerait : la premi Re ligne d'un article dans un journal. 2)first-letter <html> <head> <title>titre</title> <style type="text/css"> p { font-size: 12pt; line-height: 12pt } p:first-letter { font-size: 200%; float: left } span { text-transform: uppercase } </style> </head> <body> <p><span>les premiers</span> mots d'un article de journal.</p> </body> </html> une repr sentation (improbable) par un agent utilisateur en mode texte g rant le pseudo- l ment 'first-letter' donnerait : | es premiers |_ mots d'un article de journal. dans un s lecteur contextuel, on ne peut mettre les pseudo- l ments qu' la fin du s lecteur : body p:first-letter { color: purple } +cascade_________________________________________________________ @import url(http://www.style.org/roux); @import url(http://www.style.org/marine); h1 { color: red } /* annule le style import */ important l'auteur peut accro tre le poids des r gles de sa feuille de style : h1 { color: black ! important; background: white ! important } +le mod le de mise en forme_______________________________________ les l ments ayant une valeur 'none' pour la propri t 'display' n'ont pas de format et ne sont donc pas inscrits dans une telle bo te. _______________________________________ | | | marge [margin] (transparent) | | _________________________________ | | | | | | | bordure [border] | | | | ___________________________ | | | | | | | | | | | espacement [padding] | | | | | | _____________________ | | | | | | | | | | | | | | | contenu | | | | | | | |_____________________| | | | | | |___________________________| | | | |_________________________________| | |_______________________________________| |largeur de l' l ment | | largeur de la bo te | uploads/s3/ css.pdf