Introduction aux CSS

Transcription

XHTML /CSS
Octobre 2012 - TOUREL David
Introduction aux CSS
CSS: Cascading Style Sheet = feuille de style en cascade
CSS est en quelque sorte la peinture que l'on applique sur xHTML, avec nous allons pouvoir
réaliser de la mise en page et de la mise en forme.
Intégrer du CSS dans un document HTML
Il y a 3 façons d'intégrer les CSS dans un document.
●
D'abord grâce à la balise style dans l'en-tête
<head>
<style type="text/css">
CODE CSS
</style>
</head>
css/ex1/css-1.html
●
Ensuite par le style en ligne, à laide de l'attribut style
<h1 style="CODE CSS">Travaux dirigés</h1>
css/ex2/css-2.html
●
Enfin par un fichier externe chargé dans l'en-tête (head) du document.
<head>
<link href="style.css" rel="stylesheet" media="screen"
type="text/css" />
</head>
✔
rel="stylesheet" précise le type de relation entre le document HTML et la cible, ici une
le type feuille de style.
✔
type="text/css" précise le type de document lié est du texte, ici sous forme de CSS
✔
href="style.css" indique l'emplacement du fichier CSS à utiliser.
✔
media="screen" indique que la feuille de style sera appliquée à l'affichage. Nous aurions
pu avoir media="print" qui spécifie que la feuille de style est appliquée pour
l'impression de la page web. Pour voir l'effet d'une feuille de style d'impression, utilisez
l'aperçu avant impression du navigateur (Fichier >> Aperçu avant impression).
ex3/css-3.html + style.css + print.css
XHTML /CSS
Bases du CSS – Cascade et héritage
Nous utiliserons CSS en version 2.1, actuellement le version 3 est en cours de discussions au W3C.
La syntaxe de CSS est simple, elle est composée de 3 éléments:
–
un sélecteur (la partie avant l'accolade)
–
des propriétés (la partie avant le 2 points)
–
des valeurs (la partie après les 2 points et suivie d'un point virgule pour terminer la ligne)
sélecteur {
propriété: valeur;
}
Il existe plusieurs sortes de sélecteurs, dans le TD 2 nous n'allons utiliser que les 3 sélecteurs de
base:
–
le sélecteur de balise aussi appelé sélecteur d'élément.
–
Le sélecteur d'id
–
Le sélecteur de classe CSS
HTML
<div id="nom_id" class="ma_classe">Texte affiché</div>
CSS
div {
#nom_id {
.ma_classe {
}
}
}
Exemples de sélecteurs simples :
•
h3 {
}
•
#colonne_droite {
}
•
.texte_vert {
}
XHTML /CSS
Une liste exhaustive des propriétés et des valeurs est disponible sur le site du W3C:
http://www.w3.org/TR/CSS21/
La conception de feuille de style fait appel à deux mécanismes fondamentaux: la cascade et
l'héritage
La cascade
La cascade de CSS définit un ordre de priorité (on parle aussi de poids) pour chaque règle de
style lue par le navigateur.
Le calcul du poids est réalisé en fonction de différents facteurs :
- La provenance de la règle CSS appliquée, parmis lesquelles (de la plus faible à la plus forte):
- les styles par défaut du navigateur (définis par les concepteurs du navigateur)
- les styles utilisateurs (définis par la personne qui utilise le navigateur)
- les styles auteur (ceux que vous écrivez en tant que développeur web), pour mémoire :
- Feuilles de style externe, liées avec la balise link
- Feuilles de style interne, dans la balise style
- Style spécifié directement dans la balise, dit style en-ligne, avec l'attribut style
- Le type de sélecteur utilisé, le calcul du poids d'un sélecteur est calculé comme suit:
En simplifiant, plus le sélecteur est précis plus sont poids est élevé. Le poids d'un sélecteur
est donné sur un nombre à 4 chiffres (ABCD) calculé de la façon suivante :
•
A : A=1 s'il ne s'agit pas d'un sélecteur CSS mais d'un attribut style. Sinon, A=0. De cette
manière, un style placé dans l'attribut style d'un élément HTML aura systématiquement un
poids plus élevé qu'un style auteur placé dans une feuille de style (ABCD = 1000, la plus
haute valeur possible) ;
•
B : si A vaut 0, B est le nombre d'ids présents dans le sélecteur. Par exemple, B=2 pour le
sélecteur #conteneur p#special
•
C : si A vaut 0, C est le nombre de classes (du type .ma_classe) dans le sélecteur. Par
exemple, C=2 pour le style .article p a.style_lien
•
D : si A vaut 0, D est le nombre d'éléments HTML et de pseudo-éléments (du type :hover) et
dans le sélecteur. Par exemple, : D=2 pour le style a:hover
XHTML /CSS
C'est donc le style qui dispose du poids le plus important qui est finalement appliqué au
document xHTML.
Dans le cas où à l'issue du calcul, deux règles de poids identiques doivent s'appliquer, c'est la
dernière qui apparaît dans l'ordre de lecture qui l'emporte.
!important
Toutefois il est possible de rompre ce mécanisme avec le modificateur !important, qui permet
ponctuellement de forcer le poids d'une règle CSS pour forcer son application. Ce modificateur
donne plus de poids que n'importe quels chiffres présents aux positions BC et D vues ci-dessus,
cependant A reste prioritaire. !important doit être utilisé à bon escient, il est relativement rare de
devoir s'en servir.
sélecteur {
propriété: valeur !important ;
}
3 exemples :
D'abord faire le fichier xHTML (un titre h1 + 3 paragraphes), reprenez le document
minimal fourni au td1.
●
Puis un fichier CSS dans lequel vous allez définir la couleur de la police pour l'ensemble
de la page, en rouge.
●
exemple cascade/exemple-01.html + style.css
Dans le fichier xHTML, vous allez intégrer dans la balise head du CSS qui spécifie que
les paragraphes seront écrits en bleu, avec un sélecteur d'élément.
●
Dans le même fichier, vous allez intégrer dans la balise paragraphe un style CSS en ligne
qui ajoutera une bordure verte au premier paragraphe.
●
Vous pouvez constater que la couleur rouge du paragraphe a été remplacée par du bleu. En effet
le sélecteur body a le même poids que le sélecteur p utilisé dans l'entête, c'est donc ce dernier qui
s'applique puisqu'il est lu en dernier.
La couleur rouge s'applique donc seulement au titre, pour lequel nous n'avons rien défini.
●
Ajoutons l'attribut id au second paragraphe pour changer sa couleur.
Le sélecteur d'id ayant un poids plus important que le sélecteur de balise précédent, le second
paragraphe prend la couleur voulue
XHTML /CSS
●
Ajoutons l'attribut class au troisième paragraphe pour changer sa couleur.
Dans ce cas c'est le sélecteur de classe qui l'emporte sur le sélecteur de balise.
Héritage
L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en
héritage les styles de son élément Parent. Par exemple, la balise html est parent de body. On parle
généralement de d'arbre que forme le xHTML pour désigner l'imbrication des balises d'un
document.
Cet héritage est très pratique et permet d'éviter de répétitions inutiles : en effet, en attribuant une
propriété et sa valeur à un parent (par exemple font-size: 12px), elle sera transmise à tous ses
enfants, mais aussi aux enfants de ses enfants, etc …
Document de base sans style: exemple-01.html
Document police réduite: exemple-02.html
Document police grossie: exemple-03.html
Sur ce document tous les enfants de la balise body héritent de la taille de la police spécifiée.
La balise h1 présente un cas exceptionnel puisqu'elle hérite proportionnellement de cette taille,
c'est à dire que malgré tout la balise h1 sera affichée plus grande que le reste du texte.
L'héritage ne s'applique pas à toutes les propriétés, mais principalement aux propriétés qui
définissent le type de caractère utilisé, police, couleur et taille. L'héritage est rompu lorsque qu'on
stylise explicitement un élément.
Héritage rompu sur l'élément h1: exemple-04.html
Exercices
Utilisation de !important
•
Créer un fichier xHTML simple contenant 1 titre.
•
Créez deux feuilles de styles dans des fichiers séparés
•
Dans la première, mettez une déclaration qui rend le titre rouge et dans la seconde qui rend
le titre vert.
•
Importez les deux feuilles de styles dans le fichier xHTML.
XHTML /CSS
•
Observer la couleur du titre
•
Dans la première feuille de style, ajouter la valeur !important
•
Renouveler l'observation

Introduction aux CSS

Transcription

Documents pareils

Offre stage

Web design et intégration HTML/CSS

bookmarks - Nathalie Vanassche

Création web - Sites de vente en ligne - Sites vitrine

MAÎTRISER LES STANDARDS DU WEB

BEP CSS

PROJET Le site de la 306 cabriolet

TDM01 : HTML et CSS Fichier - Plateforme e

Formation HTML et CSS

CV – Développeur PHP / WebDesign CSS Aurélie CABON