/image%2F0960958%2F20190627%2Fob_210d21_pouliguen.jpg)
C S S : Feuille de style en cascade
Le concept de Feuilles de style est
apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading Style Sheets » (feuilles de style en
cascade), notée CSS.
http://www.web-pour-tous.org/tuto_css/design3/
Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments.
Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres
en police Arial, de couleur verte et en italique.
Les feuilles de style ont été mises au point afin de compenser les manques du langage
HTML en ce qui concerne la mise en page et la présentation.
En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments
qui l'entourent.
Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un
seul endroit pour changer l'apparence du site tout entier !
Elles sont appellées « feuilles de style en cascade » (en anglais « Cascading Style Sheets ») car il est possible d'en définir
plusieurs et que les styles peuvent être hérités en cascade.
Les feuilles de style permettent notamment :
d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style ;
de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ;
une plus grande lisibilité du HTML, car les styles sont définis à part ;
des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
un positionnement plus rigoureux des éléments.
http://www.commentcamarche.net/contents/css/cssintro.php3
- Balises (x)html de base
<html></html> : document html
<body></body> : corps du document
<h1></h1> : titre 1er niveau
<h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6)
<p></p> : paragraphe
<ul></ul> : liste à puce
<ol></ol> : liste numérotée
<li></li>: élement d'une liste
<a href=""></a> : lien hypertexte
<table></table>: tableau
<th></th> : légende de ligne ou de colonne
<tr></tr> : ligne du tableau
<td></td> : colonne du tableau
<div></div> : définition de bloc
http://css.mammouthland.net/balises-html.php
Pour chaque déclaration, la structure est toujours la même :
sélecteur {
propriété: valeur;
}
-
Le sélecteur, c'est la balise (x)html (
body;h1;p, etc.), l'identifiant (id) ou la classe (class) ; -
La propriété, c'est l'attribut qu'on veut appliquer (
font;background;margin; etc.) - Et enfin la valeur qui précise les caractéristiques de la propriété
- On revoit les bases :
la propriété « background »
Par Paul O’Brien ( cliquer )
La propriété CSS background vous permet d'appliquer
à tout élément de votre choix des couleurs ou des images de fond:
http://annak.over-blog.com/article-13020357.html
D'abord c'est quoi un fond ?
http://www.cssdebutant.com/fond-background.html
Le mieux est de voir cela à travers un petit exemple que vous pouvez tester sous IE6 et Firefox pour comparer les différences.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test de Fond</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background: red;
border: 10px dashed green;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>
J'ai choisi des bordures vertes et pointillées pour que vous puissiez voir le fond dans les intervalles. Comme on le voit, sous IE (y compris IE7) la couleur de fond n'atteint que la frontière intérieure de la bordure, alors que la plupart des autres navigateurs laissent glisser la couleur de fond sous la bordure jusqu'à atteindre la frontière extérieure du conteneur.
http://www.pompage.net/pompe/les-bases-du-background/
- Tutoriel niveaux 1 et 2 :
http://www.yoyodesign.org/doc/w3c/css1/index.html
http://www.yoyodesign.org/doc/w3c/css2/cover.html
- syntaxe d'une
feuille de style (CSS)
Une page CSS est constituée de régles.
Exemple:
h1 { font-size:1.2em; color:#ffffff }
Les régles sont constituées d'un selecteur (ou plusieurs) et d'un bloc de déclarations.
h1 /*le selecteur*/ /*début du bloc de déclarations*/ { font-size:1.2em; color:#ffffff } /*fin du bloc déclarations*/
Un bloc de déclarations est constitué de propriétés suivies de leurs valeurs.
h1 /*le sélecteur*/ /*début du bloc de déclarations*/ { font-size:1.2em; /*font-size est la propriété, 1.2em est sa valeur*/ color:#ffffff /*color est la propriété, #ffffff est sa valeur*/ } /*fin du bloc déclarations*/
Cela signifie que je demande au navigateur d'agir sur la mise en forme des titres de niveau 1 (h1) d'une page web, que je veux que le texte soit en blanc (#ffffff) et que sa taille soit de 1.2em
Remarque:
Chaque déclaration doit être terminée par un point virgule, toutefois, la dernière peut eventuellement ne pas en avoir.
Il existe plusieurs types de selecteurs, mais ici je n'en aborderai qu'un car ce tuto est avant tout une premiére initiation, si vous avez envie d'approfondir il existe une multitude de sites vous le permettant. Donc pour l'instant, les seuls selecteurs que nous allons utliliser sont des balises html.
- h1
- Un titre de niveau 1
- h2
- Un titre de niveau 2
- h3
- Un titre de niveau 3
- ul
- Bloc liste
- li
- Elément d'un bloc liste
- p
- Un paragraphe
- a
- Un lien hypertext
- pre
- Affichage de code non interpré dans une page
De même que pour les selecteurs, il existe une multitude de propriétés, mais pour des raisons de simplicité je n'utiliserais que certaines, plus particulièrement celles concernant les couleurs de fond, les couleurs de texte, la taille du texte, le type de police utilisée, les bordures.
- Background-color
- La couleur de fond
- color
- La couleur du texte
- font-size
- La taille du texte
- font-family
- Type ou famille de police à utiliser
- border
- Les bordures d'un élément
Il existe de multiples possibilités de valeurs pour une même propriété, couleur, unité de taille, type de police, donc même combat, je vais en aborder que certaines qui nous seront utiles pour l'exemple.
- em
- La taille du texte
- #ffffff
- Couleur du texte, du fond, des bordures (valeur hexadécimale)
- Arial
-
Type de police
http://www.web-pour-tous.org/tuto_css/design3/
/image%2F0960958%2F20231103%2Fob_7de527_it2.png)
/image%2F0960958%2F20230404%2Fob_01619c_ia1.png)
/image%2F0960958%2F20230402%2Fob_ac602a_twd.png)
/image%2F0960958%2F20230221%2Fob_58c974_open1.png)
