| CSS | - Langage permettant de décrire le style graphique - d'une page HTML - | -
On peut appliquer un style CSS
-style... ]]>
- dans l'en-tête
- du document (dans la
- balise ...]]>).
- 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; }
-