Sommaire

Premier exemple.

Un peu de syntaxe.

Les boites.

T.P. html et CSS.

travaux-pratiques

IntroAuCssMe

Introduction au CSS

Source
. Le site du World Wide Web Consortium.

Le tag video.

CSS : Cascading Style Sheets

• 1996 : CSS 1.0
• La version CSS 4.15 est sortie en décembre 2020.
- La dernière version est W3. CSS 5.01 est sortie en mars 2025.
- Les dernières versions sont téléchargeables depuis W3.
• Langage de présentation d’un document HTML ou XHTML
• Issu de la séparation entre le contenu et la présentation
• Il est encapsulé dans la page HTML (ou dans un fichier lié) pour être interprété par le client.

Les feuilles de styles CSS
Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans en modifier son contenu.
Le langage CSS spécifie l'apparence des blocs de texte ou image, mais il peut contrôler d'une manière
très précise le positionnement des objets, les bordures, les marges, le recouvrement …
La norme est consultable sur le site du consortium Web.
Les navigateurs n'implémentent qu'une petite partie du langage.

Les Cascading StyleSheets — ou CSS — (Feuilles de style en cascade) sont la première technique à apprendre après le HTML.
Alors que HTML s'utilise pour définir la structure et la sémantique du contenu,
les CSS sont employées pour composer et déterminer l'apparence de ce contenu.
Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille
et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes
ou bien pour ajouter des animations et autres fonctionnalités décoratives.

De la même façon que HTML, CSS n'est pas un langage de programmation.
C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles
sur différents éléments sélectionnés dans un document HTML.
Par exemple, on peut sélectionner tous les éléments d'une page HTML
qui sont paragraphes et afficher leurs textes en rouge avec ce code
p {

color: red;

}

Ceci est un essai

Vous pouvez tester quelques codes css en utilisant ce site.

Pour réaliser les tests on va utiliser Uwamp.

Le fichier css : style.css
Le fichier html : index.html

Voici le fichier style.css de base :

<style type="txt/css">
h2 	{
		color:blue;
	}
 </style>

Et voici le fichier HTML

<HTML>
 	<HEAD>
 		<TITLE>Le CSS</TITLE>
			<meta charset="utf-8">
			<link rel="stylesheet" type= "text/css" href= "style.css"> 
	</HEAD>
 
	<BODY>
		Bonjour à tous !
 		<h1>Introduction</h1>
		<h2>La suite</h2>
	</BODY>
 </HTML>

Ce qui donne :

Introduction

La suite

Pour la suite voir cette page du site mozilla.

Ce texte a une ligne en dessous.

Ce texte a une ligne au dessus.

Ce texte est barré d'une ligne.

Ce lien ne sera pas souligné, comme les liens le sont normalement.
Attention à ces décorations sur les ancres car le soulignement sert souvent d'indication pour un hyperlien.

Ce texte a des lignes en dessous et au dessus.

Ce texte peut clignoter selon le navigateur utilisé.

Sources :

BODY
{
margin: 10px 0 ;
- padding: 0 ;
- text-align: center ;
- font: 2em "Trebuchet MS", helvetica, sans-serif ;
- background: indianred ;

}

H1 {
- margin: 10px 0 ;
- padding: 20;
- text-align: center ;
- background: indianred ;
- color : red ;
}

<link href="../fichiers/style.css" rel="stylesheet" type"text/css" />


<?php
p {
    color: red;
}

h2 {
        color: blue;
    }

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.blink {
  text-decoration: blink;
}

Source.

Commentaires [Cacher commentaires/formulaire]

XHTML 1.0 valide ? :: CSS valide ? :: -- Fonctionne avec WikiNi 0.5.0 (interwiki)