CSS pour débutant
Dissertation : CSS pour débutant. Rechercher de 53 000+ Dissertation Gratuites et Mémoiresrêt, car ces balises sont appelées à ne plus être interprétées par les navigateurs.
D'une façon générale, ces éléments sont dépréciés car ils sont remplaçables par des équivalents CSS.
Quelques balises et attributs dépréciés à ne pas utiliser
• <center></center> (pour centrer)
• <font></font> (pour les polices de caractères)
• <strike></strike> (pour barrer du texte)
• <s></s> (pour souligner du texte)
• <applet></applet> (pour les applets java)
• align
• bgcolor
• noshade
• text
• vlink
Doctypes à DTD strictes à déclarer en début de document html
html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
xhtml 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lectures complémentaires (et indispensables)
• Le Doctype qu'il vous faut (pompage.net)
• Servir du xhtml 1.0 (W3C)
• Index des éléments html
• Index des attributs
Feuille de style de base
Créer une feuille de style externe peut se faire avec le simple bloc-note, et il est d'usage de lui faire porter l'extension .css. Pour chaque déclaration, la structure est toujours la même :
sélecteur {
propriété: valeur;
}
• Le sélecteur, c'est la balise (x)html (body ; h1 ; p, etc.)
• La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.)
• Et enfin la valeur qui précise les caractéristiques de la propriété
Fonctionne avec :
• Tous les navigateurs graphiques
Propriétés utilisées :
• background-color
• color
• font-family ; font-size
• padding
• text-align ; text-decoration
Cet exemple de feuille de style (encore une fois, de base) donnera une page :
• à fond blanc,
• avec une police de caractère par défaut Verdana noire,
• un titre de premier niveau bleu marine centré,
• un titre de deuxième niveau rouge décalé de 15 pixels,
• des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris.
A noter que les couleur sont ici sous la forme "white, black, blue" etc... pour plus de lisibilité mais qu'il convient plutôt d'utiliser les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc)
Les tailles de caractères sont ici exprimées en %, mais on peut aussi utiliser em qui est aussi une unité de longueur relative à privilégier (pour des raisons d'homogénéité d'affichage et d'accessibilité) aux unités absolues telles que les pt ou les pc. A noter que bien que les px soient une unité relative, ils sont aussi à éviter car MSIE les interprète comme unité absolue...
On commence une feuille de style en général par un "reset" pour mettre toutes les marges à zéro (intérieures padding et extérieures margin). Cela doit permettre d'avoir tous les navigateurs avec, à peu près, le même état de départ...
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-size: 200%;
color: navy;
text-align: center;
}
h2 {
font-size: 150%;
color: red;
padding-left: 15px;
}
p,ul,li,td {
color: black;
}
a {
color: green;
text-decoration: underline;
}
a:visited {
color: gray;
}
a:hover {
color: red;
text-decoration: none;
}
Notion de cascades
Pourquoi parle-le-t'on de "feuilles de style en cascade" ? La raison est très simple : on peut déclarer les styles à différents endroits, et selon ces endroits ils seront plus ou moins prioritaires. On obtient donc une cascade de styles.
• Déclaration des styles dans une feuille de style externe : c'est de loin la meilleure chose à faire et la plus pratique à maintenir (cf le schéma de la page d'accueil), mais c'est celle qui a le moins de poids
• Déclaration des styles dans l'en-tête de la page : à ne faire qu'avec des styles particuliers à une page. Les styles déclarés auront plus de poids que ceux de la feuille de style externe et donc l'emporteront en cas de conflits.
• Déclaration des styles dans les attributs des éléments html : à faire pour des mises en forme ponctuelles. Ces styles l'emporteront sur tous les autres.
... Il y a une 4ème possibilité, mais celle-ci est indépendante de la volonté du webmestre : ce sont les styles définis par l'utilisateur, s'il jamais il en déclare. Ils seront interprétés en priorité, et masqueront tous les autres.
Enregistrement d'une feuille de style externe
Enregistrer le code CSS dans un fichier s'appelant (par exemple) "style.css", et mettre dans l'en-tête de la page html (entre les balises <head></head>) :
<link href="style.css" rel="stylesheet" media="all" type="text/css">
Pour éviter les mauvaises surprises avec quelques navigateurs antédiluviens on peut aussi à la place (cette option désactive la feuille de style avec ces navigateurs) :
<style type="text/css" media="all">@import "style.css";</style>
Le tour est joué !
Si vous désirez générer simplement une feuille de style un peu plus fournie, un générateur de feuille de style est à disposition.
Note à propos du média
Il est précisé media="all" dans les attributs de la balise style. Cela indique que cette feuille ne sera lisible par tous les types de médias (écrans, TV, imprimante...). Pour une feuille de style lisible seulement avec des écrans, on spécifiera media="screen", pour une feuille de style réservée à l'impression, ce sera média="print".
Pour plus de détails sur tous les médias déclarables, consultez ces spécifications CSS 2.1 sur les types de médias reconnus.
Mettre en forme un texte en CSS
Pour une majorité de sites web, le principal contenu est sous forme textuelle. Si ce texte est mal formaté, peu lisible, le message ne peut évidemment pas passer quelque soit sa qualité.
Il est donc très important de bien choisir ses polices de caractères, leurs couleurs, leurs tailles, etc.
Comment ça marche, quels sont les pièges à éviter ?
Au
...