Structure et balises CSS (1)

Le CSS (Cascading Style Sheets) crée autour de 1995 est actuellement dans sa troisième version.
Il permet de changer l'affichage d'une page html en lui appliquant un style css. Pour cela on utilise des sélecteurs.
Un sélecteur est un nom de balise ou nom attribué dans une id ou une class afin d'appliquer un style CSS à un élément HTML.
Les sélecteurs peuvent être combinés pour être plus précis dans l'attribution d'un style.

On déclare un css de la façon suivante :

sélecteur {
propriété1 : valeur1;
propriété2 : valeur2;
propriété3 : valeur3;
}

Propriétés CSS courantes :

width => Largeur d'un élément ou de la page web

height => Hauteur

border => bordure (border : 1px solid red)

margin => marge extérieure
margin-left
margin-right

padding => marge intérieure
padding-left
padding-right

background => couleur de fond

color => couleur de texte

font-size => taille du texte

text-align => alignement du texte

text-decoration => c'est le soulignement texte rayé etc...

font-weight => correspond à la graisse d'un texte (bold)

position => c'est le positionnement d'élements (absolute (retire élément de son flux) relative
(bouge dans son flux) fixed (élément fixe, ne bouge pas)

left / right => gère la position horizontale (s'utilise avec un position absolute et relative)

top / bottom=> gère la position verticale(s'utilise avec un position absolute et relative)

z-index => ordre de superposition (z-index : 2; z-index: 1; l'élément 2 sera sur l'élément 1)

overflow => masque, scrolle ou affiche (overflow-x, scrolle en horizontal; overflow-y vertical;
overflow : hidden / visible / auto)

opacity => agit sur l'opacité (transparence) d'un élément. 0 rend l'élément invisible et 1 rend l'élément complétement visible.  Donc, pour avoir une transparence : opacity :0.6; 

border-radius => permet d'arrondir les angles d'une bordure d'une image. border-radius : 15px;

border = > apparition d'une bordure autour d'un élément. border : 1px solid black;

@font-face => affiche une police de caractère téléchargée.

font-family => change la police de caractère.  font-family : verdana, sans-serif;
Prendre des précautions, mettre plusieurs polices séparées d'une virgule dans le cas ou la police que vous avez choisi ne soit pas dans le pc ou mac de votre visiteur. Si la première police n'y est pas alors la deuxième police s'affichera. 

font-size => contrôle la taille de la police.

text-indent => alinéa d'un texte

box-shadow => ombre autour d'un élément.  box-shadow :  10px 10px 5px #aaa;
La première valeur représente le décalage vers la droite horizontal
La deuxième valeur représente le décalage vers le bas vertical
La troisième valeur représente le degré de l'ombre
La dernière valeur représente la couleur de l'ombre

text-shadow => l'ombre d'un texte