Ajout CSS
Les feuilles de style peuvent être ajoutés à une page Web de trois façons différentes, qui diffèrent dans leurs capacités.
Les styles de tables liées
Le moyen le plus puissant et pratique pour définir des styles et des règles pour le site. Les styles sont stockés dans un fichier séparé qui peut être utilisé pour toutes les pages Web. Pour connecter les tables connexes styles utilisés balise <link> dans l' en- tête de page (exemple 1).
styles Connexion tables liées: Exemple 1
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Styles </ title>
<Link rel = type "stylesheet" = "text / css" href = "mysite.css">
<Link rel = type "stylesheet" = "text / css" href = "http://www.mysite.ru/main.css">
</ Head>
<Body>
<H1> Bonjour, monde! </ H1>
</ Body>
</ Html>
Le chemin vers le fichier avec les styles peut être relative ou absolue, comme le montre cet exemple.
Les avantages de ce procédé
- Utilisez un seul fichier avec un style pour un certain nombre de pages Web, il est également possible de l'utiliser sur d'autres sites.
- Vous pouvez modifier la feuille de style sans modifier les pages Web.
- Lorsque vous modifiez le style dans un seul fichier, le style est automatiquement appliqué à toutes les pages, où il y a un lien vers elle. Sans aucun doute, il est commode. Indiquez la taille de la police dans un seul endroit, et il change à tous les cent ou plus de pages sur notre site web.
- au cours du premier fichier de démarrage avec le style est mis en cache sur l'ordinateur local, distinct des pages Web, de sorte que le site de téléchargement est plus rapide.
Tables de styles globaux
Le style est défini dans le document lui-même, et est généralement situé dans l'en-tête de la page Web. Par sa flexibilité et les capacités de cette méthode est inférieure à l'utilisation précédente du style, mais vous permet également de placer tous les styles dans un seul endroit. Dans ce cas, directement dans le corps du document. La définition donnée par balise de style <STYLE> (exemple 2).
Exemple 2. Utilisation de la table des styles globaux
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Styles </ title>
<Style type = "text / css">
H1 {
font-size: 120%; / * Taille de la police * /
font-family: Verdana, Arial, Helvetica, sans-serif; / * Famille de polices * /
color: # 336; / * Couleur du texte * /
}
</ Style>
</ Head>
<Body>
<H1> Bonjour, monde! </ H1>
</ Body>
</ Html>
Dans cet exemple , les changements de style en- tête <H1>. La page Web est maintenant suffisante pour indiquer que la balise et les styles seront ajoutés à automatiquement.
styles internes
Style intérieur est essentiellement une extension pour une seule étiquette est utilisée sur une page web. Pour définir le style de paramètre de style est utilisé, et ses attributs sont spécifiés en utilisant un langage de feuille de style (exemple 3) ..
Exemple 3. En utilisant les styles en ligne
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Styles </ title>
</ Head>
<Body>
<Style H1 = "font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 336"> Bonjour, monde </ H1>!
</ Body>
</ Html>
Il est recommandé d'utiliser le style interne pour seule étiquette ou cesser de l'utiliser du tout, car un changement dans un certain nombre d'éléments devient problématique. styles internes ne correspondent pas à l'idéologie du document structurel lorsque le contenu et la conception sont séparés.
Toutes ces méthodes d'utilisation de CSS peuvent être utilisés à la fois indépendamment et en combinaison avec l'autre. Dans ce cas, vous devez être conscients de leur hiérarchie. Tout d'abord toujours utiliser un style interne, puis la table des styles globaux et le dernier des styles de tableaux liés. Dans l'exemple 4, deux méthodes sont utilisées immédiatement ajouter la feuille de style au document.
Exemple 4: Une combinaison de différentes méthodes de connexion styles
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Titre> Styles </ title>
<Style type = "text / css">
H1 {font-size: 120%; font-family: Arial, Helvetica, sans-serif; couleur: vert; }
</ Style>
</ Head>
<Body>
<Style H1 = "font-size: 36px; font-family: Times, serif; color: red;"> Bonjour, monde </ H1>!
<H1> Bonjour, monde! </ H1>
</ Body>
</ Html>
Dans cet exemple, la première bannière est rouge taille 36 pixels, et la suivante - et l'autre dans la police verte.
© Copyright Politique www.htmlbook.ru
Commentaires
Commentant, gardez à l' esprit que le contenu et le ton de vos messages peuvent blesser les sentiments des gens réels, montrer du respect et de la tolérance à ses interlocuteurs, même si vous ne partagez pas leur avis, votre comportement en termes de liberté d'expression et de l' anonymat offert par Internet, est en train de changer non seulement virtuel, mais dans le monde réel. Tous les commentaires sont cachés à l'index, le contrôle anti - spam.