CSS

Sources
https://www.w3schools.com


Background

HTML
<body background="image-de-fond.png">
<body bgcolor="#000000">
<body bgproperties="fixed">

CSS
body
{

background: lightblue url("img_tree.gif") no-repeat fixed center;

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment



/* Plusieurs image en arrière plan */
background-image: url("image1"), url("image2");
background-position: x y, x y;

/* Valeurs avec un mot-clé */
background-size: cover;
background-size: contain;

/* Une seule valeur */
/* La valeur désigne la largeur de l'image. */
/* La hauteur vaut 'auto'. */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Deux valeurs */
/* Première valeur : la largeur de l'image */
/* Seconde valeur : la hauteur de l'image */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Valeurs pour plusieurs arrière-plans */
background-size: auto, auto; /* À ne pas confondre avec `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Valeurs globales */
background-size: inherit;
background-size: initial;
background-size: unset;



background-image : url(image-de-fond.png) ;
background-color : #000000 ;
background-repeat : no-repeat ;
background-position : center center ;
background-attachement : fixed ;
background-size : cover; background-size : contain background-size : 30% background-size : 200px 100px }


media="screen" media="print" media="screen and (max-width: 1280px)" - résolution de l'écran inférieur à 1280 pixels.
media="screen and (min-width: 200px) and (max-width: 640px)" - résolution de l'écran compris entre 200 et 640 pixels.
media=handheld media=all and only not
Table

table {font-family:"MS Sans Serif",Arial, Geneva, Helvetica; font-size:10pt} /* Police et taille */
table {font-family:"MS Sans Serif",Arial, Geneva, Helvetica; font-size:15px}

Border
table, th, td {border: 1px solid black;} /* Bordure 1pixel de couleur noir */
table, td, th {border: 1px solid #ddd;} /* Bordure 1pixel de couleur gris */
table {border-collapse: collapse;} /* Suppression de la bordure de table */
table, th, td {border: 1px solid black;} (ne conserve que la bordure de td et th)
th, td {border-bottom: 1px solid #ddd;} /* Souligne uniquement */

th {background-color: #4CAF50; color: white;} /* Entête en couleur */

table {width: 100%;} /* Taille des cellules */
th {height: 50px;}

th {text-align: left;} /* Alignement du texte */
td {height: 50px; vertical-align: bottom;}
th, td {padding: 15px; text-align: left;}


Intégration de style CSS dans une page HTML <html>
<head>
<title>Titre</title>
<style type="text/css">
body, table, p, ul {font-family:"MS Sans Serif",Arial; font-size: 15px} /* Police de caractère pour toute la page */
</style>
</head>

Deuxième option, créer une feuille de style
Créer un une page style.css (pour l'exemple)
/*fichier CSS */
body {background:url(bak.gif) #EFBD9C;margin:0 0 0 10;font-family:arial, Helvetica;font-size:10pt}
/*fichier CSS */

À mettre dans l'entête HTML (si la feuille se nome style.css)
<html>
<head>
<link href="style.css" rel="stylesheet" media="all" type="text/css">
<title>


Commentaire
/* Commentaire */
//commentaire
/* ! */ - pour dire que c'est important
<!- - commentaire - -> est possible uniquement avec la balise <style> dans un document HTML


Font
font-family: "MS Sans Serif",Arial
font-style: italic
font-size: 15px
font-size: 10pt
font-size: x-small

ou "shorthand property" propriété raccourcis
font: 15px "MS Sans Serif",Arial, Geneva, Helvetica

lien

font-family: serif ou sans-serif ou monospace ou cursive ou fantasy;
font-style: normal ou italic ou oblique
font-size: 16px ou 1em ou 100% ou 2vw (adaptatif)
font-weight: normal ou bold ou lighter
font-variant: normal ou small-caps

Remplacement de <b>
<span style="font-weight: normal">(page 2)</span>

Remplacement de <font color>
<p style="color:red">Texte rouge.</p>



Text
color: red ou #ff0000 ou rgb(255,0,0)
text-align: center ou left ou right ou justify
text-decoration: none ou overline ou line-through ou underline
text-transform: uppercase ou lowercase ou capitalize
text-indent:
letter-spacing:
line-height:
direction: rtl
word-spacing:
text-shadow: 3px 2px red


Background (attention : l'ordre est important)
background-color: #f0c0a0
background-color: rgb(255,0,0)
background-color: red
background-image: url(../../bak.png)
background-repeat: repeat-x
background-attachment:fixed

background-position:right top; ou
background-position:100% 0%;
background-position:center center; ou
background-position:50% 50%;
background-position:right bottom; ou
background-position:100% 100%;

/* Syntaxe avec une seule valeur */
background-repeat: repeat-x; ou background-repeat: repeat no-repeat; (ne fonctionne pas avec IE8)
background-repeat: repeat-y; ou background-repeat: no-repeat repeat; répétion verticale (ne fonctionne pas avec IE8)
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Syntaxe avec deux valeurs */
/* Première valeur : axe horizontal */
/* Seconde valeur : axe vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;


ou "shorthand property" propriété raccourcis
background: #f0c0a0 url('../../bak.png')

Exemple :
body {background:url(bak.png) #EFBD9C;margin:0 0 0 10;font-family:MS Sans Serif, Geneva, Arial, Helvetica;font-size:10pt}
#body2 {background:url(bak.png) #EFBD9C;background-attachment: fixed;margin:0 0 0 10;font-family:MS Sans Serif, Geneva, Arial, Helvetica;font-size:10pt}
À mettre dans la page HTML -> <body id="body2">

(Body clé en main)
<style type="text/css">
body {
background-image:url(../../bak.png);
background-attachment:fixed;
background-repeat:repeat;
font: 15px "MS Sans Serif",Arial, Geneva, Helvetica;
margin-left: 10px;
margin-top: 0px
} <!-- arrangement de la page -->
</style>


Surligneur
<style type="text/css">
.jaune {background:yellow;padding-left:5px;padding-right:5px} /* Surligneur jaune */
</style>
<font class="jaune"><b>ATTENTION</b></font>
ATTENTION

Bandeau
<style type="text/css">
.bandeau {background:yellow; padding-left:5px; padding-right:5px; display:block; font-size:25px;} /* Bandeau de couleur */
</style>
<font class="bandeau"><b>Bandeau</b></font>
Bandeau
span {text-decoration: blink;} Bandeau
mot qui clignote
Centrer (remplacement de la balise "center")
<div style="text-align:center">Texte</div>


Lien hypertexte
a {text-decoration : none; font-weight : bold;}
a:hover {text-decoration : underline;}
a:visited {color: blue;}
Test

text-decoration : none; = pas de soulignement
text-decoration : underline; = avec soulignement
text-decoration : overline; = "soulignement" au dessus text-decoration : line-through; = texte barré

Ligne insécable
<span style="white-space: nowrap; font-size: 18pt"> </span>


Tableau
HTML
1 2
3 4
<table border="1">

1 2
3 4
<table style="border-style: ridge;">

1 2
3 4
<table style="border-collapse:collapse; border-style: ridge;">
<td style="border: 1px solid;">1</td>

1 2
3 4
<table style="border-collapse:collapse; border-style: ridge;">
<td style="border-style: ridge;">1</td>


Divers

<div> = saut de ligne
<span>

Marge
<span style="margin:15">

Couleur du texte
<span style="color:white">


Remplacement de FONT SIZE
<font size="5"><b>CSS</b></font>
<span style="font-size:25px; font-weight:bold;">CSS</span>

Size 5 = 25px
Size 4 = 20px
Size 1 = 5px


text-decoration :
- underline, soulignement.
- overline, surlignement.
- line-through, barrage.
- blink, clignotement (sauf ie, Chrome et safari).
- none, sans rien.

font-style :
- normal, met le texte dans son aspect normal,
- italic, met le texte en italique,
- oblique, dépend de la police pas de grosse différence avec italic.
- inherit, hérite de son parent (css 2).

font-variant :
- normal : aucun changement dans le mode d'affichage du texte, valeur par défaut.
- small-caps : affichage du texte en petites capitales.
- inherit, hérite de son parent (css2).

font-weight : - lighter, le texte est affiché en léger.
- normal, le texte est affiché en normal.
- bold, le texte est affiché en gras.
- bolder, le texte est affiché en très gras.
- 100 (lighter), 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900 (bolder).

font-size :
- xx-small, 6,9pt,
- x-small, 8,3pt,
- small, 10pt,
- medium, 12pt valeur initial,
- large, 14,4pt,
- x-large, 17,28 pt,
- xx-large, 20,7pt.

- pt, point (mesure typographique). Le point est égal à 1/72 de pouce.
- pc, pica (mesure typographique). Un pica est égal à 12 points.
- in, pouce (inch). Un pouce est égal à 2.54 cm, 6 picas est égal à pouce.
- cm, centimètre
- mm, millimètre

line-height :
- normal (1.0 et 1.2)
- numérique positive suivie de px ou % ou pt ou em. Seul "em" positif et les valeurs sans unité semblent être interprétées de la même façon sur tous les navigateurs.
- inherit, hérite de la propriété css de son parent (css 2)

font-family :
- caption: police utilisée pour les boutons.
- icon: police utilisée pour les icônes.
- menu: police utilisée pour les menus.
- message-box: police utilisée pour les boites de dialogue.
- small-caption: police "bold" utilisée pour les boutons.
- status-bar: police utilisée pour la barre de statut.


Remplacement de BORDER
<a href="image.jpg" target="_blank"><img src="petite-image.png" border="3"></a>
border=3
border=0

<a href="http://www.wampserver.com"><div style="width: 0px; border-style: hidden"><img src="petite-image.png"></div></a>


<a href="image.jpg" target="_blank"><div style="border-color: yellow; width: 32px; border-style: solid; border-width: Medium"><img src="petite-image.png"></div>;</a>

border-color: Couleur de la bordure
border-style: Apparence de la bordure (dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid)
border-width: Taille de la bordure (Length ou Thin ou Medium ou Thick)

test

test
test
test
test

test
ATTENTION
ATTENTION
test test
Texte Clignotant !!!

This is a marquee!




Ne fonctionne pas sous IE8

Soyons créatifs!