Les principales propriétés
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
- backgroundcouleur, image, origine, taille, répétition
- background-color: couleurcouleur de fond
- background-image: src (url)image de fond
- background-repeat: repeat/no-repeatrépétition ou non du fond
- background-position: left/top/center ou valeursposition de l'image
Display and size
- width: px/%largeur
- height: px/%hauteur
- min-width/max-widthlargeur minimale/maximale
- min-height/max-heighthauteur minimale/maximale
- display:block/inline/inline-block/flex/grid/tableaffichage de l'élément
Border
- border-color: colorcouleur de la bordure
- border-widht: px, %, emépaisseur de la bordure
- border-style: solid, dashed, inset...style de bordure
- border: 2px solid whitesuper propriété border (épaisseur / type / couleur)
- border-top/right/bottom/leftselection d'un côté
- border-radiux: valeurarrondie des angles
- box-shadow: px px px colorombre de l'élément
Fonts
- font-family: 'family'type de police
- font-size: px/em/%taille de police
- font-style: normal/italic/obliquestyle 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
margin-bottom
margin-left
margin-right marge en haut
marge en bas
marge à gauche
marge à droite -
padding-top
padding-bottom
padding-left
padding-right marge en haut
marge en bas
marge à gauche
marge à droite - margin: X X X Xmarge haut/droite/bas/gauche
- padding: X X X Xmarge haut/droite/bas/gauche
- position: absolute/relative/fixed/staticposition de l'élément
-
overflow: visible/hidden/scroll/autorognage
du contenu
Text
- text-align: center/right/left/justifyalignement du texte
- text-decoration: none/underline/overlinedécoration du texte
- text-shadow: color lenghtpxombre du texte
- color: colorcouleur du texte
- word-spacing: px/%espacement entre les mots
- word-wrap: break-wordretour à la ligne forcé
Sélecteurs / Pseudo-class
- .séléction par class
- #séléction par id
- :visitedlien visité
- :hoverélément survolé
- :linklien non-visité
- :nth-child (n)enfant numéro n du parent
- :first-childpremier enfant
- :last-childdernier enfant