Les premières déclarations
de texte et des couleurs (CSS)
Toujours, avec le principe du sélecteur et de la déclaration contenant propriété et sa valeur;
voici quelques déclaration (CSS) qui permettent d'aborder le problème sereinement.
Le texte:
font-weight:bold;
veut dire : épaisseur caractère ="gras";
ou
font-weight:normal;
veut dire épaisseur caractère ="normal";
Style
font-style:italic;
veut dire style de caractère="italic"
ou encore
font-style:normal;
style de caractère="normal"
Taille
font-size:22px;
taille de caractère="22px"
Notez que la taille est précisée en pixel, c'est "l'unitée" la plus répandu, Il existe également le "em", mais je vous conseil plutôt le pixel comme unité de mesure, alors autant rester sur cette base...
Décoration
text-decoration: none;
décoration du texte="aucune";
text-decoration: underline;
décoration du texte="souligné";
Alignement
text-align: center;
alignement du texte="au centre"
text-align: left;
alignement du texte="à gauche"
text-align: right;
alignement du texte="à droite"
text-align: justify;
alignement du texte="justifié"
Couleurs
Il existe deux façon de coder des couleurs soit en mode de langue anglaise ou en corespondance: Voici en partie le code en langue anglaise:
color: red;
texte de couleur="rouge"
color: green;
texte de couleur="vert"
color: pink;
texte de couleur="rose"
color: black;
texte de couleur="noire"
color: blue;
texte de couleur="bleu"
Notez, comme dit précédement que l'on peut aussi utiliser une palette plus importante de couleur en hexadécimal. En voici un échantillon.
la syntaxe est la suivante:
color: #000000;
couleur="dièse,zéro,zéro,zéro,zéro,zéro,zéro"
ce qui donne :
texte de couleur="noir";
Les couleurs de correspondance:
#808080; Gris 1
#999999; Gris 2
#A0A0A4; Gris 3
#C0C0C0; Gris 4
#FFFBF0; Gris 5
#FFFFFF; Gris 6
#660000; Rouge 1
#663300; Rouge 2
#808000; Rouge 3
#006600; Vert 4
#003333; Vert 5
#000099; Vert 6
#000066; Bleu 7
#330066; Bleu 8
#660033; Bleu 9
#800000; Rouge 10
#993300; Rouge 11
#996600; Rouge 12
#008000; Vert 13
#006666; Vert 14
#0000FF; Vert 15
#000080; Bleu 16
#660099; Bleu 17
#CC0099; Bleu 18
#990000; Rouge 19
#CC6600; Rouge 20
#CC9900; Rouge 21
#009900; Vert 22
#008080; Vert 23
#0066FF; Vert 24
#003399; Bleu 25
#9900CC; Bleu 26
#CC0099; Bleu 27
#CC0000; Rouge 28
#FF6600; Rouge 29
#FFCC00; Rouge 30
#00CC00; Vert 31
#009999; Vert 32
#0099FF; Vert 33
#0033CC; Bleu 34
#CC00FF; Bleu 35
#FF00CC; Bleu 36
#FF0000; Rouge 37
#FF6666; Rouge 38
#FFFF00; Rouge 39
#00FF00; Vert 40
#00CCCC; Vert 41
#00CCFF; Vert 42
#3366FF; Bleu 43
#CC33FF; Bleu 44
#FF00FF; Bleu 45
#FF6666; Rouge 46
#FF9900; Rouge 47
#FFFF66; Rouge 48
#66FF66; Vert 49
#66CCCC; Vert 50
#66FFFF; Vert 51
#3399FF; Bleu 52
#CC99FF; Bleu 53
#FF99FF; Bleu 54
#FF9999; Rouge 55
#FF9966; Rouge 56
#FFFF99; Rouge 57
#99FF99; Vert 58
#66FFCC; Vert 59
#99FFFF; Vert 60
#66CCFF; Bleu 61
#CC99FF; Bleu 62
#FF99FF; Bleu 63
#FFCCCC; Rouge 64
#FFCC99; Rouge 65
#FFFFCC; Rouge 66
#CCFFCC; Vert 67
#99FFCC; Vert 68
#CCFFFF; Vert 69
#99CCFF; Bleu 70
#CCCCFF; Bleu 71
#FFCCFF; Bleu 72
Lors de leur utilisation veiller au point virgule après la valeur, c'est impératif.
Donc, voici un exemple complet à insérer dans une page html
<!DOCTYPE html>
<html lang="fr" />
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="terminal-media" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Ma page</title>
</head>
<body>
<p style="presentation"> Culture and Information with films, comic book, X-sports, Electro Sounds & Videos, Music articles, a big Blog-Machine, Photo and 3D Images and more <p/>
</body>
</html>
Donc ici, le fichier html avec le texte en question et son sélecteur (en anglais).
Et voici dans un fichier style.css le séléecteur, les propriétés et les déclarations.
p { color: #00CCFF; }
Votre texte est donc de cette couleur dans son intégralité.
Pseudo-classe de paragraphe
Elle permet de définir une taille pour la première et uniquement la première lettre d'un paragraphe.
.lettrage:first-letter { margin-right: 5px;
font-size: 36px; }
Insérer un contenu
Les pseudos-classes after et before permettent d'insérer un contenu avant ou après une balise avec l'aide de content qui détermine le contenu.
h1:before {content: url (arrow.gif); }
ou
h1:after {content: url (xml.gif); }
Dans cette exemple le contenu est une image de petite taille, arrow.gif; mais il faut préciser le chemin.
|