Comment utiliser le composant jumbotron Bootstrap et le composant page-header.
la propriété css @import définition et utilisation
La propriété CSS @import permet de charger et d'appliquer des feuilles de style externes dans un document HTML. Elle doit être placée en début de fichier CSS, avant toute règle de style.La Syntaxe CSS
Voici la syntaxe générale de la propriété @import :
@import url('chemin/vers/la/feuille/de/style.css') media (média);
url('chemin/vers/la/feuille/de/style.css') est le chemin vers la feuille de style à importer. Ce chemin peut être absolu ou relatif au document HTML.
media (média) est optionnel et permet de spécifier le type de média pour lequel la feuille de style doit être appliquée. Si cet attribut est omis, la feuille de style sera appliquée pour tous les médias.Voici quelques exemples d'utilisation de la propriété @import :
Pour importer une feuille de style sans spécifier de média :
Exemple Copier le code
@import url('chemin/vers/la/feuille/de/style.css');
Pour importer une feuille de style uniquement pour les écrans de taille inférieure à 800 pixels de large :
Exemple Copier le code
@import url('chemin/vers/la/feuille/de/style.css') media (max-width: 800px);
Pour importer une feuille de style uniquement pour les imprimantes :
Exemple Copier le code
@import url('chemin/vers/la/feuille/de/style.css') media print;
Il est également possible de spécifier plusieurs types de média en utilisant une virgule pour les séparer :
Exemple Copier le code
@import url('chemin/vers/la/feuille/de/style.css') media (max-width: 800px), print;
Cette syntaxe importe la feuille de style pour les écrans de taille inférieure à 800 pixels de large et pour les imprimantes.Remarque : Il est important de noter que la propriété @import est moins performante que l'utilisation de la balise <link> dans le head du document HTML pour charger une feuille de style, car elle nécessite un appel supplémentaire au serveur pour récupérer la feuille de style.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 1 | 5.5 | 1 | 1 | 3.5 |
Quand préférer la propriété CSS @import à la balise link pour charger des feuilles de style?
Il est généralement préférable d'utiliser la balise link pour charger des feuilles de style plutôt que la propriété @import.Voici quelques raisons pour lesquelles il peut être préférable d'utiliser la balise link :
La balise link est plus performante que la propriété @import. En effet, lorsque le navigateur charge une page, il commence par charger le contenu HTML et, pendant ce temps, il peut également charger les feuilles de style liées avec la balise link. Avec la propriété @import, le navigateur doit attendre que le contenu HTML soit entièrement chargé avant de pouvoir charger la feuille de style, ce qui peut ralentir le temps de chargement de la page.
La balise link permet de spécifier le type de média pour lequel la feuille de style doit être appliquée, tandis que la propriété @import ne le permet pas.
La balise link peut être placée dans le head du document HTML, tandis que la propriété @import doit être placée en début de fichier CSS, avant toute règle de style.
Il y a toutefois quelques cas où il peut être préférable d'utiliser la propriété @import :
Si vous souhaitez charger une feuille de style seulement dans certains cas, par exemple si le JavaScript est désactivé ou si le navigateur ne prend pas en charge certaines fonctionnalités.
Si vous souhaitez charger une feuille de style uniquement pour un type de média spécifique, par exemple pour les imprimantes.
Dans l'ensemble, il est recommandé d'utiliser la balise link pour charger des feuilles de style, sauf si vous avez des raisons spécifiques de préférer la propriété @import.
Regarder aussi notre tutoriel : Où mettre du CSS ?