III. Premiers pas en cssBon alors ça va être un peu une partie "en vrac" je vais essayer au maximum d'être claire :s
N'hésitez pas à poster des questions dans le topic concerné si vous ne comprenez pas quelque chose ^^
Les commentairesAvant de commencer le css à proprement parler, sachez qu'en css aussi on peut faire des commentaires ! (à savoir du texte qui ne sera pas affiché par le navigateur et qui vous permettra de vous repérer dans votre code).
Mais attention, on n'utilise pas les mêmes balises qu'en xhtml ! Beh oui, ça serait trop simple
Voilà les balises en css :
- Code:
-
/* mon super commentaireuhhhhhhhhh */
Et voilà, savoir mettre des commentaires vous sera certainement très utile x)
Présentation d'une instructionAlors, on va dire au navigateur que quand il rencontre telle ou telle balise, il va devoir afficher quelque chose de particulier. On appelle ça une instruction.
Dans chaque instruction, il va y avoir 3 choses : la balise en question, la propriété (exemple : la taille, la couleur, etc) et la valeur (exemple : vert, rouge, orange...)
Voilà comment ça va se présenter concrètement :
- Code:
-
nomdelabalise
{
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
On commence toujours par dire le nom de la balise, puis on met entre accolades le contenu ( c'est-à-dire { et } pour ceux qui ne le savent pas lool). Ensuite, on met ":" après la propriété, et un ";" après la valeur, pour indiquer que c'est terminé.
On se resservira beaucoup de ce ";" dans d'autres langages, notamment dans le php et le javascript
Notre première instruction !On va prendre un truc tout simple ! On va s'occuper de la balise <h1> qui sert à mettre un texte en évidence (par exemple pour un titre ou un sous-titre).
Imaginons qu'on veuille définir la police, la taille (15 pixels), la couleur (bleu) et mettre ce texte en gras ! En xhtml ça donnerait quelque chose d'assez long et fastidieux, alors imaginez si vous deviez le faire à chaque balise oO Quand je vous disais que le css faisait gagner du temps...
Voilà notre code :
- Code:
-
h1 {
font-family: Verdana, Arial, Helvetica, "sans-serif";
font-size: 15px;
color: #1955A3;
font-weight: bold;
}
Explications du code :
- la structure en elle-même ne doit pas vous poser de problèmes, on vient juste de la voir ^^
- concernant la taille, on utilise font-size (qui signifie taille de l'écriture hihi) : n'oubliez pas de ne laisser aucun espace entre le nombre et le "px" (qui signifie 'pixels'), sinon ça ne va pas marcher !
- pour la couleur, elle peut s'écrire soit en xhtml (#1955A3) ou en anglais (blue)
- "bold" signifie "gras" (juste dans ce contexte là hein, si vous dites à quelqu'un qu'il est gras, n'allez pas lui dire "you are bold !" mdr ! Bref, revenons au cours :p)
- et enfin, concernant les polices, peut-être vous demandez-vous pourquoi j'en ai mis plusieurs ? En fait, la première police écrite sera celle affichée par l'ordinateur. Seulement, si l'ordinateur de l'internaute n'a pas cette police, il va afficher celle d'après, et ainsi de suite en fait ! C'est pour cela qu'il vaut mieux rester dans des polices "classiques" et qu'il faut en mettre plusieurs (au moins 3 ou 4), au cas où...
Les polices s'écrivent sans apostrophes ni rien, à quelques exceptions près ! Vous devez mettre des guillemets pour les polices qui : présentent un caractère spécial, ont un espace ou ont un tiret (comme c'est le cas là avec notre sans-serif)
![[tutoriel] apprendre le css Empty](https://2img.net/i/fa/empty.gif)
Lun 1 Juin - 11:44
