4-3 Intégration CSS
Le style peut être intégré de plusieurs manières dans l'HTML :
- Interne : il est directement spécifié dans le fichier HTML
- Externe : il est séparé du HTML dans un fichier CSS
- Local : spécifique à une balise
- Global : le style s'applique à toutes les balises d'une page, voire de toutes les pages d'un site
Cette page reprend les différentes façon d'intégrer le style. Dans l'entête de cette page, les contenus des balises style et link en font partie.
En consultant le code source, vous connaîtrez la syntaxe précise.
- Balise link : pour étalir un lien avec une feuille de style externe, un fichier css.
- Balise style : 2 possibilités : une interne et une externe :
- Interne globale : entre les deux balises style, on saisit le(s) sélecteur(s) accompagné(s) des propriétés et de leurs valeurs.
- Externe globale : une autre façon de faire le lien avec une feuille de style externe : @import url(./fichier2.css)
- Solution locale : on peut intégrer du style dans chaque balise pour lui donner une mise en forme unique. Ex: cf le deuxième paragraphe de la première page sur le style
A noter
- Les différentes méthodes d'intégration seront utilisées car elles ont des fonctionnalités différentes et elles peuvent s'associer ou pas au PHP.
- Les CSS, qui sont valables sur tout le site, sont dans un fichier externe et utilisées par toutes les page du site (1 CSS pour plusieurs pages). Ensuite, le css spécifique à une page peut être intégré à la page
surtout avec php, on aura tendence à mettre du css dans les balises.
- ordre au niveau des 3 façons possible d'intégrer CSS : une hiérachie si conflit? : la proximité a la priorité. La proximité? Le style défini dans la balise (style='...') est plus proche que celle définie dans l'entète du fichier
et est donc prioritaire en cas de conflit mais si il n'y a pas de conflit, les propriétés se cumulent.
Un site :
W3School et le CSS
Exo 4-1-1 : intégration interne du style
Exo 4-1-2 : intégration externe du style
Cliquer ici pour retourner à la page d'accueil