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 |
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 cette ressource
Guide de technologie 5G pour l’entreprise
Pourquoi la 5G est-elle faite pour votre entreprise ? La 5G peut améliorer la vitesse, la fiabilité et la capacité de votre réseau, permettant ainsi une meilleure collaboration, une productivité accrue et une prise de décision plus rapide. Notre livre blanc " The Big Book of Enterprise 5G" vous fournit les informations stratégiques dont vous avez besoin pour prendre des décisions éclairées et préparer votre entreprise à prospérer dans l'ère de la 5G. Cradlepoint, part of Ericsson est le leader mondial des solutions de réseau sans fil 4G LTE et 5G fournies via le cloud. Connectez vos employés, lieux et objets avec la 4G LTE et la 5G pour un WAN sans fil d'entreprise.
