Remerciez-le!

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

Partie IV: les feuilles de styles CSS I.BOUZOUITA, ENIT, 2014-2015 Les CSS: pou

Partie IV: les feuilles de styles CSS I.BOUZOUITA, ENIT, 2014-2015 Les CSS: pourquoi • Objectif: fournir un mécanisme pour associer différents styles à un même document Article ... Présentations Contenu Exemple • il arrive fréquemment que l'on attribue à certains éléments des caractéristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et en couleur bleue. Appeler cette mise en forme "titre"  l’appliquer à chaque nouveau chapitre • Cette définition de mise en forme particulière, on va l'appeler feuille de style. • Idée reprise de MS-WORD <H1><B><FONT COLOR=blue>Titre1</FONT></B></H1> <H2><B><FONT COLOR="green">- A -</FONT></B></H2> <H3><B><FONT COLOR="red">...a....</FONT></B></H3> <H1><B><FONT COLOR=blue>Titre2</FONT></B></H1> <H2><B><FONT COLOR="green">- B-</FONT></B></H2> <H3><B><FONT COLOR="red">...b....</FONT></B></H3> STYLE des titres STYLE des sous-titres STYLE du texte STYLE des titres STYLE des sous titres Utilité et avantages • Séparation du contenu et de la mise en forme. • Cohésion de la présentation tout au long du site avec les feuilles de style externes. • Modifier l'aspect d'une page ou d'un site sans en modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises. • Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions. Utilité et avantages • Une façon d'écriture concise et nette par rapport au Html. • Réduire le temps de chargement des pages. • Pallier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux) et ainsi augmenter la créativité des écrivains du Web. Définition d'un style La définition de base d'un style est simple : balise { propriété de style: valeur; propriété de style: valeur } Exemple : H3 { font-family: Arial; font-style: italic } Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique. Exemple: Fizzics1.html (sans feuilles de style) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD> <BODY> <H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>. ... </BODY></HTML> Résultat <HEAD> <TITLE>Document Title</TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD> Exemple: Fizzics1.html (avec feuilles de style) Résultat Définition d'un style : Attention !!!! • Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses. • Le couple "propriété de style/valeur" est séparé par un double-point (:). • Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;). • Pas de limite pour le nombre de couples "propriétés de style/valeur". Définition d'un style : Attention !!!! • L'espace entre propriétés de style et valeur non obligatoire ( lisibilité du code source). • Ecrire vos styles sur plusieurs lignes : H3 {font-family: Arial; font-style: italic; font-color: green} • Attribuer plusieurs valeurs à une même propriété: H3 {font-family: Arial, Helvetica, sans-serif} • Attribuer un même style à plusieurs balises: H1, H2, H3 {font-family: Arial; font- style: italic} Définition du style : A l'intérieur des balises <HEAD></HEAD> <HTML><HEAD> <STYLE type= "text/css“ >  </STYLE> </HEAD> <BODY> on va utiliser des feuilles de style ce qui suit est du texte et qu'il s'agit de cascading style sheets (css) si le browser ne connaît pas les CSS il va les considérer comme des commentaires Définition du style : A l'intérieur des balises <Body></Body> <HTML> <BODY> <H1 style="font-family: Arial; font-style: italic"> Fac des Sciences </H1> </BODY> </HTML> Le style Arial, italique n'affectera que cette seule balise H1  la syntaxe est légèrement différente de la précédente  <STYLE type="text/css"> H1 { "font-family: Arial; font-style: italic" } </STYLE> fonctionne aussi.  peu conforme à l'esprit des feuilles de style (définir un style déterminé valable pour la globalité du document) Définition du style : Styles externes Définir une présentation de style valable pour plusieurs pages  créer une page externe qui regroupera toutes les feuilles de style, et faire le lien <HTML> <HEAD> --- Les différentes feuilles de style --- </HEAD> <BODY> </BODY> </HTML> Fichier .css (momstyle.css) <HTML> <HEAD> <LINK rel=stylesheet type="text/css" href=“monstyle.css"> </HEAD> avertit le browser qu'il faudra réaliser un lien l'information est du texte et du genre cascading style sheets (css). précise qu'il y trouvera une feuille de style externe. le chemin d'accès et le nom du fichier à lier Atelier : feuille de style externe • feuille de style : – une page à fond blanc, avec une police de caractère par défaut Verdana noire, – un titre de premier niveau bleu marine centré, – un titre de deuxième niveau bleu décalé de 15 pixels, – des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris html,body,p,ul,li,td { font-size : 10pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } h1 { font-size : 20pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : navy; text-align: center; } h2 { font-size : 14pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : blue; padding-left:15px; } a:link {color: green; text-decoration:underline;} a:visited {color: gray; text-decoration:underline;} a:hover {color:red; text-decoration:none;} Notion de Classe Affecter des styles différents à une même balise  les classes balise { propriété de style: valeur }  balise.nom_de_classe { propriété de style: valeur } .nom_de_classe { propriété de style: valeur } <balise class="nom_de-classe"> .... </balise> (.) devant le nom de classe est indispensable faire appel à une classe Je souhaite mettre ce qui est important dans le texte en gras et en bleu. : .essentiel { font-weight: bold; font-color: #000080 } dans le document Html, <P class=".essentiel"> ... blabla ... </P> <H1 class=".essentiel">Titre 1</H1> <TABLE><TR><TD class=".essentiel">cellule</TD></TD>... Notion de pseudo-classe Applicable concrètement à la balise A Celle ci peut connaître plusieurs contextes de formes selon que le lien est inactif, visité, ou en train d'être visité.  on peut définir alors pour chacun des états de la balise une mise en forme particulière. Exemple: A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;} A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;} A:active {color:red;} A:hover {color:red; text-decoration:none;} uploads/s3/ partie-css.pdf