Comment appeler CSS

WBOY
Libérer: 2023-05-27 11:39:07
original
817 Les gens l'ont consulté

CSS (Cascading Style Sheets) est un langage utilisé pour définir les styles de pages Web. Il peut contrôler la mise en page, les couleurs, les polices, etc. Dans la production de pages Web, nous devons généralement combiner des fichiers CSS avec des fichiers HTML pour obtenir l'effet de style de la page Web. Voyons ensuite comment appeler CSS.

  1. Feuille de style interne

La feuille de style interne est un moyen de définir des styles CSS dans l'en-tête du fichier HTML pour faciliter la commutation et intégrer le code dans le fichier HTML. Cette méthode convient aux styles spécifiques qui ne sont nécessaires que par la page actuelle. Elle est appelée comme suit :

<head>
    <title>我的页面</title>
    <style>
        /* CSS样式代码 */
    </style>
</head>
Copier après la connexion
  1. Feuille de style externe

Une feuille de style externe est un style CSS défini dans un autre fichier puis transmis. le fichier HTML. Le lien fait référence à la méthode du fichier. Cette méthode convient aux situations où plusieurs pages nécessitent le même style, et s'appelle comme suit :

(1) Définissez le code de style dans le fichier CSS

/* style.css */
body {
    background: #f6f6f6;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
Copier après la connexion

(2) Liez le fichier CSS dans le fichier HTML

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="style.css">
</head>
Copier après la connexion
  1. Feuille de style en ligne

La feuille de style en ligne est une méthode d'écriture de styles CSS directement dans les balises HTML. Cette méthode convient aux situations où vous n'avez besoin de définir le style que pour une seule balise. La méthode d'appel est la suivante :

<h1 style="color:red;">这是一个标题</h1>
Copier après la connexion
  1. Importer une feuille de style

L'importation d'une feuille de style est un moyen de définir le style CSS dans un autre fichier et puis transmettez-le dans Comment importer ce fichier dans un autre fichier CSS. Cette méthode est similaire à la structure de la feuille de style externe, mais la méthode d'appel est légèrement différente :

(1) Introduisez le fichier style.css dans le fichier main.css

/* main.css */
@import url('style.css');

/* 下面是对样式的调用 */
body {
    margin: 0;
}

.container {
    width: 960px;
    margin: 0 auto;
}
Copier après la connexion

(2) Liez le fichier main.css dans le Fichier HTML

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="main.css">
</head>
Copier après la connexion
  1. Styles hérités

Les styles hérités sont une méthode permettant d'appliquer les styles des balises parents aux balises enfants. Cette méthode convient aux situations où les éléments ont le même style et où le code peut être simplifié par le style de la balise parent. Par exemple :

div {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

/* 这里的h1将继承div中的color和font-family */
Copier après la connexion

En résumé, il existe de nombreuses façons d'appeler CSS, et vous pouvez choisir différentes méthodes d'appel en fonction des besoins réels. Dans la production de pages Web, l'utilisation de méthodes d'appel CSS appropriées peut mieux obtenir l'effet du style de page Web et améliorer l'expérience utilisateur.

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!