BDW1 - Programmation web - CSS · PropriétésenCSS Rappel:insertionduCSSdansunefeuilleexterneetdéfinitionde sélecteurspourchoisirlesélémentssurlesquelsappliquerunstyle Quellespropriétés

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/

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


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


http://www.w3.org/Style/CSS/learning.fr.html

http://www.w3schools.com/cssref/default.asp

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, …


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

http://www.w3schools.com/css/css_font.asp


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




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




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




É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




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

http://www.w3schools.com/cssref/pr_font_font.asp

Plan

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/


http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/html/html_colors.asp

http://www.w3schools.com/colors/colors_picker.asp

http://html-color-codes.info/


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



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)




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




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




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.)


Plan

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/


http://www.w3schools.com/css/css_boxmodel.asp

http://fr.html.net/tutorials/css/


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

http://www.w3schools.com/css/css_margin.asp


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

http://www.w3schools.com/css/css_padding.asp


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

http://www.w3schools.com/css/css_border.asp


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

http://www.w3schools.com/css/css_border.asp

Plan

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

http://www.w3schools.com/css/css_pseudo_classes.asp


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)






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







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




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 }


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









Que dire sur le style du tableau ?I Insertion du CSS en externeI Style appliqué au survol de l’élément identifié par tdSpecial




























Exemples de mise en forme

Démo avec demo2.html (code source en ligne)



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


http://www.w3schools.com/css/css_pseudo_elements.asp

http://www.w3schools.com/cssref/default.asp

http://visibone.com/html

Documents

BDW1 - Programmation web - CSS · PropriétésenCSS Rappel:insertionduCSSdansunefeuilleexterneetdéfinitionde sélecteurspourchoisirlesélémentssurlesquelsappliquerunstyle Quellespropriétés