Oltana.net - [Programmation] CSS.

Bonjour tout le monde ;

Suite au tuto sur l'XHTML, en voici un sur le CSS, ces deux langages étant très liés voir inséparables pour la création d'un site web. Nous verrons ici ce qu'est le CSS, et les principales propriétés qui le composent.

1/Le CSS : ce que c'est, qu'en faire.

Le CSS permet de mettre en page les textes d'une page (X)HTML : ajouter des couleurs, disposer les paragraphes / menus / images sur sa feuille, ?. En effet, l'(X)HTML comprend juste le contenu du site et le CSS les organise pour donner une zoulie page.

HTML = texte,
CSS = design.

Où mettre votre CSS ?

3 solutions s'offrent à vous (je vous invite vivement à utiliser la troisième) :

- directement dans les balises HTML : <balise style="style pour cette balise"></balise>. Cela présente différents inconvénients : on ne peut pas changer le style de plusieurs balises d'un coup, le CSS est assez inaccessible, caché.

- dans le header de la page html :

Code:

<head>
<title>CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* code css */
</style>
</head>

- dans un fichier .css, à part. C'est est conseillé car cela permet de changer le style d'un site rapidement et sans risquer de modifier le contenu. C'est aussi plus "lisible". Pour créer le fichier .css : utiliser le blocnote, notepad++ ou autre, puis enregistrer sous votretitre.css.
Ensuite, dans votre page HTML, indiquer l'adresse du .css avec cette balise entre <head> et </head> :
<link rel="stylesheet" media="screen" type="text/css" title="design" href="votretitre.css" />.

Comme l'XHTML, le CSS doit répondre à certaines normes (W3C). Vous pouvez verifier la validité de vos codes ici . :wink:

Structure des codes CSS :

Le CSS a trois composants : le nom des balises html (h1, p, strong, ?) ; les propriétés : ce que l'on change pour la balise en question ; et les valeurs que prennent les propriétés.

Le code se présente comme ceci ( /* Commentaires */) :

Code:

balise1 /*pour une balise html comme h3, p, em, a, ?.*/
{
propriété1:valeur;
propriété2:valeur;
/*etc,autant de propriétés qu'on veut*/
}

.attributclass /*pour les balises <div> ou <span> auxquelles vous avez donné un attribut class*/
{
propriété1:valeur;
}

#attributid /*pour les balises <div> ou <span> auxquelles vous avez donné un attribut id */
{ propriété3:valeur; }

balise2, balise3 /*pour appliquer le même style à plusieurs balises, les separer par une virgule*/
{ propriété:valeur;}

p em /*applique le style au contenu des balises <em> elles mêmes dans des balises <p>*/
{propriété:valeur;}

Donc ne pas oublier : le . ou le # pour les balises <div> et <span>, les accolades, les deux points pour séparer propriétés et valeurs, et le point virgule après une valeur.

Vous savez maintenant comment mettre en place et présenter votre CSS, il vous manque "juste" de savoir quoi y mettre. Voici donc une liste des propriétés et valeurs possibles. :wink:

2/Inventaire des propriétés et valeurs CSS utiles.

J'ai séparé les propriétés en plusieurs parties, selon ce sur quoi elles agissent : l'arrière plan, les borudures, le texte, le positionnement, les tableaux et listes, et le reste. :wink:

Présentation : Propriété : ce quelle change, valeurs et / ou exemple(s).
Propriété spécifique à certains navigateurs : pour un site destiné à tous, il est préférable de ne pas s'en servir.

Propriétés concernant l'arrière plan.

- background-color : définit une couleur d'arrière plan ; indiquer le nom de la couleur (en anglais, ex : red, green, ?) ou les valeurs rgb (ex : rgb(255,255,255); ) ou le code hexadécimal (ex : #000000; ).

Pour les couleurs, la boîte à couleurs peut vous aider. :wink:

- background-image : pour mettre une image en arrière plan.
url("chemin/votreimage.jpg");

- background-attachment : l'arrière plan défile en même temps que la page : scroll ou pas : fixed.

- background-position : dans le cas d'une image par exemple, position de l'arrière plan par rapport à la gauche puis au haut de la page, en pixels (ex : 30px 50px; ), ou aligné sur un ou deux des bords de l'image, avec top, bottom, left et right (ex : top right; ), ou encore centré avec center.

- background-repeat : pour une image, définit si elle sera reproduite sur la page. no-repeat : non répétée ; repeat-x : repétée horizontalement ; y-repeat : verticalement ; repeat : tout le temps (par défaut).

- background : pour regrouper plusieurs valeurs (ex : background : fixed url("fond.gif") x-repeat center; ).

Propriétés concernant les bordures.

Pour toutes les balises avec border, vous pouvez ajouter top, bottom, left ou right pour que les changements n'affectent qu'une des quatre bordures (ex : border-top-color: ).

- border-color : définit une couleur de bordure. Ajouter le nom, code hexadécimal ou rgb (cf couleur de fond).

- border-style : applique un style aux bordures.
solid : trait plein.
dashed : tirets.
dotted : pointillés.
double : double traits pleins, la largeur définie par "border-width" correspondra à la taille des 2 traits et de l'espaces entre ceux-ci.
groove : gravée dans la page.
ridge : effet 3D, sort de la page.
inset : rentrante, élément incrusté dans la page.
outset : sortante, élément extrudé de la page.
hidden : pas de bordure, influe sur la bordure mitoyenne.
none : pas de bordure, équivaut à border-width:0.

- border-width : définit la largeur de bordure, en px ou thin, medium ou thick (du moins au plus large).

- border : pour regrouper plusieurs valeurs (ex : border-top:black dashed 3px; ).

- outline : trace un contour, même sous-propriétés que border (style, width et color), mais seulement sous Internet Explorer.

Propriétés concernant les textes.

- color : couleur de police ; nom, rgb ou code hexadécimal (cf couleur de fond).

- font-family : type de police (ex : Times, "Arial Black", Courrier, "Comic Sans MS", ? . Ne pas oublier les " " pour les noms en plusieurs mots, vous pouvez mettre plusieurs polices : si la première n'est pas installée, on prend la suivante.

- font-size : taille du texte.
-smaller : taille de texte plus petite que l'élément parent.
-larger : taille de texte plus grande que l'élément parent.
- pourcentage : taille calculée en fonction de l'élément parent.
- mention de longueur : taille précise avec une valeur et une unité (px).
- xx-small : taille de texte minuscule.
- x-small : taille de texte très petite.
- small : taille de texte petite.
- medium : taille de texte moyenne.
- large : taille de texte grande.
- x-large : taille de texte très grande.
- xx-larger : taille de texte énorme.

- font-style : italic, oblique (ce qui revient au même) ou normal (par défaut).

- font-variant : small-caps (texte en petites capitales) ou normal.

- font-weight : bold (mettre en gras) ou normal.

- font : pour grouper plusieurs valeurs (ex : font:#FFFFFF Serif 12px italic ).

- letter-spacing : espacement entre les lettres, en px.

- line-height : hauteur de ligne, en px.

- word-spacing : espace entre les mots, en px.

- text-align : center, right, left ou justify.

- text-decoration : "décore" le texte.
underline : souligné.
line-through : barré.
overline : ligne au-dessus.
blink : clignotant. Ne fonctionne pas sous Internet Explorer.
none : normal (par défaut).

- text-indent : retrait, en px.

- text-transform : transforme la police (minuscules, majuscules).
uppercase : tout le texte sera écrit en majuscules.
lowercase : tout le texte sera en minuscules.
capitalize : la première lettre de chaque mot sera en majuscules.
none : pas de transformation (par défaut).

-text-shadow : Définit l'ombrage texte, respectivement décalage à droite, en bas, rayon de l'effet de flou et couleur (ex : ] text-shadow: 1px 2px 4px black; ).

- direction : ltr pour ecrire de gauche à droite et rtl de droite à gauche.

Propriétés concernant le positionnement.

- height : hauteur d'un bloc, en px.

- width : largeur d'un bloc, en px.

- max-height : hauteur maximale.

- max-width : largeur maximale.

- min-height : hauteur minimale.

- min-width : largeur minimale.

- margin : mettre une marge exterieure (entre le bloc et un autre, ou le bord de la page), en px. Vous pouvez ajouter top, bottom, left ou right pour spécifier différentes marges (ex : margin-top:50px; ).

- padding : mettre une marge intérieure (entre le bloc et son contenu), en px. Vous pouvez ajouter top, bottom, left ou right pour spécifier différentes marges (ex : padding-left:20px; ).

- bottom : distance entre le bas d'un bloc et de la page, ou du bloc parent (dans lequel il est). En px ou %. Idem avec top, left et right.

- clear : définit le style du curseur.
- pointer : doigt indiquant un lien.
- move : objet qu'on peut déplacer.
- e-resize : curseur pointant vers l?est (variantes : n (nord), w (ouest), s (sud) et couplages : ne, sw, se, ?).
- text : indique qu'on peut sélectionner le texte. Souvent une barre en I.
- wait : sablier.
- help : point d'interrogation ou une bulle.
- default : curseur par défaut selon la plate-forme. Souvent une flèche.
- crosshair : marque en croix (ex. deux traits formant un signe "+").
- url : spécifie un fichier spécial.
- auto : le navigateur détermine quel curseur prendre selon le contexte.

- float : right, left ou none, permet d'aligner un bloc par rapport au bloc parent, à droite ou à gauche.

- position : absolute (par rapport à l'elément parent), relative (par rapport aux autres eléments), static (placé "normalement"), fixed (ne bouge pas).

- overflow : spécifie si le contenu d'un élément de type bloc doit être rogné quand celui-ci déborde de l?élément parent. visible, hidden ou scroll. Par défaut : auto, cad souvent scroll (barres de défilement).

- vertical-align :
- baseline : en bas.
- middle : au milieu
- top : en haut
- text-top : aligne le texte en haut de l?élément parent.
- text-bottom :aligne le texte en bas de l?élément parent.
Si vous ajoutez une valeur en px ou en %, cela précise le décalage par rapport au bas / haut.

- visibility : hidden pour cacher un élément, la mise en place ne change pas.

Propriétés concernant les tableaux et listes.

- border-collapse : collapse (effet 2D) ou separate (effet 3D).

- border-spacing : détermine l'emplacement entre les cellules, en px ou %.

- caption-side : top, bottom, right ou left , pour placer la légende du tableau.

- empty-cells : show ou hide, montre ou cache les bordures de cases vides.

- table-layout : auto ou fixes : le navigateur affiche le tableau d'un coup ou ligne par ligne.

- list-style-image : mettre une image en tant que puce, spécifier une url (ex : url("votrepuce.png");.

- list-style-position : préciser le retrait des listes (valeur en px).

- list-style-type : styles de puces.
lower-alpha : petites lettres (a, b, c, ...).
upper-alpha : grandes lettres.
lower-roman : petits chiffres romains (i, ii, iii, iv, ..).
upper-roman : grands chiffres romains (I, II, III, ....).
decimal : chiffres.
circle : cercle.
disc : cercle plein.
square : rectangle.
none : pas de puce.

- list-style : combiner plusieurs valeurs.

Autres propriétés.

Il est possible de modifier l'apparence des barres de défilement (scrollbar), et ajouter des filtres (opacité, ?), mais uniquement pour internet explorer. C'est pourquoi je ne developperai pas. Pour plus d'information, faites une recherche. :wink:

Pseudo-formats.

Ils servent à appliquer le style à des moments ou endroits précis, par exemple pour un lien où l'on a dejà cliqué, la première lettre d'un mot, ?

Pour cela, on ajoute donc des pseudo-formats aux noms de balise, comme ceci :

Code:

balise:pseudo-format
{ propriété:valeur;}

a:hover : modifie le style quand la souris passe sur le lien.
a:active : quand on clique sur le lien.
a:visited : lorsqu'on a deja cliqué sur le lien.

p:first-letter : sur la première lettre de chaque paragraphe.
p:first-line : sur la première ligne de chaque paragraphe.

==> Voilà maintenant vous pouvez creer de jolies pages web grâce au XHTML et au CSS. Si vous avez besoin d'aide, n'hésitez pas à venir demander sur le forum.