CSS CHAPITRE 3 - INCLUSION

III - INCLUSION

Dans la première partie chapitre 1 nous avons vue , compris la notion de CSS et dans le second vue de maniere claire sa synthaxe alors il est temps pour nous de découvrir comment l'inclure dans un document HTML . Ainsi Il existe quatre façons d'associer des styles à votre document HTML. Les méthodes les plus couramment utilisées sont le CSS en ligne et le CSS externe reternez cela .

Le CSS intégré : Le <style> élément

Vous pouvez mettre vos règles CSS ( vue dans le chapitre 2 ) dans un document HTML en utilisant l'élément <style>. Cette balise est placée à l'intérieur des balises <head> ... </head>. Les règles définies à l'aide de cette syntaxe seront appliquées à tous les éléments disponibles dans le document. Voici la syntaxe générique :

<head>

Regles de Style ............

</style>

</head>

Les attributs associés aux éléments du Tag <style> sont :

Attribut

Valeur

Description

type

text/css

Alors lui il Spécifie la langue de la feuille de style comme un type de contenu (type MIME). Il s'agit d'un attribut obligatoire

media

all

screen

projection

handheld

Lui il précise l'appareil sur lequel le document sera affiché. La valeur par défaut est all. Il s'agit d'un attribut facultatif

Exemple :

<head>

h4 {color:#ff0000 ;}

</style>

</head>

Le CSS en ligne - L'attribut de style

Vous pouvez utiliser l'attribut de style de tout élément HTML pour définir des règles de style. Ces règles seront appliquées à cet élément uniquement. Voici la syntaxe de Base:

NB: Dans la Synthaxe de Base " <element " fait office a n'importe de quel Tags applicable tel que H1 , P , BR nous y verons mieux cela dans l"exemple plus Bas .

Les attributs associés aux attributs ( je sais sa Fait un peux redondance mais c'est un tout petit peux ca ) du Tag <style> sont :

Attribut

Valeur

Description

Style

Regle de style

Alors La valeur de l'attribut de style est une combinaison de déclarations de style séparées par un point-virgule ( ;).

Exemple :

Et bien les amies ceci est ce que l'on nomme une Inline en CSS ou encore CSS en Ligne.

</h1

Le CSS en Exertene - L'élément < Link >

Alors L'élément <link> peut être utilisé pour inclure un fichier de feuille de style externe dans votre document HTML tout simplement.

En faits une feuille de style externe est un fichier texte séparé avec une extension .css . Vous définissez toutes les règles de style dans ce fichier texte et vous pouvez ensuite inclure ce fichier dans n'importe quel document HTML en utilisant l'élément <link> c'est pas génial ça !.

Ainsi voici la syntaxe de Base de l'inclusion d'un fichier CSS externe :

Les attributs associés aux attributs ( je sais sa Fait un peux redondance mais c'est un tout petit peux ca ) du Tag <style> sont :

Attribut	Valeur	Description
type	text/css	Alors lui il Spécifie de maniere claire la langue de la feuille de style comme un type de contenu (type MIME). Cet attribut est obligatoire.
href	URL	Alors lui il va indiquer le fichier de feuille de style ayant des règles de style. Cet attribut est obligatoire.
media	all screen tv projection handheld	Lui il précise l'appareil sur lequel le document sera affiché. La valeur par défaut est all. Il s'agit d'un attribut facultatif

Exemple :

Okey Considérons un simple fichier de feuille de style nommé de style Mycss_joel.css ( Remarquez en Rouge vous avez le nom de votre fichier et en bleue L'extension .css ) Alors ce Fichier dispose des Règles suivantes :

h4,p {

color :#00FFFF ;

}

Okey Maintenant Considérons un simple fichier HTML nommé de style MyHtml_joel.html ( Remarquez en Rouge vous avez le nom de votre fichier et en bleue L'extension .html ) Alors dans ce fichier nous allons inclure une Feuille de Style comme suit :

<head>

</head>

<Body>

<H1> Bienvenue sur Le site PandaCodeur.com </H1>

<p> Ouais vraiment le Css est Tres shouette ! </p>

<h4> Découvre Plus de cours Ici !!! </h4>

<p> Super Super Super Shouette ! </P>

<Body>

En Résumé : Alors qu'avons nous crée la et Bien pour une Feuille de style nommée Mycss_joel.css nous avons énumérez une règles de style stipulant clairement que tout les éléments Tags ( h4 , p ) doivent avoir un style color :#00FFFF cet a dire tout texte contenue entre ses balises auront une couleur Bleue Aqua on remarque aussi que cette règles n'est applicable qu'uniquement a ses deux Eléments du cout les Autres Eléments n'en seront point concernés . Pour consulter la liste des Couleurs avec leurs Code Hexadecimal dirigés vous la ⇒ Codeur Couleur CSS & HTML .

Le CSS Impoté - L'élément @import

Alors L'élément @import est utilisé pour importer une feuille de style externe d'une manière similaire à l'élément <link>.

Voici la syntaxe de Base :

Nous Pouvons aussi adopter cette Synthaxe :

</head> <@import url("URL"); </head>

Exemple :

h4,p {

color :#00FFFF ;

}

Okey Maintenant Considérons un simple fichier HTML nommé de style MyHtml_joel.html ( Remarquez en Rouge vous avez le nom de votre fichier et en bleue L'extension .html ) Alors dans ce fichier nous allons inclure une Feuille de Style comme suit :

<head>

@import "Mycss_joel.css";

</head>

<Body>

<H1> Bienvenue sur Le site PandaCodeur.com </H1>

<p> Ouais vraiment le Css est Tres shouette ! </p>

<h2> Découvre Plus de cours Ici !!! </h2>

<p> Super Super Super Shouette ! </P>

<Body>

En Résumé : Alors qu'avons nous crée la et Bien pour une Feuille de style nommée Mycss_joel.css nous avons énumérez une règles de style stipulant clairement que tout les éléments Tags ( h2 , p ) doivent avoir un style color :#00FFFF cet a dire tout texte contenue entre ses balises auront une couleur Bleue Aqua on remarque aussi que cette règles n'est applicable qu'uniquement a ses deux Eléments du cout les Autres Eléments n'en seront point concernés . Pour consulter la liste des Couleurs avec leurs Code Hexadecimal dirigés vous la ⇒ Codeur Couleur CSS & HTML .

Complément :

Vous avez vue comment mon code est Structuré il peut vite tournez au cauchemar si on l'indente pas tres bien et aussi il savere tres difficile lorsque vous ne préciser pas le role exacte de Chaque regle de style par un petit commentaire alors souvent, vous devrez ajouter des commentaires supplémentaires dans les blocs de votre feuille de style. Il est donc très facile de commenter n'importe quelle partie de la feuille de style. Vous pouvez utiliser /* ....*/ pour commenter des blocs de plusieurs lignes .

/* Alors ceci est Notre Feuille de style nommée Myccs_joel2.CSS */

h1,h2,h3,h4 {

color:#36C;

font-family: Verdana, Geneva, Arial;

font-size : 12px;

}/* end of style rules. */

En Résumé :

Nous arrivons au terme de ce merveilleux chapitre ou nous avons discuté sur les quatre façons d'inclure des règles de feuilles de style dans un document HTML. Je profite de ce dernier échange avant que l'on se quitte de vous proposer la règle qui permet de passer outre toute règle de feuille de style :

⇒Elle stipule que toute feuille de style en ligne a la priorité absolue en fait toute règle définie dans les balises <style>...</style> ou les règles définies dans un fichier de feuille de style externe.

⇒Toute règle définie dans les balises <style>...</style> remplacera les règles définies dans un fichier de feuille de style externe.

⇒Toute règle définie dans le fichier de feuille de style externe a la priorité la plus faible, et les règles définies dans ce fichier ne seront appliquées que lorsque les deux règles que nous venons d'énumérer ci-dessus ne sont pas applicables éh oui .

Ajouter un commentaire

Nom

E-mail

Site Internet

Message

Aperçu

Anti-spam