Remerciez-le!

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

Sadok Ben Yahia, PhD sadok.benyahia@fst.rnu.tn Département des Sciences de l’In

Sadok Ben Yahia, PhD sadok.benyahia@fst.rnu.tn Département des Sciences de l’Informatique FST 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 STYLE du texte 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'un 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 qui devient vite fouillis. Réduire le temps de chargement des pages. Palier 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;} Principe de l'héritage (ID)  Certains éléments de la page HTML héritent des propriétés des styles définis. style de H1 : couleur turquoise en arrière-plan est appliquée L’application de la balise H1 dans le corps de la page peut être combinée avec d`autres balises : <H1> Le principe de <I> l'héritage </I> </H1> la balise italique héritera des propriétés du style H1 (affiche également la couleur de fond turquoise). Exemple 1 Exemple 2 Style 1 : mon propre style Style 2 : mon propre style + style 1 Style 3 : mon propre style +style 1 + style 2 Les feuilles de style en cascade  En cas de concurrence entre plusieurs éléments de style notion de "cascade" ou d'ordre de priorité.  La concurrence provient des différentes possibilités de localisation de feuilles de style : CSS importée (dans un fichier externe avec l'extension .css) CSS Globale (dans la balise HEAD du document) CSS Intra-lignes (dans le BODY du document) appliquer pour la présentation du document la feuille de style la plus proche de l'élément. Règle de priorité un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe. contourner ces règles de priorité par la déclaration ! important cependant Règle de priorité : Quel fond d’écran <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY STYLE="background-color:#FF0000; "> Le fond d'écran sera… ???? <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY STYLE="background-color:#FF0000; "> Le fond d'écran sera… ???? Les balises structurales DIV et SPAN  balises Structurales qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique. DIV est une balise de division qui permet de définir un bloc de texte particulier ( permet de regrouper plusieurs paragraphes ou de délimiter une zone comportant plusieurs paragraphes). Procédures : 1. Intégrer chaque grande portion de document dans une balise DIV particulière. 2. Utiliser une feuille de style pour chaque DIV. DIV : exemples <html> <HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </DIV> </Body> </html> <HTML> <HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> <P>Commentaire :</P> <P>N'oubliez pas l'attribut class!</P> </DIV> </BODY> </HTML> SPAN <HTML> <HEAD> <STYLE type="text/css"> .element{font-size: x-large; color: navy} </STYLE> </HEAD> <BODY> <P> Un monde de <SPAN class=element> géants</SPAN> </P> </BODY> </HTML> • balise de marquage : considérer une petite portion particulière de texte. •Elle va servir à mettre en valeur des citations, des exemples, des extraits ... •Fréquemment utilisée avec des feuilles de style intra-lignes. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> uploads/s3/ cours-css 1 .pdf