[CSS#1] Les bases

Sujet: [CSS#1] Les bases Juillet 29th 2008, 10:21 am

Introduction
Ce tuto est de moi, d'ailleurs ça se voit, j'explique plutôt mal ^^ donc si vous avez des questions, n'hésitez pas Wink

1° CSS, qu'est-ce que c'est ?
Peut importe ce que ce sigle signifie, le plus important, c'est de savoir à quoi il sert et comment s'en servir.
Une page CSS que l'on appel généralement "feuille de style" permet la mise en page de nos documents HTML. Oui, mais, me direz-vous, à quoi ça sert de créer un fichier de plus alors qu'on se débrouille très bien avec nos pages HTML ? Le CSS a plusieurs avantages, le plus important est très certainement lors de la mise en place d'une nouvelle version sur votre site, il vous suffit de modifier votre feuille de style sans avoir à rouvrir toutes vos pages HTML. En plus de cela, le CSS permet de nombreuses petites choses très zoulies que nous verrons dans d'autres tutos.

2° Comment qu'on fait ce truc-là ?
J'y viens, j'y viens. ^^
Tout d'abord, ouvrez votre bloc-note ou votre éditeur HTML s'il a la chance de supporter le CSS. Ensuite, copiez-y ce code :

Code:: body {
color:#000000;
font-size:10pt;
font-family:arial narrow;
line-height: 15px;
margin-top:0px;
background-color:#FFFFFF;
}

a:link {
color: #1E7FCB;
text-decoration: none;
}

a:visited {
color: #1E7FCB;
text-decoration: none;
}

a:hover {
color: #3A8EBA;
text-decoration: none;

}
a:active {
color: #1E7FCB;
text-decoration: none;
}

On va dire que c'est le minimum que l'on peut mettre dans une feuille de style.
Bien, maintenant, quelques petites explications s'imposent. On va donc reprendre tout ça dans l'ordre.

body {

les caractéristiques qui suivent s'appliqueront entre les balises <body> de votre page HTML.
color:#000000;

il s'agit de la couleur du texte normal.
font-size:10pt;

il s'agit de la taille de la police de ce même texte (en px, %, em...).
font-family:arial narrow;

il s'agit de la police, en mettant plusieurs noms de polices (séparées par des virgules), le navigateur de votre visiteur choisira la seconde s'il n'a pas la première, etc...
line-height: 15px;

il s'agit de la hauteur des lignes.
margin-top:0px;

il s'agit de la marge à partir du haut.
background-color:#FFFFFF;

il s'agit de la couleur du fond de la page.
}

Passons maintenant aux liens. On va faire ça rapidement, je vous expliquerai comment faire quelques trucs sympas dans d'autres tutos.

a:link

le lien normal.
a:visited

le lien déjà visité.
a:hover

le lien au survol de la souris.
a:active

le lien qu'on vient de cliquer.

3° Comment ajouter des caractéristiques ?
On en est pas vraiment encore là, mais il faut savoir certaines choses. Ca se présente toujours (ou très très souvent) comme ça dans une feuille de style :
nom-de-la-balise {
type-de-caractéristique: nom-de-la-caractéristique;
}
Il est important de ne rien oublié si on veut que ça marche Wink

4° Comment l'installer dans nos pages ?
Pour l'installer dans une page HTML, rien de plus simple, il suffit de sauvergarder votre page en .css (en général on l'appel style.css) et d'insérer ce code entre les balises <head> de vos pages :

Code:: <link rel="stylesheet" type="text/css" href="URL DE VOTRE FEUILLE DE STYLE">

Invité

Je me permet de continuer ton tuto Jeannie

5° Quelques exemples que vous pouvez configuré

Code:: a:hover
{text-decoration:none;
font-weight:bold;
cursor:default;
color: #E2B9CB;
letter-spacing:3px;
}

Avec ce code lorsque vous passerez votre souris sur un lien le lien s'espacera

Code:: a:hover{
color:#C2C2C2;
filter:blur(add="0",direction="180",strength="2");
height:0;
}

Avec ce code lorsque vous passerez votre souris sur un lien le lien se brouillera un peu

Code:: h1
{
font-size: 18px;
COLOR: #5A5B5F;
background-image:url('http://img384.imageshack.us/img384/3193/textur10fl8lr6.jpg');
text-align:center;}

Avec ce code votre titre 1 sera gros de 18 pixel et aurra derrière un arrière plan (ici https://2img.net/r/ihimizer/img384/3193/textur10fl8lr6.jpg)

6° Le curseur (la souris)

Avec le CSS vous pouvez modifié votre curseur. Pour cela rien de plus simple. Il suffit de mettre cursor suivit de la caractéristique

Exemple

Code:: a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #C0C0C0;
cursor:crosshair;

}
a:active {
color: #000000;

}

Donc:
Cursor + hand (une main)
default (la souris par défaut de votre ordi)
crosshair (une croix)
wait (un sablier)
help (la souris par défaut de votre ordi + un ?)
move
text (le curseur quand cous tapez quelque chose sous word)
ne-resize
se-resize
n-resize
e-resize
s-resize
w-resize

Sujet: Re: [CSS#1] Les bases Juillet 29th 2008, 4:04 pm

Je voulais parler des effets dans un tuto distinct, mais c'est pas grave [CSS#1] Les bases 719523

Sujet: Re: [CSS#1] Les bases Juillet 30th 2008, 12:41 pm

Ben on peut mettre le tuto de Lalita dans un nouveau sujet, non ? scratch

Sinon c'est trop bien les filles ce que vous faites !!! [CSS#1] Les bases 491318

Je ne connais que le strict minimum du CSS alors grace à vous je vais m'y pencher plus sérieusement !!! [CSS#1] Les bases 491318

Sujet: Re: [CSS#1] Les bases Juillet 30th 2008, 12:46 pm

Natoune a écrit:: Ben on peut mettre le tuto de Lalita dans un nouveau sujet, non ?

Finalement, je trouve ça bien qu'elle ait mis quelques exemples [CSS#1] Les bases 57777

Ca peut donner envie aux gens de se mettre au CSS et puis on peut reparler de ces effets un peu plus en détail dans d'autres tutos ^^

Sujet: Re: [CSS#1] Les bases Juillet 30th 2008, 12:51 pm

Oki !

Ben en tous cas ça me donne envie !!! ^^