02 - CSS : introduction

CSS : Cascading Styles Sheet

• langage de description de styles = décoration != contenu
• standardisé par le W3C, pris en charge par les navigateurs dans les années 2000
• Ressources et lectures conseillées
  • https://developer.mozilla.org/fr/docs/Web/CSS
  • http://www.alsacreations.com/

Structure

• liaison : <link href="css/styles.css" rel="stylesheet" type="text/css"/> , @import url("styles.css") , <style> .selector{ font-size:13px }</style>, style="font-size:13px"
• Organisation des fichiers ( img, css ) , chemin relatif/absolu
• Indentation, commentaires /* */
• sélecteurs tag#id.class[attr="value"]{ property: value; }

Décoration

• unités absolues: px, pt, cm, mm, in , relatives : %, em, rem, vh, vw
• couleurs : color, background-color: #RGB, #RRGGBB et rgb(RRR, VVV, BBB)
• typographie : font-size,font-family,font-weight,font-size,text-transform,text-decoration

Modèle de boite exercice

• Dimensions width, height , margespadding, margin , bordure border
• Display: block, inline , inline-block, initial

Positionnement exercice

• le flux: float: right|left; clear: left | right | both;
• avancé: position, absolute, relative,top, bottom, right, left