Accueil Médias sociaux Utilisation d'une feuille de style externe pour la programmation HTML5 et CSS3 - Nb.

Utilisation d'une feuille de style externe pour la programmation HTML5 et CSS3 - Nb.

Table des matières:

Vidéo: Chapitre 2 : 2ème pas en css, feuille de style externe 2025

Vidéo: Chapitre 2 : 2ème pas en css, feuille de style externe 2025
Anonim

CSS3 supporte les feuilles de style externes. Cette technique vous permet de définir une feuille de style en tant que document distinct et de l'importer dans vos pages Web. Pour voir pourquoi cela pourrait être attrayant, jetez un oeil à l'exemple.

Lorsque vous regardez le code pour externalStyle. html, vous pourriez être surpris de ne voir aucune information de style évidente du tout!

style externe. html

Style externe

Cette page comporte des styles définis pour les paragraphes, le corps et l'en-tête 1.

Les styles sont définis dans une feuille de style externe.

Lorsque vous voyez normalement des étiquettes de style (dans l'en-tête), il n'y a pas de style. Au lieu de cela, vous voyez une étiquette. Cette étiquette spéciale est utilisée pour connecter le document actuel avec un autre document.

Comment définir le style externe

Lorsque vous utilisez un style externe, les éléments de style ne sont pas intégrés dans l'en-tête de la page, mais dans un document entièrement séparé.

Dans ce cas, la page est connectée à un fichier spécial appelé myStyle. css. Ce fichier contient toutes les règles CSS:

/ * myStyle. css * / body {background-color: # 333300; color: #FFFFFF;} h1 {couleur: # FFFF33; text-align: centre; police: italic 200% fantasy;} p {background-color: # FFFF33; couleur: # 333300; text-align: droit; border: 3px groove # FFFF33;}

La feuille de style ressemble à un style au niveau de la page, à l'exception de quelques différences clés:

  • Les règles de la feuille de style sont contenues dans un fichier séparé. Le style ne fait plus partie de la page HTML mais est un fichier entièrement séparé stocké sur le serveur. Les fichiers CSS se terminent généralement par. extension css.

  • Il n'y a pas de balises . Ils ne sont pas nécessaires car le style n'est plus intégré au HTML.

  • Le code commence par un commentaire. La paire / * * / indique un commentaire en CSS. Honnêtement, vous pouvez mettre des commentaires en CSS au niveau de la page. Les fichiers CSS externes contiennent souvent des commentaires.

  • Le document de style n'a pas de code HTML. Les documents CSS ne contiennent que du CSS. Cela se rapproche de l'objectif de séparer le style (dans le document CSS) et le contenu (dans le document HTML).

  • Le document n'est lié à aucune page particulière. Le grand avantage de CSS externe est la réutilisation. Le document CSS ne fait partie d'aucune page particulière, mais n'importe quelle page peut l'utiliser.

Comment réutiliser un style CSS externe

Les feuilles de style externes sont vraiment amusantes quand vous avez plus d'une page qui a besoin du même style. La plupart des sites Web utilisent aujourd'hui plusieurs pages, et ils doivent partager une feuille de style commune pour conserver la cohérence.

Le code montre à quel point c'est facile:

SecondPage.html

Deuxième page

Cette page utilise le même style que externalStyle. html

Les feuilles de style externes présentent d'énormes avantages:

  • Une feuille de style peut contrôler plusieurs pages: Généralement, vous avez un grand nombre de pages différentes sur un site Web qui partagent toutes le même style général. Vous pouvez définir la feuille de style dans un document et avoir tous les fichiers HTML se référer au fichier CSS.

  • Les modifications globales sont plus faciles: Si vous utilisez des styles externes, vous effectuez un changement à un endroit et il est automatiquement propagé à toutes les pages du système.

  • Séparation du contenu et du design: Avec CSS externe, tout le design se trouve dans le CSS, et les données sont en HTML.

  • Mises à niveau faciles: Comme les paramètres de conception de l'ensemble du site sont définis dans un seul fichier, vous pouvez facilement modifier le site sans avoir à manipuler des fichiers HTML individuels.

La balise de lien

La balise est la clé pour ajouter une référence CSS à un document HTML. La balise a les caractéristiques suivantes:

  • La balise fait partie de la page HTML. Utilisez une balise dans votre document HTML pour spécifier quel document CSS sera utilisé par la page HTML.

  • La balise n'apparaît que dans l'en-tête. Contrairement à l'étiquette, l'étiquette ne peut apparaître que dans l'en-tête.

  • L'étiquette n'a aucune présence visuelle. L'utilisateur ne peut pas voir l'étiquette, seulement ses effets.

  • La balise link est utilisée pour relier le document à un autre document. Vous utilisez la balise pour décrire la relation entre les documents.

  • La balise a un attribut rel , qui définit le type de relation. Pour l'instant, la seule relation que vous utiliserez est l'attribut stylesheet.

  • La balise possède également un attribut href , qui décrit l'emplacement de l'autre document.

Les tags de liaison sont souvent utilisés pour connecter une page à un document de style défini de manière externe.

La plupart des gens se réfèrent aux hyperliens créés par la balise anchor () sous forme de liens hypertexte ou de liens. Cela peut entraîner une certaine confusion car, en ce sens, la balise de lien ne crée pas ce type de lien.

Comment spécifier un lien externe

Pour utiliser la balise pour spécifier une feuille de style externe, procédez comme suit:

  1. Définissez la feuille de style.

    Les feuilles de style externes sont très similaires à celles que vous connaissez déjà. Il suffit de mettre tous les styles dans un document texte séparé sans les balises et.

  2. Créez un élément de lien dans la zone d'en-tête de la page HTML pour définir le lien entre les pages HTML et CSS.

    Mon élément de lien ressemble à ceci:

    
    
  3. Définissez la relation du lien en définissant l'attribut rel = "stylesheet".

    Honnêtement, la feuille de style est presque la seule relation que vous utiliserez, alors cela devrait devenir automatique.

  4. Spécifiez le type de style en définissant type = "text / css".

  5. Détermine l'emplacement de la feuille de style avec l'attribut href.

Utilisation d'une feuille de style externe pour la programmation HTML5 et CSS3 - Nb.

Le choix des éditeurs

Social Media Design pour les nuls Fiche de triche - les nuls

Social Media Design pour les nuls Fiche de triche - les nuls

La conception de médias sociaux signifie savoir créer un professionnel Un profil efficace et cohérent qui permettra de mieux communiquer l'histoire de votre marque aux futurs partenaires, employeurs et clients. Les médias sociaux sont un moyen important de créer des réseaux personnels et professionnels, de chercher un emploi, de trouver de vieux amis et plus encore. Découvrez les outils essentiels dont vous aurez besoin pour ...

Conception de médias sociaux: Fonctionnalités du compte YouTube - mannequins

Conception de médias sociaux: Fonctionnalités du compte YouTube - mannequins

L'un des avantages d'attirer des abonnés est Une fois que vous avez dépassé le seuil de 100 utilisateurs, votre compte YouTube est activé pour le streaming vidéo en direct. Cela signifie que vous pouvez utiliser toute l'infrastructure de Google pour diffuser et enregistrer des vidéos en direct. Consultez la section Fonctionnalités du compte de votre page d'accueil pour vérifier si vous avez ...

Social Media Design: Grands exemples de profils Google+ - les nuls

Social Media Design: Grands exemples de profils Google+ - les nuls

Google + a cherché à se différencier de la plupart des autres plates-formes de médias sociaux en vous permettant d'aller «grandir» avec l'image de la bannière pour votre profil. Cette augmentation de la quantité d'écran immobilier est à la fois une bénédiction et une malédiction. Quelques grandes marques et professionnels du design ont réagi en produisant ...

Le choix des éditeurs

GED Raisonnement à travers les arts du langage Compétences en rédaction Exemples de questions - dummies

GED Raisonnement à travers les arts du langage Compétences en rédaction Exemples de questions - dummies

Sur le GED une section de questions intitulée Raisonnement à travers les arts du langage. Dans cette section, vous devrez accorder une attention particulière aux mécanismes d'écriture, d'orthographe et de grammaire. Exemples de questions Les questions 1 à 5 sont basées sur la lettre commerciale suivante. CanLearn Study Tours, Inc. 2500, chemin Big Beaver Troy, MI 70523 ...

GED Pratique RLA: Compréhension de textes - nuls

GED Pratique RLA: Compréhension de textes - nuls

La meilleure façon de se préparer à la compréhension écrite du GED Le test RLA consiste à faire autant de questions pratiques que possible. Découvrez l'échantillon pour voir ce que vous ferez face le jour du test. Exemples de questions Les questions 1-6 se réfèrent au passage suivant. Facilités d'accès à l'entreprise créative (FACE) Fondée à l'origine ...

GED Raisonnement à travers les arts du langage Compétences de lecture Pratique - les nuls

GED Raisonnement à travers les arts du langage Compétences de lecture Pratique - les nuls

Le composant lecture du Raisonnement par langue section sur le GED se compose d'extraits de fiction et de non fiction. Chaque extrait est suivi d'éléments à choix multiples basés sur le matériel de lecture. Pour les questions de cette section, choisissez la meilleure réponse à chaque question. Travaillez avec soin, mais ne passez pas trop de temps sur ...

Le choix des éditeurs

Comment les callbacks jouent et audibilisent pendant les matchs de football - les mannequins

Comment les callbacks jouent et audibilisent pendant les matchs de football - les mannequins

Dans le football américain, le quart-arrière ses coéquipiers dans le caucus quel jeu l'entraîneur a appelé. Le jeu est un plan ou schéma mental pour chaque joueur sur le terrain. Les quart-arrières sont également autorisés à auditer, ou à changer le jeu à la ligne de mêlée. Un jeu modifié s'appelle un audible. Quarterbacks ...

Les scores d'une partie de football - mannequins

Les scores d'une partie de football - mannequins

Lorsque l'infraction dans un match de football américain peut bouger la balle vers le bas vers la zone des buts, elle peut marquer. Ces jeux offensifs peuvent marquer un touché ou une conversion en deux points. Faire la meilleure course sur la ligne de but Les équipes qui ont le plus de succès sur la ligne des buts ont un bon retour en arrière ...

13 Meilleurs joueurs de football offensifs non-quart-arrières

13 Meilleurs joueurs de football offensifs non-quart-arrières

Le critère principal pour la liste suivante était le talentueux joueurs offensifs qui étaient aussi de grands champions. Et parce que la NFL est devenue une ligue qui passe, les meilleurs quarts ne sont pas inclus ici. Jim Brown Jim Brown avait des années-lumière d'avance sur son temps. Il a également joué dans un âge (1957 à 1965) quand le ...