> Tech > L’essentiel sur les CSS

L’essentiel sur les CSS

Tech - Par Jef Sutherland - Publié le 24 juin 2010
email

Cet article donne une vue d’ensemble de CSS et explique comment il peut vous aider à créer des documents Web plus séduisants.
En termes simples, HTML est « le langage » des documents Web. Il décrit la structure et montre le contenu de votre page Web. Un cran au-dessus, les CSS (Cascading Style Sheets) disent au navigateur comment présenter vos informations dans cette structure HTML, afin que votre page ait plus de personnalité et suscite plus d’intérêt.

Contenu complémentaire :
Simplifier les applications web avec Ajax, RPG et XSL

L’essentiel sur les CSS

Entrons dans le vif du sujet avec la figure 1A qui présente un document HTML de base. La figure 1B montre ce même document dans le navigateur. La structure HTML est définie par les éléments tags tels que <h1> et <h2> pour les en-têtes, <p> pour le texte de paragraphe, et <table>, <tr> et <td> pour le dessin de la table.

Soyons francs : cette page est certes basique, mais surtout mortellement ennuyeuse. Il faut donc lui ajouter du style. Commençons par apporter quelques petits changements dans HTML. Viendra ensuite la partie « cascading sheet » de CSS.

Nous voulons que les tags d’en-tête de cette page aient une police, une taille et une couleur différentes. Nous devons d’abord définir le style des tags <h1> et <h2> en appliquant le style de la définition de tag, de la façon suivante :
<h1> style="background: blue; color: yellow; font-size=150%; font-style=italic"> The History of the System i Platform</h1>
Le résultat est le titre The History of the System i Platform dans la figure 3.

Le placement des attributs de style dans le tag est un travail ennuyeux et il ne faut l’utiliser que quand on veut définir un seul tag dans le document. Mais qu’en est-il si l’on veut définir une section de style dans le document, qui s’appliquera à toute la structure du document, et pas simplement à un tag ? Pas de problème.

La figure 2 montre les tags de style que j’ai créés pour définir le style de présentation des tags <h1> et <h2>. La section style commence par le tag <style> et se termine par le tag </style>. C’est entre ces deux tags que vous allez définir les éléments d’un tag avec un style particulier. L’élément, comme h1, a sa propre sous-section entre accolades ({}). Chaque attribut de style a un nom entre parenthèses (par exemple background), utilise un signe deux-points comme séparateur, inclut une valeur attribut (par exemple blue), et se termine par un point-virgule. Sachez que vous pouvez définir de multiples éléments dans une seule sous-section.

Par exemple, si nous voulons que les deux tags d’entête <h1> et <h2> apparaissent de la même manière dans notre document, nous pouvons les définir ensemble ainsi : h1, h2 { <style attributes> } Avec cette méthode, le moment où nous définissons comment les tags d’en-tête apparaîtront dans la section style, affectera tout le document (figure 3) et nous n’aurons donc pas à modifier chaque tag d’en-tête dans le HTML.

Téléchargez gratuitement cette ressource

Aborder la Blockchain, comprendre et démarrer

Aborder la Blockchain, comprendre et démarrer

Une véritable révolution se prépare progressivement... les entreprises doivent veiller à ne pas rester à l’écart et se faire prendre de vitesse. Tout comme la mobilité ou encore le cloud, la blockchain est une composante essentielle de la transformation numérique. Découvrez, dans ce dossier, comment aborder, comprendre et démarrer la Blockchain

Tech - Par Jef Sutherland - Publié le 24 juin 2010