====== CSS ======

CSS = Cascading Style Sheets = Feuille de style en cascade.
Fichier qui permet de paramétrer la mise en forme d'un fichier HTML.

==== Propriétés de mise en forme ====
^ Propriété ^ Valeurs ^ Description ^
| font-family | police1, police2, police3, serif, sans-serif, monospace | Nom de police |
| @font-face | Nom et source de la police | Police personnalisée |
| font-size | 1.3em , 16px, 120% | Taille du texte |
| font-weight | bold, normal | Gras |
| font-style | italic, oblique, normal | Italique |
| text-decoration | underline, overline, line-through, blink, none | Soulignement, ligne au-dessus, barré ou clignotant |
| font-variant | small-caps, normal | Petites capitales |
| text-transform | capitalize, lowercase, uupercase | Capitales |
| font | - | Super propriété de police, bombine: font-weight, font-style, font-size, font-variant, font-family |
| text-align | left, center, right, justify | Alignement horizontal |
| vertical-align | baseline, middle, sub, super, top, bottom | Alignement vertical (cellules de tableau ou éléments inline-block uniquement |
| line-height | 18px, 120%, normal | Hauteur de ligne |
| text-indent | 25px | Alinéa |
| white-space | pre, nowrap, normal | Césure |
| word-wrap | break-word, normal | Césure forcée |
| text-shadow | 5px 5px 2px blue (horizontale, verticale, fondu, couleur) | ombre de texte |
==== Propriété de couleur et de fond ====
^ Propriété ^ Valeurs ^ Description ^
| color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleau,transparence),#CF1A20 ...) | couleur du texte |
| background-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleau,transparence),#CF1A20 ...)  | Couleur de fond |
| background-image | url('image.png') | Image de fond |
| background-attachment | fixed, scroll | Fond fixe |
| background-repeat | repeat-x, repeat-y, no-repeat, repeat | Répétition du fond |
| background-position | (x y), top, center, bottom, left, right | Position du fond |
| background | - | Super propriété du fond. Combine: background-image, background-repeat, background-attachment, background-position |
| opacity | 0.5 | Transparence |

==== Propriétés des boîtes ====
^ Propriété ^ Valeurs ^ Description ^
| width | 150px,80% | Largeur |
| height | 150px,80% | Hauteur |
| min-widht | 150px,80% | Largeur minimale |
| max-widht | 150px,80% | Largeur maximale |
| min-height | 150px,80% | Hauteur minimale |
| max-height | 150px,80% | Hauteur maximale |
| margin-top | 23px | Marge en haut (écart extérieur) |
| margin-left | 23px | Marge à gauche (écart extérieur) |
| margin-right | 23px | Marge à droite (écart extérieur) |
| margin-bottom | 23px | Marge en bas (écart extérieur) |
| margin | 23px, 5px 23px 5px (haut, droite, bas, gauche| Super-propriété de marge. |
| padding-left | 23px | Marge intérieur gauche |
| padding-right | 23px | Marge intérieur droite |
| padding-bottom | 23px | Marge intérieur bas |
| padding-top | 23px | Marge intérieur haut |
| padding | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge intérieure. |
| border-width | 3px | Epaisseur de bordure |
| border-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence),#CF1A20... | Couleur bordure |
| border-style | solide, dotted, dashed, double, groove, ridghe, inset, outset | Type de bordure |
| border | 3px solid black | Super propriété de bodure. On peut également utiliser border-top,border-right, border-bottom, border-left |
| border-radius | 5px | Bordure arrondie |
| box-shadow | 6px 6px 0px black | Ombre de boîte |


==== Propriétés de positionnement et d'affichage ====
^ Propriété ^ Valeurs ^ Description ^
| display | block, inline, inline-block, table, table-cell, none... | Type d'élément (block, inline, inline-block, none...) |
| visibility | visible, hidden | Visibilité |
| clip | rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche) | Affichage d'une partie d'élément |
| overflow | auto, scroll, visible, hidden | Comportement en cas de dépassement |
| float | left, right, none | Flottant |
| clear | left, right, both, none | Arrêt d'un flottant |
| position | relative, absolute, static | Positionnement |
| top | 20px | Position par rapport au haut |
| bottom | 20px | Position par rapport au bas |
| left | 20px | Position par rapport à la gauche |
| right | 20px | Position par rapport à la droite |
| z-index | 10 | Ordre d'affichage en cas de superposition. La plus grande valeur est affichée par dessus les autres. |

==== Propriétés des listes ====
^ Propriété ^ Valeurs ^ Description ^
| list-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower,alpha, upper-alpha, none | Type de liste |
| list-style-position | inside, outside | Position en retrait |
| list-style-image | url('puce.png') | Puce personnalisée |
| list-style | - | Super-propriété de liste. Combine: list-style-type, list-style-position, list-style-image |

==== Propriétés des tableaux ====
^ Propriété ^ Valeurs ^ Description ^
| border-collapse | collapse, separate | Fusion des bordures |
| empty-cells | hide, show | Affichage des cellules vides |
| caption-side | bottom, top | Position du titre du tableau |


==== Autres Propriétés ====
^ Propriété ^ Valeurs ^ Description ^
| cursor | crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto... | Curseur de souris. |


==== Exemple: ====

<code css [enable_line_numbers="true"]>
/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body
{
    background: url('images/fond_jaune.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header
{
    background: url('images/separateur.png') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 59px;
    height: 60px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Navigation */

nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 15px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

/* Bannière */

#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
    
}

.bouton_rouge
{
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img
{
    border: 0;
}

/* Corps */

section
{
    display: flex;
    margin-bottom: 20px;
}

article, aside
{
    text-align: justify;
}

article
{
    margin-right: 20px;
    flex: 3;
}

.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    flex: 1.2;
    position: relative;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#photo_zozor
{
    text-align: center;
}

#photo_zozor img
{
    border: 1px solid #181818;
}

aside img
{
    margin-right: 5px;
}

/* Footer */

footer
{
    display: flex;
    background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
    padding-top: 25px;
}

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}


#tweet
{
    width: 28%;
}

#mes_photos
{
    width: 35%;
}

#mes_amis
{
    width: 31%;
}

#mes_photos img
{
    border: 1px solid #181818;
    margin-right: 2px;
}

#listes_amis
{
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

#mes_amis ul
{
    list-style-image: url('images/ico_liensexterne.png');
    padding-left: 2px;
}

#mes_amis a
{
    text-decoration: none;
    color: #760001;
}


</code>