prog:css
Ceci est une ancienne révision du document !
Table des matières
Insertion dans une page
- Via un fichier css
Cela s'insère dans la partie head
.
<head> <link rel="stylesheet" href="styles.css" /> </head>
- Directement dans
<head>
Non recommandé.
<head> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head>
- Directement dans le code HTML
Non recommandé.
<h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Hello World! </h1> <p style="color:red;">Ceci est mon premier exemple CSS</p>
Syntaxe
Généralités
On définit une liste de balises html avec ses propriétés CSS.
h1 { color: red; }
Fonctions principales :
- Il est possible de mettre une liste de balises en les séparant par des
,
.
class
: pour désigner une classe, il faut préfixer le nom de la classe par un point.
- Pour désigner une balise qui a un nom de classe précis, il faut mettre
balise.nom_de_classe
.
- Hiérarchie : séparer les désignations par un espace.
- Succession : si on veut désigner une balise qui est précédée par une autre balise, c'est
+
.
- État : ou événement (changement d'état) c'est
:
.
- Id : comme
class
sauf que lesid
sont uniques. C'est#
.
li { list-style-type: square ; } p, .special { color: orange; font-weight: bold; } li.special { font-size: 1.2em; } ul li, em + em { color: red; } a:link { color: pink; } #titleh2 { font-size: 2em; } <h2 id="titleh2">Titre</h2> <p>This is the second second <a href="http://example.com">link</a>. It contains an <em>emphasized</em> <em>element</em>.</p> <ul> <li>Item one</li> <li class="special">Item deux</li> </ul> | |
Raccourcis
font
:font-style
,font-variant
,font-weight
,font-stretch
,font-size
,line-height
etfont-family
.
padding
:padding-top
,padding-right
,padding-bottom
etpadding-left
.
border
:border-width
,border-style
etborder-color
.
margin
:margin-top
,margin-right
,margin-bottom
etmargin-left
.
@rules
Extension au format de fichier.
@import
: ajoute un fichier externe.
@import "file.css";
@media
: applique le css en fonction de condition d'affichage et de périphérique.
@media (min-width: 30em) { body { background-color: blue; } }
Fonctions
calc
Exemple width: calc(90% - 30px);
.
rotate
S'utilise avec transform
: transform: rotate(0.8turn);
avec 1turn
qui vaut 360 degrés.
Rendu
Ordre de priorité
Dans le CSS, certaines règles peuvent être contradictoires.
La priorité (par ordre décroissant) est donc : l'id, la classe, l'élément, l'ordre dans la feuille de style.
Selector | Identifiers | Classes | Elements | Total specificity |
---|---|---|---|---|
h1 | 0 | 0 | 1 | 0-0-1 |
h1 + p::first-letter | 0 | 0 | 3 | 0-0-3 |
li > a[href*="en-US"] > .inline-warning | 0 | 2 | 2 | 0-2-2 |
#identifier | 1 | 0 | 0 | 1-0-0 |
button:not(#mainBtn, .cta) | 1 | 0 | 1 | 1-0-1 |
Cascade, specificity, and inheritance Archive du 01/01/2024 le 01/04/2024
prog/css.1712119751.txt.gz · Dernière modification : 2024/04/03 06:49 de root