COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire : 2011/2012 CSS CASCADING ASCADING STYLE SHEETS (1/2) Cela signifie : "Cascading Style Sheets", ce qui peut se traduire en français par «Feuilles de style en cascade». Objectif : Séparer le fond de la forme Le document HTML correspond au «fond» : c'est l'information que je souhaite transmettre. Le style CSS correspond à la «forme» : c est L'apparence que le site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc... 2 1
CSS CASCADING ASCADING STYLE SHEETS (2/2) Pourquoi en cascade? Les éléments du document héritent des règles de style de leurs parents. On utilise des opérateurs de sélection pour affiner le groupe de balise sur lequel les styles s'appliquent. 1 document, styles 3 CSS OÙ METTRE DU CSS On peut écrire du code CSS à 3 endroits différents : Méthode 1: style «en ligne/inline» : dans les balises HTML en utilisant l'attribut style : Méthode 2: style «interne» :dans l'en-tête du fichier HTML en utilisant la balise <style> : Méthode 3: style «externe» dans un fichier.css en utilisant la balise <link> : 4 2
STYLE EN LIGNE (INLINE STYLE SHEETS) ) (1/3) En utilisant l attribut style vous pouvez spécifier le style de présentation d un seul élément HTML. Syntaxe: A l intérieur de la balise ouvrante sont ajoutées les règles de styles : Exemple : 5 STYLE EN LIGNE (INLINE STYLE SHEETS) ) (2/3) 6 3
STYLE EN LIGNE (INLINE STYLE SHEETS) ) (3/3) Cette méthode a tous les défauts : Le CSS sera peu lisible à l'intérieur des balises, Ne permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un clic. Peut induire des incohérences, comme des éléments similaires se trouvent formater différemment, Viole le principe fondamental du HTML: séparer le contenu de la présentation. 7 ÉTHODE 2 : STYLE MÉTHODE TYLE INTERNE Le style CSS est à l'intérieur du même fichier HTML, entre les balises <head> et </head> Syntaxe: mettre une balise <style> </style> à l'intérieur de l'en-tête, comme ceci : 8 4
RÈGLES DE STYLE : PRINCIPE (1/2) Définition de règles de styles en utilisant des sélecteurs et des déclarations. Sélecteur sélectionne le/les éléments HTML sur lequel/lesquels la règle de style va/vont s'appliquer. Le sélecteur le plus basique est celui d'un seul élément HTML. Par exemple, un sélecteur choisi tous les éléments titre de niveau 1 d'une page HTML. Pour chaque sélecteur, on défini une ou +sieurs déclarations qui définie comment l'élément sélectionné va être stylé. 9 Par exemple : La couleur en bleu, la police de taille 12. RÈGLES DE STYLE : PRINCIPE (2/2) 10 5
STYLE INTERNE INTERNE : E : EXEMPLE 11 GROUPEMENT DE STYLES 12 6
IMBRICATION DE STYLES (mettre le texte des éléments p qui sont imbriqués dans les b en rouge) 13 IMBRICATION DE STYLES (EXEMPLE) EX: Définir un style uniquement pour les balises <em> qui se trouvent à l'intérieur d'un titre <h3> L ordre est très important 14 7
DÉFINIR DES SÉLECTEURS SPÉCIFIQUES Le sélecteur d'élément comme le sélecteur de p dans l'exemple précédent aura une incidence sur tous les éléments p. Comment définir un sélecteur qui permettra que seulement certain éléments p dans le document seront touché par la règle de style? Utiliser des attributs spéciaux qui fonctionnent sur toutes les balises : L'attribut class L'attribut ID 15 L ATTRIBUT CLASS Les «class» vous permettent de définir un style personnalisé C'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image etc. Que met-on comme valeur à l'attribut class? En fait, vous mettez un nom. Ce que vous voulez comme nom de variable. On crée la classe : un point (.) suivi du nom de la classe Syntaxe : 16 8
L ATTRIBUT ATTRIBUT CLASS : EXEMPLE XEMPLE (1/2) Définir un style appelé "important" qui écrit le texte en rouge / 18 pixels. On commence par préciser la règle de style qui dit : «Je veux que toutes mes balises qui ont la classe important soient écrits en rouge / 18 pixels»: 17 L ATTRIBUT ATTRIBUT CLASS : RESTREINT ESTREINT À UN SEUL TYPE DE BALISE 18 9
L ATTRIBUT ID L'attribut id fonctionne exactement de la même manière que class, à un détail prêt : il ne peut être utilisé qu'une fois dans la même page HTML : Quel intérêt? Cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises. Nous ne mettrons des id que sur des éléments qui sont uniques sur votre page, par exemple le logo. On crée l'id : un dièse(#) suivi du nom de l id Syntaxe : 19 L ATTRIBUT ID : EXEMPLE (1/2) ID : E 20 10
L ATTRIBUT ID : EXEMPLE (2/2) ID : E 21 ÉTHODE 3 : STYLE MÉTHODE TYLE EXTERNE 22 11
STYLE EXTERNE EXTERNE : E : EXEMPLE 23 ORDRE DE PRIORITÉ ENTRE STYLES Quel est le style qui sera utilisé quand il ya plus d'un style spécifié pour un élément HTML? 24 12
LES BALISES UNIVERSELLES : SPAN ET DIV 25 LES BALISES UNIVERSELLES 26 13
<DIV> ET <SPAN> 27 LA BALISE <DIV> 28 14
LA BALISE <SPAN> 29 EXEMPLE 30 15
EXEMPLE 31 EXEMPLE DE STYLE INTERNE POUR DIV ET SPAN 32 16
SÉLECTEURS CSS 33 PROPRIÉTÉS DE COULEUR Propriété color Exemple color: black; color: #000000; background-color background-color: white; background-color: #FFFFFF; background-image background-image: url("url"); background-repeat background-position background-repeat: no-repeat; background-repeat: repeat; background-repeat: repeat-x; (fond répété uniquement sur la première ligne horizontalement) background-repeat: repeat-y; (fond répété uniquement sur la première colonne verticalement) background-position: center; /*(top/right/bottom/left)*/ 17
PROPRIÉTÉS DE TYPOGRAPHIE Propriété font-family font-size Exemple font-family: times; font-family: arial, verdana; font-size: 1.5em; font-style font-style: italic; /* normal ou oblique */ font-weight font-weight: bold; font-weight: normal; font-variant font-variant: small-caps; (texte écrit en petites capitales) font-variant: normal; 35 Propriété text-align text-indent text-transformtransform text-decoration PROPRIÉTÉS DE TEXTE Exemple text-align: left; text-align: right; text-align: center; text-align: justify; text-indent: 10pt; text-indent: 15px; text-indent: 5%; text-transform: uppercase; / * tt le texte en maj*/ text-transform: lowercase; / * tt le texte en min*/ text-transform: capitalize; / * 1 ère lettre de chaque mot en maj*/ text-transform: none; text-decoration: underline; /* souligné*/ text-decoration: line-through; /*barré*/ text-decoration: overline; /*ligne au dessus*/ 36 text-decoration: blink; /*clignotant*/ text-decoration: none; /*normal*/ 18
PROPRIÉTÉS D HYPERLIEN Hyperliens a { color: blue; } Hyperliens visités a:visited { color: purple; } Hyperliens survolés (avec le pointeur de souris) a:hover { color: white; background-color: blue; } Hyperliens activés a:active { color: purple; } 37 PROPRIÉTÉS DE LIENS Listes non-ordonnéesordonnées list-style list-style: disc; list-style: circle; list-style: square; list-style-image list-style-image: url("url"); Listes ordonnées Listes ordonnées list-style list-style: decimal; list-style: upper-roman; list-style: lower-alpha; 38 19
PROPRIÉTÉS DU TABLEAU Balise table : border: 1px solid black; border-collapse: collapse Balise caption: caption-side: top; caption-side: bottom; Balises tr: height Balises td et th : border, width et vertical-align: top; vertical-align: middle; vertical-align: bottom; 39 EFFETS DE STYLE (EXEMPLE) 40 20
EFFETS DE STYLE (EXEMPLE) 41 EFFETS DE STYLE (EXEMPLE) 42 21
FORME ABRÉGÉE 43 Exercices 44 22