CSS : cascading stylesheets
mise en page
dans l'entête
:
<link href="style.css" type="text/css"
rel="stylesheet" title="blablabla" />
structure d'une feuille de style
notion de classe
p.pouet{
font-size: 12px;
background-color: red;
}
Pour appliquer la classe, il suffira ensuite d'ajouter l'attribut
class="nom" dans le code HTML.
balise.nom{
propriété: valeur;
propriété: vlaeur;
}
exemple : <p class="pouet">bla bla bla</p>
classe applicable à tout type de balise : .pouet {...}
classe appliqué à toutes les balises d'un type : p { ... }
autres manières de spécifier un style
toujours dans l'entête
:
<style type="text/css">
table.truc{
border-width: 2px;
background-color: blue;
}
</style>
ou dans la balise elle même :
<h1 style="text-decoration: underline;">bla bla</h1>
quelques propriétés
pour le texte:
font-family: Garamond, Times New Roman, serif;
font-size: taille;
font-style: normal | italic;
font-weight: normal | bold | bolder | lighter;
color: couleur;
text-align: left | center | right | justify;
text-decoration: none | underline;
quelques propriétés
pour l'arrière plan:
background-color: couleur;
background-image: url('image.jpg');
pour les bordures:
border-width: taille;
border-color: couleur;
border-style: none | solid | dotted | dashed |
double;
ou border: taille couleur style;
mais aussi border-bottom... border-top...
border-left... border-right...
les couleurs :
#RRVVBB en hexadécimal
ou #RVB en hexadécimal
ou rgb(255,0,128) en décimal
ou encore red, blue, white, green, black...
les tailles et positions :
en pixels : 12px
ou en centimetres : 12cm
ou encore en points : 12pt
et même en pourcentage de l'élément parent : 12%
voire parfois par rapport à la taille de la police : 12em
mise en page
dans l'entête
:
<link href="style.css" type="text/css"
rel="stylesheet" title="blablabla" />
structure d'une feuille de style
notion de classe
p.pouet{
font-size: 12px;
background-color: red;
}
Pour appliquer la classe, il suffira ensuite d'ajouter l'attribut
class="nom" dans le code HTML.
balise.nom{
propriété: valeur;
propriété: vlaeur;
}
exemple : <p class="pouet">bla bla bla</p>
classe applicable à tout type de balise : .pouet {...}
classe appliqué à toutes les balises d'un type : p { ... }
autres manières de spécifier un style
toujours dans l'entête
:
<style type="text/css">
table.truc{
border-width: 2px;
background-color: blue;
}
</style>
ou dans la balise elle même :
<h1 style="text-decoration: underline;">bla bla</h1>
quelques propriétés
pour le texte:
font-family: Garamond, Times New Roman, serif;
font-size: taille;
font-style: normal | italic;
font-weight: normal | bold | bolder | lighter;
color: couleur;
text-align: left | center | right | justify;
text-decoration: none | underline;
quelques propriétés
pour l'arrière plan:
background-color: couleur;
background-image: url('image.jpg');
pour les bordures:
border-width: taille;
border-color: couleur;
border-style: none | solid | dotted | dashed |
double;
ou border: taille couleur style;
mais aussi border-bottom... border-top...
border-left... border-right...
les couleurs :
#RRVVBB en hexadécimal
ou #RVB en hexadécimal
ou rgb(255,0,128) en décimal
ou encore red, blue, white, green, black...
les tailles et positions :
en pixels : 12px
ou en centimetres : 12cm
ou encore en points : 12pt
et même en pourcentage de l'élément parent : 12%
voire parfois par rapport à la taille de la police : 12em







Aucun commentaire:
Enregistrer un commentaire