Styles & Classes CSS

La redéfinition des balises Html et la création de classes permet:

• D'améliorer la présentation des pages Html.
• De créer des sites homogènes et facilement maintenables.

Redéfinition des balises Html dans la page courante

Pour redéfinir la balise Html H2 par exemple:

• Utiliser la commande Texte/Styles Css/Nouveau style
• Choisir la balise H2.
• Choisir Seulement ce document.

Choisir les propriétés de H2:

Le code qui redéfinit la balse hé se présente ainsi:

<style type="text/css">
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px;color: #33CCFF;}
</style>

Création de classes dans la page courante

Sur cet exemple, nous créons une classe .Surligne

Pour appliquer la classe à un texte:

• Sélectionner le texte
• Faire apparaître la fenêtre Styles Css
• Choisir la classe

La classe .surligne est codée ainsi :

<style>
.surligne { background-color: #FFFF99;}
</style>

Le code du texte auquel la classe a été appliqué est:

<p>Pour <span class="surligne">appliquer la classe</span> &agrave; un texte:</p>

Redéfinition des liens hyper-texte

L'option Utiliser le sélecteur Css permet de définir l'aspect des liens hyper-textes:

• a:link : liens non visités
• a:visited : liens visités
• a:hover : lien au survol

Sur l'exemple, le lien devient rouge au survol:

Google

Le code Css généré est le suivant:

a:link {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;color: #000000; text-decoration: underline;}
a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;color: #000000; text-decoration: underline;}
a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;color: #ff0000; text-decoration: underline;}

Exportation des styles et classes d'une page vers une feuille de styles externe

Une feuille de style externe permet de définir les styles et classes pour toutes les pages d'un site qui sont attachées à celle ci. Pour exporter les styles et classses d'un page:

• Utiliser la commande:Texte/Styles Css/Exporter les styles
• Donner un nom à la feuille de styles:mestyles.css par exemple.

Attachement à une feuille de styles externe

Dans une page, pour utiliser les styles et classes d'une feuille de styles externe, utiliser la commande:

Texte/Styles Css/Attacher feuille de styles

Le code généré est : <link href="messtyles.css" rel="stylesheet" type="text/css">

Autres exemples de classes

Lettre en grand (créer une classe .grand)

• Sélectionner le texte
• Affecter la classe .grand

Il y avait une fois une petite fille appelée Alice, et elle fit un rêve très curieux. Aimeriez-vous savoir ce dont elle rêva ? Eh bien, voici la chose qui, en premier, arriva. Un Lapin Blanc passa par là d'un pas pressé mais juste au moment de croiser Alice, il s'arrêta et tira sa montre de son gousset.

Classe pour tableau (créer une classe .tableau)

• Appliquer la classe .tableau au tableau ou aux cellules.

Texte dans une cellule	Texte dans une cellule	Texte dans une cellule
	Texte dans une cellule
		Texte dans une cellule

Paragraphe avec marge (créer une classe .monparagraphe)

Les marges et le remplissage se définissent dans Boîte.

Il y avait une fois une petite fille appelée Alice, et elle fit un rêve très curieux. Aimeriez-vous savoir ce dont elle rêva ? Eh bien, voici la chose qui, en premier, arriva. Un Lapin Blanc passa par là d'un pas pressé mais juste au moment de croiser Alice, il s'arrêta et tira sa montre de son gousset.

Balise Input d'un formulaire/Balise Select d'un formulaire

Sur l'exemple, nous redéfinissons les balises Input et Select