CSS MEMENTO. Support de cours. rédigé par : Jonathan Fechner. Dernière mise à jour : 27 Aout 2012

Transcription

1 CSS MEMENTO Support de cours rédigé par : Jonathan Fechner Dernière mise à jour : 27 Aout 2012 Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 1 sur 22

2 Introduction : CSS c est quoi ce truc? «Les feuilles de style en cascade (ang: cascade style sheets) permettent de mettre en page votre document HTML. ce document est un support de cours qui reprends pas à pas les grandes règles des CSS. Bien que ce ne soit pas l objet de ce cours, rappelez vous que la tendance de l internet pousse les développeurs à une utilisation stricte du code HTML et une mise en forme exclusive via des CSS. l abandon du style transitional n est pas encore effectif, mais néanmoins, nous concentrerons ce cours vers une utilisation stricte du couple HTML / CSS tel que le recommande les standards du WEB avec le W3C.» Jonathan Fechner Généralités :! les balises! les sélecteurs Gérer son contenu HTML avec les CSS:! la Typographie! la mise en Page!! listes!! tableaux!! arrière-plans!! bordures Position du contenu avec les CSS :! Positionnement! Dimensionnement! Hiérarchie Transformer le site web en autre Médias :! les sorties médias Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 2 sur 22

3 Les Balises Balises en-ligne les balises en ligne servent à définir la mise en forme de groupes alphanumériques (mots, phrases, expressions, chiffres...) ou d'éléments (images, liens...) contenu dans des blocs. elles se placent naturellement les unes à coté des autres dans l'ordre naturel du document HTML. ils peuvent s'imbriquer entre eux mais ne peuvent contenir d'autres éléments blocs. <a> <cite> <kdb> <strong> <abbr> <code> <label> <sub> <acronym> <dfn> <q> <sup> <b> <em> <samp> <textarea> <bdo> <i> <select> <tt> <big> <img> <small> <var> <br /> <input> <span> les balises bloc et table les balises blocs définissent la mise en forme applicable à des titres, des paragraphes, des entêtes et tableaux. ils se placent les uns sous les autres dans l'ordre du document HTML. elles peuvent contenir des éléments de type en-ligne sauf exceptions, elles peuvent contenir d'autres balises de type bloc. <address> <form> <hr /> <tbody> <blockquote> <h1> <li> <td> <dd> <h2> <noscript> <tfoot> <div> <h3> <ol> <th> <dl> <h4> <p> <thead> <dt> <h5> <pre> <tr> <fieldset> <h6> <table> <ul> les balises mixtes les balises sont traités comme des blocs si ils contiennent un élément de type bloc <button> <del> <ins> <map> <object> <script> Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 3 sur 22

4 les Sélecteurs nota: pour cette liste «blabla» et «pomme» sont des exemples. /* ceci est un commentaire CSS */ body {margin:0;} /* ELEMENT - Le body n est précédé d aucun caractère, car il est la source du document. Ce peut être le cas de tous les éléments de type bloc */ * {color:#fff;} /* UNIVERSEL - l étoile en tant que sélécteur «*» signifie «tout» */ #blabla {margin: 0; padding 0; color:#999;} /* ID ELEMENT UNIQUE - quand le sélecteur est précédé d un dièse«#» il sera identifié dans le code HTML avec un «id». exemple :! <div id= blabla >!! <p>paragraphe géré par le css dont l id est blabla</p>! </div>! <!-- fin de l exemple #blabla --> NOTA : ne pas confondre le «#» pour les «id» et le «#» qui indique les couleurs, ils n ont rien à voir */ div#blabla {...} /* ID ELEMENT UNIQUE - désigne l éléments <div> ayant reçu le id= blabla */.pomme {font:verdana; color:#555;} /* CLASS - quand le sélecteur est précédé d un point «.» il sera identifié dans le code HTML avec une «class». exemple <div id= blabla >! <p class= pomme >paragraphe géré par le css dont l id est blabla< /br>! mais qui est sur-gérer par la class pomme</p> </div> <!-- fin de l exemple #blabla --> */ Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 4 sur 22

5 h1, h2, h3, h4, h5, h6, {! margin-top: 0;! padding-right: 15px;! padding-left: 15px; } /* COLLECTIF - indique que tous les titres de niveau h1à h6 auront une margin (marge extérieur) supérieure de 0 (inutile de préciser l unité pour la valeur zéro) et un padding (marge interieur) droit de 15 pixels d écran avec un padding gauche de 15 pixels d écran également. */ /* l écriture superposé comme le montre l exemple ci-dessus est recommandé bien que cela ne change rien à la compréhension des navigateur. c est simplement pour un meilleur confort des autres utilisateurs de votre document, une sorte de convention si vous préférez. */ div span {...} /* HIERARCHIE - désigne les éléments <span> contenus dans l élément <div> */ div + span {...} /* ADJACENT - désigne tout élément <span> immédiatement précédé par un élément <div> */ div > span {...} /* ENFANT - désigne tout élément <span> directement enfant d un élément <div> */ a:link visited {...} /* PSEUDO-CLASS LIENS - désigne le lien <a> non visité ( link ) ou déjà visité ( visited ) */ les pseudo-classes dynamiques a:active entre le moment ou l'utilisateur presse le bouton de la souris et le relâche. a:hover l'élément est survolé a:focus quand l'élément reçoit l'attention, que ce soit au clavier ordre des pseudo-classes de liens --> link --> visited --> hover --> focus --> active --> Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 5 sur 22

6 liste des pseudo-classes Sélecteur! Exemple! Description :link!! a:link!! sélectionne les liens non-visités :visited! a:visited! sélectionne les les liens visités :active! a:active! sélectionne les liens actifs :hover!! a:hover! sélectionne les liens en survol de souris :focus!! input:focus! sélectionne les éléments avec un focus clavier :first-letter! p:first-letter! sélectionne la première lettre de l éléments <p> :first-line! p:first-line! sélectionne la première ligne de l élément <p> :first-child! p:first-child! sélectionne les éléments <p> enfant direct :before! p:before! insert un contenu avant l élément <p> :after!! p:after!! insert un contenu après l élément <p> :lang(pays)! p:lang(it)! sélectionne les éléments <p> avec un attribut en Italien unités de valeurs 0 = inutile de préciser une unité pour la valeur zéro (0) cm = centimètres mm = millimètres em = cadratin. unité relative : 1em correspond à la taille de texte en hauteur de la majuscule de la lettre «M» de l élément parent. ex = unité relative : 1ex correspond à la taille de texte en largeur de la lettre «x» de l élément parent. in = inches pc = picas pt = points picas, conseillé pour le média imprimante px = pixel d écran % = pourcentage de l élément parent. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 6 sur 22

7 Typographie font-size letter-spacing word-spacing Et pourquoi PAS line-height font-weight color text-transform font : bold 12px/24px verdana; syntaxe raccourcie, permet d inclure à la suite 1- font-style 2- font-variant 3- font-weight 4- font-size / line-height 5- font-family NOTA : préférez toujours les écritures longues. font-family : "Times New Roman", Times, serif; Indique la police appliquée à l élément sélectionné. Possibilité d appliquer plusieurs valeurs par ordre des croissants de choix. Les noms de police contenant des espaces sont à placer «entre guillemets». font-size : 1.2em; Détermine la taille de police de l élément. Les unités recommandées sont «em», «ex» et «%» afin de préserver la fluidité des textes. font-style : italic; Détermine l orientation de police : normal, italic (penchée à droite) ou oblique (penché à gauche si la police est prévue pour admettre cette valeur). font-weight : bold; Choisis la graisse de la police dans l élément sélectionné. Les mots clés (thin, thick) et les valeurs numériques (100, 200, etc.) ne sont pas reconnus par l ensemble des navigateurs. il est préférable de se restreindre aux seuls mots clés «bold» «bolder» et «normal». font-variant : small-caps; Permet d afficher la police d un élément en «normal» ou «smal-caps» petites majuscules. color : #ff00ff; Applique une couleur de police au texte de l élément sélectionné. Une palette de 16 couleurs de base (Black, White, Yellow, fuchsia, Silver, etc.) est prise en charge par l ensemble des navigateurs graphiques et écrans. La palette élargie de 256 couleurs peut également être définie par des mots clés(chocolate, olive, salmon, etc.). Préférez tout de même les valeurs hexadécimales.vous pourrez aussi utiliser «transparent» accompagné d une valeur. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 7 sur 22

8 Mise en Page letter-spacing : 2ex; Augmente ou réduit l espace entre les caractères dans un texte line-height : 1,2em; Augmente ou réduit l espace entre les lignes dans un texte text-align : center; Spécifie l alignement horizontal dans un texte text-decoration : none; Spécifie la décoration ajoutée au texte «none» aucun, «underline» souligné, ligntrough» barré, et «overline» surligné. text-indent : 3em; Détermine la valeur de l alinéa (retrait de la première ligne du texte). text-shadow : 0.1em 0.1em 0.2em #333; Spécifie l ombre ajoutée au texte. text-transform : uppercase; Mise en majuscules ou en minuscule du texte. La valeur «capitalize» affiche les premières lettres en majuscule, «uppercase» affiche toutes les lettres en majuscule et «lowercase» affiche toutes les lettres en minuscules. vertical-align : middle; Détermine l alignement vertical du texte. word-spacing : 2em; Augmente ou réduit l espace entre les mots dans un texte. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 8 sur 22

9 Les Listes list-style : circle inside; cette propriété est la forme condensée des propriétés individuelles list-style-type, liststyle-image et list-style-position. list-style-type : square; Définit l aspect du marqueur (plus) d élément de liste. Lorsque la valeur es «none», aucune puce n apparaît. disc upper-roman hebrew hiragana-iroha circle lower-greek armenian katana-iroha square lower-alpha georgian none decimal lower-latin cik-ideographic inherit decimal-leading-zero upper-alpha hiragana lower-roman upper-latin katakana list-style-image : url(petitepuce.png); désigne l image qui sera affiché à la place de la puce. none url(image) list-style-position : inside; designe l emplacement de la puce par rapport à la liste. inside outside Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 9 sur 22

10 Tableaux caption-side : top; Cette propriété indique où va se placer la pointe de légende ( balise <caption> ) par rapport à la table. table-layout : auto; Cette propriété contrôle l algorithme employé pour la disposition des cellules, déranger et des colonnes de la table. border-collapse : separate; Détermine le choix du modèle de bordure pour un tableau : les bordures fusionnées (collapse) ou bordure séparée (separate). cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule cellule border-spacing : 0.5em; Détermine la distance qui sépare les bordures des cellules adjacentes. empty-cells : show; Indique si les bordures doivent être affichées ou non pour les cellules vides de contenu. vertical-align : middle; Appliqué à une cellule de «table <td>» ou à un élément de type «table-cell», cette propriété définie l alignement vertical du contenu dans son élément. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 10 sur 22

11 Arrière-plans background : white url(image.png) no-repeat scroll left top; L élément background et la forme condensée des propriétés expliquées ci-après. Préférez si possible les écritures longues. background-color : #333; Détermine la couleur de fond d un élément. Peut se cumuler avec une image d arrièreplan (par exemple une illustration en partie transparente). background-image : url(image.jpg); Spécifie une image d arrière plan qui vient se superposer à la couleur de fond de l élément. background-repeat : no-repeat; Spécifiez la répétition de l image d arrière-plan. La valeur «repeat-y» spécifie que l image doit se répéter dans le sens vertical, et «repeat-x» dans le sens horizontal. La valeur «no-repeat» empêche la répétition de l image. background-attachment : scroll; Indique si l image est fixée par rapport aux documents, c est-à-dire si elle défile ou non selon la zone de visualisation et l ascenseur. Un arrière plan dans la valeur est «fixed» ne se déplacera pas lorsque l ascenseur fait défiler l élément. background-position : 50% 20%; Indique la position initiale de l image d arrière-plan. Lorsqu une seule valeur est indiquée celle-ci correspond à la position horizontale, l image étend verticalement centrée. Lorsque de valeur sont indiquée la première correspond à la position horizontale et la seconde à la position verticale c est valeurs peuvent être exprimés par un nombre, par un pourcentage ou par des mots clés (top / left / bottom / center / right). Il est possible de combiner des valeurs en pourcentage est en longueur, mais pas de combiner des mots-clés avec d autres valeurs. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 11 sur 22

12 les Bordures border : solid 1px; Écriture courte. Peut contenir les différentes valeurs d épaisseur (width), de style (style) et de couleurs (color) et s applique aux quatre bordures. utilisez l écriture longue pour définir les bords un par un : border-top / border-right / border-bottom / border-left border-width : 1px; valeurs d épaisseur border-top-width / border-right-width / border-bottom-width / border-left-width border-style : solid; valeurs de style : «solid» plein, «dotted» pointillé, «dashed», «inset» «double» «groove» «ridge» et «outset». border-top-style / border-right-style / border-bottom-style / border-left-style border-color : #ff00ff; valeurs de couleur border-top-color / border-right-color / border-bottom-color / border-left-color Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 12 sur 22

13 Positionnement display : none; Jamais de modifier la structure d un élément ( bloc > inline ou inline > bloc ) reprenant ainsi les caractéristiques affichages de l autre structure. On pourra ainsi doter d un élément en ligne des caractéristiques de hauteur normalement dévolue à un élément de type bloc. inline block none list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-column-group table-column-cell table-captation table-row visibility : visible; affiche ou masque un élément. la valeur hidden, par exemple, réserve un espace vide de la taille qu aurait eu l élément si il était représenté. visible hidden collapse position : absolute; Détermine l emplacement de l élément, il lui affecte des caractéristiques de type bloc. La valeur par défaut «static» correspond au positionnement par défaut dans le flux. La valeur «relative» correspond à un décalage dans le flux. Les valeur «absolute» et «fixed» corresponde à un positionnement hors du flux. top / right / bottom / left Contrôle la distance entre l élément et son éventuel conteneur, à défaut la page. Ils ne s appliquent qu aux éléments ayant reçus une déclaration «position» différente de «static». z-index : 3; Détermine et modifie l ordre d empilement des éléments. Cette propriété ne s applique qu aux éléments ayant reçu une déclaration «position» différente de «static». Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 13 sur 22

14 float : left; Fait passer l élément en mode de positionnement flottant est déterminé de quel côté du parent celui-ci doit s afficher ( left / right / none ). Il est à noter qu un positionnement flottant ne permet pas de centrer un élément. clear : both; Déterminer si l élément peut se trouver sur la même bande horizontale qu un élément flottant. Ne s applique que si la page contient des éléments en mode de positionnement flottant. none left right both Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 14 sur 22

15 Dimensionnement margin border padding ici, le contenu du bloc le dimensionnement ne s applique qu au éléments de type bloc, sauf exception comme <img> par exemple. width Spécifie la largeur du contenu de l élément. Selon le modèle standard, la largeur de la boîte de l élément correspond à «width + border + padding». height Spécifie la hauteur du contenu de l élément voit les modèles sont identiques à ceux de la propriété «width». min-width / max-width Spécifie la largeur minimale ou maximale de l élément. Les valeurs doivent toujours être positives. min-height / max-height Spécifie la hauteur minimale ou maximale de l élément. Les valeurs doivent toujours être positives. margin : 0 1px 2px 3px; Spécifie les espacements externes à l élément (entre l élément et ses frères ou les bords du parent). L exemple correspond aux marge haute zéro, marge droite 1 pixel, marge basse 2 pixels, et marge gauche 3 pixels. ecriture longue : margin-top / margin-right / margin-bottom / margin-left padding : 0 1px 2px 3px; Spécifie les espacements internes à l élément (entre le contenu et la bordure). L exemple correspond aux marge haute zéro, marge droite 1 pixel, marge basse 2 pixels, et marge gauche 3 pixels. ecriture longue : padding-top / padding-right / padding-bottom / padding-left Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 15 sur 22

16 Hiérarchie des éléments Ancêtres parents et frères <body> ancêtre parent 1 bloc A bloc B parent 2 bloc C </body> 1)A et B son frère car ils ont un parent commun 2)A B et C ont le même ancêtre mais des parents différents 3)Tous les éléments sont contenus dans l élément «body» Flux : c est quoi un positionnement en flux? Lorsqu aucun positionnement de spécifier, les éléments se placent dans la page selon : 1) L ordre dans lequel ils apparaissent dans la partie HTML : la première balise du code HTML sera la première à se placer sur la page et ainsi de suite. D où une notion de flux. 2) Leur structure (blocs ou en ligne) : un élément de type bloc se place sous l élément précédent ; un élément de type en ligne se place à côté de l élément précédent. 3) Les marges internes et externes permettent d espacer et de positionner chaque élément par rapport aux autres tout en restant dans le flux. 4) Le positionnement relatif, associée aux propriétés «top / right / bottom / left» permet de décaler un élément tout en restant dans le flux. Les éléments frères suivants ceux auront pas influencé par ce décalage. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 16 sur 22

17 positionnement en flux bloc 1 position static parent bloc 2 position static positionnement avec marges margin-top parent margin-left bloc 1 position static bloc 2 position static positionnement relatif top parent left bloc 1 bloc 2 position static position static Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 17 sur 22

18 position : absolute; top : 3em; left : 4em; Positionnement Absolu. S opère lorsque l élément se voit appliquer la règle position : absolue. L élément est alors positionné. 1)L élément ce place par rapport aux derniers parents ou ancêtres positionnés, ou par défaut par rapport au bord du document. 2)L élément sort du flux (son positionnement sera le même quelque soit sa la place de la balise dans le code HTML). In affecte pas les autres éléments en flux. 3)L élément est en général placé par rapport aux valeurs données aux propriétés «top / right, / bottom / left» position : fixed; top : 10px; left : 20px; Positionnement Fixé. Son père lorsque l élément se voit appliquer la règle «position : fixed;». La seule différence avec le positionnement absolu tiens au fait que l élément fixe et reste en place même si la page défile avec l ascenseur. float : left; Positionnement Flottant Permet de positionner un élément à gauche ou à droite dans son élément parent. Le reste du contenu du parent occupera alors l espace laissé libre en commençant par s écouler autour du flottant. positionnement flottant bloc 1 pas de flottement bloc 2 pas de flottement bloc 3 pas de flottement parent Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 18 sur 22

19 positionnement flottant bloc 1 avec flottement à gauche bloc 2 pas de flottement bloc 3 pas de flottement parent positionnement flottant bloc 1 avec flottement à gauche bloc 2 pas de flottement bloc 3 avec flottement à droite parent clear : left; arreter les flottements avec clear. Empêche un élément de se trouver sur la même lignée qu un élément flottant. L élément se placera automatiquement et intégralement sous l élément flottant. positionnement en flux bloc 1 pas de flottement bloc 2 pas de flottement (flux normal) parent Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 19 sur 22

20 positionnement flottant avec clear bloc 1 avec flottement à gauche bloc 2 pas de flottement mais clear : left; parent positionnement flottant sans clear bloc 1 avec flottement à gauche bloc 2 pas de flottement (flux normal) parent Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 20 sur 22

21 Médias type de médias all print!! imprimante screen!! écran projection!! présentation projeté braille!! tablettes braille embossed! impression braille aural!! propriété auditive handhlet!! assistant numérique tv!!! web tv nota : Les propriétés CSS de ces divers médias sont très peu prises en compte par les navigateurs existants les seuls qui fonctionnent véritablement bien son screen et print. Déterminer le média <link href="style.css" rel="stylesheet" type="text/css" media= "screen "> <link href="impression.css" rel="stylesheet" type="text/css" media= "print "> Propriété de sortie imprimante : { size : landscape; } La propriété CSS de page permet d établir les règles de mises en page avec les propriétés décrites ci-dessous. size : 21.0cm 29.7cm; valeur / auto / portrait / landscape marks : cross; crop / cross / none Permet d insérer des hirondelles (repères imprimés sur la page pour en faciliter la coupe). page-break-after : auto; Impose un saut de page avant, après ou dans l élément désigné. fonctionnement identique avec «page-break-before» et «page-break-inside» orphans : 3; Évite les orphelines (ligne isolée sur leur page car ne tenant pas sur la page précédente) en définissant un nombre minimum de ligne par pages imprimées. windows : 3; Évite les lignes veuves en précisant un nombre de lignes avant le saut de page. Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 21 sur 22

22 CSS Jonathan Fechner - support de cours HTML / CSS tout droits réservés - page 22 sur 22