Dans ce tutoriel, vous apprendrez comment connecter CSS au HTML. Examinons plusieurs options avec des exemples. Nous parlerons également du chargement asynchrone des styles et des hacks pour différents navigateurs.

Comment connecter CSS au HTML dans un fichier séparé

Je vais maintenant vous montrer comment connecter CSS au HTML avec un fichier de styles séparé. Un fichier CSS distinct est créé. Utilisation ultérieure équipes spéciales il se connecte à documents nécessaires. Ce type est appelé feuille de style externe.

Cette méthode est la plus préférable. Il vous permet de développer des styles de sites Web séparément des documents HTML. Le style peut ensuite être utilisé dans un seul fichier style.css sur plusieurs pages.

Nous écrivons le chemin exactement dans la balise head. Il indique tout ce qui est nécessaire informations système pour afficher la page. Il se connecte comme ceci :

Il existe également d'autres méthodes de connexion. Utilisez-les uniquement comme option supplémentaire.

Il convient de dire que les styles en ligne ont la plus haute priorité. Même si vous incluez du CSS externe, le navigateur donnera la préférence aux styles en ligne pour une balise particulière. En deuxième position se trouvent les styles internes. Ils sont inférieurs aux intégrés, mais supérieurs aux externes.

En général, comme option supplémentaire, vous trouverez peut-être utile d’utiliser des styles en ligne ou internes. Ceci est très utile si vous avez besoin de styliser un élément page spécifique sans affecter le fichier CSS principal.

Il existe au moins trois façons de lier des styles CSS à une page de site Web. L'article décrit ces méthodes de liaison en détail et fournit des explications complètes.

Tout d’abord, vous devez expliquer pourquoi vous devez lier quoi que ce soit à une page de site Web et pourquoi les styles CSS sont placés dans un fichier séparé.

Depuis l'avènement des jeux de styles de contenu de page Web (CSS), les développeurs Web ont postulé que règle utile« contenu et présentation séparés ! »

Autrement dit, la page Web contient un espace vide code HTML, et toute la conception est placée dans des ensembles séparés de règles CSS et de préférence en dehors de cette page Web. Cela a fait d’une pierre deux coups.

Premièrement, le code HTML est resté propre. Il ne contenait que du contenu et du balisage. Ce qui a considérablement allégé le poids de la page.

Et, deuxièmement, cette division a permis de modifier plus efficacement les styles de conception sans affecter la page Web elle-même.

Il y avait même des galeries entières avec des exemples de sites où il suffisait simplement de remplacer un fichier de style CSS par un autre, et le site serait instantanément complètement transformé en termes de conception et de structure de placement des blocs.

23.01.2017

Salut tout le monde!
Dans cette leçon, je parlerai de façons Connexions CSS fichier en HTML. Il existe 3 façons d'inclure un fichier CSS. Demandez pourquoi vous avez besoin de savoir exactement 3 façons ? Je répondrai que c'est nécessaire, car il y a des cas où il faut utiliser uniquement ces 3 méthodes de connexion.

○ Méthode n°1 – « Table de styles liée »

Tous les styles sont stockés dans un seul fichier avec l'extension « .css ».
Si vous liez tous les fichiers HTML des pages Web avec un tel fichier CSS, alors lorsque des modifications sont apportées, les styles de page (couleur, arrière-plan, taille de police, etc.) changeront dans tous les cas. Document HTML ah, lié au fichier CSS.
Schématiquement, cela ressemble à ceci :

Pour lier un document HTML avec un fichier CSS, ajoutez entre les balises étiquette spéciale .
*Aucune balise de fermeture n'est nécessaire

href – spécifiez le chemin d'accès au fichier CSS. Dans l'exemple ci-dessus, le fichier "style.css" se trouve avec le reste des fichiers HTML dans .
Regardons la méthode n°1 étape par étape et pratiquement de « a » à « z » :

Étape 1 - créer un fichier "style.css"

Essayons de créer un fichier « style.css » en pratique.
Ouvrez le bloc-notes que vous avez sur votre PC.
Bouton « Démarrer » => « Tous les programmes » => « Accessoires » => « Bloc-notes »:

Dans le bloc-notes ouvert, cliquez sur le menu en haut "Fichier" => "Enregistrer sous...":

Dans le champ « Nom du fichier », écrivez « style.css », pas seulement le style (c'est important !). De cette façon, nous créons un fichier avec l'extension « *.css ». Cliquez ensuite sur le bouton « Enregistrer » :

Voici à quoi devrait ressembler l’image globale :

Ça y est, le fichier "style.css" a été créé.
Vous pouvez insérer cette règle pour la balise dans le fichier « style.css »

et sauvegardez :

H1 ( taille de police : 150px; /* Taille de police */ couleur : #cc0000 /* Couleur du texte */ )

DANS Fichier HTML collez ce code :

Titre

Le résultat devrait ressembler à ceci :

Cette méthode vous aidera à apporter des modifications apparence l'ensemble du site, en changeant uniquement les règles dans un seul fichier « style.css ». Disons que nous changeons la couleur et la taille du titre dans « style.css », puis sur les 1000 pages un message simultané changement automatique. En HTML pur, sans CSS, ces modifications devraient être faites séparément sur chaque page sur 1000. Horreur !!!

○ Méthode n°2 – « Feuilles de style globales »

Cette méthode est également utilisée et je suis sûr que vous la rencontrerez.
Pour connecter un tel Méthode CSS les styles doivent juste être écrits entre les balises étiqueter

Cela peut aussi être fait comme ceci :

Entre les balises le nécessaire Règles CSS pour une page Web.
L’inconvénient de cette méthode est que ces styles ne concerneront qu’une seule page où se trouvent ces styles.

Rubrique H2

Résultat:

Dans l'exemple ci-dessus, j'ai modifié la taille et la couleur de l'en-tête H2 à l'aide d'une feuille de style CSS.

○ Méthode n°3 – « Styles internes »

J'utilise la méthode n°3 dans de rares cas, par exemple pour modifier une seule balise sur une page Web. Pour connecter un style à n'importe quelle balise, vous devez spécifier le paramètre de style.

Style="il y aura des règles CSS ici"

Rubrique H2

Résultat:

Dans l'exemple ci-dessus, j'ai modifié la taille et la couleur de l'en-tête H2 à l'aide de styles CSS.

○ Méthode de connexion de style combiné

Ces trois méthodes peuvent être combinées.

Titre

Titre

C'est tout pour aujourd'hui ! Au plaisir de vous revoir lors des prochains cours.
Abonnez-vous aux mises à jour du blog !

Article précédent
Entrée suivante

Lors de la modification du design d'un site, la question peut se poser de savoir comment connecter CSS au HTML. Quelles méthodes sont adaptées pour cela ? Avez-vous besoin connaissances spécialisées pour ça?

Qu'est-ce que c'est?

CSS (de l'anglais Cascading Style Sheets) est un langage formel permettant de personnaliser l'apparence d'une page écrite dans un langage de balisage. Il existe 3 façons de connecter un fichier CSS au HTML. Vous n'avez besoin d'aucune connaissance particulière pour cela, tout comme il est impossible d'identifier clairement quelle méthode de connexion CSS au HTML est la plus appropriée - suivez simplement les instructions et utilisez celle qui vous convient.

Structure générale Le code utilisant les sélecteurs dans les manuels est présenté comme suit :

sélecteur (

propriété : valeur ;

propriété : valeur ;

La mise en œuvre de chaque méthode est particulière. Nous allons l'analyser en utilisant le code suivant comme exemple :

Le but des styles de plug-in est de changer la couleur de la balise en rouge.

Chaque option décrite ci-dessous produira le même résultat, mais le code de page résultant peut varier considérablement.

Instructions pour connecter les styles CSS

Première option

Pour répondre à la question de savoir comment inclure les styles CSS, vous devez joindre une feuille de style à l'intérieur du corps à l'aide de l'attribut style.

Les éléments à l’intérieur du corps doivent avoir un attribut de style qui leur est attaché. Dans ce cas, la valeur de l'attribut attribué sera les paramètres CSS appliqués à l'élément.

Pour une explication plus claire, regardons l'exemple ci-dessous. La valeur de style est attribuée à l'élément.

Il n'est pas nécessaire d'utiliser des sélecteurs dans cette méthode, puisqu'il existe déjà un paramètre spécifique auquel les styles ont été attribués. La méthode est la plus courante chez les débutants, puisqu'il est nécessaire d'enregistrer un seul attribut, ce qui permettra de modifier les caractéristiques.

La méthode a des lacunes importantes qu’il est important de considérer :

1. Fonctionnalité limitée. Ainsi, la méthode ne permet pas de connecter plusieurs sélecteurs en même temps ni de créer des liens dans un seul fichier.
2. Le deuxième inconvénient découle du premier : chaque style est écrit individuellement manuellement, ce qui avec le temps fera du code de la page une véritable poubelle.

Deuxième option

Basé sur la connexion d'un fichier de style (externe) supplémentaire. Celui-ci utilise l'élément de lien pour donner à l'utilisateur la possibilité de se connecter à la page. fichiers supplémentaires. Une attention particulière doit être portée aux attributs écrits dans l'élément.

Cela ressemble à ceci :

Commentaire. Le paramètre href doit décrire le chemin du fichier situé sur l'ordinateur. Exemple conditionnel : href = "C:\Users:\Desktop:\file".

Le résultat est un code comme ceci :

C:\Users:\Desktop:\style.css" type="text/css"/>

Le document de style ci-joint doit contenir la ligne suivante :

Quelques nuances concernant cette méthode :

1. La commande link, qui indique un lien vers un fichier externe, doit être placée dans l'en-tête entre les balises.
2. Attribut Rel indique le type de site vers lequel l'utilisateur se connecte. Dans notre cas, la table de sélection est écrite sous forme de feuille de style.
3. Chemin vers fichier externe doit être précisé par rapport au code. Il est donc recommandé de placer les deux fichiers dans le même dossier.

Cette méthode est le plus souvent utilisée par les webmasters expérimentés. Cela est dû non seulement au caractère pratique de la méthode, mais également à la possibilité de connecter plusieurs Fichiers CSSà la page, ce qui permet de gagner énormément de temps et de réduire considérablement la longueur du code.

Troisième option

Dans ce cas, le CSS est écrit dans le paramètre style.

Le chemin le plus court pour se connecter au code de la page, dont la popularité diminue progressivement. L'élément est utilisé pour cela

Connecter plusieurs sélecteurs à une page

De nombreux webmasters ne se limitent pas à un seul fichier joint à la page. Pour en connecter plusieurs, quelques étapes suffisent :

1. Nous créons plusieurs fichiers CSS avec n'importe quel nom.
2. En utilisant la deuxième méthode de connexion, nous entrons une ligne similaire dans le code, indiquant le nom et le chemin du deuxième fichier.

Le code final ressemblera à ceci :

C:\Utilisateurs :\Bureau :\1.css" type="text/css"/>

C:\Utilisateurs :\Bureau :\2.css" type="text/css"/>

En conclusion, il convient de mentionner cette possibilité : dans n'importe quel fichier, vous pouvez placer des liens vers de nombreux autres documents similaires. C'est assez simple à faire :

1. Nous connectons le style à la page en utilisant l'une des méthodes décrites ci-dessus.
2. Dans le fichier nous écrivons une ligne qui connecte un style supplémentaire à l'attribut : @import url("style-2.css").

Vidéo sur le sujet : connecter CSS à HTML

L'histoire montre plus clairement toutes les manières de connecter une feuille de style au code de la page :

Les trois options présentées pour connecter un sélecteur à une page sont les plus souvent utilisées dans la pratique. Bien sûr, ce n'est qu'une théorie ; pour une étude plus approfondie du problème, vous devez essayer chaque option vous-même.

Publié par nouvelauteur

Alors on continue cours html pour débutants. Dans la dernière leçon, j'ai parlé de la balise HEAD et de la manière de définir l'encodage. Pages HTML, et indique également mots-clés et une description pour celui-ci. Qu’allons-nous apprendre aujourd’hui ? Dans ce didacticiel, nous apprendrons comment inclure des styles dans un modèle. Plus de détails ci-dessous.

Comment inclure des styles de conception dans un modèle ? Pour commencer, apprenons ce qui s'est passé Styles CSS . Styles Style CSS est un outil de conception de pages WEB écrites à l'aide de langages Balisage HTML, XHTML et XML. Ils peuvent être spécifiés, comme dans le document HTML lui-même, ou connectés en externe, c'est-à-dire décrire dans fichier séparé. Je propose de considérer à la fois la première et la deuxième méthodes. Presque tout pages Web et sites internet utilisez le style CSS.

1. La méthode de connexion des styles de conception CSS se fait à l'intérieur du document HTML ou à la connexion des styles internes.
Si les styles ne sont pas spécifiés dans un fichier séparé, ils doivent alors être spécifiés dans le document lui-même à l'intérieur de la balise . Un exemple de connexion de styles CSS dans un document :

.....

Styles connectés de cette manière valable tout au long du document, mais que se passe-t-il si vous devez les spécifier pour un seul bloc ? Vous pouvez décrire des styles à l'intérieur d'un bloc (balise) spécifique en utilisant l'attribut de cette balise - style. Un exemple de styles de connexion pour une balise :

Taille de texte aléatoire 15 et couleur rouge

Les styles décrits de cette manière sont n'affecte pas les autres balises du document.

2. Une méthode qui vous permet de connecter des styles d'un autre fichier ou de connecter des styles de conception externes.

Si vous avez des styles dans un fichier séparé, ils doivent être connectés avec une ligne spéciale. Afin de spécifier des styles pour l'ensemble du document HTML, nous utiliserons la balise , qui doit être situé à l'intérieur de la balise dont j'ai parlé dans . Un exemple d'une telle connexion :

Le chemin du fichier contenant les styles est indiqué dans cette partie de la balise : href="style.css" entre guillemets. L'exemple inclut un fichier de style qui se trouve dans le même dossier que le document HTML.

Vous pouvez également connecter des styles externes d'une autre manière - avec une directive spéciale @import, qui est incluse dans la balise. . Exemple de connexion utilisant la directive @importer:

.....

fichier de style CSS, ou plutôt le chemin qui y mène, dans cette méthode indiqué entre parenthèses.

Les connexions de style décrites dans la deuxième méthode doivent être situées entre les balises .

Si vous devez inclure des styles CSS pour un document XML, vous devez alors utiliser la ligne suivante :

Dans cette méthode de connexion, le chemin d'accès au fichier avec les styles est indiqué entre guillemets.

La leçon est terminée pour aujourd'hui ! Bonne mise en page et nouvelles connaissances !

Voulez-vous aller en Europe? Avez-vous besoin