Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Tutoriel CSS - Table des matières  Introduction Une brève présentation du tuto

Tutoriel CSS - Table des matières  Introduction Une brève présentation du tutoriel et ce que vous allez y apprendre.  Leçon 1 : Qu'est-ce que CSS ? Une petite histoire de la création de CSS, et les raisons pour lesquelles il est judicieux de préférer CSS à HTML pour la disposition et la présentation.  Leçon 2 : Comment CSS fonctionne-t-il ? Apprendre la syntaxe de base de CSS et créer sa première feuille de style.  Leçon 3 : Les couleurs et les arrières-plans Apprendre à appliquer des couleurs et couleurs de fonds dans son site Web et comment utiliser des images d'arrière-plan.  Leçon 4 : Les polices Dans cette leçon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS.  Leçon 5 : Le texte Cette leçon introduit les possibilités étonnantes de CSS pour ajouter une présentation au texte.  Leçon 6 : Les liens Comment ajouter des effets plaisants et utiles aux liens et se servir des pseudo-classes.  Leçon 7 : L'identification et le regroupement d'éléments (class et id) Une approche sur la façon d'utiliser les attributs class et id pour définir les propriétés des éléments sélectionnés.  Leçon 8 : Le regroupement d'éléments (span et div) Une approche de l'utilisation des éléments span et div, et le rôle central de ces deux éléments HTML pour CSS.  Leçon 9 : Le modèle des boîtes Le modèle des boîtes dans CSS décrit les boîtes générées pour les éléments HTML.  Leçon 10 : Le modèle des boîtes : margin & padding Changer la présentation des éléments avec les propriétés margin et padding.  Leçon 11 : Le modèle des boîtes : les bordures Apprendre les options illimitées de l'utilisation de bordures dans ses pages avec CSS.  Leçon 12 : Le modèle des boîtes : la hauteur et la largeur Dans cette leçon, nous apprendrons comment définir aisément la hauteur et la largeur d'un élément.  Leçon 13 : Les éléments flottants (les flottants) Un élément peut flotter à droite ou à gauche avec la propriété float.  Leçon 14 : Le positionnement des éléments Le positionnement CSS permet de placer un élément dans la page exactement où l'on veut.  Leçon 15 : Une couche sur une couche avec z-index (les couches) Cette leçon nous apprendra comment faire se recouvrir des éléments différents avec la propriété z-index.  Leçon 16 : Les standards du Web et la validation La dernière leçon traite des standards du W3C et de la façon de vérifier l'exactitude de son code CSS. Introduction - Un tutoriel CSS libre Les feuilles de style en cascade (CSS) constitue un outil fantastique pour la présentation de vos sites Web. Elles peuvent faire gagner beaucoup de temps, et elles permettent de créer des sites Web de façon entièrement nouvelle. CSS est un must pour quiconque s'occupe de création Web. Ce tutoriel vous lancera avec CSS en juste quelques heures. Il est facile à comprendre et il vous enseignera toutes les techniques sophistiquées. Apprendre CSS est amusant. Au fur et à mesure du tutoriel, songez à prendre le temps d'expérimenter correctement ce que vous aurez appris dans chaque leçon. L'utilisation de CSS nécessite une connaissance de base de HTML. Si HTML ne vous est pas familier, veuillez commencer par notre tutoriel HTML avant de passer à CSS. De quels logiciels ai-je besoin ? Veuillez éviter les logiciels tels que FrontPage, DreamWeaver ou Word pour ce tutoriel. Les logiciels évolués ne vous aideront pas à apprendre CSS. Au contraire, cela vous limitera et augmentera significativement votre courbe d'apprentissage. Tout ce dont vous avez besoin est un éditeur de texte simple et gratuit. Par exemple, Windows de Microsoft est livré avec un programme appelé Bloc-notes. On le trouve habituellement dans les « Accessoires » de la rubrique « Tous les programmes » dans le menu « démarrer ». Autrement, vous pouvez utiliser un éditeur de texte similaire, par exemple, Pico sur Linux, ou TextEdit sur Macintosh. Un éditeur de texte simple est idéal pour apprendre HTML et CSS, car il n'affecte pas ni change le code que vous tapez. Ainsi, vous ne pouvez attribuer vos succès et vos erreurs qu'à vous- même, et non au logiciel. Vous pouvez utiliser n'importe quel navigateur avec le tutoriel. Nous vous encourageons de toujours mettre à jour votre navigateur et d'utiliser la dernière version. Un navigateur et un éditeur de texte simple sont tout ce dont vous avez besoin. Commençons ! Leçon 1 : Qu'est-ce que CSS ? Peut-être avez-vous déjà entendu parler de CSS sans vraiment savoir de quoi il s'agissait ? Dans cette leçon, vous en saurez plus sur CSS et sur ce que vous pouvez en tirer. CSS est l'abréviation de « Cascading Style Sheets ». Qu'est-ce qu'on peut faire avec CSS ? CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière- plan, les positionnements évolués et bien d'autres choses. Attendez de voir ! HTML peut être (mal)utilisé pour la présentation des sites Web. Mais CSS offre plus d'options et se montre plus précis et sophistiqué. CSS est pris en charge par tous les navigateurs actuels. Après seulement quelques leçons dans ce tutoriel, vous pourrez fabriquer vos propres feuilles de style avec CSS pour donner un aspect tout nouveau à votre site Web. Quelle est la différence entre CSS et HTML ? HTML sert à structurer le contenu, CSS sert à formater un contenu structuré. Bon, ça sonne un peu technique et confus. Mais continuez à lire, ça prendra tout son sens bientôt. Retour au bon vieux temps où Madonna était une vierge et un type nommé Tim Berners Lee inventait le World Wide Web, le langage HTML était seulement utilisé pour structurer du texte. Un auteur pouvait marquer son texte en déclarant "voici un titre" ou "voici un paragraphe", avec les balises HTML <h1>, ou <p>. La popularité du Web croissant, les concepteurs se mirent à rechercher des moyens pour ajouter de la présentation aux documents en ligne. Pour satisfaire à cette demande, les éditeurs de navigateurs (en ce temps-là, Netscape et Microsoft) inventèrent de nouvelles balises HTML, comme par exemple <font>, qui différaient des éléments originaux en cela qu'ils définissaient une présentation et non une structure. Cela conduisit aussi à une situation où les balises de structure originales, telle que <table>, étaient de plus en plus utilisées à tort pour présenter les pages et non pour ajouter une structure au texte. Beaucoup de nouvelles balises de présentation, telle que <blink>, n'étaient reconnues que par un type de navigateur. "Vous devez utiliser le navigateur X pour voir cette page" devint un avertissement courant sur les sites Web. CSS fut inventé pour remédier à cette situation en offrant aux concepteurs Web des possibilités de présentations sophistiquées, gérées par tous les navigateurs. En même temps, séparer le style de présentation des documents de leur contenu rend leur entretien beaucoup plus facile. Quels sont les avantages de CSS ? CSS fut une révolution dans l'univers de la conception Web. Les avantages concrets de CSS sont les suivants :  Le contrôle de la présentation de plusieurs documents par une seule feuille de style ;  Un contrôle plus précis de la présentation ;  Des présentations différentes appliquées à des types de médias différents (à l'écran, à l'impression, etc.) ;  De nombreuses techniques évoluées et sophistiquées. Dans la leçon suivante, nous verrons comment CSS fonctionne réellement et comment commencer. Leçon 2 : Comment CSS fonctionne-t-il ? Dans cette leçon, vous apprendrez à fabriquer votre première feuille de style. Vous saurez ce qu'est le modèle CSS de base et quels sont les codes nécessaires pour utiliser CSS dans un document HTML. Beaucoup de propriétés des feuilles de style en cascade (CSS) sont similaires à celles de HTML. Si vous avez l'habitude d'utiliser HTML pour la présentation, vous reconnaîtrez donc beaucoup de ces codes. Voyons un exemple concret. La syntaxe CSS de base Supposons que nous voulions que le fond d'une page Web soit d'un beau rouge : Avec HTML, nous l'aurions fait comme ceci : <body bgcolor="#FF0000"> Avec CSS, on peut obtenir le même résultat comme cela : body {background-color: #FF0000;} Comme vous l'aurez remarqué, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple illustre également le modèle fondamental de CSS : Mais où place-t-on le code CSS ? C'est précisément ce que nous allons voir maintenant. Appliquer CSS à un document HTML Il y a trois façons d'appliquer le style CSS à un document HTML. Elles sont toutes expliquées ci- dessous. Nous vous recommandons d'examiner la troisième méthode, c'est-à-dire celle externe. Méthode 1 : Dans la ligne (l'attribut style) Une façon d'appliquer du style CSS à HTML est celle avec l'attribut HTML style. En reprenant l'exemple précédent avec l'arrière-plan rouge, on peut l'appliquer ainsi : <html> <head> <title>Exemple</title> </head> <body style="background-color: #FF0000;"> <p>Cette page est rouge</p> uploads/s3/ tutoriel-css.pdf