Maison  >  Article  >  interface Web  >  Comment insérer une feuille de style en CSS

Comment insérer une feuille de style en CSS

(*-*)浩
(*-*)浩original
2019-11-26 16:05:162406parcourir

Comment insérer une feuille de style en CSS

Comment insérer une feuille de style

Lorsqu'une feuille de style est lue, le navigateur formatera le document HTML en fonction de celle-ci. Il existe trois manières d'insérer une feuille de style :

Feuille de style externe (Apprentissage recommandé : Tutoriel de démarrage CSS)

Quand le style doit être appliqué Lorsque vous travaillez avec de nombreuses pages, une feuille de style externe serait idéale. Avec les feuilles de style externes, vous pouvez modifier l'apparence de l'ensemble de votre site en modifiant un fichier. Chaque page est liée à la feuille de style à l'aide de la balise 2cdf5bf648cf2f33323966d7f58a7f3f La balise 2cdf5bf648cf2f33323966d7f58a7f3f se trouve dans l'en-tête (du document) :

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

Le navigateur lira la déclaration de style du fichier mystyle.css et formatera le document en fonction de celle-ci.

Les feuilles de style externes peuvent être modifiées dans n'importe quel éditeur de texte. Le fichier ne peut contenir aucune balise HTML. Les feuilles de style doivent être enregistrées avec une extension .css. Voici un exemple de fichier de feuille de style :

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Ne laissez pas d'espaces entre les valeurs d'attribut et les unités. Si vous utilisez "margin-left: 20 px" au lieu de "margin-left: 20px", cela ne fonctionnera que dans IE 6, mais pas dans Mozilla/Firefox ou Netscape.

Feuilles de style internes

Lorsqu'un seul document nécessite un style spécial, une feuille de style interne doit être utilisée. Vous pouvez définir une feuille de style interne en tête du document à l'aide de la balise c9ccee2e6ea535a969eb3f532ad9fe89, comme ceci :

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Inline Styles

Puisque vous souhaitez mélanger présentation avec contenu Ensemble, les styles en ligne perdent de nombreux avantages des feuilles de style. Utilisez cette approche avec prudence, par exemple lorsque le style ne doit être appliqué qu'une seule fois à un élément.

Pour utiliser des styles en ligne, vous devez utiliser l'attribut style dans la balise appropriée. La propriété Style peut contenir n'importe quelle propriété CSS. Cet exemple montre comment changer la couleur et la marge gauche d'un paragraphe :

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

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