Tutoriel de base 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 associés.

Aperçu de CSS
  • CSS signifie feuilles de style en cascade (Cascading Style Sheets)
  • Les définitions de stylesComment afficher Les éléments HTML
  • Les styles sont généralement stockés dansLes feuilles 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é du travail
  • Les feuilles de style externes sont généralement stockées dans Les fichiers 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>, HTML était initialement destiné à exprimer des informations telles que « c'est un titre », « c'est un paragraphe », « c'est un tableau ». L'agencement du document était censé être réalisé par le navigateur sans utiliser de balises de formatage.

Comme les deux principaux navigateurs (Netscape et Internet Explorer) ajoutent constamment de nouveaux balises HTML et attributs (comme les balises de police et les attributs de couleur) à la norme HTML, il devient de plus en plus difficile de créer des sites où le contenu du document est clairement indépendant de la couche de présentation du document.

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

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

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

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

En permettant de contrôler à la fois les styles et la mise en page de multiples pages, CSS peut être considéré comme une avancé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 quelconque de pages. Pour effectuer des transformations globales, il suffit de modifier les styles et tous les éléments du site seront automatiquement mis à jour.

Les styles multiples sont empilés en un

Les feuilles 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 d'en-tête d'une page HTML, ou dans un fichier CSS externe. Il est même possible de faire référence à plusieurs feuilles de styles externes à l'intérieur d'un seul document HTML.

Ordre de superposition

Quand un même élément HTML est défini par plusieurs styles, lequel des styles sera utilisé ?

En règle générale, tous les styles sont empilés selon les règles suivantes dans un nouveau tableau virtuel de styles, 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 precedence 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).