Maison >interface Web >tutoriel CSS >Qu'est-ce que le CSS (feuilles de style en cascade) ?

Qu'est-ce que le CSS (feuilles de style en cascade) ?

青灯夜游
青灯夜游original
2019-05-17 09:26:036017parcourir

CSS est l'abréviation de Cascading Style Sheets. Il s'agit d'un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML (une application du langage de balisage généralisé standard) ou XML (un sous-ensemble du langage de balisage généralisé standard).

CSS est principalement utilisé pour définir l'apparence du site Web afin de rendre notre site Web plus beau et accrocheur ; il peut non seulement modifier statiquement les pages Web, mais également coordonner dynamiquement avec différents langages de script. Formatez divers éléments de la page Web.

CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque tous les styles de taille de police et a la capacité de modifier les objets de page Web et les styles de modèle.

Les feuilles de style CSS définissent la couleur, la taille et la position du texte et d'autres balises HTML, tandis que les fichiers HTML définissent le contenu et la façon dont il est organisé. Les séparer vous permet de modifier la palette de couleurs sans avoir à réécrire l'intégralité du site.

La mise en cascade signifie que les styles appliqués à l'élément parent seront également appliqués à tous les éléments enfants de l'élément parent. Par exemple, définir la couleur du corps du texte signifie que tous les titres et paragraphes du corps du texte seront également de la même couleur.

Spécifier et utiliser les styles

Il existe trois manières principales d'inclure une page Web ou une feuille de style de site :

1. Définissez l'attribut de la balise, appelé style en ligne

2. Utilisez la balise c9ccee2e6ea535a969eb3f532ad9fe89

3. Créez et créez des liens vers des fichiers CSS externes, appelés feuilles de style externes.

Les feuilles de style de base modifient généralement l'apparence des balises HTML telles que 6c04bd5ca3fcae76e30b72ad730ca86d et e388a4556c0f65e1904146cc1a846bee. Lors de l'utilisation de fichiers CSS ou de feuilles de style dans les fichiers d'en-tête, nous pouvons également définir des classes de style et les appliquer à n'importe quel élément en utilisant l'attribut class="?", mais cela dépasse le cadre de ce simple guide.

Style en ligne

Caractéristiques :

1), le style en ligne est placé dans l'élément HTML du code.

2) Lorsque vous utilisez des styles en ligne, les styles n'affecteront que les éléments que vous sélectionnez.

3), les styles en ligne n'ont pas de sélecteurs

Remarque : les styles en ligne définis en HTML ne s'appliquent qu'aux balises auxquelles ils sont ajoutés.

<p style="color:red;">Some red text</p>

Style intégré

Fonctionnalités :

1), est placé dans la balise de style3305042299cd457cacd153ab09550fc2 e90442d4aba9b6409c93259f982d1eec est écrit dans la section d'en-tête de la page Web.

2), le style écrit ne sera utilisé que sur la page web où vous l'utilisez.

3), les styles intégrés sont aussi appelés "styles internes"

Les styles définis dans l'en-tête seront appliqués à l'ensemble de la page. L'exemple ci-dessous fera en sorte que toutes les balises h1 de la page affichent le titre en rouge.

<head>
   <style type="text/css"> 
       h1 { color: red; }
   </style>
</head>

Feuille de style externe

Comme les fichiers HTML, les fichiers CSS sont du texte brut et ont généralement une extension de fichier .css ; ils peuvent être transmis via des balises spécifiques ; pour le lier dans le fichier HTML.

Caractéristiques :

1), rédigé dans un document séparé puis joint à divers documents web

2), le modifier peut affecter toutes les pages que vous appelez

3), facile à modifier

Par exemple, le contenu du fichier style.css peut être le suivant :

body { background-color: beige; color: #000080;}
h1 { color: red;}

Ensuite, vous pouvez utiliser 407da91fd18a23f1d2386ba7fd713e2e L'en-tête est introduit pour prendre effet.

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>

La plupart des sites Web utilisent aujourd'hui des feuilles de style externes, qui sont des styles écrits dans des documents séparés puis ajouté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.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn