Je fais un petit tuto sur le css pour ceux qui ont suivi le tuto html. Allez courage c'est le plus intéressant
Alors le principal à retenir : le html sert pour le contenu de votre site et le css la forme. C'est à dire qu'avec le html je vais mettre
<html> <body> <p> Salut, je met du texte </p> </body> </html>
Et on va voir sur ce tuto comment mettre en forme ce texte (en couleur, mettre une image de fond etc..)
Un fichier css (avec bloque note ou notepad++) se présente sous la forme suivante :
labalise
{
propriété: lavaleur;
propriété2: autrevaleur;
}
uneautrebalise
{
propriété: valeur;
}Avec labalise et uneautrebalise les balises auxquelles on veut modifier la forme donc appliquer du css.
Pour commencer vous allez créer un nouveau fichier avec bloque note puis l'enregistrer avec l'extension .css au même endroit où se trouve votre fichier html.
Dans votre html vous tapez dans <head> cette balise :
<link rel="stylesheet" media="screen" type="text/css" title="titreducss" href="fichier.css" />
Avec fichier.css le nom de votre fichier css que vous avez enregistré. le titre n'a pas d'importance majeur donc mettez ce que vous voulez.
(on remarque que la balise link est une balise seul sous la forme <balise />)
Alors pour appliquer du css à une balise on met simplement le nom de la balise puis on encadre les propriétés avec { }. On met toujours : après une propriété et; après la valeur.
Par exemple ici je veux mettre tous mes paragraphes en rouge, je vais donc mettre
p
{
color: red;
}Biensur, tout est en anglais >,< !
Vous allez me dire que vous avez plein de paragraphes et que vous voulez appliquer du css qu'à un seul paragraphe.
Donc là il faut différencier le paragraphe que vous allez mettre en couleur, pour cela dans votre html on va insérer l'attribut class
<html> <head> <link rel="stylesheet" media="screen" type="text/css" title="titreducss" href="fichier.css" /> </head> <body> <p> salut je suis un paragraphe </p> <p class="toto"> hé moi aussi </p> </body> </html>
Biensur votre page html sera bien plus complète. Pour appliquer du css à notre attribut class nommé toto, on met un point devant.
On met toujours un point derrière un attribut et "rien" derrière une balise
.toto
{
color: yellow;
}On aura bien 'salut je suis un paragraphe' sans css donc en noir par défaut et 'hé moi aussi' en jaune.
Rien qu'avec ça on peut s'amuser il suffit de connaître quelques autres balises indispensables, la liste est longue donc on verra plus tard ou si vous êtes impatient je ferais bientôt un mémo que j'ajouterai ici.
C'est bien beau tout ça mais le blanc derrière c'est un peu fade. On peut mettre une autre couleur en fond avec la propriété background-color qu'on applique à la balise body, mais vous pouvez très bien mettre du fond sur un paragraphe mais c'est moins courant
body
{
background-color: green;
}Super on a du vert en fond de page ! Oui je sais c'est un peu moche ! Donc pour insérer une image en fond on utilise background-image, logique non ?
Mettez votre image au même endroit que votre html et css puis vous mettez comme valeur url("votreimage.jpg") Il faut mettre les guillemets.
Ecrivez la bonne extension !
body
{
background-image: url("bobmarley.jpg")
}Il y a d'autres valeurs qu'on peut appliquer à background qui seront dans le mémo
Pour les couleurs (texte ou fond) on utilise généralement et c'est bien pratique le RGB (red green blue)
Comment ça marche ?
Tout d'abord je vous incite à installer la boite à couleur.
Dans l'onglet visuel vous choisissez votre couleur puis revenez au premier onglet (RGB ou RVB, green/vert) puis vous notez dans votre code la valeur de chaque couleur dans l'ordre : rouge, vert, bleu.
On a choisi du bleu ciel donc on a un truc du genre 190 190 255. (255 est le maximum)
On sépare par des virgules.
p
{
color: rgb(190,190,255);
}Voila
Donc je vais faire un mémo pour vous montrez les principales propriétés css et pour que vous y retournez jeter un oeil si vous avez un trou de mémoire
Ce message a été modifié par KelT5362 - 26 septembre 2009 - 17:22.
