Maison >interface Web >tutoriel CSS >Quelles sont les manières d'introduire des styles en CSS ?
Quelles sont les manières d'introduire des styles en CSS ?
- 清浅original
- 2018-11-17 16:26:396467parcourir
Cet article expliquera comment introduire les feuilles de style CSS et les avantages et inconvénients entre elles. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde.
Les feuilles de style peuvent être introduites dans CSS de trois manières :
(1) Style en ligne
(2) Style intégré
(3) Styles externes
Chacun de ces styles CSS a ses avantages et ses inconvénients. Ensuite, nous vous les présenterons en détail
Styles en ligne
Fonctionnalités : (1) Les styles en ligne sont placés dans les éléments HTML du code.
(2) Lorsque vous utilisez des styles en ligne, les styles n'affecteront que les éléments que vous sélectionnez.
(3) Le style en ligne n'a pas de sélecteur
Exemple :
<div style="width:100px;height:100px;border:1px solid #ccc"><div>
Ce style en ligne CSS uniquement Vous pouvez modifiez la largeur et la hauteur de ce div. Cela ne changera pas le style d’un div ou d’un attribut sur la page. C'est l'une des limites des styles en ligne. Ce n'est pas une bonne pratique car ils n'apportent des modifications qu'à des éléments spécifiques, les styles en ligne sont également très spécifiques. Cela rend difficile leur remplacement par d'autres styles non en ligne et, en fait, nous utilisons rarement des styles en ligne sur les pages Web.
Style intégré
Caractéristiques : (1) Est placé dans la balise de style 77950c9f2251753dbe0034fb47748b31 partie de tête.
(2) Le style écrit ne sera utilisé que sur la page Web où vous l'utilisez.
(3) Les styles intégrés sont également appelés « styles internes »
Exemple
<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Les styles intégrés sont des styles intégrés dans l'en-tête du document. Les styles intégrés n'affectent que le balisage de la page sur laquelle ils sont intégrés. Encore une fois, cette approche annule l’un des avantages du CSS. Étant donné que chaque page a des styles, si vous souhaitez apporter une modification à l'échelle du site, comme changer la couleur d'un lien du rouge au vert, vous devez effectuer cette modification sur chaque page puisque chaque page utilise une feuille de style intégrée. C'est mieux que les styles en ligne, mais cela reste problématique dans de nombreux cas.
Feuille de style externe
Caractéristiques : (1) Rédigée dans un document séparé puis jointe à divers documents Web
(2) Modification Elle peut affectent toutes les pages que vous appelez
(3) Facile à modifier
Exemple
<link href=“demo.css”rel=“stylesheet”type=“text/css> 在demo文件下写css样式
La plupart des sites Web utilisent aujourd'hui des feuilles de style externes, et les styles externes sont dans Les styles sont écrits dans documents séparés, puis annexés à divers documents Web. Les feuilles de style externes affectent tous les fichiers auxquels elles sont connectées, ce qui signifie que si vous avez un site Web de 20 pages et que chaque page utilise la même feuille de style, lorsque des modifications doivent être apportées, vous pouvez simplement modifier la feuille de style pour compléter ces pages à long terme. gestion du site plus facile. L'inconvénient des feuilles de style externes est qu'elles nécessitent que la page obtienne et charge ces fichiers externes. Toutes les pages n'utiliseront pas tous les styles du tableau CSS, donc beaucoup chargeront une page CSS beaucoup plus volumineuse que ce qui est réellement nécessaire.
Résumé : Ce qui précède est l'introduction de cet article à l'introduction des feuilles de style en CSS. J'espère que cet article pourra aider tout le monde à comprendre les styles CSS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!