Accueil > Manip’s > CSS > 3- Feuille de Style interne
CSS
3- Feuille de Style interne
HTML/Feuille de Style
dimanche 1er janvier 2006, par
Le Cascading Style Sheet (CSS)
ou Style de Feuille en Cascade (qui semble plus exact que "Feuille de Style en Cascade")Est un style d'écriture HTML intelligent adapté à la fonction publique
- On bosse un peu au début pour comprendre comment ça marche
- et ensuite on attend la retraite derrière le radiateur...
Nb: Fonction Publique est à prendre bien sur dans le sens de "Servant à la Publication sur le Net" (évidemment)
- En plus clair il suffit de bien baliser son document HTML dans un 1er temps (H1,H2,H3,P,QUOTE, CODE, CITE etc...) en laissant toutes les balises dans leur style par défaut
- Puis dans un second temps de définir une "Feuille de Style" qui va redessiner automatiquement toutes les balises selon la règle énoncée...
- Ce qui est la définition du "Cascadind Style", ou Style en Cascade, (Feuille de Style devant en fait être compris comme "Enoncé des Règles de Style" (RULES) pour le document.
Les Règles du Style en Cascade sont donc énoncées dans l'entête du document
Soit un document HTML
- <HTML> </HTML>
Composé d'une entête et d'un corps
<HTML><HEAD></HEAD>
<BODY></BODY>
</HTML>
Je place dans l'entête un espace
réservé pour mes "Règles de Style
Cascadantes"
<HTML>
<HEAD>
<BODY></BODY>
<STYLE> ... </STYLE>
</HEAD>
</HTML>
Les 5 règles Principales définissant le Style d'une Balise Textuelle sont :
font-family
- Famille de la Fonte
- Synonyme : POLICE utilisée
- Exemple : Arial, Times, Verdana
- Un choix de plusieurs Polices peut être suggéré, mais seule la première sur le navigateur sera utilisée
font-size
- Taille
de Fonte
- Exprimée en Points, symbole PT
- Exemple 12pt = standard, 26pt grande, 72pt énorme.
- Si l'on veut simplement augmenter ou diminuer d'une taille
la valeur
attribuée par le système par défaut
- On peut utiliser les constantes symbolique small et big
- Exemples
- font-size: small diminue d'un cran
- font-size: big augmente
color
- Couleur de la Fonte
- Exprimée
sous la forme d'un Nombre
(précédé d'un
dièse)
- il suffit de mélanger les 3 fondamentales (Rouge+Vert+Bleu) en Hexadécimal
- Ou
sous forme du Nom Réservé
Symbolique de la
couleur
- Ce qui est plus simple
- Par exemple
- Sachant que la Touche (au pinceau virtuel) de couleur est codée sur 2 octets et peut aller de Zéro (rien) à 255 (saturation maxi)
- Sachant que Zéro en hexadécimal
se
dit #00 et 255
#FF
- Le Rouge => se dit #FF0000 ou #FF
- Le Vert => se dit #00FF00 ou #00FF
- Et le Bleu => se dit #0000FF
- En langage symbolique c'est encore plus simple
- Rouge se dit Red
- Le Bleu, Blue
- Et je vous laisse deviner Vert = .. ?? => toutfaux car Green c'est ça (#008000)
- En
programmation avancée des couleurs,
- HTML-CSS reconnaît la fonction RGB() Red-Green-Blue,
- qui admet 3 arguments,
- la touche de rouge,
- la touche de vert
- et la touche de bleu séparés par des virgules, on ne peut pas faire plus simple,
- Et qui peuvent s'exprimer en valeur absolue
- Par exemple Rouge = color : rgb (255,0,0)
- Mais aussi en valeur relative
- Par exemple color : rgb ( 80%, 80%, 100%) donne une espèce de bleu clair...
- (Puisque rgb(100%,100%,100%) est la définition chromatique du BLANC = toutes les couleurs à fond les manettes)
background-color
- Définit de la même façon la
couleur du
fond
- Par exemple lettre blanche sur fond noir
- color : white; background-color : black ;
text-align
- Définit l'alignement
du texte
- left par définition à gauche
- On retrouve les classiques Right et Center
- La nouveauté est dans le Justify qui aligne et à droite et à gauche
3 paramètres plus avancés
font-weight
- Poids de la fonte (notion de graisse)
- Se résume à font-weight : bold; pour style Gras et rien pour style Normal
font-style
- Pour
introduire un texte en Italique
- font-style:italic;
text-decoration
- Pour une présentation plus subtile
- comme souligné = underline
- Ou barré = line-through (par exemple dans signaler un article manquant ou un membre exclu)
On peut se demander s'il n'eut pas été plus simple de tout concentrer dans le Text-Deco (mais il devait sans doute y avoir une raison ou un gars de L'ENA qui est passé dans le consortium...)
EXEMPLES
Sans Style ->
Avec Style ->
CODES DES STYLES PRESENTES
<style type="text/css">
h1 {
font-family:arial;
font-size:36pt;
font-weight:bold;
color:rgb(80%,80%,100%);
background-color:blue;
}
h2 {
font-family:courrier;
font-size:24pt;
color:white;
background-color:black;
}
h3 {
font-family:times;
font-size:12pt;
font-style:italic;
color:blue;
background-color:snow;
}
</style>
