Présentation du CSS

Pour mettre en forme un élément html, il faut le cibler à l'aide d'un sélecteur.

Figure: Affectation de styles css au sélecteur h2

h2 {
	font-family: Verdana, sans-serif;
	font-size: 1.4em;
	color: #555;
}

Ici on indique que la police appliquée au titre(s) H2 sera du Verdana et que si le Verdana n'est pas installé sur l'ordinateur de l'internaute, une police sans-serif sera utilisée. Les polices sans-serif sont de types batons avec l'abscence d'empattements aux extrémités du dessin des caractères contrairement aux polices serif.

La taille de la police est exprimée en valeur relative (em) et non pas fixe (px pour pixels). La couleur sera un gris clair et a une valeur hexadécimale qui doit être précédée du symbole #. Il existe d'autres formulations pour donner des valeurs de couleurs.

Les sélecteurs de type. Ils ciblent un type d'élément html particulier, paragraphe ou titre. On les nomme sélecteurs d'éléments ou sélecteurs simple. Ils peuvent être de type :

• balise html

  (p, h1…)

• classe et il s'écrivent avec un point devant

   .items

• identifiant et s'écrivent avec un dièse devant. Au contraire de la classe il ne peut porter au plus que sur un objet unique du document.

   #menu

  Les sélecteurs descendants. Ils permettent de cibler les descendants de l'élément à modifier.

  nav li {padding-left: 10px;}

  Affecte les éléments de liste qui sont les descendants d'un nav.

  #menu ul {padding: 0}

  Affecte les listes qui sont les descendants d'une balise div identifié par menu.

Il s'agit d'affecter des éléments en fonction d'un autre critère que celui de la structure du document (un lien par exemple).

a:link {color:red;}

Pour afficher les liens visités en bleu

a:visited {color:blue;}

:link et :visited sont des pseudo-classes de lien qui ne s'appliquent qu'aux éléments d'ancre.

:hover, :active et :focus sont des pseudo-classes dynamiques pouvant s'appliquer à n'importe quel éléments.

textarea {background:cyan;}
textarea:focus {background:#yellow;}

a:visited:hover {color:yellow}

p:first-letter

Pour mettre en forme la première ligne du paragraphe

p:first-line

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

Les éléments d'une sous liste seront affectés par cette règle :

div > ul {border: 1px solid black;}

<div>
	<ul>
	<li>entrée
		<ul>
			<li>salade</li>
			<li>carottes rapées</li>
		</ul>
	</li>
	<li>Plat</li>
	<li>dessert</li>
	</ul>
</div>

Alors que si on choisit un sélecteur descendant on aura tous les enfants ul de la div qui seront touché par la règle CSS.

div ul {border: 1px solid black;}

Il permet de mettre en forme un élément en raison de sa promixité avec un autre élément.

h2 + p {color:#888;}

permet de cibler un élément en fonction de l'existence ou de la valeur d'un attribut.

abbr[title] {font-weight: bold; border-bottom: 2px dotted #09F;}

Le style ci-dessous permet d'afficher le curseur de la souris avec un point d'interrogation

abbr[title]:hover {cursor: help;}

span[lang="en"] {color:green;}

<p>En anglais pour "Bonjour tout le monde !, on dit : <span lang="en">Hello, world !</span></p>

En CSS, un sélecteur de pseudo-élément applique des styles à des parties du contenu de votre document dans le cas où il n'y a pas d'élément HTML à cibler.

::after cible le dernier enfant virtuel de l'élément sélectionné et est généralement utilisé pour ajouter du contenu esthétique à un élément, en utilisant la propriété CSS content. C'est un élément de type en-ligne par défaut.

p.appel::after {content: "❤"; font-size: 3em; color: red;}

<p class="appel">Hello, world !</p>

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type. Lorsqu'on utilise les sélecteurs simples, ajouter l'astérisque ou non sera équivalent. Ainsi, *.warning et .warning seront équivalents.

Il peut être utile pour appliquer une feuille de style à toutes les balises, ce qui évite l'utilisation du sélecteur multiple (séparé avec des virgules)

* {box-sizing: border-box;}

#entete * {margin-left: 10px;}