Le CSS (Cascading Style Sheets), (en français feuilles de style en cascade) est un langage informatique utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML.
L'un des objectifs majeurs de CSS est de proposer une stylisation indépendante de la structure du document.
Chapitre II: PREMIERS PAS EN CSS
En generale, on écrit le code CSS dans un fichier à part nommé fichier.css mais c'est possible de mettre notre feuille de style dans le même fichier que notre code html entre les balises
<STYLE></STYLE>.
Taper le CSS dans un fichier .css permet d'afficher vos pages plus rapidement que lorsque vous mettez le code CSS entre les balises
<HEAD></HEAD> de votre fichier html (rappelons dans ce cas qu'on écrit le code CSS entre des balises
<STYLE></STYLE>). ça permet aussi de proposer facilement plusieurs designsdifférents à vos visiteurs.
voici un exemple de feuille de style nommé feuilledestyle.css
body
{
background-color:CCCCCC;
}
A
{
font-family:verdana;
text-decoration:none;
color:white;
font-weight:bold;
}
.list
{
color: black;
font-weight:900;
font-size:10px;
font-family:arial;
}
TD
{
font-family:verdana;
font-size:8px;
color:black;
}
.search
{
color: black;
font-family:arial;
font-size:16px;
font-weight:bold;
}
c'est pas tout, vous devez maintenant ajouter cette ligne dans votre fichier html!!
<link rel="stylesheet" media="screen" type="text/css" title="feuille de style" href="feuilledestyle.css" />
entre les balises <HEAD></HEAD> .
Si vous voulez mettre votre code css dans le même fichier que votre code html, voici un exemple!!
Chapitre III: FORMATAGE DU TEXTE EN CSS
La formatage du texte n'a rien avoir avec le formatage de disque dûr et donc la destruction des données.
La formatage du texte c'est tout simplement de modifier la taille du texte, changer la police, aligner le texte etc...
La taille du texte
En utilisant le CSS on peut indiquer la taille du texte de différentes manières (avec bien sûre la propriété font-size) :
En pixel :
c'est une façon très précise d'indiquer la taille du texte. C'est àvous de préciser combien de pixels doit
faire votre texte.
Pour avoir un texte de 12 pixels de hauteur par exemple, vous devez tout simplement écrire dans votrefeuille de style :
font-size :12px;
voici un exemple d'utilisation de cette propriété css sur vos paragraphes!!
p
{
font-size:10px;
}
un autre exemple d'utilisation maintenant qui influe sur les textes!!
h1
{
font-size :12px;
}
(vous pouvez ainsi reécrire cette ligne en utilisant h2, h3, h4...vous souvenez certainement de la balise <H1></H1> ne c'est pas!! ..je compte à vous vous êtes des grands maintenant!!
En donnant une valeur relative :
Donner une valeur relative c'est-à-dire écrire carrément "gros", "très gros", "petit", "minuscule", "majiscule"...
Mais, comme l'anglais toujours prédomine les autres langues!!, Voici la liste des différentes valeurs quevous pouvez mettre ainsi que leur
signification :
xx-small : minuscule
x-small : très petit
small : petit
medium : moyen
large : grand
x-large : très grand
xx-large : gigantesque
Voici un exemple qui explique tout ça!!
.minuscule
{
font-size: xx-small;
}
.petit
{
font-size: small;
}
.moyen
{
font-size: medium;
}
.grand
{
font-size: large;
}
En em :
L'em c'est une autre façon d'indiquer de manière relative la taille du texte.
Ne pas paniquer c'est pas comlpiqué de tout cet em.
je m'explique :
cet em ne fait que préciser la taille du texte par rapport à la taille normale de la police, cela veut dire quoi?!!
tout siplement, lorsqu'on tape ce code CSS :
.grand_em
{
font-size: 1.5em;
}
le texte affiché par notre navigateur sera "une fois et demi" plus grand que la taille normale, c'est simple non!!
donc pour augmenter la taille (toujours par rapport à la taille normale), on a qu'augmenter un peu notre em (1.1em, 1.2em,....).
et pour diminuer la taille on a qu'a diminuer notre em (0.9em, 0.8em,...).
En pourcentage :
En fait ça ressemble beacoup à l'em .
donc je vai expliquer brièvement :
la taille normaille c'est 100%, par logique une taille inferieure doit être inferieure à 100% et une taillesuperieure à la taille normale doit obligatoirement être superieure à 100%.
Polices
L'utilisation des polices pose un petit problème!!
vous disez, peut être, comment ça?!!
si par exemple vous souhaitez utiliser une police comme lucida calligraphy (que j'utilise pour afficher mon logo "tls" en haut à gauche de cette page!!)
ça risque de ne pas s'afficher si un utilisateur de votre site n'a pas cette même police donc son navigateur va prendre une police par défaut!!
Certes, les polices les plus connues sont "Times New Roman", "Arial", et bien d'autres. mais sous Mac de
la société Apple c'est "Time" et pas "Times New Roman", vous voyez!!
Mais en fait c'est pas ça le but principale de notre cours, passons donc au pratique!!
La propriété CSS qui permet d'indiquer la police est font-family .
Maintenant, je vai vous expliquer comment resoudre ces problèmes d'affichage des polices!!!
c'est simple en fait, voilà!!
font-family: Impact, Arial, Verdana, serif;
Ce code signifie, demander de votre navigateur (ou bien le navigateur d'un autre utilisateur !!) d'utiliser la police impact sinon si ça n'existe pas d'utiliser arial, sinon verdana sinonnnn d'utiliser une police standard "serif"!!
c'est simple, non!!
Alignement
Avec le langage CSS on peut effectuer tous les alignement possible avec, bien sûre, la propriété text-align. on peu donc indiquer l'alignement desiré dans notre feuille de style.
voici la liste des alignement possible avec le langage CSS :
text-align: left; le texte sera aligné à gauche (et comme l'anglais prédomine, c'est l'alignement par défaut!!).
text-align: center; le texte sera centré.
text-align: right; le texte sera aligné à droite.
text-align: justify; le texte sera "justifié".
Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes.
en fait ce n'est pas le cas pour moi!!!
On passe maintenant à un type particulier de l'alignement,...l'identation.
c'est quoi l'identation?!!
en fait, ce n'est qu'un type d'alignement qui a pour but de laisser de l'espace à chaque début de paragraphe, ça peut
améliorer la lisibilité.
certainement vous avez besoin d'un petit exemple, et oui vous êtes entrain de lire cet exemple.en fait cette paragraphe
est écrite avec ce type d'alignement (vous remarquez qu'il y'ade l'espace au début !! non?!)
et voici comment ça se fait en pratique!!
p
{
text-indent: 30px; /* laisser un espace de 30 pixels sur la droite */
text-align: justify; /* aligner le texte par la méthode "justifié" */
}
Effets de style
voici maintenant quelques effets de style qu'on peut les attribuer à nos textes!!
écrire en italique :
h1
{
font-style: italic;
}
écrire en gras :
p
{
font-weight: bold;
}
en majiscule :
c'est un peu long ça!! donc patienter un peu, je vous donnerai les codes CSS plus tard!!
small-caps : text en en petites capitales.
normal : par défaut.
uppercase : texte en majuscules.
lowercase : texte en minuscules.
capitalize : la première lettre de chaque mot en majuscules.
none :par défaut.
c'est pas trop long, non?!
On prend quelques exemples.
p
{
font-variant: small-caps;
}
h1
{
text-transform: capitalize;
}
Remarque :
on utilise la propriété text-variant avec small-caps et normal.
Avec uppercase, lowercase, capitalize et none on utilise la propriété text-transform.
Décoration
voici l'effet de la propriété text-decoration.
underline : souligné.
line-through : barré.
overline : ligne au-dessus.
blink : clignotant. sauf sous internet explorer ça ne clignote plus :hehe: en fait l'effet blink ne fonctionne
pas sous IE mais ça fonctionne parfaitement sous les autres navigateurs!!
none : normal (par défaut).
un petit exemple.
.menu
{
avec les couleurs on a deux soit d'utiliser le nom de la couleur soit le code hexadécimale de la couleur.
la propriété CSS est (par logique) color
si je veut écrire une paragraphe en blanc (dans mon fichier html bien sûre!!) j'ai qu'écrire ce code:
h1
{
color: white;
}
ou bien en hexadécimale...
h1
{
color: #FFFFFF;
}
dans votre fichier html vous n'avez qu'utiliser la balise <h1></h1> (utilisé dans notre code CSS) pour afficher un texte en blanc!
il existe une autre méthode appelée RGB (toujours en anglais red-green-blue), mais je ne vois pas que c'est très simple pour les débutants :hehe:
cette méthode consiste à utilise un niveau bien précis de chaque couleur de base (il y'en a trois!!)
et donc dans notre feuille de style on écrit ceci :
h1
{
color: rgb(243,65,243);
}
Les nombres entre parenthèses peuvent varier entre 0 et 255.
Le fond
Allons aux couleurs du fonds ou bien background-color en anglais (et en CSS!!), c'est en fait une autre propriété CSS qui s'intéresse à la couleur du fond.
body
{
background-color: black;
}
et donc en utilisant la balise <BODY></BODY> (c'est indispensable en html :hehe:) notre feuille de style CSS va intervenir pour afficher en noir le fond de notre site .
Restons avec le fond un peu mais cette fois on va passer aux images du fond..et voilà comment l'utiliser dans notre feuille de style.
body
{
background-image: url("../monimage.jpg");
}
On va jouer un peu sur notre image de fond..
le CSS nous permet soit de fixer l'image de fond soit de la rendre défilante option par défaut)
fixed : l'image de fond reste fixe.
scroll : l'image de fond défile avec le texte.
Et voilà!!
body
{
background-image: url("../monimage.jpg");
background-attachment: fixed;
} Il nous reste 2 propriétés..
no-repeat : L'image sera donc unique sur la page.pas de répétition.
repeat-x : le fond sera répété uniquement sur la première ligne , suiavnt x( horizontalement!).
repeat-y : le fond sera répété uniquement sur la première colonne, suivant y (verticalement).
repeat : par défaut. répétition du fond.
et voilà!
body
{
background-image: url("../monimage.jpg");
background-repeat: repeat-x;
}
passons ) la deuxième et dernière propriété ..c'est background-position avec laquelle on va positionner notre image de fond.
top :
bottom :
left :
right :
center :
voici ce dernier exemple!
body
{
background-image: url("../monbackground.gif");
background-position: top right;
}
Remarque :
vous pouvez combiner les valeurs sans aucune problème (à fin de faciliter le travail)..comme dans cet exemple
body
{
background: no-repeat top right fixed;
}
avec des espaces entre les differents valeurs que peut prendre la propriété(ici un exemple pour background).
Les liens
des liens encore ?!!!
et bon oui !! maintenant on va voir quelques opérations qu'on peut les effectuer aux liens.
par défaut les liens sont soulignés et le couleur par défaut est le bleu mais on peut, quand même, éliminer ce soulignement, comment ?!! Rien de plus simple, c'est la propriété text-decoration: none;
et voilà le code CSS approprié :
a
{
text-decoration: none;
color: red;
}
et comme ça les liens affichés par votre navigateur ne sont plus soulignés !!(vous pouvez choisir n'importe quelle couleur, vous n'êtes pas obligés d'utiliser le rouge !!)
vous voyez certainement lorsque vous faites passer la souris sur "home" par exemple le couleur change du bleu foncé au bleu clair !! non ?!!
comment faire ça ?!!
c'est en fait un simple code CSS qui s'occupe de tout ça.
a: hover
{
}
vous remarquez qu'il y'a pas de ";" après le "hover" !!
donc, au passage de souris au dessus de votre lien il est possible d'effectuer un changement de couleur, un soulignement...
a
{
text-decoration: none;
color: black;
}
a:hover
{
text-decoration: underline;
color: green;
}
on va expliquer un peu notre code CSS maintenant.
le couleur de votre lien (sans faire passer la souris au dessus !!) est noir (black) et le lien est non souligné.
au passage de la souris le lien deviendra rouge (red) et souligné (quelle magie de CSS !!)
vous pouvez appliquer ce "hover" à n'importe quelle balise (comme la balise <P></P> pour les paragraphes)
Et c'est tout pour le CSS, esperons qu'on a bien expliqué ses differentes propriétés.
