Introduction au CSS


CSS fait référence aux feuilles de style en cascade, qui sont utilisées pour définir comment afficher les éléments HTML. Les styles CSS sont généralement stockés dans des feuilles de style, ce qui peut résoudre le problème de séparation du contenu et de la présentation et améliorer considérablement l'efficacité du travail.

Connaissances dont vous avez besoin

Avant de continuer, vous devez avoir une compréhension de base des éléments suivants :

  • HTML/XHTML

Si vous souhaitez d'abord découvrir ces projets, veuillez visiter les tutoriels pertinents sur la Page d'accueil. .

Qu'est-ce que CSS ?

  • CSS fait référence aux feuilles de style en cascade (Cascading Style Sfeuilles)

  • Définition du styleComment afficher l'élément HTML

  • Les styles sont généralement stockés en Dans la feuille de style ,

  • ajoute des styles au HTML 4.0 afin de résoudre le problème de séparation du contenu et de la présentation

  • Les feuilles de style externespeuvent grandement améliorer l'efficacité du travail

  • Les feuilles de style externes sont généralement stockées dans des fichiers CSS

  • Plusieurs définitions de styles peuvent être regroupées en une seule

Les styles résolvent un problème commun

Les balises HTML ont été conçues à l'origine pour définir le contenu d'un document. En utilisant des balises telles que <h1>, <p>, <table>, l'intention initiale du HTML était d'exprimer des informations telles que "Ceci est un titre", "Ceci est un paragraphe", "Ceci est un tableau". . Dans le même temps, la mise en page du document est complétée par le navigateur sans utiliser de balises de formatage.

Alors que les deux principaux navigateurs (Netscape et Internet Explorer) continuent d'ajouter de nouvelles balises et attributs HTML (tels que des balises de police et des attributs de couleur) à la spécification HTML, créez un contenu de document clairement indépendant du document. Présentation couche du site devient de plus en plus difficile.

Afin de résoudre ce problème, le World Wide Web Consortium (W3C), une alliance de normalisation à but non lucratif, s'est donné pour mission de normaliser le HTML et de créer des styles en dehors du HTML 4.0.

Tous les principaux navigateurs modernes prennent en charge les feuilles de style en cascade (CSS).

Les feuilles de style CSS améliorent considérablement la productivité

Les feuilles de style définissent la façon dont les éléments HTML sont affichés, tout comme le faisaient la balise de police et les attributs de couleur de HTML 3.2. Les styles sont généralement enregistrés dans des fichiers .css externes. Les feuilles de style externes vous donnent la possibilité de modifier la mise en page et l'apparence de toutes les pages de votre site en même temps en éditant simplement un simple document CSS.

Le CSS peut être qualifié de percée dans le domaine de la conception WEB car il permet de contrôler le style et la mise en page de plusieurs pages en même temps. En tant que développeur de sites Web, vous pouvez définir des styles pour chaque élément HTML et les appliquer à autant de pages que vous le souhaitez. Pour effectuer une mise à jour globale, changez simplement le style et tous les éléments du site se mettront à jour automatiquement.

Plusieurs styles seront regroupés dans une

Feuille de style permettant de spécifier les informations de style de plusieurs manières. Les styles peuvent être spécifiés dans des éléments HTML individuels, dans l'élément d'en-tête d'une page HTML ou dans un fichier CSS externe. Vous pouvez même référencer plusieurs feuilles de style externes dans le même document HTML.

Ordre en cascade

Lorsque le même élément HTML est défini par plusieurs styles, quel style sera utilisé ?

De manière générale, tous les styles seront cascadés dans une nouvelle feuille de style virtuelle selon les règles suivantes, le numéro 4 ayant la plus haute priorité.

Paramètres par défaut du navigateur

  1. Feuille de style externe

  2. Feuille de style interne (située à l'intérieur de la balise <head>)

  3. 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 plus haute priorité, cela signifie qu'il faudra priorité sur les déclarations de style dans la balise <head>, dans les feuilles de style externes ou dans le navigateur (valeur par défaut).