// Style. 2,
balise, classe, identifiant_____

 

Syntaxe

element{type:valeur;type:valeur}

Dans le fichier texte qui constituera la feuille de style, le style d'un élément s'exprime entre accolades { }
Dans ces accolades on peut exprimer plusieurs propriétés sous la forme type:valeur que l'on sépare par un point-virgule .

Quelques exemples de style >

La feuille de style peut définir l'apparence de différents types d'éléments : balise - .classe - #identifiant - pseudo-

Style modifiant un type de balise

Le style déterminé pour une balise s'appliquera chaque fois que le navigateur rencontrera cette balise.

Par exemple :

h3{text-align:center;font-family:arial;color:red}

> dans chaque page web liée à la feuille de style, tous les titres de niveau 3 <h3> seront centrés, en arial et en rouge sans qu'on ait besoin de le préciser à chaque fois.

Variations : classes et identifiants

On pourra modifier incidemment le style d'une balise par une mise en forme propre, tout en gardant les autres propriétés du style général. Cette variation de style peut s'appliquer à plusieurs éléments d'une même page - on parle alors de classe. Lorsque le syle ne doit s'appliquer qu'à un seul élément par page, on le basera plutôt sur l'identifiant de cet élément.

Dans la feuille de style,

Les classes et les identifiants sont identifiées par un nom (que vous choisissez librement) précédé respectivement d'un point (.classe) ou d'un dièse (#identifiant).

Classe

.note {-------} : ce style s'appliquera quelle que soit la balise dotée de cette classe ;

p.note {-------} : ce style s'appliquera seulement aux balises p que l'on dotera de la classe note.

Identifiant

#entete {-------} : ce style s'appliquera quelle que soit la balise de la page ayant l'identifiant ;

div#entete {-------} : ce style s'appliquera seulement à la balise <div id="entete">

 

Application dans la page html

Classe

Pour appliquer l'une des "classe" définies dans la feuille de style à certaines parties d'une page web liée à cette feuille de style , on ajoute l'attribut class= aux balises concernées.

Exemple :

.surligneur{background-color:yellow}

s'utilise ainsi dans le document html :

<h3 class="surligneur"> : ce titre de niveau 3 prendra les propriétés du style .surligneur (Dans notre exemple, se détache sur un fond jaune) tout en gardant les autres propriétés du style de h3 (arial, centré, rouge)

<h3>Une partie du titre sera
<span class="surligneur">mise en valeur</span> le reste gardera le style normal du titre de niveau 3. </h3>

Notez que les noms des classes sont précédés d'un point quand ils sont définis dans la feuille de style mais pas quand ils sont appelés par l'attribut class dans la page html.

Identifiant

De même le style défini par

#navigation{ width:25%;height=auto; background-color: #00FF00; z-index:3; float:left }

s'appliquera à la balise muni de l'identifiant id="navigation", mais cet identifiant ne peut apparaître qu'une seule fois par page web. Par exemple : <div id="navigation">

Les identifiants sont en particulier utilisés pour positionner les différents éléments d'une page ("calques")

Notez que les noms des identifiants sont précédés d'un dièse # quand ils sont définis dans la feuille de style mais pas quand ils sont appelés par l'attribut id dans la page html.

Balises <div> et <span>

Il existe deux balises spéciales qui permettent d'appliquer le style :

<div> s'applique à une succession de balises

<div class="surligneur">
<h1>Le titre</h1>
<p>Le paragraphe
<br />et la nouvelle ligne sont surlign&eacute;s</p>
</div>

Cette balise est très utile pour délimiter le contenu d'un "calque".

<span> s'applique à une partie seulement du contenu d'une balise

<p>Dans ce paragraphe on ne <span class="surligneur">surligne</span> que le verbe</p>

Pseudo-classes et pseudo-éléments

Il existe aussi des "pseudo-classes" et des "pseudo-éléments"qui déterminent un style en fonction du "statut" ou de la position d'un élément. Les noms des pseudo-classes et pseudo-éléments sont standardisés .
Dans la page html, on n'ajoute pas d'attribut spécifique car ces styles s'appliquent automatiquement en fonction du contexte.

Par exemple :

pseudo-classes

a:hover{---}  : aspect du lien lorsque la souris est-dessus,
a:visited{---} : aspect du lien lorsqu'il a été visité.

pseudo-éléments

p::first-letter  : aspect de la première lettre des paragraphes ;
.surligneur::first-line{---} : aspect de la première ligne des éléments ayant la classe "surligneur".

Notez que les noms des pseudo-classes sont précédées de "deux-points" (:)et que celui des pseudo-éléments est précédé d'un "double deux-points" (::) quand ils sont définis dans la feuille de style mais pas quand ils sont appelés par l'attribut class. Les navigateurs ne reconnaissent pas toujours ces styles.

---

---