| CSS | - Langage permettant de décrire le style graphique - d'une page HTML - | -
On peut appliquer un style CSS
- color:redUn lien]]>
-
- Apperçu:
-- Un lien -
-Inconvénients :
-
-
- â¦
-
-
-
- Lien 1 Lien 2
-
- ]]>
- Apperçu :
- -Inconvénient : local à une page
-Fichier style.css:
-
- a { color: red; }
-
Fichier test.html:
-
-
-
- â¦
- ]]><link href="style.css" type="text/css" rel="stylesheet" />
-
- â¦
- ]]>
-
Modifications & déploiement aisé
-Une propriété CSS est définie en utilisant la - syntaxe: -
-nom_prop : val_prop - ;
-
- color:red;border-style:solid;border:1pt;Lien 1]]>
-
-
- a {
- color : red;
- border-style: solid;
- border: 1pt;
- }
- h1 { /* Le style des titres de niveau 1 */
- text-decoration: underline;
- color: green;
- }
-CSS permet de spécifier des longueurs comme valeurs de - certaines propriétés (position et taille des éléments, épaisseur - des bordures, â¦). Les longueurs doivent comporter une - unité. Les unités reconnues sont:
-| px | pixel |
| in | pouce (2,54cm) |
| cm | centimètre |
| mm | millimètre |
| pt | point (1/72 |
| pc | pica (12 points) |
| em | facteur de la largeur d'un caractère de la police - courante |
| ex | facteur de la hauteur d'un caractère « x » - de la police courante |
| % | pourcentage d'une valeur particulière - (définie par propriété) |
| vh | viewport height (% de la - hauteur de la partie visible de la page) |
| vw | viewport - width (% de la largeur de la partie visible de la - page) |
Chaque élément de la page HTML possède une boîte - rectangulaire qui délimite le contenu de l'élément: -
-La taille t du contenu est calculée pour que:
- (height|width) = padding + margin + border + t
-
On peut spécifier jusqu'à 4 valeurs:
- span {
- padding:10pt 20pt 5pt 0pt;
- margin:10pt 5pt;
- border-width:3pt;
- border-color:red blue green;
- border-style:solid dotted;
- }
- La propriété display contrôle le mode - d'affichage d'un élément: -
-| none | l'élément n'est pas dessiné et n'occupe - pas d'espace |
| inline | l'élément est placé sur la ligne - courante, dans le flot de texte. La taille du contenu (avec - les marges, ajustements et bordures) dicte la - taille de la boîte, height et width sont - ignorés (, , , , â¦]]> - sont inline par défaut). |
| block | l'élément est placé seul sur sa
- ligne. La taille est calculée automatiquement mais peut être
- modifiée par width et height
- (, ,, â¦]]> - sont block par défaut) |
| inline-block | positionné comme inline - mais la taille peut être modifiée comme pour block |
a { display: inline-block;
- width: 4em;
- height: 2em;
- ⦠}
- Le type de positionnement est donné par la - propriété position
-| static | positionnement « automatique - » |
| fixed | positionnement par rapport à la fenêtre - du navigateur (la boîte est supprimée du flot) |
| relative | positionnement « relatif » par - rapport à la position normale |
| absolute | positionnement « absolu » par rapport - à l'ancêtre le plus proche qui n'est pas static |
Pour fixed, relative et absolute, - les propriétés top, bottom, left - et right dénotent les décalages respectifs. -
-
- a { position: static;
- ⦠}
- a { position: fixed;
- right:10pt;
- top: 10pt;
-
- }
-
-
- a { position: relative;
- left: 10pt;
- bottom: -5pt;
- ⦠}
- a { position:absolute;
- right:0pt;
- bottom: 10pt;
- }
-
- Les couleurs peuvent être données:
-Certaines propriétés permettent d'alterer le rendu du texte - d'un élément
-| direction | ltr ou rtl - (orientation du texte) |
| text-transform | capitalize, uppercase, lowercase - |
| text-decoration | underline, overline, line-through |
| text-align | left, right, center, justify |
| text-indent | longueur du retrait de paragraphe |
| font-family | liste de nom de polices séparées - par des virgules (Helvetica, sans, "Times New Roman") |
| font-style | normal, italic |
| font-weight | normal, lighter, bold, bolder |
| font-size | soit une longueur - soit xx-small, x-small, small, medium, - large, x-large, xx-large - |
On peut aussi spécifier un descripteur de - police
-
- @font-face {
- font-family: Toto;
- src: url(toto.ttf);
- }
- a { font-family: Toto; }
-
- On peut sélectionner finement les éléments auxquels un style - s'applique
-| x | tous les éléments dont la balise - est x |
| .foo | tous les éléments dont - l'attribut class vaut foo |
| #foo | l'élément dont l'attribut - id vaut foo (les id doivent être uniques) |
| X Y | tous les éléments - selectionnés par Y qui sont des descendants d'éléments - sélectionnés par X |
| X > Y | tous les éléments dont - selectionné par Y qui sont des fils d'éléments - sélectionnés par X |
| a:visited | les liens déjà - visités |
| a:link | les liens non - visités |
| X:hover | élément selectionné - par X et survollé par la souris |
div.foo ul li a:visited { color: red; }
-
- Entrée 1
- - Sous-entrée 1.1
- - Sous-entrée 1.2
- - Sous-entrée 1.3
-
-
- Entrée 2
- - Sous-entrée 2.1
- - Sous-entrée 2.2
- - Sous-entrée 2.3
-
-
-
-]]>
-Pour que le ménu soit « dépliable » lors du survol de la souris, - on souhaite que :
-
- li { padding: 10pt 0pt 10pt 0pt;
- display:block;
- background:orange;
- color:blue;
- }
- .sous-menu { display : none; }
-
- ul.menu > li:hover ul.sous-menu { display: block; }
- ul.menu > li:hover ul.sous-menu > li {
- background:blue;
- color:orange;
- }
-
-
Les règles sont appliquées dans l'ordre suivant :
-Il arrive que certaines boites se recouvrent :
-On peut utiliser la propriété z-index pour définir l'ordre - d'empilement (plus elle est élevée, plus la boite est en avant plan) -
-On peut charger un style CSS de manière conditionnelle grace à - l'attribut media de la balise link. - La valeur de l'attribut est une formule logique où l'on - peut tester le type de support d'affichage ainsi que ces - caractéristiques physiques : -
-
-
-
-
-
-]]>
-Cela permet d'appliquer des styles spécifiques lors de l'impression - d'une page ou pour des terminaux mobiles (ayant une petite taille - d'écran) ou de changer de style si l'orientation de l'écran est modifiée.
-L'attribut overflow permet de gérer le débordement. Il - peut prendre les valeurs visible, hidden et auto - :
-