Bases CSS - Cours élémentaire

Sujet: Bases CSS - Cours élémentaire Lun 07 Sep 2009, 15:36

Bases CSS - Cours élémentaire

Le présent cours vous permettra d'acquérir des connaissances générales en CSS et/ou HTML. Ces deux langages informatiques sont mis à l'honneur sur CSSActif et le forum se fait un plaisir de vous offrir gratuitement ces formations. Sachez que nos cours constituent une excellente base pour quiconque voudrait approfondir davantage ses connaissances par la suite et profiter au maximum de la puissance du CSS/xHTML pour ses réalisations web futures.

Table des matières

Les exercices théoriques

Chaque chapitre se termine par un exercice théorique concernant la matière abordée durant ledit chapitre. Leur importance est indéniable, toutefois, il n'est pas obligatoire de les compléter avant de passer au chapitre suivant, vous êtes grands et savez ce qu'il faut faire Wink

. Lorsque vous avez terminé un exercice, il doit être auto-corrigé dans cette section : Exercices d'entrainement. Ces travaux ne doivent pas m'être envoyés par MP.

Questions, commentaires & remarques

En parcourant les chapitres du cours, il se peut que vous vous posiez certaines questions directement reliées avec la matière abordée, ce n'est pas grave, c'est même normal. Sachez que, si la situation se présente, toutes vos questions pourront être postées dans le *Lève sa main* de la section. Un codeur, modérateur ou simplement quelqu'un qui connaît la réponse, vous répondra dans les plus brefs délais Wink

. Ce sujet accueillera aussi vos remarques et commentaires reliés au contenu du cours.

Sujet: Re: Bases CSS - Cours élémentaire Mer 09 Sep 2009, 22:30

Introduction au CSS

Le terme CSS est un acronyme pour ~~Counter Strike Source~~ Cascading Style Sheets, Feuilles de Style en Cascade en français. Il permet de modifier le style et la présentation d'une page HTML. En d'autres mots, c'est le code CSS qui indiquera la police utilisée pour les pages, les couleurs, les dimensions des tableaux etc.

Langage connexe

On sait déjà vaguement à quoi sert le CSS et tout ça devrait devenir plus clair dans cette partie, car on introduit ici un autre langage de description de documents web, essentiel au fonctionnement du CSS : le HTML. C'est le langage de base de la majeure partie des pages web que vous visitez ; c'est à partir de lui que les autres langages de description de documents web peuvent travailler. Le CSS n'échappe pas à cette règle, ni vous d'ailleurs Twisted Evil

Je m’égare, en gros le HTML définit la structure, le squelette de votre page, c'est avec lui que vous écrirez vos textes, créerez vos tableaux, afficherez des images etc. Le HTML peut aussi donner la couleur à votre texte et au fond, mais ça reste minimaliste, peu pratique et surtout déconseillé par les standards web actuels. C'est pourquoi le CSS est utilisé pour les sites : en plus de pouvoir modifier drastiquement le style de votre page, il peut être centralisé. Sous le choc

Je m'explique : imaginez coder un site tout en HTML, vous pouvez donner les couleurs de votre choix, ajouter une bordure à vos tableaux, etc., mais à chaque page que vous recréerez par la suite, il faudra réécrire toutes les mêmes informations pour donner le style, ce qui augmente le poids de vos pages, et si vous voulez changer de design, il vous faut repasser par chaque page, changer chaque couleur, modifier chaque police, c'est tout un boulot. Alors qu'à la place vous auriez pu utiliser un seul fichier CSS, lequel aurait défini les couleurs pour l'ensemble de votre site. Ensuite pour modifier votre design vous n'auriez eu qu'à changer les couleurs dans le code CSS et la modification aurait été appliquée sur toutes les pages de votre site beaucoup plus rapidement ! Ce n'est pas tout : avec le CSS vous pouvez arrondir les coins d'un tableau, changer l'opacité de certains éléments, donner une couleur différente aux liens. Ces effets ne peuvent être appliqués en HTML : il vous faut du CSS.

C'est ce que Forumactif fait en créant un seul code CSS appliqué à toutes les pages de votre forum. Peut-être ne vous en êtes-vous pas rendu compte, mais dans le menu "couleur" du panneau d'administration on vous donne le choix des couleurs pour le fond du forum, pour les cadres etc. En changeant une valeur là-dedans, vous modifiez le CSS de votre forum ! Forumactif a créé cette interface pour faciliter la tâche des administrateurs, c'est tout Calme

. Mais le défaut de cette interface est qu'elle vous prive de toute la puissance du CSS et ne vous permet que de changer les couleurs, finalement elle ne donne que la portion HTML du CSS. N'avez-vous jamais osé cliquer sur "Feuille de style CSS" dans l'onglet au-dessus du menu des couleurs ? Allez-y cliquez Twisted Evil

, il va falloir vous y résoudre.

Quoi ? Euh..

Vous ne savez pas du tout de quoi je parle ? Pas de problème, un tutoriel à été fait pour vous expliquer comment accéder à l'option en question: Comment placer un code CSS dans le style de son Forumactif ?. Donc pour résumer en une phrase ce que je viens de vous expliquer en 500 mots : le CSS permet de donner un style complet à votre forum ou à n'importe quelle page HTML.

Les outils

Cette partie sera moins longue que la précédente promis, c'est que quand je suis dans mon élan, c'est dur d'arrêter Embarassed

. Donc, les outils, il va vous en falloir. A priori, tout éditeur de texte simple (je pense ici à Notepad pour Windows) peut vous permettre de coder le CSS, vous pouvez même coder dans la boîte de texte de "Feuille de style CSS" dans le PA (panneau d'administration de Forumactif). Moi, en grand paresseux que je suis, j'utilise Dreamweaver CS4. Le logiciel est malheureusement payant et pas qu'un peu Sad

Il n'en est pas moins fantastique, faire du CSS avec ce logiciel est un vrai jeu d'enfant grace à l'autocomplétion : vous entrez les premières lettres d'une propriété (que nous verrons plus tard) et il vous donne les suites possibles, ainsi que toutes les valeurs (bientôt aussi) que peut prendre chaque propriété. J'imagine que peu d'entre vous sont disposés à payer pour ce logiciel, aussi vous ai-je déniché un autre logiciel (en français !) :

Téléchargement de la dernière version : Cliquer ici, puis sur "Notepad++ Installer" (Windows)

L'installation devrait se passer sans encombre laissez tout les paramètres par défaut, si vous rencontrez un problème, levez votre main Wink

.

Première ouverture de Notepad++, vous vous demandez sûrement pourquoi je vous ai recommandé ce logiciel. Son plus gros avantage (~~et son seul~~), c'est la coloration sélective des codes, mais pour que le logiciel colore vos CSS, il va falloir lui dire que le code donné est du CSS. Pour ce faire, rendez-vous dans Language > C > CSS. Ainsi le logiciel donnera une certaine couleur à chaque élément de votre code (prenez note qu'une fois le code copié ailleurs, les couleurs ne seront plus affichées), c'est nettement plus facile de démêler classes, propriétés et valeurs de cette façon (évidemment tout ces termes seront expliqués plus loin).

Edit de 'Christa : Il colore également en rouge les balises fermantes et ouvrantes d'un bloc quand vous posez votre curseur à côté (ce qui vous permet de voir si une balise est mal fermée), et un double clic sur un bout de texte (un nom de classe par exemple) vous permet d'en voir toutes les occurences dans votre document. Il peut aussi faire de l'auto-complétion (faites Ctrl+barre d'espace pendant que vous écrivez).

Syntaxe du code

C'est notre premier vrai "morceau" de CSS, contemplez quelques instants le titre, il marque le point où je vais commencer à utiliser la balise [ code ]. C'est ici que nous apprendrons "l'orthographe" du code ou comment votre CSS devra être structuré. D'abord, sachez qu'il existe trois façon d'appliquer le CSS dans une page :

CSS Externe : Je vous en ai parlé dans le "Langage connexe". C'est un document qui ne contient que du CSS, qui utilise l'extension de fichier .css (à la place de .doc, .txt ou .html, par exemple) et qui, pour être vraiment utile, doit être "appelé" par une page HTML. C'est la façon utilisée par Forumactif pour gérer le CSS de ses pages. Pour lier un CSS externe, on ajoute ce code dans l’entête ( <head> </head>) d’une page HTML :

Code:

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="mon_fichier_css.css" />

Ça, vous n’avez pas vraiment besoin de le savoir, sachant que Forumactif comporte à la base un code similaire pour appeler le CSS. Si vous avez à coder un site, c’est la méthode la plus pratique si on prend en considération les avantages spécifiés plus haut.
CSS Interne : Contrairement au CSS externe, le CSS interne n’est pas appelé dans l’entête d’une page HTML. L’entièreté du code CSS est placé entre les balises <head> et </head> de la page. Personnellement, je trouve que c’est la manière la moins pratique d’utiliser le CSS. Forumactif n’utilise pas cette méthode, mais tant qu’à faire un cours de CSS aussi bien vous la montrer :

Code:

<style type="text/css">

</style>
Style en ligne : la troisième méthode, consiste à inclure le code CSS directement dans une balise HTML, comme dans cet exemple : (on pourrait remplacer span par div, p etc.)

Code:

<span style="propriétés CSS"> Code HTML </span>

Cette méthode peut être utilisée partout, dans un contexte « Forumactivien ». Elle pourrait surtout vous être utile à l'intérieur des messages, mais ceci étant un cours basique, elle ne sera pas détaillée davantage. Son principal inconvénient est qu'il faudrait modifier manuellement la balise lors d’un changement de design ou alors utiliser les classes, autre sujet qui ne sera pas abordé ici.

Essentiellement, peu importe la méthode utilisée, le CSS reste du CSS, il se code exactement de la même manière dans les deux premiers cas, et légèrement différemment pour ce qui est du CSS embarqué.

Chaque feuille de style CSS est divisée en plusieurs règles CSS contenant un bloc de propriétés, lui-même précédé par un sélecteur (élément, classe ou identifiant (seuls les éléments seront abordés ici)). Chaque propriété du bloc est aussi accompagnée d'une valeur. Beaucoup de vocabulaire ici, mais concrètement ça veut dire quoi ? Euh..

Code:: element {
propriété1 : valeur ;
propriété2 : valeur ;
propriété3 : valeur ;
}

élément : C'est lui qui sera influencé par les propriétés du bloc de propriétés. On doit absolument le spécifier dans notre code, sans quoi les propriétés ne pourraient être appliquées. L'élément est un type de sélecteur parmi tant d'autre.
Règle : (ou bloc de propriétés) Elle contiendra toutes les propriétés que vous voulez appliquer à votre élément (et autre sélecteur) et doit être délimitée par des accolades ({,}).
Propriétés : Elles sont incluses entre les accolades ({,}) du bloc de propriétés et finissent toujours par deux-points (:), lesquels sont suivis par...
des valeurs : Pour faire simple, je dirais que les valeurs précisent l'effet des propriétés associées en leur disant ce qu'elles doivent faire. La propriété dit : « Changer la couleur du texte » et sa valeur pourra être "rouge", "bleu", "vert" par exemple. Les valeurs finissent toujours par un point-virgule (;)
déclaration : Il s'agit du couple propriété et valeur.

Exemple d'un groupement (vous n'avez pas besoin de savoir à quoi ça sert, essayer juste de repérer l'élément, les propriétés et les valeurs. Rien de difficile, elles ont été colorées).

Citation :

body {
background-repeat: no-repeat;
background-image: url('fond.jpg');
background-position: center;
background-attachment: scroll;
}

Ceci conclut l'introduction au CSS, j'espère ne pas vous avoir fait trop peur, j'ai fait la première partie très longue pour ~~tester votre persévérance~~, m'assurer que tous comprennent bien, sachant que ce sera essentiel pour la suite. Je crois que vous aurez assez de quelques jours pour tout lire et faire votre premier exercice sur la syntaxe du code qui suit.

Exercice 1 : Syntaxe du code

Spoiler:

Bonne chance Paix

Sujet: Re: Bases CSS - Cours élémentaire Lun 21 Sep 2009, 15:27

Les propriétés

Rappel :

Orange a écrit:

propriétés : Elles sont incluses entre les accolades ({,}) du bloc de propriétés, finissent toujours par un deux-points (:) et donnent le style à votre page.

Vous comprenez qu'elles seront au cœur même de votre code CSS : ce sont elles qui agissent réellement sur le style de votre forum (ou de tout autre page web). Il sera donc primordial de les apprendre le plus rapidement possible, ça vous sauvera énormément de temps plus tard. Ce n’est pas tout, vous devrez aussi connaître quel type de valeur peut être donné à chaque propriété. Donc, nous avons près de 50 propriétés basiques, qui peuvent chacune prendre en moyenne trois valeurs ce qui nous fait près de 150 possibilités à retenir ; évidemment ce n'est qu'une grossière estimation, mais aussi bien commencer tout de suite.

fond ~ background

Vous aurez remarqué que toutes les propriétés en CSS sont en anglais. Oh My God !

Si vous maîtrisez cet autre langage franchement plus complexe, ce sera certainement plus facile pour vous car les propriétés du CSS en disent beaucoup sur leur utilité. Prenons par exemple les propriétés pour le style du fond : elles commencent toutes par background- (fond en anglais, j’espère que je ne vous apprends rien) et après background, il y a un autre mot anglais qui vient préciser la propriété.

Attention : Je veux tout de suite mettre au clair quelque chose d’important ; quand on parle de fond, on ne parle pas uniquement du fond de la page. On peut parler du fond d’un tableau, d’un paragraphe et même d’une ligne de texte, oui c’est possible.

Sans plus attendre, je vous dévoile les propriétés pour le fond :

Propriétés	Description	Valeurs
background-image	Cette propriété vous permettra d'afficher une image sur le fond de vos éléments et classes.	url(URL) none*
background-color	Comme elle l'indique, la propriété donnera une couleur unie au fond de l'élément ou de la classe.	color-rgb color-hex color-name transparent*
background-attachment	Surtout utile pour le fond de la page, la propriété vous permettra de "fixer" l'image de fond. Ainsi, le fond ne bougera pas, il restera toujours à la même place, ce sont les tables du forum qui bougeront.	scroll* fixed
background-position	Cette propriété placera l'image de fond de votre site selon une position sur le fond de votre forum. L'effet n'est pas très visible sans "background-repeat".	top left* top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat	La propriété permet de gérer la répétition de l'image du fond.	repeat* repeat-x repeat-y no-repeat
background	Permet de réunir toutes les propriétés de fond en une seule.	background-color background-image background-repeat background-attachment background-position

* valeur (par défaut) lorsque la propriété n'est pas donnée.

Oui, certaines valeurs peuvent rester floues ; prenons par exemple « rbg », comme tel ça ne dit pas grand-chose. C’est pourquoi toutes les explications sur les valeurs seront données au prochain chapitre. Dire que je m’égare déjà du plan prévu, c’est tout moi ça Rire

. D’autres par contre sont faciles à mettre en place, « no-repeat » n’est pas bien difficile à comprendre Wink

.

texte ~ text

Les propriétés de texte commencent presque toutes par le préfixe text-. Elles sont nombreuses et très importantes à retenir, prenez le temps de lire chaque description :

Propriétés	Description	Valeurs
color	Cette propriété modifiera la couleur du texte de l'élément.	color-rgb color-hex color-name
direction	Elle vous permettra de définir le sens du texte de l'élément.	ltr* rtl
line-height	Définit l'espace entre les lignes d'un même texte.	normal* number length %
text-align	Permet d'aligner le texte de l'élément selon la valeur donnée.	left* right center justify
vertical-align	Pour défénir l'alignement de votre texte sur l'axe vertical de l'élément.	baseline top middle bottom length %
text-decoration	Donne la "décoration" au texte de l'élément affecté.	none* underline overline line-through blink
text-indent	Permet d'ajouter un espace vide au début d'un paragraphe.	length %
text-transform	Cette propriété permettera de contrôler les lettres de l'élément.	none* capitalize uppercase lowercase
letter-spacing	Permet de modifier l'espace entre les caractères.	normal* length
word-spacing	Permet de modifier l'espace entre les mots d'un élément.	normal* length

* valeur (par défaut) lorsque la propriété n'est pas donnée.

caractères ~ font

Pour comprendre la suite, il est très important de connaître la différence entre text et font. Sinon, vous allez ~~(tout comme moi)~~ confondre les propriétés de chacune des catégories. Aussi bien vous rentrer ça dans la tête tout de suite : rire :. Je vais donc tenter de vous expliquer le plus clairement possible cette différence. Simplement, disons que les propriétés de caractères fonctionnent même lorsque qu’il y a une seule lettre dans l’élément. Prenons par exemple la propriété de texte line-height, on a beau la définir, si l’élément ne contient qu’un seul caractère on ne verra pas son effet. À l’inverse, la propriété de caractère font-size (pour la grosseur des caractères) sera remarquable même lorsqu’il y a une seule lettre qui compose l’élément. Évidemment, il y a quelques exceptions, mais en gros on peut expliquer ainsi la différence entre font et text.

Les propriétés de caractères commencent toutes par font-, les voici :

Propriétés	Description	Valeurs
font-family	Cette propriété vous permettra de changer la police de votre caractère.	family-name generic-family
font-size	Elle permet de changer la grosseur des caractères.	xx-small x-small small medium large x-large xx-large smaller larger length %
font-style	La propriété permet de changer le style de votre caractère.	normal* italic oblique
font-variant	La propriété permet de donner une variation à vos caractères.	normal* small-caps
font-weight	Utile pour modifier l'épaisseur de vos caractères.	normal* bold bolder lighter 100 200 300 400 500 600 700 800 900

margin, padding, border

C’est qui ceux-là :huh : ? En fait, le margin et le padding définissent l’espace interne et externe de l’élément, tandis que le border le contourne, observez bien le schéma ci-dessous :

Vous aurez donc compris que le margin (marge) donne l’espace entre l’extérieur de l’élément et la marge d’un élément voisin. Le border (bordure) (invisible par-défaut) délimite les bords de l’élément, c’est la frontière entre l’extérieur et l’intérieur de l’élément. Le padding (euh…la marge interne) défini la distance entre la bordure et le contenu de l’élément.

Le margin et le padding étant très liés, je les ai rassemblés dans un seul tableau :

Propriétés	Extensions*	Valeurs
margin	-top -bottom -left -right	length %
padding	-top -bottom -left -right	length %

*Si vous n'ajoutez aucune extension, la valeur de la propriété sera donnée pour tous les côtés.

Les propriétés de bordures sont plus nombreuses et complexes :

Propriétés	Extensions	Extensions		Valeurs
border	-top -bottom -left -right	-color	Donne la couleur de la bordure.	color_name hex_number rgb_number transparent
		-style	Donne le style de la bordure.	none hidden dotted dashed solid double groove ridge inset outset inherit
		-width	Donne l'épaisseur de la bordure.	thin medium thick length

Ainsi, la propriété border peut prendre à elle seule jusqu’à deux extensions. L’une désignant le côté affecté (haut (top), bas (bottom), gauche (left), droite (right)), l’autre l’apparence de la bordure (couleur (color), style (style), grosseur (width)). Elles peuvent être agencées de plusieurs façons que voici :

Deux extensions : Lorsque l’on donne à border les deux types d’extensions possibles, elles doivent toutes être séparées par un trait d’union (-) déjà inclus dans la liste. Sous forme correcte, la première extension doit toujours être celle qui désigne le côté affecté par la bordure. Exemples de propriétés étendues : "border-top-style: [valeur];","border-bottom-color: [valeur];" et "border-right-width: [valeur];"
Une extension : On peut aussi donner à border un seul des deux types d’extension donnés, auquel cas, il n’y a évidement pas d’ordre et toutes les combinaisons sont possibles : "border-style" est tout aussi acceptable que "border-left". Si par exemple on utilise une extension de la deuxième colonne du tableau, l’apparence définie par la valeur serait appliquée sur tous les côtés de la bordure. Si on utilisait une extension de la première colonne, on pourrait définir une apparence propre à chaque côté de l’élément. Oui, vous avez bien compris "apparence". Grâce aux multi-valeurs et aux extensions de côtés, on peut effectivement donner l'apparence pour chaque côté de la bordure. Simplement parce que les valeurs qui peuvent être prises par les extensions de la première colonne sont la deuxième colonne d'extensions. Par exemple, "border-left" peut prendre les mêmes valeurs que "border-style", "border-width" et "border-color".

Ainsi, "border-left: 1px dashed #00000" est une propriété + valeurs totalement fonctionnelles. C'est ça le multi-valeurs : une propriété qui peut prendre plus d'un type de valeurs séparées par des espaces (il n'y a aucun ordre à respecter). Ici, "border-left" prend "border-style", "border-width" et "border-color" comme valeurs.
Sans extension : C’est le "border" tout simple. Lui-même prend toutes les extensions de la première colonne du tableau, du coup les valeurs qu’on lui donne affecteront les bordures de tous les côtés. "border" est lui aussi multi-valeurs : il prend déjà toutes les extensions de la première colonne, mais on peut lui donner les valeurs de la seconde. Ainsi, "border: 1px dashed #00000" donnera un résultat semblable à l’exemple précédent, sauf que la bordure fera tout le tour de l’élément.

J’ai introduit ici le concept de multi-valeurs. "border" n’est pas la seule propriété qui a cette particularité, mais c’est la seule qui en vaut réellement la peine. Je vous redonne le lien de *Lève sa main*, vu la complexité de la section je crois que ça sera nécessaire Wink

.

autres

Deux dernières petites propriétés très utiles dont on ne pouvait se passer pour une utilisation élémentaire du CSS. Le "width" et le "height"

Width : Très pratique, le "width" permet de donner la largeur de votre élément.
Height : Le "height" définit la hauteur de votre élément.

length

%

Vous avez lu jusqu'à la fin ce deuxième chapitre du Cours élémentaire . Félicitations ! Vous avez aussi franchi le point de non retour. À partir de maintenant, les chapitres s'emboîteront les uns dans les autres et il faudra tout lire, pour comprendre vraiment les démarches à suivre pour coder en CSS. Si vous pensez que c'est dur de tout lire, imaginez de tout écrire Rolling Eyes

. Je vous donne donc votre devoir de chapitre :

Exercice 2 : Je veux... une propriété

Spoiler:

Exercice 2 : Je veux... une propriété

Histoire de vérifier si vous avez bien mémorisé l'utilité des propriétés, je vais jouer un "client" difficile qui vous demandera différents effets pour les éléments de son site. À ce stade, votre boulot est de donner la propriété qui pourra être utilisée pour créer l'effet en question. Une seule propriété par numéro. Essayez de compléter l'exercice sans avoir recours au tableau des propriétés.

Citation :

Exemple :

Je veux une bordure rouge pointillée à gauche de mon tableau.

Code:

border-left

Je veux que le fond de ma page soit centré à la fois sur l'axe vertical et sur l'axe horizontal.

Code:

Réponse
Je veux que tous les liens de mon forum soient en majuscules.

Code:

Réponse
Je veux mettre un fond unicolore à mon texte souligné.

Code:

Réponse
Je veux que mon texte en gras soit de la police "Times New Roman".

Code:

Réponse
Je veux mon image (fond.jpg) en fond de page.

Code:

Réponse
Je veux la couleur bleue en fond de page.

Code:

Réponse
Je veux que mon texte soit en rouge.

Code:

Réponse
Je veux que tout le texte de ma page soit au centre de celle-ci.

Code:

Réponse
Je veux que mon texte soit en minuscules.

Code:

Réponse
Je veux que mon texte soit en gras.

Code:

Réponse

Code:: [font=Segoe Print]
[center][size=18]Exercice 2 : Je veux... une propriété[/size][/center]
Histoire de vérifier si vous avez bien mémorisé l'utilité des propriétés, je vais jouer un "client" difficile qui vous demandera différents effets pour les éléments de son site. À ce stade, votre boulot est de donner la [b]propriété[/b] qui pourra être utilisée pour créer l'effet en question. [b]Une seule propriété par numéro[/b]. [b]Essayez de compléter l'exercice sans avoir recours au tableau des propriétés.[/b][/font]

[quote][b]Exemple :[/b][list=1][*][b] Je veux une bordure rouge pointillée à gauche de mon tableau.[/b]
[code]border-left[/code]
[/list]
[/quote]

[list=1][*][b]Je veux que le fond de ma page soit centré à la fois sur l'axe vertical et sur l'axe horizontal.[/b]
[code]Réponse[/code]
[*][b]Je veux que tous les liens de mon forum soient en majuscules.[/b]
[code]Réponse[/code]
[*][b]Je veux mettre un fond unicolore à mon texte souligné.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte en gras soit de la police "Times New Roman".[/b]
[code]Réponse[/code]
[*][b]Je veux mon image (fond.jpg) en fond de page.[/b]
[code]Réponse[/code]
[*][b]Je veux la couleur bleue en fond de page.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en rouge.[/b]
[code]Réponse[/code]
[*][b]Je veux que tout le texte de ma page soit au centre de celle-ci.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en minuscules.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en gras.[/b]
[code]Réponse[/code]
[/list]

Les valeurs des propriétés CSS

Ça vaut bien la peine de valoriser les valeurs, n'est-ce pas ?

Bon d'accord, elle n'est pas drôle. Neutre

Rappel :

Orange a écrit:: valeurs : Pour faire simple, je dirais que les valeurs précisent l'effet des propriétés associées en leur disant ce qu'elles doivent faire. La propriété dit : « Changer la couleur du texte » et sa valeur pourra être "rouge", "bleu", "vert" par exemple. Les valeurs finissent toujours par un point-virgule (;)

Les valeurs sont donc essentielles aux propriétés, sans les valeurs (ou en utilisant les mauvaises valeurs), le résultat de votre code serait invisible, pas très réjouissant quand on vient de passer une heure à mettre en place notre CSS. L’exemple du rappel est assez parlant, les valeurs vont définir les propriétés, clarifier leur rôle en somme.

Si vous êtes arrivé jusqu’ici, c’est que vous savez quelle propriété peut prendre quel type de valeur, mais certains types ne sont pas évidents à décoder, il faut savoir comment les mettre en place et surtout connaître le résultat propre à chaque valeur. C’est ce que vous allez apprendre ici avec, dans la mesure du possible, des exemples concrets. Assez de blablatage, passons à ce qui nous intéresse : les valeurs en CSS.

Les "color"s

Pas besoin d'être un expert de la langue pour comprendre de quoi je parle ici, je traduis au cas où certains seraient dans le noir total : il s'agit des valeurs de couleurs. Il y en trois types : RGB-number, Hex-number et color-name. Voici donc :

Color-name : Il s'agit d'ajouter le nom anglais d'une couleur à la propriété ; il existe énormément de noms de couleurs en HTML/CSS, il sera impossible pour vous de toutes les retenir et pour moi de toutes les lister. Pourtant, certains l'ont fait. Je vous donne donc un lien bien pratique si vous choisissez de travailler avec le "color-name": Noms des couleurs.

Quelques exemples :

Citation :

Code:

color: red;

Exemple

Code:

color: blue;

Exemple

Code:

color: green;

Exemple
Hex-number : "Hex", pour hexadécimal. Vous devrez donc ajouter un code de couleur comme valeur à votre propriété. Attention chaque code hexadécimal commence par le symbole numéro (#) pour indiquer l'utilisation d'un code hexadécimal. Personnellement, je préfère la méthode hexadécimale, car il y a plus de teintes disponibles qu'avec le color-name. CSSActif met son sélecteur de couleurs complet à votre disposition, vous n'aurez pas besoin d'apprendre les codes par cœur . Si on reprend les exemples précédents en appliquant le hex-number à la place, remarquez la différence de teinte pour certaines couleurs : l'équivalence hexadécimale de "green" ne donne pas le même vert que "green" lui-même :

Quelques exemples :

Citation :

Code:

color: #FF0000;

Exemple

Code:

color: #0000FF;

Exemple

Code:

color: #00FF00;

Exemple
RGB-number : Je n'aborderai pas trop ce point, les couleurs RBG offrent un éventail complet de possibilités, 16 581 375 teintes de couleurs pour être précis. Vous n'en aurez pas besoin d'autant. Il faut seulement savoir que RGB veut dire Red (Rouge), Green (Vert), Blue (Bleu). Un RGB-number s'écrit comme suit :

Code:

rgb(r,g,b)

Chaque lettre dans les parenthèses doit être remplacé par le taux de la couleur sur 255.
Quelques exemples :

Citation :

Code:

color: rgb(255,0,0);

Exemple

Code:

color: rgb(0,0,255);

Exemple

Code:

color: rgb(0,255,0);

Exemple

Les "border-style" (styles de bordure)

Une ~~image~~ démonstration valant milles mots, je vais me contenter de vous illustrer les styles de bordures possibles :

Citation :

hidden, sans bordure tout simplement.

Code:: border-style: hidden;

dotted, bordure à points.

Code:: border-style: dotted;

dashed, bordure à tirets.

Code:: border-style: dashed;

solid, bordure pleine.

Code:: border-style: solid;

double, bordure double.

Code:: border-style: double;

groove, bordure en relief avec ombre haute.

Code:: border-style: groove;

ridge, bordure en relief avec ombre basse.

Code:: border-style: ridge;

inset, bordure sans relief avec ombre haute.

Code:: border-style: inset;

outset, bordure sans relief avec ombre basse.

Code:: border-style: outset;

Dimensions

Bien utile pour éviter les problèmes de mise en page et d’ajustements disgracieux. J’en dénombre trois grandes types, les length (c'est à dire les mesures de longueur/taille), le % (le pourcentage) et la dernière, qui regroupe tous les noms de dimensions.

Length : valeur chiffrée en unités

La méthode la plus classique, qui combine la valeur de votre dimension à une des unités de mesure suivantes : px, cm, em, ex, in, mm, pt, pc. Il en a beaucoup, c'est pourquoi je n'aborderai, dans ce cours de base, que le pixel (px). Le pixel est une unité de mesure courante, mais variable d'un écran à l'autre, le pixel s'adapte donc plus ou moins à la résolution de l'écran du visiteur. Je vous encourage donc à faire vos propres tests avec les autres unités.

Quelques tailles de texte en pixel :

Citation :

Code:: font-size: 8px;

Exemple

Code:: font-size: 12px;

Exemple

Code:: font-size: 24px;

Exemple

Code:: font-size: 38px;

Exemple

N'oubliez pas d'ajouter l'unité de mesure tout de suite après le nombre (sans espace).

Attention : Bien que les length puissent être utilisées pour donner la taille du texte, elles s'emploient également pour définir les dimensions de vos éléments et l’épaisseur des bordures. Elles sont multi-usage et changent d’utilité selon la propriété avec laquelle elles sont utilisées, ainsi avec font-size l'unité de mesure détermine la taille du texte et avec width, par exemple, elle définit la largeur d’un bloc, paragraphe ou autre élément. Ne vous limitez donc pas à l’usage des valeurs dimensionnelles uniquement pour le texte, sinon vous perdrez toute une importante part du CSS. Je vous encourage, une fois de plus, à faire vos propres tests avec les autres propriétés acceptant les unités de mesure (border, width etc.).

Je vous donne tout de même quelques exemples :

Citation :

length + Bordure, donne l'épaisseur de la bordure.

Code:: border-width: 8px;

length + Width, donne la largeur de l'élément. (J'ai ajouté une bordure pour mettre en évidence la largeur, elle n'est pas obligatoire)

Code:: width: 180px;

length unit + letter-spacing + word-spacing :

comme vous le remarquez, j'utilise une dimension de 3px pour augmenter l'espacement entre mes lettres et une dimension de 10px pour séparer mes mots.

Code:: letter-spacing: 3px;
word-spacing: 10px;

Bref, tant de possibilités.

% : valeur chiffrée en pourcentages

Le % donne le pourcentage de dimension de l'élément (ou du texte) par rapport à celle de l'élément (ou du texte) parent.

Citation :: length unit + Width, donne la largeur de l'élément.
% + Width, donne le pourcentage de largeur de l'élément par rapport à l'élément parent. (Ici 70%)

J'ai d'abord donné la largeur de l'élément parent (400px) puis j'ai donné le pourcentage de la largeur de l'élément contenu dans le premier (70%). Pensez à un jeu de poupées russes, la plus grande englobe celles des niveaux inférieurs et chacune en contiennent une autre plus petite. Dans le contexte du CSS, on place ainsi plusieurs éléments les uns dans les autres, toujours au même pourcentage par rapport au niveau supérieur, voyez :

length unit + Width, donne la largeur de l'élément
% + Width, donne le pourcentage de largeur de l'élément par rapport à l'élément parent. (Ici 70%)
30% plus petit
Encore !
Compris ?
Un dernier
On commence à être à l'étroit.

Noms normalisés de dimensions

Il y a plusieurs noms de dimensions. Personnellement, je ne recommande pas cette méthode, car il est nettement plus rapide de donner une simple valeur en pixels, qu'un nom complet. En plus, les noms de dimensions offrent moins de possibilités et de précision que les pixels. Voici donc un petit tableau des valeurs et de leur effet :

Valeurs ( font-size: ... ; )	Effet
xx-small	Texte
x-small	Texte
small	Texte
medium	Texte
large	Texte
x-large	Texte
xx-large	Texte
smaller (Plus petit que l'élément parent)	Texte
larger (Plus grand que l'élément parent)	Texte

Mise en forme du texte

Nous avons déjà touché à la taille des caractères d’un texte à travers les unités le longueur et à sa couleur avec les colors, mais qu'en est-il de sa mise en forme ? J'entends par là son style, ses variantes, son épaisseur et sa police. Restons simple, cette section traitera des valeurs que peuvent prendre font-style, font-variant, font-weight et font-family.

Style : il existe 3 valeurs de style et deux résultats visibles que voici :

Citation :

Texte de style normal

Code:

font-style: normal;

Texte de style italique

Code:

font-style: italic;

Texte de style oblique

Code:

font-style: oblique;

Comme vous le remarquez, "oblique" et "italic" donnent le même résultat. Cependant, la valeur "italic" est prise en charge par davantage de navigateurs et de versions.
Variantes : 2 variantes possibles, que voici :

Citation :

Texte de variation petites majuscules

Code:

font-variant: small-caps;

Texte de variation normale

Code:

font-variant: normal;
Épaisseur : plusieurs épaisseurs possibles suivant une échelle de normal à épais.

Citation :

100
200
300
400 - normal
500
600
700 - bold
800
900

bolder : plus gras que l’élément parent.
lighter : plus mince que l’élément parent.

Code:

font-weight: ÉPAISSEUR;
La police, non pas celle qui vous court après quand vous avez dépassé la limite de vitesse, je parle de la police de votre texte. Non elle ne viendra pas embarquer votre texte ! Bon, d'accord, j'arrête de vous prendre pour des imbéciles . Vous avez sans doute déjà utilisé : Arial, Arial Black, Georgia, Times New Roman et Verdana ; ce ne sont qu'exemples parmi tant d'autres.

Comme mentionné dans le dernier chapitre, c’est la propriété font-family qui permet de donner la police à notre caractère. Il existe deux valeurs possibles.
1. family-name qui consiste à indiquer le nom exact d’une police installée sur le poste du visiteur et l’afficher. Voici un exemple de code :
  
  Citation :
  
  Code:
  
  font-family:Times New Roman,Georgia,Verdana;
  
  Pour ce résultat : Texte.
  
  Remarquez la présence de trois noms de polices de caractères, séparées par des virgules. Si le visiteur ne possède pas Times New Roman, le navigateur tentera alors d’afficher les polices suivantes, si aucune n’a été trouvée, il sélectionnera la police par défaut du navigateur, ils sont brillants les navigateurs n'est-ce pas ?
2. generic-family : il s'agit des catégories de polices ; quelques exemples :
  
  Citation :
  
  serif
  sans-serif
  fantasy
  cursive
  monospace
  
  Code:
  
  font-family: NOM_DE_LA_FAMILLE;
Pour garder une compatibilité optimale, il est recommandé de toujours terminer une chaîne de noms de polices (family-name) par le nom d'une famille de police (generic-family). On s'assure ainsi que le navigateur affichera une police dans le même style que celle qu'on aurait voulu afficher, comme ceci :

Code:

font-family:POLICE1,POLICE2,POLICE3,CATÉGORIE1;

Ceci est un exemple, il y a écrit:

Code:

font-family:Times New Roman,Georgia,Verdana,serif;

Tentera d'afficher en priorité en Times New Roman, sinon en Georgia, sinon en Verdana. En l'absence des trois polices, le navigateur utilisera l'équivalent "local" (spécifique à l'ordinateur utilisé) d'une police de type serif.

Il est important de comprendre que l'on peut mettre plus d'un nom de police et que la suivante sera choisie si la précédente n'est pas installée sur le poste du visiteur. Sans oublier de séparer chacune par des virgules.

Mise en forme du texte ou "text-"

C'est que je commence à être épuisé Oh My God !

. Vous aussi ? Tenez bon, si j'ai été capable d'écrire tout ceci, vous êtes capable de le lire. Wink

Bon c'est fini les élucubrations, passons au vif du sujet (il me semble que j'ai déjà dit ça Neutre

), donc on a vu les valeurs de caractères (font), maintenant, attaquons-nous à celles de texte (text). Certaines valeurs ont été abordées plus tôt. En faisant le tri, il ne nous reste plus que les valeurs associées aux propriétés de texte : text-decoration, text-transform et text-align.

Décoration de texte, oui, vous avez bien compris des décorations comme sur un arbre de Noël. Il en existe 5:

Citation :

Texte décoré souligné

Code:

text-decoration: underline;

Texte décoré surligné

Code:

text-decoration: overline;

Texte décoré barré

Code:

text-decoration: line-through;

Texte décoré clignotant

Code:

text-decoration: blink;

Et mon préféré : Texte non-décoré

Code:

text-decoration: none;
Transformation du texte : 4 valeurs possibles pour un effet assez discret dans tout les cas. Cette propriété perd de son utilité pour un texte normal, mais peut s'avérer intéressante lorsque l'on travail avec le survol.

Citation :

texte en minuscules transformées en majuscules

Code:

text-transform: uppercase;

TEXTE EN MAJUSCULES TRANSFORMÉES EN MINUSCULES

Code:

text-transform: lowercase;

texte en minuscules dont les premières lettres de chaque mot sont transformées en majuscules

Code:

text-transform: capitalize;

Texte normal

Code:

text-transform: normal;
Alignement du texte : ça parle tout seul. Notez que cette propriété ne s'applique qu'à des blocs de texte (paragraphes <p>, blocs <div>, cellules <td> d'un tableau...). Voyons nos quatre exemples encadrés pour plus de clarté :

Citation :

Texte au centre

Code:

text-align: center

Texte à gauche

Code:

text-align: left

Texte à droite

Code:

text-align: right

Texte justifié. Sur une ligne, le résultat ne pas visible, mais si je pousse sur la seconde ligne on remarque que chaque fin de ligne arrive exactement sur le bord du tableau, ce qui n’est pas si mal ; personnellement, je justifie toujours mon texte.

Code:

text-align: justify

Valeurs de fond

C'est parti pour la dernière section du chapitre : les valeurs de fond. Commençons :

Image de fond, : l'utilisation de "background-image" + "url()" vous permettra de mettre en fond d'élément une image de votre choix comme ceci :

Code:

background-image: url(LIEN_VERS_IMAGE);

Pour ce résultat :

Code:

background-image: url(http://img96.imageshack.us/img96/4334/fondtuto.png);
Répétition de l'image : il existe quatre valeurs associées à la propriété "background-repeat" ; les voici en action :

Code:

background-repeat: repeat;

Code:

background-repeat: repeat-x;

Code:

background-repeat: repeat-y;

Code:

background-repeat: no-repeat;
Position du fond : il existe 3 positions sur l'axe horizontal et 3 sur l'axe vertical, soit 9 combinaisons possibles. Il vous est possible d'associer une position horizontale (center, top, bottom) avec une position verticale (left, right, center). Je ne crois pas qu'un exemple soit nécessaire, les valeurs possibles parlent d'elles-mêmes.

C'est terminé, je vous promets une réponse plus rapide pour le prochain chapitre, je commence tout de suite. Le prochain chapitre portera sur les éléments, vous pourrez donc commencer à coder quelque chose et voir le résultat Wink

.

Exercice 3 : Je veux... une valeur

Spoiler:

Exercice 3 : Je veux... une valeur

Histoire de vérifier si vous avez bien mémorisé les valeurs, je vais jouer un "client" difficile qui vous demandera différents effets pour les éléments de son site. À ce stade, votre boulot est de donner la propriété et la valeur qui pourront être utilisées pour créer l'effet en question. Un seul couple propriété-valeur par numéro. Essayez de compléter l'exercice sans avoir recours au tableau des propriétés ou des valeurs.

Citation :

Exemple :

Je veux une bordure rouge pointillée à gauche de mon tableau.

Code:

border-left: 1px dashed red;

Je veux que le fond de ma page soit centré à la fois sur l'axe vertical et sur l'axe horizontal.

Code:

Réponse
Je veux que tous les liens de mon forum soient en majuscules.

Code:

Réponse
Je veux mettre un fond unicolore à mon texte souligné.

Code:

Réponse
Je veux que mon texte en gras soit de la police "Times New Roman".

Code:

Réponse
Je veux mon image (fond.jpg) en fond de page.

Code:

Réponse
Je veux la couleur bleue en fond de page.

Code:

Réponse
Je veux que mon texte soit en rouge.

Code:

Réponse
Je veux que tout le texte de ma page soit au centre de celle-ci.

Code:

Réponse
Je veux que mon texte soit en minuscules.

Code:

Réponse
Je veux que mon texte soit en gras.

Code:

Réponse

Code:: [font=Segoe Print]<h1>Exercice 3 : Je veux... une valeur</h1>
Histoire de vérifier si vous avez bien mémorisé les valeurs, je vais jouer un "client" difficile qui vous demandera différents effets pour les éléments de son site. À ce stade, votre boulot est de donner la [b]propriété et la valeur[/b] qui pourront être utilisées pour créer l'effet en question. [b]Un seul couple propriété-valeur par numéro[/b]. [b]Essayez de compléter l'exercice sans avoir recours au tableau des propriétés ou des valeurs.[/b][/font]

[quote][b]Exemple :[/b][list=1][*][b] Je veux une bordure rouge pointillée à gauche de mon tableau.[/b]
[code]border-left: 1px dashed red;[/code]
[/list]
[/quote]

[list=1][*][b]Je veux que le fond de ma page soit centré à la fois sur l'axe vertical et sur l'axe horizontal.[/b]
[code]Réponse[/code]
[*][b]Je veux que tous les liens de mon forum soient en majuscules.[/b]
[code]Réponse[/code]
[*][b]Je veux mettre un fond unicolore à mon texte souligné.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte en gras soit de la police "Times New Roman".[/b]
[code]Réponse[/code]
[*][b]Je veux mon image (fond.jpg) en fond de page.[/b]
[code]Réponse[/code]
[*][b]Je veux la couleur bleue en fond de page.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en rouge.[/b]
[code]Réponse[/code]
[*][b]Je veux que tout le texte de ma page soit au centre de celle-ci.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en minuscules.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en gras.[/b]
[code]Réponse[/code]
[/list]

Vous pouvez simplement compléter l'exercice 2 et rajouter les valeurs Wink

.

Sujet: Re: Bases CSS - Cours élémentaire Sam 16 Oct 2010, 13:29

Les éléments

Les petits derniers Very Happy

.
Rappel :

Orange a écrit:: élément : C'est lui qui sera influencé par les propriétés du bloc de propriétés. On doit absolument le spécifier dans notre code, sans quoi les propriétés ne pourraient être appliquées. L'élément est un type de sélecteur parmi tant d'autre.

Ce qu’il faut comprendre pour commencer, c’est que les éléments (et autres sélecteurs) sont essentiels au fonctionnement de notre code. Ils agissent comme les "destinataires" des instructions données par notre bloc de propriétés. Pour en saisir toute l’utilité, voyez chaque groupement comme une lettre que vous mettez à la poste. Pour qu’elle arrive à destination, vous avez dû inscrire les coordonnées de la personne à contacter. Cette adresse postale est comparable à notre élément (et autres sélecteurs) et le contenu de votre lettre, au bloc de propriétés. Si on avait décidé d’indiquer l’un sans l’autre, il n’y aurait eu aucun résultat visible : c’est comme si on avait posté une enveloppe vide ou laissé traîner notre lettre sur la table… pas très efficace.

« D’accord, je sais qu’il me faut une adresse, mais quelle adresse ? ». C’est une très bonne question, je vous félicite pour votre vivacité d’esprit Rolling Eyes

. Les éléments correspondent tous à des balises HTML, il en existe plus de 50. Ainsi, lorsqu’on donne un style à un élément en particulier via CSS, on applique ce style à tout le contenu de la page qui se situe entre les balises HTML correspondantes. Un exemple devrait être plus parlant :

Spoiler:

Code:: p {
border: 5px solid #F00;
}

Code:: <p>Ce texte est un paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

Ce texte n'est pas un paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

<p>Ce texte est un paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

Voici un aperçu, dans lequel il y a écrit:: Ce texte est un paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Ce texte n'est pas un paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Ce texte est un paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Remarquez ici, que quel que soit le nombre de paragraphes ([<p>) que j’ai intégrés dans ma page, tous ont reçu les propriétés et valeurs CSS que j’ai données à l’élément p dans ma feuille de style. Dans ce cas précis, je voulais afficher une bordure pleine rouge de 5px de large autour du texte entouré des balises <p> et </p>. Seul le texte qui n’a pas été entouré de ces balises n’a pas de bordure.

En résumé, les éléments CSS correspondent tous à une balise HTML, si on définit le style d’un élément dans notre CSS et que sa balise associée n’apparaît pas dans dans le code HTML de notre page, on ne constatera aucun changement de style car le CSS est dépendant du HTML (et la réciproque n’est pas vraie, un code HTML peut fonctionner seul). Pour savoir quel élément correspond à quelle balise, il suffit de retirer les < et > de cette balise. Par exemple, < p> en HTML deviendra p en CSS, c’est aussi simple que ça Wink

.

Les éléments courants

Comme le CSS ne peut fonctionner sans le code HTML qui lui est associé, il serait difficile de poursuivre notre cours sans survoler quelques balises HTML. Toutefois, la manière correcte de les utiliser ne sera pas détaillée. Nous supposerons seulement que nous avons déjà, en notre possession, une page HTML qui contient les 12 éléments courants suivants :

CSS	HTML	Fonction
body	`<body>`	Sert à définir le style de tout le contenu visible de notre page HTML (Surtout utilisé pour définir la couleur et l’image de fond, la police et la taille des caractères etc.) .
strong ou b	`<strong>` ou `<b>`	Sert à définir le style du texte en gras (donc tout le texte placé entre les balises `<strong>` et `</strong>` ou `<b>` et `</b>`).
em ou i	`<em>` ou `<i>`	Sert à définir le style du texte en italique (donc tout le texte placé entre les balises `<em>` et `</em>` ou `<i>` et `</i>`).
u	`<u>`	Sert à définir le style du texte souligné (donc tout le texte placé entre les balises `<u>` et `</u>`).
h#	`<h#>`	Sert à définir le style des titres (donc tout le texte placé entre les balises `<h1>` à `<h6>` et `</h1>` à `</h6>`).
img	`<img />`	Sert à définir le style des images.
a	`<a>`	Sert à définir le style des liens.
p	`<p>`	Sert à définir le style des paragraphes (donc tout le texte placé entre les balises `<p>` et `</p>`).
table	`<table>`	Sert à définir le style des tableaux.
tr	`<tr>`	Sert à définir le style des lignes (rangées) des tableaux.
td	`<td>`	Sert à définir le style des cellules des tableaux
span	`<span>`	Sert à définir le style du texte placé entre `<span>` et `</span>`. N.B. : Si aucun style CSS n'est donné à l'élément span, le texte placé entre les balises correspondantes n'aura aucun style particulier.
div	`<div>`	Sert à définir le style du texte placé entre `<div>` et `</div>`. N.B. : Si aucun style CSS n'est donné à l'élément div, le texte placé entre les balises correspondantes n'aura aucun style particulier.

Maintenant que nous connaissons les éléments fréquemment employés dans nos pages HTML, nous allons pouvoir travailler avec ceux-ci et leur donner un style CSS particulier. Nous commencerons donc à coder réellement en CSS. Pour ce faire, il va nous falloir une page HTML de test, pour constater, concrètement, le résultat de notre code CSS. Pour vous faciliter la tâche, je vous ai créé un Outil de Test CSS ; il vous suffira d’entrer votre code CSS dans la boîte de texte de gauche pour afficher le rendu sur les douze éléments courants dans la portion de droite. Essayez de placer le code CSS ci-dessous dans la boîte de texte (juste en dessous de la mention « Code CSS » et cliquer « Valider », vous comprendrez assez vite l’utilité de la chose Wink

.

Code:: body {
background-color: #9C3;
font-family: "Courier New", Courier, monospace;
}

td {
background-color: #6C6;
border: 3px dashed #9F6;
}

table {
background-color: #9C9;
border: 5px solid #CF0;
}

p {
border: 1px solid #333333;
}

i {
text-decoration: line-trought;
}

b {
color: #FF0000;
}

strong {
color: #0000FF;
}

u {
font-size: 14px;
}

a {
font-variant: small-caps;
}

span {
border-left: 20px solid #690
}

div {
border-top: 50px solid #CF0;
background-color: #CCCCCC;
}

h1 {
text-decoration: overline;
}

h4 {
font-size: 20px;
}

img {
border: 5px solid #000000;
padding-left: 20px;
}

Le changement est drastique, n’est-ce pas ? C’est la puissance du CSS ! À ce point, je ne peux que vous encourager à faire vos propres tests grâce à cette outil. Le prochain chapitre portera sur différentes possibilités d'effets que l'on peut réaliser grâce aux connaissances que nous avons acquises. D'ici là, tentez les combinaisons les plus farfelues d’éléments, de propriétés et de valeurs, le résultat en sera d’autant plus intéressant. Wink

Exercice 4 : Je veux... un élément

Spoiler:

Exercice 4 : Je veux... un élément

Histoire de vérifier si vous avez bien mémorisé les éléments, je vais jouer un "client" difficile qui vous demandera différents effets pour les éléments de son site. À ce stade, votre boulot est de donner la propriété, la valeur et l’élément qui pourront être utilisés pour créer l'effet en question. Un seul groupement par numéro. Essayez de compléter l'exercice sans avoir recours au tableau des propriétés, des valeurs ou des éléments.

Citation :

Exemple :

Je veux une bordure rouge pointillée à gauche de mon tableau.

Code:

table {
border-left: 1px dashed red;
}

Je veux que le fond de ma page soit centré à la fois sur l'axe vertical et sur l'axe horizontal.

Code:

Réponse
Je veux que tous les liens de mon forum soient en majuscules.

Code:

Réponse
Je veux mettre un fond unicolore à mon texte souligné.

Code:

Réponse
Je veux que mon texte en gras soit de la police "Times New Roman".

Code:

Réponse
Je veux mon image (fond.jpg) en fond de page.

Code:

Réponse
Je veux la couleur bleue en fond de page.

Code:

Réponse
Je veux que mon texte soit en rouge.

Code:

Réponse
Je veux que tout le texte de ma page soit au centre de celle-ci.

Code:

Réponse
Je veux que mon texte soit en minuscules.

Code:

Réponse
Je veux que mon texte soit en gras.

Code:

Réponse

Code:: [font=Segoe Print]
[center][size=18]Exercice 4 : Je veux... un élément[/size][/center]
Histoire de vérifier si vous avez bien mémorisé les éléments, je vais jouer un "client" difficile qui vous demandera différents effets pour les éléments de son site. À ce stade, votre boulot est de donner la [b]propriété, la valeur et l’élément[/b] qui pourront être utilisés pour créer l'effet en question. [b]Un seul groupement par numéro[/b]. [b]Essayez de compléter l'exercice sans avoir recours au tableau des propriétés, des valeurs ou des éléments.[/b][/font]

[quote][b]Exemple :[/b][list=1][*][b] Je veux une bordure rouge pointillée à gauche de mon tableau.[/b]
[code]
table {
border-left: 1px dashed red;
}[/code]
[/list]
[/quote]

[list=1][*][b]Je veux que le fond de ma page soit centré à la fois sur l'axe vertical et sur l'axe horizontal.[/b]
[code]Réponse[/code]
[*][b]Je veux que tous les liens de mon forum soient en majuscules.[/b]
[code]Réponse[/code]
[*][b]Je veux mettre un fond unicolore à mon texte souligné.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte en gras soit de la police "Times New Roman".[/b]
[code]Réponse[/code]
[*][b]Je veux mon image (fond.jpg) en fond de page.[/b]
[code]Réponse[/code]
[*][b]Je veux la couleur bleue en fond de page.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte soit en rouge.[/b]
[code]Réponse[/code]
[*][b]Je veux que tout le texte de ma page soit au centre de celle-ci.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte en paragraphe soit en minuscules.[/b]
[code]Réponse[/code]
[*][b]Je veux que mon texte en div soit en gras.[/b]
[code]Réponse[/code]
[/list]

Vous pouvez simplement compléter l'exercice 3 et rajouter les éléments.

Sujet: Re: Bases CSS - Cours élémentaire Mar 27 Mar 2012, 17:56

Et concrètement ?

Le précédent chapitre est venu compléter notre groupement contenant des propriétés, des valeurs et un sélecteur (nous n'avons vu que l'élément). Dorénavant nous savons, théoriquement, appliquer un style CSS à une douzaine d'éléments courants. Ce chapitre-ci sera davantage pratique que théorique, l'Outil de Test CSS vous sera très utile dans la réalisation et la compréhension de cette section, pensez à vous en servir Wink

.

Au cours de ce chapitre, nous décoderons, propriété par propriété, valeur par valeur et élément par élément, certains groupements qui vous seront très pratiques dans le codage CSS de votre forum ou de votre site internet. Vous serez amenés à réfléchir et à mettre à profit les connaissances que vous avez acquises lors des précédents chapitres.

Démarche de réflexion

Établir notre procédure et déduire les exigences implicites : Plus souvent qu'autrement, les problèmes auxquels on est confronté présentent des exigences implicites, un «on doit...» qui n'est pas clairement indiqué dans la situation. Ce sont en quelque sorte les moyens d'arriver au but que l'on s'est fixé, les différents aspects d'un ensemble. En bref, c'est ce dont on a besoin pour arriver à un résultat optimal. Par exemple, si je veux mettre une image de fond, je dois prévoir des exigences telles que : la position du fond, la répétition etc. Une fois ceci fait, mettez (par écrit ou mentalement) l'ensemble des étapes point par point, pour une meilleure compréhension.
Identifier le sélecteur (l'élément) nécessaire : Selon le problème, il vous faudra déterminer à quel élément on veut appliquer l'effet. Vous comprendrez que, si vous faites un mauvais choix, vos propriétés CSS ne seront pas appliquées au bon élément. Au besoin, vous pouvez parcourir les éléments que nous avons vus dans le cours et procéder par élimination.
Identifier la ou les propriétés requises : Vous devrez mettre en application une ou plusieurs propriétés. Décortiquer point par point l'énoncé-problème et traduire ensuite ces points en propriétés CSS, peut vous aider à n'en oublier aucune.
Identifier les valeurs pour chaque propriété : Encore une fois, découper point par point l'énoncé peut vous aider à démêler le tout. L'erreur courante ici serait de donner le mauvais type de valeur à une propriété. Référez-vous au tableau en cas de besoin.
Révisez votre code : C'est ici que l'on risque d'en perdre plusieurs, mais détrompez-vous, relire votre code avant de valider peut vous éviter bien des tracas par la suite et surtout beaucoup de temps.

Situations problèmes

Problème n°1

Énoncé:

Je désire appliquer un fond-bannière (https://2img.net/r/ihimizer/img408/3579/exemplebanniere.jpg), c'est-à-dire une grande image de 1280px de large par 320px de haut, en fond de mon forum.

Il faut commencer par établir notre procédure ainsi que nos exigences implicites. Complétez la phrase : «Pour ce faire, je dois...» autant de fois que vous pourrez. C'est souvent ainsi qu'on arrive à saisir tous les aspects du problème... C'est fait ? Dès que vous avez trouvé les 5 étapes de la procédure, déroulez :
Réponse:
- Je dois appliquer une image en fond de ma page.
- Puisqu'il s'agit d'une bannière, je dois centrer cette image au sommet de ma page.
- Je dois empêcher la répétition de l'image de fond.
- Je dois prévoir une marge au sommet de ma page pour éviter que le contenu du site n'empiète sur l'image.
- Je dois prévoir une couleur de fond pour la zone où il n'y aura pas d'image.

Comme vous le constatez, il faut prendre en compte tous les aspects d'un problème avant de s'attaquer au code lui-même. Wink

Une fois ceci fait, il est nettement plus facile de s'attaquer à la traduction en CSS de notre procédure.

Il nous faut maintenant identifier l'élément désiré, sachant que nous souhaitons appliquer une image de fond à notre page, ça ne doit pas être très difficile... Vous l'avez ?

Réponse:

Pour l'étape suivante, il nous suffit de rependre notre procédure et de transformer nos étapes en propriétés. Référez-vous au tableau des propriétés en cas de besoin et dites-vous bien que chaque point correspond à une propriété. S'il vous manque une propriété, c'est que vous avez fait une erreur Wink

.

Réponse:

Comme je viens de le rappeler, il nous faudra associer chacune de nos propriétés à une valeur : la bonne. Notre liste d'exigences nous sera encore très utile (c'est une chance que nous ayons pris le temps de la faire Wink

).

Réponse:

Assemblez puis réviser votre code, assurez-vous qu'aucune erreur ne s'est glissée et testez le résultats grâce à L'Outil de test CSS. Ça fonctionne ? Tant mieux. Sinon, comparez votre code avec la solution ci-dessous pour connaître votre erreur :

Réponse:

Ça fonctionne maintenant ? Je l'espère pour vous. Mais si malgré tout, votre code n'est toujours pas fonctionnel, reportez-vous au *Lève sa main*. Passons au prochain problème.

Problème n°2

Énoncé:

Je souhaite appliquer un dégradé (https://2img.net/r/ihimizer/img543/6272/exempledegrade.png) en fond de ma page. Ce dégradé est une image de rouge #FF0000 vers bleu #1e00e1.

Établissez votre procédure ; celle-ci ne demande que 3 étapes.

Reprendre les exigences précédentes peut vous aider à y voir plus clair.
Identifions maintenant l'élément à affecter. Réfléchissez fort fort fort .
On traduit notre code en propriétés ; trois étapes impliquent trois propriétés distinctes.
On détermine les valeurs à associer à chacune de nos propriétés.
Assemblez puis révisez votre code, assurez-vous qu'aucune erreur ne s'y est glissée et testez le résultat grâce à L'Outil de test CSS. Ça fonctionne ? Tant mieux. Sinon, comparez votre code avec la solution ci-dessous pour connaître votre erreur :
Réponse:
- Je dois appliquer une image en fond de ma page.
- Je dois empêcher la répétition sur l'axe y de l'image de fond.
- Je dois prévoir une couleur de fond (la bonne) pour la zone où il n'y aura pas d'image.

Code:: body {
background-image: url(http://img543.imageshack.us/img543/6272/exempledegrade.png)
background-color: #1e00e1;
background-repeat: repeat-x;
}

Tout devrait être fonctionnel maintenant. Pourtant, ce n'est pas totalement terminé. Révision du code sous-entend aussi optimisation du code. Notre code de trois lignes peut en effet tenir en une seule, grâce au multi-valeurs. Ainsi, en combinant les valeurs de background-image, background-color et background-repeat dans une seule propriété background, on peut obtenir le code suivant :

Code:: body {
background: url(http://img543.imageshack.us/img543/6272/exempledegrade.png) #1e00e1 repeat-x;
}

Qui l'eut cru !

Voilà, ce chapitre du Cours élémentaire ~ Le groupement, s'achève. Celui-ci ne visait que la compréhension générale du codage : partir d'une idée pour arriver à un code fonctionnel. N'hésitez pas à vous servir de la méthode proposée plus haut et à y apporter vos propres modifications pour en faire une méthode qui vous convienne à 100%. Il n'y aura pas d'exercice supplémentaire pour ce cours, nous avons déjà assez réfléchi comme ça Razz

.

Le prochain chapitre sera donc la conclusion de ce premier cours. Il énoncera rapidement ce que nous y avons appris, mais aussi ce qu'il nous reste à apprendre.

Conclusion

Avouez que vous ne l'attendiez plus celle-là Razz

. Moi non plus, j'admets !

Voici un bref récapitulatif des notions abordées dans ce premier cours CSS : Le groupement. Chaque point à son importance et pourra vous servir d'aide-mémoire par la suite. Prenez le temps de lire :

CSS veut dire Cascading Style Sheets (feuilles de style en cascade).
Le CSS est utile pour la mise en forme, le style, d'une page HTML. À cet effet, il est dépendant du HTML et ne peut pas produire un résultat visible seul. Il n'a d'incidence que sur les éléments présents dans notre page HTML et ne peut pas en ajouter de nouveaux, ou modifier leur contenu ou leur structure (dans le cas des tableaux notamment), à lui tout seul.
Un éditeur de texte simple suffit pour coder en HTML. Toutefois, les éditeurs avec une colorisation automatique (tels Notepad ++ (open source) peuvent s'avérer utile.
Il existe trois façons similaires de coder en CSS : le CSS externe (en appelant un fichier .css), le CSS interne (en incluant le style à l'intérieur des balises < style> et < /style> du HTML) et le style en ligne (grâce à l'attribut style commun à la plupart des balises HTML). Le premier étant préférable et largement plus répandu.
Chaque "bloc" CSS est composé d'un sélecteur (nous avons vu l'élément), d'une déclaration (ou bloc de propriétés) et d'une directive, elle-même décomposée en un couple propriété, valeur. De cette manière :

Code:

selecteur {
propriété: valeur; /* Cette ligne est une déclaration */
propriété: valeur;
propriété: valeur;
}
Les propriétés déterminent quel type de résultat aura notre bloc sur l'élément de la page HTML donné en sélecteur. Chaque propriété peut prendre certains types de valeurs, dont il faut se souvenir.
Les valeurs précisent les propriétés et lui donnent sa raison d'être (les deux sont interdépendantes, l'une sans l'autre n'est pas valide). Par exemple, la propriété dit : « Changer la couleur du texte » alors que la valeur rajoute « [Changer la couleur du texte] en rouge ». Il existe également plusieurs types de valeurs s'alliant avec des propriétés spécifiques : font-family: 100px; et width: sans-serif; ne sont pas valides alors que font-family: sans-serif et width: 100px; le sont.
Certaines propriétés peuvent prendre plus d'une valeur simultanément grâce au multi-valeurs, c'est le cas, entre autres, de :

Code:

border: 1px solid #FFFFFF;

Code:

background: url(fond.jpg) #CCCCCC no-repeat top left;
Les sélecteurs (éléments) sont les "destinataires" des instructions données par notre déclaration. À la manière d'une lettre qu'on mettrait à la poste avec l'adresse postale du destinataire.
Les éléments correspondent aux balises HTML qui sont intégrées dans notre page. L'Outil de test CSS peut servir à faire vos tests.
Afin d'arriver à un code fini et fonctionnel, il faut savoir :
1. Établir notre procédure et déduire les exigences implicites
2. Identifier le sélecteur (l'élément) nécessaire
3. Identifier la ou les propriétés requises
4. Identifier les valeurs pour chaque propriété
5. Révisez votre code (soyons franc, personne ne le fait ).

Bon, ça y est. J'ai un pincement au cœur Bases CSS - Cours élémentaire 3451650135

. Vous allez devoir voler de vos propres ailes désormais, tout du moins jusqu'au prochain cours CSS (et ça, c'est dans très très longtemps Bases CSS - Cours élémentaire 3333627970

Bases CSS - Cours élémentaire 3333627970

). Si vous souhaitez aller plus loin, je vous recommande de jeter un coup d’œil aux classes et id en CSS, ça pourrait vous être très utile et franchement, c'est ce qu'il y a de plus plaisant en CSS.

J'arrive au mot de la fin... euh... Laissez-moi réfléchir. Bases CSS - Cours élémentaire 1616978029

Bases CSS - Cours élémentaire 1616978029

FIN.