Accueil
Galerie
Rechercher
S'enregistrer
ConnexionLes Styles personnalisés [niveau intermédiaire]
2 participants
Page 1 sur 1
Les Styles personnalisés [niveau intermédiaire]
Axandro Lun 19 Fév - 17:39
Bonjour,
Comme vous pouvez le constater j’ai mis un niveau, pour ceux qui on déjà des bases de XHTML et quelques connaissance en CSS, car ce petit topic ce veut plus poussé en matière de code et donc indubitablement compréhensible seulement au personne qui ont déjà un niveau dans la programmation.
Qu’est ce qu’un style personnalisé ?
Un style personnalisé c’est un code qui n’est attaché à aucune balise. Comme vous le savez dans le CSS bien souvent un code s’attache à une balise que se soit body, p, ou encor table, le CSS sait que quand on ouvre une balise « p » par exemple il doit agir dessus jusqu'à ce qu’on la ferme. Ainsi, vous pouvez colorer le fond d’écran de vos paragraphes, sans toucher au fond de votre écran qui est géré par la balise « body ».
Exemple : voici un code CSS qui va changer le fond d’écran et la couleur d’écriture de tout vos paragraphes.
![Les Styles personnalisés [niveau intermédiaire] Paraffond01oh8](https://2img.net/r/ihimizer/img208/7430/paraffond01oh8.jpg)
Ceci est un code CSS de base, le paragraphe prend une couleur de fond rouge, et une couleur de texte noir. Et chaque fois que vous ouvrirez un paragraphe cela mettra un fond rouge une écriture noir.
Mais alors quand on a trois paragraphes et que l’on veut que le premier ait un fond d’écran rouge avec écriture noir, le deuxième fond blanc avec écriture rouge et le troisième bleu avec écriture blanche ?
Et bien c’est ici qu’interviennent les styles personnalisés. Comme « p » en CSS ne peut pas gérer plusieurs informations il va falloir créer ses propres styles.
Comment ça marche ?
C’est assez simple, en faite il faut commencer par trouver un nom à donner à sont style personnel, ça peut être n’importe quoi, mais parce que tout bon programmateur utilise des nom structurés et bien compréhensibles, n’appelez par votre style « Pomme ou PèreNoël ».
Ici je vais les appeler, paragrapherouge, paragrapheblanc, paragraphebleu, en rapport avec leur couleur de fond.
Alors comment ça ce passe ?
Et bien il faut savoir que quand on fait un style personnel, avant d’écrire le nom de ce style il faut un « point », ce point se trouve toujours devant le nom de votre style. Ici se serra :
Ensuite ma fois, l’encodage est pareille a un code CSS normal, voici le code pour le paragraphe à fond rouge avec écriture noir :
Ensuite le paragraphe fond blanc écriture rouge :
Et enfin le paragraphe fond bleu écriture blanche :
Voila, nos trois styles personnalisés sont prêt. Mais maintenant, comment allons nous les insérer dans notre XHTML pour qu’ils s’activent sur chacun des paragraphes ?
C’est ici qu’intervient une commande en XHTML comparable à celle que l’on utilise pour ajouter une image ou un lien. Cette commande peut être insérée dans certaines balises mais pas dans toute !
Tout d’abord cette commande est la suivante :
Cette commande peut être ajoutée dans un certain nombre de balises, je ne les connais pas toutes mais, voici déjà une liste non exhaustive.
et…
Donc, récapitulons :
Nous avons trois paragraphes avec des couleurs de texte et de fond différents, nous venons de créer les styles personnalisés pour chaque paragraphe et nous savons maintenant que la commande pour insérer chaque style dans l’XHTML est (class=""). Le code va donc donner ceci :
![Les Styles personnalisés [niveau intermédiaire] Paraffond02ih5](https://2img.net/r/ihimizer/img206/9735/paraffond02ih5.jpg)
Voila maintenant chaque paragraphe à son style personnel. Faites bien attention qu’il ne faut PAS mettre le « point » devant le nom du style dans la commande «class="" » aussi non il ne se passera rien !
Et maintenant, si nous ne voulons pas que le style s’applique à un paragraphe mais a un seul mots pour le mettre en évidence ?
Et bien c’est ici que rentre en jeux la balise
Nous ne pouvons pas utiliser « p » car il créerait des interlignes entre le mots mis en évidence et le reste du texte, nous ne pouvons pas non plus utiliser « div » qui en ferrait de même, alors nous allons utiliser la balise « span » qui elle ne modifie pas la présentation de la page
Petit exemple :
![Les Styles personnalisés [niveau intermédiaire] Paraffond03uh1](https://2img.net/r/ihimizer/img206/3945/paraffond03uh1.jpg)
Avec « span » nous avons pu mettre (Attention) en évidence sans avoir modifié la structure de la phrase. Ainsi vous pourrez surligner comme avec un fluo les mots qui sont important dans un texte.
Voila qui clôture le sujet des « styles personnalisés ». Pour toutes questions n’hésitez pas à laisser un message.
Axandro
Comme vous pouvez le constater j’ai mis un niveau, pour ceux qui on déjà des bases de XHTML et quelques connaissance en CSS, car ce petit topic ce veut plus poussé en matière de code et donc indubitablement compréhensible seulement au personne qui ont déjà un niveau dans la programmation.
Qu’est ce qu’un style personnalisé ?
Un style personnalisé c’est un code qui n’est attaché à aucune balise. Comme vous le savez dans le CSS bien souvent un code s’attache à une balise que se soit body, p, ou encor table, le CSS sait que quand on ouvre une balise « p » par exemple il doit agir dessus jusqu'à ce qu’on la ferme. Ainsi, vous pouvez colorer le fond d’écran de vos paragraphes, sans toucher au fond de votre écran qui est géré par la balise « body ».
Exemple : voici un code CSS qui va changer le fond d’écran et la couleur d’écriture de tout vos paragraphes.
- Code:
<html>
<head>
<style>
p
{
background-color: red;
color: black;
}
</style>
</head>
<body>
<p>Voici un paragraphe modifier en CSS</p>
</body>
</html>
Ceci est un code CSS de base, le paragraphe prend une couleur de fond rouge, et une couleur de texte noir. Et chaque fois que vous ouvrirez un paragraphe cela mettra un fond rouge une écriture noir.
Mais alors quand on a trois paragraphes et que l’on veut que le premier ait un fond d’écran rouge avec écriture noir, le deuxième fond blanc avec écriture rouge et le troisième bleu avec écriture blanche ?
Et bien c’est ici qu’interviennent les styles personnalisés. Comme « p » en CSS ne peut pas gérer plusieurs informations il va falloir créer ses propres styles.
Comment ça marche ?
C’est assez simple, en faite il faut commencer par trouver un nom à donner à sont style personnel, ça peut être n’importe quoi, mais parce que tout bon programmateur utilise des nom structurés et bien compréhensibles, n’appelez par votre style « Pomme ou PèreNoël ».
Ici je vais les appeler, paragrapherouge, paragrapheblanc, paragraphebleu, en rapport avec leur couleur de fond.
Alors comment ça ce passe ?
Et bien il faut savoir que quand on fait un style personnel, avant d’écrire le nom de ce style il faut un « point », ce point se trouve toujours devant le nom de votre style. Ici se serra :
- Code:
.paragrapherouge
.paragrapheblanc
.paragraphebleu
Ensuite ma fois, l’encodage est pareille a un code CSS normal, voici le code pour le paragraphe à fond rouge avec écriture noir :
- Code:
.paragrapherouge
{
background-color: red ;
color: black ;
}
Ensuite le paragraphe fond blanc écriture rouge :
- Code:
.paragrapheblanc
{
background-color: white ;
color: red;
}
Et enfin le paragraphe fond bleu écriture blanche :
- Code:
.paragraphebleu
{
background-color : blue ;
color: white;
}
Voila, nos trois styles personnalisés sont prêt. Mais maintenant, comment allons nous les insérer dans notre XHTML pour qu’ils s’activent sur chacun des paragraphes ?
C’est ici qu’intervient une commande en XHTML comparable à celle que l’on utilise pour ajouter une image ou un lien. Cette commande peut être insérée dans certaines balises mais pas dans toute !
Tout d’abord cette commande est la suivante :
- Code:
class="nom de votre style"
Cette commande peut être ajoutée dans un certain nombre de balises, je ne les connais pas toutes mais, voici déjà une liste non exhaustive.
- Code:
<div class=""></div>
<p></p>
<h1></h1> // jusque h6
<hr class=""> </hr>
<table class=""></table>
<tr class=""></tr>
<td class=""></td>
et…
- Code:
<span class=""></span>
Donc, récapitulons :
Nous avons trois paragraphes avec des couleurs de texte et de fond différents, nous venons de créer les styles personnalisés pour chaque paragraphe et nous savons maintenant que la commande pour insérer chaque style dans l’XHTML est (class=""). Le code va donc donner ceci :
- Code:
<html>
<head>
<style>
.paragrapherouge
{
background-color: red;
color: black;
}
.paragrapheblanc
{
background-color: white;
color: red;
}
.paragraphebleu
{
background-color: blue;
color: white;
}
</style>
</head>
<body>
<p>
Voici le paragraphe à fond rouge changé avec le style CSS
</p>
<br>
<p>
Voici le paragraphe à fond blanc changé avec le style CSS
</p>
<br>
<p>
Voici le paragraphe à fond bleu changé avec le style CSS
</p>
</body>
</html>
Voila maintenant chaque paragraphe à son style personnel. Faites bien attention qu’il ne faut PAS mettre le « point » devant le nom du style dans la commande «class="" » aussi non il ne se passera rien !
Et maintenant, si nous ne voulons pas que le style s’applique à un paragraphe mais a un seul mots pour le mettre en évidence ?
Et bien c’est ici que rentre en jeux la balise
- Code:
<span></span>
Nous ne pouvons pas utiliser « p » car il créerait des interlignes entre le mots mis en évidence et le reste du texte, nous ne pouvons pas non plus utiliser « div » qui en ferrait de même, alors nous allons utiliser la balise « span » qui elle ne modifie pas la présentation de la page
Petit exemple :
- Code:
<p> Faites très <span class="paragrapherouge">attention</span> de ne pas ingérer cette plante car elle est toxique</p>
Avec « span » nous avons pu mettre (Attention) en évidence sans avoir modifié la structure de la phrase. Ainsi vous pourrez surligner comme avec un fluo les mots qui sont important dans un texte.
Voila qui clôture le sujet des « styles personnalisés ». Pour toutes questions n’hésitez pas à laisser un message.
Axandro
Axandro
-
Nombre de messages : 51
Age : 39
Localisation : Belgique
Date d'inscription : 21/11/2006 -
Re: Les Styles personnalisés [niveau intermédiaire]
Fondateur Mar 20 Fév - 11:55
Bonjour mon Ami,
Je te félicite et te remercie pour ton post...
Je ne connais pas l'impact qu'il aura sur les différents membres, mais je sais déjà qu'il m'est très utile et qu'il me permet d'y voir légèrement plus clair dans le monde fantastique mais périlleux des langages du net !
Bien à toi,
PS : je n'hésiterai pas à te solliciter si besoin est
Je te félicite et te remercie pour ton post...
Je ne connais pas l'impact qu'il aura sur les différents membres, mais je sais déjà qu'il m'est très utile et qu'il me permet d'y voir légèrement plus clair dans le monde fantastique mais périlleux des langages du net !
Bien à toi,
PS : je n'hésiterai pas à te solliciter si besoin est
Fondateur-
Nombre de messages : 390
Age : 44
Date d'inscription : 21/11/2006 -
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum