Remerciez-le!

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

TECHNOLOGIES WEB CHAPITRE III : LE LANGAGE CSS 1 Bochra AYED KRICHEN PLAN Défi

TECHNOLOGIES WEB CHAPITRE III : LE LANGAGE CSS 1 Bochra AYED KRICHEN PLAN Définition Ecriture du CSS Sélecteur Notion de classe Notion d’un ID Mode page Convention Police de caractère Apparence des listes Arrière plan 2 DÉFINITION (1/2) 3 CSS est l'abréviation de « Cascading Style Sheets » • Les feuilles de style sont des ajouts de code au langage XHTML qui vont prendre en charge la présentation de la page Web Police, taille de caractères, interlignes, etc. • Le concept du CSS repose sur le principe de la séparation du contenu et de la présentation DÉFINITION (2/2) 4 Lacune XHTML Une taille de caractère limités à quelques valeurs (hx) Un seul modèle de bordure de tableaux Une image d’arrière obligatoirement répétée en mosaïque Utilité de CSS CSS apportent de nombreuses possibilités de présentation Taille de caractères illimitée, de nouvelles présentation de bordure, le contrôle d’interligne, le positionnement précis des images… Il simplifie le code Il facilite la maintenance du site ECRITURE DU CSS (1/2) 5 Deux possibilité : Interne : le code de la feuille de style sera placé dans l’entête du document XHTML ECRITURE DU CSS (2/2) 6 Deux possibilité : Externe: Regrouper les déclarations de style dans un fichier (.css) externe au fichier XHTML et mis dans le même répertoire que ce dernier. Ma_Presentation.css La balise <LINK> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML. L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe. L'attribut type="text/css" précise le type de feuille de style. L'attribut href=" URL " donne l’emplacement de la feuille de style. SÉLECTEUR 7 Sélecteur { Propriété 1: valeur; Propriété 2 : valeur; Propriété N : valeur; } Il existe deux type de sélecteur : classe et Id. NOTION DE CLASSE 8 Définition de la classe .nom_de_classe { Propriété 1: valeur; } EX: .eni { font-family: Verdana; } Appel de la classe <balise class=« nom_de_classe »> EX: <p class=« eni »> … </p> NOTION D’UN ID 9 Définition d’un id #nom_de_id { Propriété 1: valeur; } EX: #eni { font-family: Verdana; } Appel de la classe <balise id=« nom_de_id»> EX: <p id=« eni »> … </p> MODE PAGE 10 Définition table { Propriété 1: valeur; } Propriété1 s’exécutent pour tous les tableaux qui existent sur cette page Il est possible d’affecter le même effet à des différents sélecteurs. EX: div, table, spam, h1 { Propriété 1: valeur; } CONVENTION 11 Commentaires /* Ceci est un commentaire */ Le code CSS et XHTML doit être écrit en minuscule POLICE DE CARACTÈRE (1/5) 12 Nom de la police Font-family: nom de la police; Exemples: • Font-family: Arial; • Font-family: ‘courier New’; Italique Font-style: italic ou oblique; Petite majuscule Font-variant: small-caps; POLICE DE CARACTÈRE (2/5) 13 Gras Font-weight: bold; Taille: Font-size: valeur en pt ou px; Raccourci: P {font: italic bold small-caps 24 pt Arial, sans- serif;} POLICE DE CARACTÈRE (3/5) 14 Couleur du texte Color: red; Color: #ff0000; Décoration Text-decoration: underline; Transformation Text-transform: capitalize; Text-transform: uppercase; Text-transform: lowercase; Text-transform: none; POLICE DE CARACTÈRE (4/5) 15 Espace entre les lignes Line-height: 2; ou Line-height: 200%; (double interligne) Line-height: 18px; Alignement horizontal Text-align: left; Text-align: right; Text-align: center; Text-align: justify; POLICE DE CARACTÈRE (5/5) 16 Alignement vertical Vertical-align: sub; Vertical-align: sup; Vertical-align: top; Vertical-align: middle; Longueur et hauteur (en px ou en pourcentage) Width: 235px; Hight: 50%; APPARENCE DES LISTES 17 Apparence des puces et des numérotations List-style-type: disc; (cercle plein) List-style-type: circle; (cercle) List-style-type: square; (carré) List-style-type: decimal; (1, 2, 3, etc.) List-style-type: upper-roman; (I, II, III,…) List-style-type: lower-roman; (i, ii, iii, etc.) List-style-type: upper-alpha; (A, B, C,...) List-style-type: lower_alpha; (a, b, c, etc.) Puces graphiques List-style-image: url(votre_puce.gif); Les formats peuvent etre de type gif, jpeg, ou png EXERCICE 1 18 ARRIÈRE PLAN (1/2 ) 19 Couleur d’arrière-plan Body {background-color: #99ccff;} H2 {background-color: #99ccff;} Insertion et répétition d’une image Background-image: url(image.jpeg); Background-repeat: repeat; Background-repeat: repeat-x; Background-repeat: repeat-y; Background-repeat: no-repeat; Exemple: Body {background-image: url(img.png); background- repeat: repeat;} ARRIÈRE PLAN (2/2 ) 20 Positionnement de l’image Background-position: 50px 100px; (axe horizontal par rapport au bord gauche , axe vertical par rapport au bord supérieur) Background-position: 20% 50%; (axe horizontal par rapport au bord gauche , axe vertical par rapport au bord supérieur) Background-position: center left; (position horizontale, position verticale) Défilement de l’image Background-attachment: scroll; (défilement de l’image) Background-attachment: fixed; 21 Des questions ? uploads/s3/ b-technologies-web-chapitre-3-css.pdf