CSS, pour cascading style sheet ou feuille de style en cascade et le langage qui vous permet de mettre en forme votre contenu html et de le rendre un peu plus joli. En CSS, on attribue des propriétés à des selecteurs et ces propriétés sont déterminées par des valeurs. Voici les propriétés essentielles.
| background | |
|---|---|
| background-color: couleur | couleur de fond |
| background-image: src (url) | image de fond |
| background-repeat: repeat/no-repeat | répétition ou non du fond |
| border | |
|---|---|
| border-color: color | couleur |
| border-widht: px, %, em | épaisseur de la bordure |
| border-style: solid, dashed, inset... | style de bordure |
| border: 2px solid white | super propriété border |
| border-top/right/bottom/left | selection d'un côté |
| border-radiux: valeurpx | arrondie des angles |
| box-shadow: px px px color | ombre de la boîte |
| display and size | |
|---|---|
| width: px/% | largeur |
| height: px/% | hauteur |
| min-width/max-width | largeur minimale/maximale |
| min-height/max-height | hauteur minimale/maximale |
| float: left/right/none | élément floattant |
| clear: left/right/both/none | empêche un élément de floatter |
| display: block/inline/inline-block/none | affichage de l'élément |
| vertical-align: top/middle/bottom | alignement vertical |
| Fonts | |
|---|---|
| font-family: 'family' | type de police |
| font-size: px/em/% | taille de police |
| font-style: normal/italic/oblique | style de la police |
| font-weight: normal/bold/light/200... | épaisseur de la police |
| Margin, padding and position | |
|---|---|
| margin: px/% | marge externe |
| padding: px/% | marge interne |
| margin-top/right/bottom/left | marge haute/droite/basse/gauche |
| padding-top/right/bottom/left | marge interne haute/droite/basse/gauche |
| margin: 1 1 1 1 | super propriété marge externe |
| padding: 1 1 1 1 | super propriété marge interne |
| position: absolute/relative/fixed/static | position de l'élément |
| overflow: visible/hidden/scroll/auto | rognage du contenu |
| Text | |
|---|---|
| text-align: center/right/left/justify | alignement du texte |
| text-decoration: none/underline/overline | décoration du texte |
| text-shadow: color lenghtpx | ombre du texte |
| color: color | couleur du texte |
| word-spacing: px/% | espacement entre les mots |
| word-wrap: break-word | retour à la ligne forcé |
| Pseudo-class | |
|---|---|
| :visited | lien visité |
| :hover | élément survolé |
| :link | lien non-visité |
| :nth-child (n) | enfant numéro n du parent |
| :first-child | premier enfant |
| :last-child | dernier enfant |