Latest web development tutorials

Créer CSS

Lors de la lecture d'une feuille de style, le navigateur sera basé sur son document HTML formaté.

Comment insérer la feuille de style

Insérez la feuille de style de trois façons:

  • feuille de style externe
  • feuille de style interne
  • le style Inline

feuille de style externe

Lorsque le style est appliqué à de nombreuses pages nécessaires, une feuille de style externe serait le choix idéal. Dans le cas d'une feuille de style externe, vous pouvez modifier un fichier pour modifier l'apparence de l'ensemble du site. Chaque page utilise la balise <link> pour créer un lien vers une feuille de style. Balise <link> dans le (document) Chef:

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

Le navigateur va lire à partir du fichier de déclaration de style mystyle.css en accord avec elle pour formater le document.

feuille de style externe peut être édité dans un éditeur de texte. Les fichiers ne peuvent contenir de balises HTML. Feuille de style devrait être enregistré avec le Css d'extension. Voici un exemple d'un fichier de feuille de style:

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

remarque Ne pas laisser des espaces entre la valeur de la propriété et des unités. Si vous utilisez le "margin-left: 20 px" à la place "margin-left: 20px", il est seulement valable dans IE 6, mais il ne fonctionne pas dans Mozilla / Firefox ou Netscape.

feuille de style interne

Quand un seul document nécessite un style spécial, feuille de style interne doit être utilisé. Vous pouvez utiliser le tag <style> dans la tête du document pour définir la feuille de style interne, comme ceci:

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

le style Inline

En raison de la performance et le contenu mélangé ensemble, les styles en ligne vont perdre beaucoup des avantages des feuilles de style. S'il vous plaît mettre en garde cette méthode, par exemple, lorsque le style doit être appliqué qu'une seule fois sur un élément.

Pour utiliser les styles en ligne, vous devez utiliser l'attribut (style) dans la balise correspondante. attribut de style peut contenir toute propriété CSS. Cet exemple montre comment changer la couleur du paragraphe et la marge de gauche:

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

Plusieurs styles

Si certains attributs sont définis dans le même sélecteur différentes feuilles de style, alors la valeur de la propriété à partir de la feuille de style plus spécifique est héritée.

Par exemple, une feuille de style externe a trois propriétés pour le sélecteur h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

La feuille de style interne a deux propriétés pour le sélecteur h3:

h3
{
text-align:right;
font-size:20pt;
}

Si le style a des feuilles de style internes et des feuilles de style externes lien avec cette page en même temps, puis get h3 est:

color:red;
text-align:right;
font-size:20pt;

Telle est la propriété de couleur sera héritée de la feuille de style externe et la disposition du texte (text-alignement) et taille de la police (font-size) seront remplacées par les règles de feuille de style interne.

Plusieurs styles sont stratifiées une

Les feuilles de style permettent des informations de style spécifié de différentes manières. Les styles peuvent être spécifiés dans un élément HTML unique, le premier élément de la page HTML, ou dans un fichier CSS externe. Même plusieurs feuilles de style externes peuvent être référencées dans un document HTML.

L'ordre de superposition

Lorsque le même élément HTML est défini par plus d'un style, quel style va l'utiliser?

En général, tous les styles seront empilés dans une nouvelle feuille de style virtuelle selon les règles suivantes, où le numéro 4 a la plus haute priorité.

  1. Navigateur par défaut
  2. feuille de style externe
  3. feuille de style interne (dans la balise <head> à l'intérieur)
  4. (éléments HTML à l'intérieur) de style Inline

Ainsi, un style en ligne (à l'intérieur d'un élément HTML) a la plus haute priorité, ce qui signifie qu'il a la priorité sur la déclaration de style suivante: label déclaration de style, déclaration externe de style de feuille de style, ou de la déclaration de style du navigateur (valeur par défaut).

remarqueAstuce: Si vous utilisez un fichier de style externe dans le <head> est également défini le style, la feuille de style remplacera les fichiers externes de style interne.