Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Utiliser les CSS

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Par gto, le 12 août 2005

1/ Créer des feuilles de style personnalisé, les CLASS :

:arrow: Dans le cas de CLASS en fichier interne :

Tout d'abord, il faut nommer la classe. Dans notre exemple on va nommer cette classe “txt1”. Ensuite il faut mettre ce qui suit dans la balise <head> :

<style type="text/css">
.txt1
{
font-weight: bold;
font-family: Courier;
font-size: 12; }
</style>

Ainsi on remarque qu'un nom de CLASS commence toujours par un point ”.” Si vous l'oubliez, Dreamweaver l'insère automatiquement.

Maintenant que la CLASS a été déclarée , il faut associer cette CLASS au texte pour l'utiliser. Il faut donc insérer au body, dans la balise qui contient le texte (<td><p>), le lien de la CLASS : class=“txt1”

<p class="txt1">Mon texte ici</p>

:!: Voir un exemple de Textes en CSS sur une partie de la page seulement :ici

:arrow: Dans le cas de fichiers externes :

Dans le cas d'un fichier externe, le code CSS ne change pas. Sauf que celui-ci se trouve maintenant dans un fichier à part qui se nomme : “monfichier.css” (notez l'extension du fichier ”.css”) Ainsi, dans ce fichier séparé, on retrouve le code du style CSS, sans balises. Dans notre exemple, ce fichier s'appelle : liens1.css

- On y définit les propriétés des attributs de la CLASS à modifier :

.liens_menu
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration: none;
background-color: #CCCCCC;
color: #660000
}

- Ensuite, vous avez la possibilité soit d'appliquer le style à toute la page, soit de l'appliquer à une partie du texte. Selon le choix, le code (de liaison au fichier externe) ne sera pas inseré dans la même balise.

1/ Pour toute la page : Alors, il faut mettre le code entre les balises <head> et </head>

 <link rel="stylesheet" href="liens1.css" type="text/css">

2/ Pour une partie seulement : Alors, il faut mettre le code entre les balises du body qui renferment le texte à modifier.

 <votrebalise......... class="liens_menu">

:!: Voir un exemple de Textes en CSS sur toute la page :ici

2/ Créer des liens avec les CSS :

A l'aide des CSS vous pouvez contôler les effets de passage de la souris sur un texte-lien. On utilise alors la balise <a>, où l'on redéfinit de nouvelles propriétés pour la fonction a:hover

:arrow: Exemple de CSS interne :

Insérer dans la balise <head> :

<STYLE type="text/css">

a {
font-family: Courier;
font-size: 12pt;
color: #FF0000;
text-decoration: none;
}

a:hover {
font-family: Courier;
font-size: 12pt;
color: #CCCCCC;
text-decoration: overline;
}

</style>

Dans cette exemple la couleur du texte correspondant au lien changera au moment ou la souris sera au dessus et le texte sera surligné.Mais rien ne vous empêche de redéfinir tous les attributs.

La propriétés text-decoration supporte les valeurs suivantes :

a:link → le lien par défaut (non visité et souris non dessus). a:hover → le lien quand la souris est dessus (non cliqué). a:active → le lien quand on clique dessus. a:visited → le lien visité.

none : rien underline : souligné overline : surligné line-through : barré blink : clignotant

:!: Voir un exemple de Liens CSS :ici

3/ Créer une Scrollbar sur Internet Explorer avec les CSS :

Internet Explorer offre une extension à la norme interressante puisqu'elle permet de modifier l'apparence de la barre de défilement de votre navigateur.

:arrow: Exemple de CSS interne:

Insérer dans la balise <head> :

<STYLE type="text/css">
body
{
scrollbar-arrow-color:FF0000;
scrollbar-track-color:FFFFFF;
scrollbar-shadow-color:990000;
scrollbar-face-color:00CC00;
scrollbar-highlight-color:CCCCCC;
scrollbar-darkshadow-color:666666;
scrollbar-3dlight-color:FF0000;
}
</style>

:!: Voir un exemple de Scrollbar colorée pour Internet Explorer :ici

4/ Maîtriser l'impression d'une page à l'aide des CLASS :

Il est par exemple possible d'avoir un rendu différent quand on imprime une page et quand on le visualise dans un navigateur. La gestion de l'impression est sans doute la fonctionnalité la plus intérressante car il est même possible de gérer les sauts de page dans un document html. Avec la propriété “media” associée à la fonction “print” des CSS, vous pouvez maintenant contrôler l'impression de vos pages sans risques.

:arrow: Exemple en CSS interne :

Insérer dans la balise <head> :

<style type="text/css" media="screen">
<!--
.css1
{
font-size: 12pt;
color: blue
}
//-->
</style>

<style type="text/css" media="print">
<!--
.css1
{
font-size: 10pt;
color: black
}
//-->
</style>

Dans cet exemple, le texte sera bleu et de corps 12pt sur l'écran, alors qu'en imprimant la page, le texte aura une taille de 10pt et sera de couleur noire. Libre à vous d'adapter cet exemple avec d'autres attributs.

5/ Créer un tableau à l'aide des CSS :

Un tableau est composé de 3 balises : <table>, <tr> et <td>. En modifiant judicieusement leurs valeurs, vous obtiendrez un effet des plus soigné.

:arrow: Exemple de CSS interne :

Insérer dans la balise <head> :

<STYLE type="text/css">
table
{
border-spacing: 1px;
border-collapse: collapse;
border: 1px blue solid;
}
td
{
font-family: Verdana;
font-size: 12pt;
color: #FF0000;
margin: 1px;
border: 2px red solid;
}
</style>

Dans ce tableau, je n'ai utilisé que les propriétés les plus courantes des attributs CSS, mais vous pouvez améliorer ce style en rajoutant d'autres attributs de votre choix.

:!: Voir un exemple de Tableaux CSS :ici

6/ Créer un formulaire avec les CSS :

Souvent austères et antipatiques, les formulaires restent souvent la partie du site qui ne reflète pas la charte graphique du site. Les feuilles de styles on le pouvoir de redéfinir aisément tous les éléments d'un formulaire. Il faut savoir qu'un formulaire est constitué de plusieurs balises, qui peuvent être redéfinies afin de rendre les formulaires plus attractifs.

:arrow: Exemple avec une feuille de style interne qui redéfinira la balise <input> sur la totalité du document.

Insérer dans la balise <head> :

<style type="text/css">
<!--
input
{
color:#CCCCCC;
background-color:#FF0000;
font-size:12px;
font-family:courier;
font-weight:bold;
}
//-->
</style> 

:!: Voir un exemple de Formulaire CSS :ici

:arrow: Exemple avec l'attribut style sur une partie :

Insérer dans la balise <body> :

<input type="text" style="font-family:Courier;
font-size:12px;
color:#CCCCCC;
background-color:#FF0000;
font-weight:bold" name="texte" value="Votre texte ici" size=20 maxlength=30> 

:arrow: Exemple sur un bouton :

Insérer dans la balise <body> :

<input style="font-family: Arial;
font-size:12px;
color:#999999;
background-color:#990000;
font-weight:bold" type="submit" value="Envoyer"> 

:!: Voir un exemple de Bouton de Formulaire CSS :ici

:arrow: Exemple sur une liste :

Insérer dans la balise <body> :

<select name="exemple" style="font-family: Verdana;font-size:10px">
<option value="choix1" style="color:#000066;background-color:#99ffff">Choix 1
<option value="choix2" style="color:#ffffff;background-color:#339900">Choix 2
<option value="choix3" style="color:#000000;background-color:#ffff33">Choix 3
</select>

:!: Voir un exemple de Liste de Formulaire CSS :ici

7/ Plusieurs CSS sur un seul document :

Il est souvent utile d'avoir plusieurs styles CSS dans une même page. Mettons que vous ayez plusieurs liens auxquels vous aimeriez définir des propriétés CSS différentes. Vous devez redéfinir votre feuille de style en passant par des CLASS, et ainsi avoir accès à plusieurs types de liens pour un même document.

:arrow: Exemple de code des 2 styles CSS (CLASS) à mettre dans la balise <head> :

<style type="text/css">
<!--
a.lien1
{
color:#9999FF;
text-decoration:none;
font-weight:bold;
}
a.lien1:hover
{
color:#FF9900;
text-decoration:underline;
font-weight:bold;
}

a.lien2
{
color:#9999FF;
text-decoration:none;
font-weight:bold;
}
a.lien2:hover
{
color:#FF9900;
text-decoration:underline overline;
font-weight:bold; }
//-->
</style> 

Ensuite, dans la balise <body> repérez la balise où se trouve le texte-lien à redéfinir, et rajouter le code de la class correspondante. Dans notre exemple ce sera :

1/ Soit :

<a href="http://dream.media-box.net" class="lien1">Votre texte</a>

2/ Soit :

<a href="http://dream.media-box.net" class="lien2">Votre texte</a>