| CSS |
| |
Cascading Style Sheet
Feuille de style en cascade
CSS est un principe de définition des styles de caractères et de mise en page.
L'objectif est de séparer information et instruction de mise en forme
Syntaxe spécifique diférente des balise HTML
|
| Balise <style> |
La définition de style est insérée dans le document HTML
<html>
<head>
<style media=“screen” type=“text/css”><!--
a { color: #ff6600; font-weight: bold }
.monstyle { font-family: Arial, Geneva, Veradana; font-size: 12px }
--></style>
</head>
<body>
<span class=“monstyle”>mon texte</span>
</body>
</html>
|
| Balise <style> |
La définition de style est contenue dans un fichier texte spécifique (type MIME : text/css) différent du fichier HTML.
Le fichier CSS est lié au fichier HTML via la balise <link> contenue par le fichier HTML
<link rel=“stylesheet” href=“toto.css” type=“text/css”>
Cette technique permet le partage d'une même feuille de style par différentes pages HTML.
|
| Cascading |
Le terme "cascade" représente un régle de priorité pour l’application des styles : le style qui s'applique est celui qui est le plus proche de l'information, différents styles peuvent se compléter.
<html>
<head>
<style media=“screen” type=“text/css”><!--
a { color: #ff6600; font-weight: bold }
.monstyle { color: #009aef; font-size: 12px }
--></style>
</head>
<body>
<a href=“toto.html”>
<span class=“monstyle”>mon texte</span>
</a>
</body>
</html>
Ici, mon texte sera de la couleur #009aef, en bold et taille 12px
Un style peut être rapporté automatiquement à une balise (ici <a>)
.monstyle est appelée une classe, elle sera ajoutée spécifiquement à un balise dans un contexte
alternative : <a href=“toto.html” class=“monstyle”>mon texte</a>
<html>
<head>
<link rel=“stylesheet” href=“a.css” type=“text/css”>
<link rel=“stylesheet” href=“b.css” type=“text/css”>
</head>
<body>
...
</body>
</html>
Ici la feuille b.css est appliquée en priorité sur a.css
Ce qui n’est pas défini par la feuille b.css peut être défini par la feuille a.css
|
Exemple de
fichier CSS |
.encartTitre {
color: #f90;
font-weight: bold;
font-size: 13px
}
.encartTexte {
color: #f90
}
.texte {
font-size: 12px;
font-family: Arial, Verdana, Helvetica, Geneva, «Sans serif» }
.chapo {
color: #e25f00;
font-weight: bold;
font-size: 13px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular
}
.photoCopyright {
color: #729abd;
font-size: 9px;
font-family: Geneva, Arial, Verdana
}
.photoLegende {
color: #83b1da;
font-size: 9px;
font-family: Geneva, Arial, Verdana, Helvetica, «Sans serif» }
.titre {
font-weight: bold;
font-size: 15px;
font-family: Arial, Verdana, Helvetica, Geneva
}
a { color: #ff7989 }
a:hover { color: #ff0016 }
.button {
font-size: 9px;
font-family: Verdana, Arial, Helvetica, Geneva, «Sans serif» }
.intertitre {
color: #001c5a;
font-weight: bold;
font-size: 13px
}
td {
color: #051a69;
font-size: 11px;
font-family: Arial, Verdana, Helvetica, Geneva
}
|
| Layer |
Le layer est une balise HTML <div>.
Associé à une définition de style, il est interprété comme un contenu de type calque ou de type bloc.
Le calque permet de superposer des couches HTML, de les déplacer et de les faire apparaître ou disparaître.
Le bloc permet d'insérer un contenu HTML au sein d'une page, de le faire apparaître et disparaître en déplaçant le contenu périphérique.
Exemple 1 : type calque
<style type="text/css" media="screen"><!--
#layer0 { position: absolute; z-index: 1; top: 159px; left: -2000px; visibility: visible; display: block }
--></style>
<div class="layer0">Mon texte</div>
Exemple 2 : type bloc
<div id="id_more" style="position:block;display:none">Mon texte</div>
|
|
|
|