Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
BDW1 - Programmation web - CSS
Fabien Duchateau
fabien.duchateau [at] univ-lyon1.fr
Université Claude Bernard Lyon 1
2018 - 2019
http://liris.cnrs.fr/fabien.duchateau/BDW1/
Positionnement dans BDW1
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 2 / 30
Une page web sans CSS, puis avec CSS
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 3 / 30
Propriétés en CSS
Rappel : insertion du CSS dans une feuille externe et définition desélecteurs pour choisir les éléments sur lesquels appliquer un style
Quelles propriétés, quelles valeurs pour une déclaration de style ?I Environ 250 propriétés en CSS3 ⇒ consulter la
documentation !I Une majorité de propriétés possède une liste restreinte de
valeursI Les styles personnalisent la mise en forme et la mise en page
http://www.w3.org/Style/CSS/learning.fr.htmlhttp://www.w3schools.com/cssref/default.asp
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 4 / 30
Propriétés en CSS - mise en forme
Concernant la mise en forme, des propriétés pour :I les couleurs (texte, arrière plan, …)I les polices (de caractères)I l’alignement de texteI la gestion des margesI …
Dans la suite, quelques propriétés de texte, marges, liens, …
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 5 / 30
Plan
Police
Texte
Marges
Pseudo-classes
Police Texte Marges Pseudo-classes
Famille de police
font-family : arial, times new roman, sans-serif ;
I La propriété font-family spécifie la famille de police du texteI Valeur = liste de polices ou famille de policeI La première police trouvée dans la liste est utiliséeI Déclaration @font-face pour faire télécharger une police à
l’utilisatriceI Recommandation ergonomique : privilégier les polices sans
serif (lisibilité)
http://www.w3schools.com/css/css_font.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 7 / 30
Police Texte Marges Pseudo-classes
Taille de police
font-size: 100% ;font-size: 1em ;
I La propriété font-size spécifie la taille de la policeI Taille exprimée en pourcentage (%), par rapport à la taille
courante (em), par rapport à la taille courante de l’élémentracine (rem)
I Éviter les mesures en px, cm, pt qui utilisent des valeursabsolues (inadaptées pour certains dispositifs)
I Recommandation : utiliser l’unité rem
http://www.w3schools.com/css/css_font.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 8 / 30
Police Texte Marges Pseudo-classes
Style de police
font-style: normal | italic | oblique ;
I La propriété font-style spécifie un style de police inclinéI Valeurs = normal (défaut), italique, ou oblique
http://www.w3schools.com/css/css_font.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 9 / 30
Police Texte Marges Pseudo-classes
Variante de police
font-variant: normal | small-caps ;
I La propriété font-variant spécifie un style en petitesmajuscules
I Valeurs = normal (défaut) ou petites majuscules
http://www.w3schools.com/css/css_font.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 10 / 30
Police Texte Marges Pseudo-classes
Épaisseur de police
font-weight: normal | bold | bolder | lighter ;
I La propriété font-weight spécifie l’épaisseur de la policeI Valeurs = normal (défaut), gras, très gras ou peu gras
http://www.w3schools.com/css/css_font.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 11 / 30
Police Texte Marges Pseudo-classes
En résumé
I Cinq propriétés pour personnaliser la police
I Possibilité d’utiliser la propriété font pour spécifier une valeurpour chacune des cinq propriétés de police (ordre ”font-stylefont-variant font-weight font-size/line-height font-family”)
33 .fontAllProps {34 font: italic bold 12px/30px Georgia , serif;35 }
Extrait de demo2-style.css
http://www.w3schools.com/cssref/pr_font_font.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 12 / 30
Plan
Police
Texte
Marges
Pseudo-classes
Police Texte Marges Pseudo-classes
Couleur de texte
color : #0A1C8F ;
I La propriété color spécifie la couleur de texteI Valeurs : code hexadécimal (#RRGGBB), code RGB
(rgb(rouge, vert, bleu)), ou nom de couleur (e.g., red, blue)I Des outils facilitent la génération d’un code couleur (”color
picker”)
http://www.w3schools.com/css/css_text.asphttp://www.w3schools.com/html/html_colors.asphttp://www.w3schools.com/colors/colors_picker.asphttp://html-color-codes.info/
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 14 / 30
Police Texte Marges Pseudo-classes
Alignement horizontal
text-align: left | right | center | justify ;
I La propriété text-align spécifie l’alignement du contenu(dont le texte)
I Valeurs = alignement à gauche, droite, centré ou justifié
http://www.w3schools.com/css/css_text.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 15 / 30
Police Texte Marges Pseudo-classes
Décoration de texte
text-decoration: none | underline | overline | line-through | blink ;
I La propriété text-decoration spécifie une décoration dutexte
I Valeurs = rien, souligné, surligné, barré, clignotantI Recommandation ergonomique : ne pas souligner du texte qui
n’est pas un lien (confusion)
http://www.w3schools.com/css/css_text.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 16 / 30
Police Texte Marges Pseudo-classes
Transformations de texte
text-transform: none | capitalize | uppercase | lowercase ;
I La propriété text-transform spécifie une variante de lacasse du texte
I Valeurs = rien, en capitales (première lettre de chaque mot),en majuscules, en minuscules
http://www.w3schools.com/css/css_text.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 17 / 30
Police Texte Marges Pseudo-classes
Hauteur de ligne
line-height: normal | nombre | pourcentage ;
I La propriété line-height spécifie la hauteur de ligne d’unetexte
I Valeurs = normal, une valeur numérique ou un pourcentage
http://www.w3schools.com/css/css_text.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 18 / 30
Police Texte Marges Pseudo-classes
En résumé
I Propriétés les plus courantes pour personnaliser le texteI D’autres propriétés de texte (espacement des mots,
indentation, etc.)
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 19 / 30
Plan
Police
Texte
Marges
Pseudo-classes
Police Texte Marges Pseudo-classes
Tout est boîteToutes les balises HTML sont contenues dans des ”boîtes” :
I Ces boîtes sont invisibles la plupart du tempsI Marge externe (margin) et marge interne (padding)I Personnalisation de quelques propriétés (bordure,
espacements, etc.)
http://www.w3schools.com/css/css_boxmodel.asphttp://fr.html.net/tutorials/css/
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 21 / 30
Police Texte Marges Pseudo-classes
Marge externe (margin)
margin: auto | nombre | pourcentage | inherits ;
I La propriété margin spécifie la taille des quatre margesexternes (haut, droite, bas, gauche)
I Comportement variable selon le nombre de valeurs données(entre 1 et 4)
I Valeurs = automatique (centrage horizontal), une valeurnumérique (e.g., em, px, cm), un pourcentage ou la valeur esthéritée du composant parent
I Propriétés pour une marge spécifique (margin-top,margin-right, margin-bottom, margin-left)
http://www.w3schools.com/css/css_margin.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 22 / 30
Police Texte Marges Pseudo-classes
Marge interne (padding)
padding: nombre | pourcentage | inherits ;
I La propriété padding spécifie la taille des quatre margesintérieures (haut, droite, bas, gauche)
I Comportement variable selon le nombre de valeurs données(entre 1 et 4)
I Valeurs = une valeur numérique (e.g., em, px, cm), unpourcentage ou la valeur est héritée du composant parent
I Propriétés pour une marge spécifique (padding-top,padding-right, padding-bottom, padding-left)
http://www.w3schools.com/css/css_padding.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 23 / 30
Police Texte Marges Pseudo-classes
Un exemple de bordure
40 <ol style="margin-left: 1em; border-style: dotted; border-width: 5px;background-color: #EE7766; border-radius: 10px 0;">
41 <li>entrée 1</li>42 <li>entrée 2</li>43 <li>entrée 3</li>44 <li>...</li>45 </ol>
Que dire sur le style de la bordure ?
I Insertion du CSS en inline (par l’attribut style)I Style appliqué à une liste numérotée spécifique :
I border-style, avec pour valeur dotted (pointillés)I border-width, ici avec une épaisseur de 5pxI border-radius, pour des coins arrondisI background-color, une couleur de fond à la liste
http://www.w3schools.com/css/css_border.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 24 / 30
Police Texte Marges Pseudo-classes
Un exemple de bordure
40 <ol style="margin-left: 1em; border-style: dotted; border-width: 5px;background-color: #EE7766; border-radius: 10px 0;">
41 <li>entrée 1</li>42 <li>entrée 2</li>43 <li>entrée 3</li>44 <li>...</li>45 </ol>
Que dire sur le style de la bordure ?I Insertion du CSS en inline (par l’attribut style)I Style appliqué à une liste numérotée spécifique :
I border-style, avec pour valeur dotted (pointillés)I border-width, ici avec une épaisseur de 5pxI border-radius, pour des coins arrondisI background-color, une couleur de fond à la liste
http://www.w3schools.com/css/css_border.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 24 / 30
Plan
Police
Texte
Marges
Pseudo-classes
Police Texte Marges Pseudo-classes
Pseudo classes
Les actions de l’utilisatrice modifient l’état d’un élément (e.g., uneimage survolée, un champ de saisie qui gagne le focus) :
I Les pseudo-classes reflètent ces états (e.g., :hover, :focus)I Une trentaine d’états, que le CSS permet de personnaliserI Dans une déclaration CSS, une pseudo-classe est ajoutée après
le sélecteur et un deux-points
sélecteur:pseudo-classe {propriété1 : valeur1 ;…propriétén : valeurn ;
}
http://www.w3schools.com/css/css_pseudo_classes.aspBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 26 / 30
Police Texte Marges Pseudo-classes
Un exemple de lien actif
8 <style>9 a:active {
10 text-decoration: none;11 color: yellow;12 background-color: grey;13 }14 </style>
Que dire sur le style des liens ?
I Insertion du CSS en interne (balise <style>)I Style appliqué à tous les liens lors d’une activation (pseudo
classe :active) :I color, pour la couleur du texte (ici jaune)I text-decoration, pour supprimer toute décorationI background-color, pour une couleur de fond (ici grise)
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 27 / 30
Police Texte Marges Pseudo-classes
Un exemple de lien actif
8 <style>9 a:active {
10 text-decoration: none;11 color: yellow;12 background-color: grey;13 }14 </style>
Que dire sur le style des liens ?I Insertion du CSS en interne (balise <style>)I Style appliqué à tous les liens lors d’une activation (pseudo
classe :active) :I color, pour la couleur du texte (ici jaune)I text-decoration, pour supprimer toute décorationI background-color, pour une couleur de fond (ici grise)
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 27 / 30
Police Texte Marges Pseudo-classes
Un exemple de lien actif
8 <style>9 a:active {
10 text-decoration: none;11 color: yellow;12 background-color: grey;13 }14 </style>
Que dire sur le style des liens ?I Insertion du CSS en interne (balise <style>)I Style appliqué à tous les liens lors d’une activation (pseudo
classe :active) :I color, pour la couleur du texte (ici jaune)I text-decoration, pour supprimer toute décorationI background-color, pour une couleur de fond (ici grise)
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 27 / 30
Police Texte Marges Pseudo-classes
Un exemple d’image de fond au survol27 #tdSpecial:hover {28 color: red;29 background-image : url('
bluefish-icon.png');30 background-color: #FFFFFF;31 }
Extrait de demo2-style.css
7 <link href="demo2-style.css" rel="stylesheet"media="all" type="text/css">
48 <table>49 <tr>50 <th>Colonne 1</th>51 <th>Colonne 2</th>52 </tr>53 <tr>54 <td>cellule 1</td>55 <td id="tdSpecial"><br>cellule 2<br><br></td>56 </tr>57 <tr>58 <td>cellule 3</td>59 <td>cellule 4</td>60 </tr>61 </table>
Que dire sur le style du tableau ?
I Insertion du CSS en externeI Style appliqué au survol de l’élément identifié par tdSpecial
I color, pour la couleur du texte (ici rouge)I background-color, pour une couleur de fond (ici blanc)I background-image, pour une image de fond
http://www.w3schools.com/css/css_background.asp
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 28 / 30
Police Texte Marges Pseudo-classes
Un exemple d’image de fond au survol27 #tdSpecial:hover {28 color: red;29 background-image : url('
bluefish-icon.png');30 background-color: #FFFFFF;31 }
Extrait de demo2-style.css
7 <link href="demo2-style.css" rel="stylesheet"media="all" type="text/css">
48 <table>49 <tr>50 <th>Colonne 1</th>51 <th>Colonne 2</th>52 </tr>53 <tr>54 <td>cellule 1</td>55 <td id="tdSpecial"><br>cellule 2<br><br></td>56 </tr>57 <tr>58 <td>cellule 3</td>59 <td>cellule 4</td>60 </tr>61 </table>
Que dire sur le style du tableau ?I Insertion du CSS en externeI Style appliqué au survol de l’élément identifié par tdSpecial
I color, pour la couleur du texte (ici rouge)I background-color, pour une couleur de fond (ici blanc)I background-image, pour une image de fond
http://www.w3schools.com/css/css_background.asp
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 28 / 30
Police Texte Marges Pseudo-classes
Un exemple d’image de fond au survol27 #tdSpecial:hover {28 color: red;29 background-image : url('
bluefish-icon.png');30 background-color: #FFFFFF;31 }
Extrait de demo2-style.css
7 <link href="demo2-style.css" rel="stylesheet"media="all" type="text/css">
48 <table>49 <tr>50 <th>Colonne 1</th>51 <th>Colonne 2</th>52 </tr>53 <tr>54 <td>cellule 1</td>55 <td id="tdSpecial"><br>cellule 2<br><br></td>56 </tr>57 <tr>58 <td>cellule 3</td>59 <td>cellule 4</td>60 </tr>61 </table>
Que dire sur le style du tableau ?I Insertion du CSS en externeI Style appliqué au survol de l’élément identifié par tdSpecial
I color, pour la couleur du texte (ici rouge)I background-color, pour une couleur de fond (ici blanc)I background-image, pour une image de fond
http://www.w3schools.com/css/css_background.asp
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 28 / 30
Police Texte Marges Pseudo-classes
Un exemple d’image de fond au survol27 #tdSpecial:hover {28 color: red;29 background-image : url('
bluefish-icon.png');30 background-color: #FFFFFF;31 }
Extrait de demo2-style.css
7 <link href="demo2-style.css" rel="stylesheet"media="all" type="text/css">
48 <table>49 <tr>50 <th>Colonne 1</th>51 <th>Colonne 2</th>52 </tr>53 <tr>54 <td>cellule 1</td>55 <td id="tdSpecial"><br>cellule 2<br><br></td>56 </tr>57 <tr>58 <td>cellule 3</td>59 <td>cellule 4</td>60 </tr>61 </table>
Que dire sur le style du tableau ?I Insertion du CSS en externeI Style appliqué au survol de l’élément identifié par tdSpecial
I color, pour la couleur du texte (ici rouge)I background-color, pour une couleur de fond (ici blanc)I background-image, pour une image de fond
http://www.w3schools.com/css/css_background.asp
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 28 / 30
Police Texte Marges Pseudo-classes
Exemples de mise en forme
Démo avec demo2.html (code source en ligne)
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 29 / 30
Police Texte Marges Pseudo-classes
En résumé
I Pseudo éléments (e.g.,première ligne d’un texte)
I Nombreuses propriétés etvaleurs associées en CSS3(se référer à ladocumentation)
http://www.w3schools.com/css/css_pseudo_elements.asphttp://www.w3schools.com/cssref/default.asphttp://visibone.com/html
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 30 / 30