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:

/* 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;
}

2APartProx

Outils pour utilisateurs

Outils du site

Table des matières

CSS

Propriétés de mise en forme

Propriété de couleur et de fond

Propriétés des boîtes

Propriétés de positionnement et d'affichage

Propriétés des listes

Propriétés des tableaux

Autres Propriétés

Exemple:

Outils de la page