Introduction au CSS

Connaissances de base nécessaires

Avant de continuer, vous devez avoir une compréhension de base des connaissances suivantes:

  • HTML
  • XHTML

Si vous souhaitez apprendre ces projets en premier, veuillez Page d'accueil Accédez aux tutoriels pertinents.

Aperçu du CSS

  • CSS signifie Cascading Style Sheets (Cascading Style Sheets)
  • Définition des stylesComment afficher Élément HTML
  • Les styles sont généralement stockés dansFeuilles de styleDans
  • Ajouter des styles à HTML 4.0 était pourRésoudre le problème de séparation du contenu et de la présentation
  • Feuilles de styles externesPeut grandement améliorer l'efficacité
  • Les feuilles de style externes sont généralement stockées dans Fichier CSSDans
  • Plusieurs définitions de styles peuventEn cascadePour un

Les styles résolvent un problème commun

Les balises HTML ont été conçues pour définir le contenu du document. En utilisant des balises telles que <h1>, <p>, <table>, l'objectif initial de HTML était d'exprimer des informations telles que “c'est un titre”, “c'est un paragraphe”, “c'est un tableau”. En même temps, la mise en page du document était réalisée par le navigateur sans utiliser de balises de formatage.

En raison de l'ajout constant de nouveaux balises HTML et attributs (comme les balises de police et les attributs de couleur) par les deux principaux navigateurs (Netscape et Internet Explorer) à la norme HTML, il devient de plus en plus difficile de créer un site où le contenu du document est clairement indépendant de sa couche de présentation.

Pour résoudre ce problème, l'Organisation mondiale du web (W3C), cette alliance de normalisation à but non lucratif, a pris en charge la mission de standardisation de HTML et a créé des styles (Style) en dehors de HTML 4.0.

Tous les navigateurs populaires supportent les feuilles de style en cascade.

Les feuilles de style améliorent considérablement l'efficacité du travail.

Les feuilles de style définissent la manière dont les éléments HTML sont affichés, comme le font les balises de police et les attributs de couleur dans HTML 3.2. Les styles sont généralement stockés dans des fichiers .css externes. En éditant simplement un document CSS simple, les feuilles de style externes vous permettent de changer à la fois la mise en page et l'apparence de tous les pages du site.

Grâce à la capacité de contrôler en même temps le style et la mise en page de multiples pages, CSS peut être considéré comme une percée dans le domaine du design web. En tant que développeur de site web, vous pouvez définir des styles pour chaque élément HTML et les appliquer à un nombre illimité de pages. Pour effectuer une mise à jour globale, il suffit de modifier le style et tous les éléments du site se mettront automatiquement à jour.

Les styles multiples sont empilés en un

Les tableaux de styles permettent de définir les informations de style de plusieurs manières. Les styles peuvent être définis dans un seul élément HTML, dans l'élément en-tête de la page HTML, ou dans un fichier CSS externe. Il est même possible de faire référence à plusieurs feuilles de styles externes au sein du même document HTML.

Ordre de priorité

Quelle règle utilise-t-on lorsque le même élément HTML est défini par plusieurs styles ?

En règle générale, tous les styles sont empilés dans un nouveau tableau virtuel de styles suivant les règles suivantes, où le nombre 4 a la priorité la plus élevée.

  1. Réglages par défaut du navigateur
  2. Feuilles de styles externes
  3. Feuilles de styles internes (situées à l'intérieur de l'étiquette <head>)
  4. Styles en ligne (à l'intérieur des éléments HTML)

Par conséquent, les styles en ligne (à l'intérieur des éléments HTML) ont la priorité la plus élevée, ce qui signifie qu'ils prendront le pas sur les déclarations de styles suivantes : les déclarations de styles dans l'étiquette <head>, les feuilles de styles externes, ou les déclarations de styles dans le navigateur (valeur par défaut).