// style. 2,
balise, classe, identifiant_____

 

Syntaxe

element{type:valeur;type:valeur}

Dans 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

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}

> chaque titre de niveau 3 <h3> sera centré, en arial et rouge sans qu'on ait besoin de le préciser à chaque fois.

Variations : classes et pseudo-classes

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. Ces variations sont appelées des "classes".

Dans la feuille de style,

les classes sont identifiées par un nom (que vous choississez librement) précédé d'un point :

.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.

Application dans la page html

Pour appliquer l'une des variations ("classe") définies dans la feuille de style, on ajoute l'attribut class= à la balise concernée.

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.

Pseudo-classes

Il existe aussi des "pseudo-classes" qui détermine un style en fonction du "statut" d'un élément. Dans la feuille de style, leur nom est précédé de deux-points ; les noms des pseudo-classes sont standardisés. Dans la page html, on ne les appelle pas puisqu'ils s'appliquent automatiquement en fonction du contexte.

Par exemple :

a:hover{---} aspect du lien lorsque la souris est-dessus,
a:visited{---} : aspect du lien lorsqu'il a été visité ;
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".

Style propre à seul élément de la page

Un identifiant est un attribut qui sert à distinguer de façon unique un type d'élément sur la page. Ainsi, Il ne peut y avoir qu'une image <img id= "logo" src= -------- > sur la page. Il ne peut y avoir qu'une balise <div id="margegauche"> sur la page Deux balises différentes peuvent avoir le même identifiant <div id="entete"> <img id="entete">

On peut définir un style propre à chaque identifiant dans la feuille de style

• #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">

Balises <div> et <span>

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

<div> s'applique à un ensemble 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>

---

---