Remerciez-le!

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

Feuilles de style (CSS) v1.0 Cours CSS – v1.0 Page 2/30 SOMMAIRE : QU'EST-CE QU

Feuilles de style (CSS) v1.0 Cours CSS – v1.0 Page 2/30 SOMMAIRE : QU'EST-CE QUE LES CSS ? .......................................................................................... 4 VERSIONS DE CSS..........................................................................................................4 QU'EST CE QU'UN STYLE ? .................................................................................................4 PROPRIETES DES CSS......................................................................................................4 DEFINITION DES REGLES CSS .................................................................................... 5 IL Y A 4 TYPES DE REGLES .................................................................................................5 OU PLACER LES REGLES CSS? ............................................................................................5 CREATION DE LA FEUILLE EXTERNE........................................................................................6 SYNTAXE DES REGLES CSS ......................................................................................... 6 CASSE ........................................................................................................................6 CREER UNE CLASSE PERSONNALISEE......................................................................................7 COMMENTAIRES .............................................................................................................7 CLASS ET ID ............................................................................................................... 8 DIFFERENCE ENTRE CLASS ET ID ..........................................................................................8 CASCADE, CONFLITS ET HERITAGES........................................................................... 9 CONFLITS.....................................................................................................................9 HERITAGE ....................................................................................................................9 UNITES DE LONGUEUR ............................................................................................. 10 UNITES DE LONGUEUR ABSOLUES - (A EVITER) .......................................................................10 UNITES DE LONGUEUR RELATIVES - (RECOMMANDEES) ..............................................................11 PROPRIETES............................................................................................................. 12 PROPRIETES DU TEXTE....................................................................................................12 PROPRIETES DES LISTES..................................................................................................13 LES RACCOURCIS ..................................................................................................... 14 POUR LE TEXTE ............................................................................................................14 POUR LES LARGEURS DE MARGES ET REMPLISSAGE ...................................................................14 LES BORDURES ............................................................................................................15 LES COULEURS .............................................................................................................15 LES BOITES : REMPLISSAGE ET MARGES .................................................................. 16 LES MARGES ...............................................................................................................16 LE REMPLISSAGE (PADDING).............................................................................................16 Cours CSS – v1.0 Page 3/30 LES BOITES .............................................................................................................. 17 DEFINITION ................................................................................................................17 LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU ..................................................18 Notion de flux .......................................................................................................18 Statique (par défaut) .............................................................................................18 Relatif (dans le flux) = position : relative..................................................................18 Absolu (hors du flux) = position : absolute ...............................................................18 LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT ..................................................................19 Comprendre le flottement.......................................................................................19 Faire des colonnes .................................................................................................20 Sortir du flottement = clear : left, right ou both ........................................................20 LA NOTION DE DEBORDEMENT : OVERFLOW ...........................................................................21 ARRIERE-PLAN : IMAGES ......................................................................................... 22 REPETITION ................................................................................................................22 REPETITION HORIZONTALE ...............................................................................................22 REPETITION VERTICALE...................................................................................................23 PAS DE REPETITION .......................................................................................................23 REMPLACEMENT DE LA PUCE DE LISTE ..................................................................................23 PSEUDO CLASSES DE LIENS ..................................................................................... 24 "DECORATION" DU TEXTE................................................................................................24 ELEMENTS DE TYPE : BLOCK ..................................................................................... 25 ELEMENTS DE TYPE : INLINE.................................................................................... 26 ELEMENTS NON AFFICHES........................................................................................ 26 AFFICHAGE DE TYPE TABLEAU ................................................................................. 27 AUTRES TYPES D'AFFICHAGE ................................................................................... 27 DISPLAY: INLINE-BLOCK..................................................................................................27 DISPLAY: LIST-ITEM ......................................................................................................27 STYLES DIVERS ........................................................................................................ 28 CURSEUR ...................................................................................................................28 UNE FEUILLE PAR MEDIA ......................................................................................... 29 LIENS : .....................................................................................................................30 LIVRES :....................................................................................................................30 Cours CSS – v1.0 Page 4/30 Qu'est-ce que les CSS ? Pourquoi utiliser des feuilles de style ? Cascading Style Sheet (CSS) Le principe de base est le suivant : il faut séparer le contenu de la page, de son apparence. La page html contient l'information, et non la façon dont l'information est affichée. Pour un unique contenu : plusieurs affichages sont possibles. On peut penser à des affichages monochrome, sur de petits écrans, oral (le contenu de la page web est lu), une impression papier, impression sur des transparents, impression en braille… VERSIONS DE CSS • CSS1 publié en 1996 . • CSS-P (CSS positioning) permet le positionnement d'éléments. • CSS2 est une recommandation de mai 1998 qui inclut les attributs des deux précédentes versions. L'accent a été mis sur l'accessibilité et la capacité à avoir un style différent selon les media. • CSS3 : encore en cours de construction. Nouveautés : multicolonnage, SVG, styles sur les polices (embossage...), arrondir les coins des boîtes, utiliser des images de fond dans les bordures, des ombres portées... QU'EST CE QU'UN STYLE ? Les styles regroupent différents attributs, tels que les choix de police, de taille, de couleur à appliquer à des titres, des sous-titres … C'est ce que va faire le CSS : permettre de définir ces attributs dans la page html à l'aide d'un code séparé. Par exemple, les balises html comme <h1>…</h1> qui par défaut possèdent une taille ou une graisse non modifiable en html, verront ces caractéristiques complètement redéfinissables en CSS. PROPRIETES DES CSS Police : taille, style, couleur. Texte : alignement, casse, interlignage, espace entre les mots et les lettres. Arrière-plans : couleur ou images. Bords et marges : marges, remplissages, largeur, hauteur. Bordures : style, épaisseurs, couleurs. Interface : puces, indentation, curseur. Positionnement : emplacement exact sur l'écran. Affichage et visibilité : si un élément apparaît et comment. Impression : comment définir l'aspect de la page à l'impression. Cours CSS – v1.0 Page 5/30 Définition des règles CSS IL Y A 4 TYPES DE REGLES • Les sélecteurs html. Il est possible de redéfinir les balises html en CSS. • Les classes. Il s'agit de règles librement choisies qu'on peut appliquer à n'importe quelle balise html. • les pseudo-classes de lien. • Les ID. À peu près le même principe que les classes, mais ne peuvent s'appliquer qu'une seule fois dans une page. Toutes les règles ont la même structure :  Sélecteur (balise html, classe, pseudo-classe ou ID)  Propriétés qui identifient ce qui est défini.  Valeurs données à la propriété. La paire propriété-valeur est appelée "définition" selecteur { propriété : valeur ;} h1 { font-size: 11px; } OU PLACER LES REGLES CSS? Il y a 3 façons d'insérer les CSS : - dans une balise html dans le corps du document. - dans l'en-tête du document (balise <head>). - relié au document html à l'aide d'une balise <link ..> également dans l'en-tête. Le navigateur lit la page, télécharge la feuille de style et l'utilise pour afficher le reste de la page. Dans la balise html <h1 style="font-size: 15px; color: #555;">Titre</h1> Dans l'en-tête <style type="text/css"> h1 { font-size: 20px; } </style> Cours CSS – v1.0 Page 6/30 Dans un fichier externe relié au document : <link rel="stylesheet" type="text/css" href="style/style.css" /> rel="stylesheet" dit que c'est un lien externe du type feuille de style type="text/css". Le " />" est utilisé si vous choisissez le XHTML 1.0. CREATION DE LA FEUILLE EXTERNE. À l'aide d'un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate, TextWrangler sur Mac), créer un fichier enregistré au format texte seul, portant l'extension .css. Aucune balise html avec les signes < > ne doit figurer dans ce fichier ! Syntaxe des règles CSS Contrairement au HTML qui n'était pas très standardisé, les CSS ne laissent pas de place aux erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html. Chaque règle doit contenir un sélecteur et une déclaration. Les propriétés de la déclaration doivent êtres séparées par des points-virgules. Lorsque la valeur d'une propriété est une unité de mesure et sa valeur, il ne doit pas y avoir d'espace entre les deux : ex: font-size: 12px ; font-family: Verdana, sans-serif; Redéfinir une balise html : body { background: #fff; font-family: Verdana, Times, sans-serif; } CASSE Les CSS ne sont pas sensibles à la casse mais par convention, on met tout en minuscules. Le W3C recommande en outre d'écrire les codes hexadécimaux en minuscules également. Cours CSS – v1.0 Page 7/30 CREER UNE CLASSE PERSONNALISEE Une classe personnalisée va être utilisée ponctuellement dans les pages du site. Le nom de la classe doit être précédé d'un point, ne doit pas commencer par un chiffre et ne doit contenir ni espaces, ni accent, ni caractère de ponctuation, ni tiret. Exemple pour une classe qui met du texte en rouge sur un paragraphe : CSS : .txtrouge { color: red; } HTML : <p class="txtrouge"> mon paragraphe en rouge</p> La valeur de la propriété de couleur peut être un mot-clef (red, green, transparent, …), un code Hexadécimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex: color: rgb(255,125,32); ). NOTE : L'indication hexadécimale d'une couleur peut parfois être raccourcie en regroupant par paire les lettres et chiffres. Ainsi, "#ff00ee" pourra s'écrire "#f0e". Mais "#ff00de" ne pourra pas être raccourcie. Les classes personnalisées peuvent s'appliquer à toutes les balises html. Pour appliquer plusieurs classes à une même balise : CSS : .txtrouge {color: red;} .italique {font-style:italic} HTML : <p class="txtrouge italique">mon paragraphe en rouge</p> Les deux classes sont séparées par un espace, l'attribut "class" n'est indiqué qu'une seule fois. COMMENTAIRES /* Ceci est un commentaire de feuille de style */ Ils peuvent être multi-lignes /* Ceci est un commentaire de feuille de style un commentaire sur plusieurs lignes */ Cours CSS – v1.0 Page 8/30 Class et id DIFFERENCE ENTRE CLASS ET ID Ce sont tous les deux des sélecteurs qui permettent d'appliquer des règles à un élément. "id" définit un élément de manière unique, alors que "class" peut être utilisé plusieurs fois dans la page. Nous allons donc privilégier "id" pour les boîtes à positionner, car deux éléments ne devraient logiquement pas avoir la même position dans l'interface. De plus on peut ainsi donner des paramètres propres à chaque élément (typo, taille, couleur, positionnement, arrière-plan, bordure ...) avec un seul id. Il est possible de cumuler id et class. Alors l'id est plus fort que la classe en cas de conflit. De plus JavaScript peut manipuler les balises avec un id. Rappelons pour terminer qu'au sein de la CSS, les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom). Exemple de CSS : /* Définition des balises HTML */ body { background-color: silver; } p { color: #000; font-family: Verdana, Arial, sans-serif; font-size: 12px; } /* Définition des ID */ #container { width: 950px; background-color: #fff; margin: 0 auto; } /* Définition des classes */ .txtImportant { color: red; font-style: italic; } Cours CSS – v1.0 Page 9/30 Cascade, conflits et héritages Les uploads/s3/ 0231-formation-feuilles-style-css.pdf