| |
| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
admin
Spécial
Inscrit le: 01 Juin 2006
Messages: 24
|
 Posté le: Sam Nov 04, 2006 12:14 am Sujet du message: Tutorial css pour les débutants |
 |
|
Hello tout le monde, voilà j'ai decidé de mettre ce tutorial CSS2 pour que tout le monde puisse profiter de cette technologie.
donc droit au but :
1- Appliquer un CSS sur le HTML
Il existe différentes façons appliquer un style css sur un élément HTML :
a- appliquer directement dans la balise HTML à l'aide de "style=" | Citation: | | <p style="color:red" >votre texte</p> |
b- mettre dans la section <head></head> la déclaration du css
| Citation: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {color: red;}
a {color: blue;}
</style> ..
</head> |
ceci rend tous les paragraphes en rouge et les liens en bleu
c- séparer le css dans un fichier externe comme (moncss.css)dans votre fichier moncss.css vous mettez
| Citation: | p {color: red;}
a {color: blue;} |
et pour appeler ce fichier dans votre fichier html vous metter entre <head> et </head> (il y a d'autres façons pour appeler les css externes mais bon... restons sur celle là pour le moment.
| Citation: | | <link rel="stylesheet" type="text/css" href="moncss.css" /> ... |
2- Selecteurs, propriètés et valeurs
Pour chaque selecteurs il y a des propriètés à l'intérieur des "{}"
qui prennent la forme de "color, background-color, ...", des valeurs sont appliqués à ces propriètés et enfin pour séparer les propriètés les uns des autres il faut mettre un ";"
| Citation: | body{
font-size:0.8em;
color:red;
} |
ceci appliquera la couleur rouge sur les textes et de taille 0.8em (que j'expliquerai tout de suite ce "em")
: taille d'un caractère par défaut, 2em: deux fois la taille d'un caractère par défaut.
: taille en pixels, ces petits carrés qui composent votre écran.
: la taille en pourcentage
: la taille en points
bon je continuerai cela plus tard pendant que vous pratiquez ces petites exemples et faire des recherches persos, |
|
| Revenir en haut de page |
|
 |
dd-bug
Medaille 1
Inscrit le: 09 Juin 2006
Messages: 15
Localisation: a gauche en entrant
|
| Posté le: Mar Nov 07, 2006 12:54 am Sujet du message: |
|
|
hello admin,
Sympathique ce petit poste sur les css ... on en apprend tous les jours !
Par contre je me posait une question sur les details que tu nous as donné
sur les propriétés du font-size :
- em : tu dis que c'est par rapport a une taille par defaut. Quelle est cette
taille par defaut en quelle unité est elle définie ? peux t'on la pré-définir ?
- % : "taille en pourcentage" mais est ce que c'est toujours par rapport
a la taille par defaut ?
- px et pt : y'a t'il une relation (coefficient ou rapport) entre ces
2 "unités" ?
Merci pour tes détails, et vivement d'autres exemples 
dd-bug
_________________
Vous avez le cerf-volant ... prenez de l'air !! |
|
| Revenir en haut de page |
|
|
admin
Spécial
Inscrit le: 01 Juin 2006
Messages: 24
|
| Posté le: Mar Nov 07, 2006 3:50 pm Sujet du message: Unité tailles polices |
|
|
Bonjour dd-bug!
Au fait il existe deux unités qui permettent d'indiquer les dimensions des éléments en css (notament la taille des polices) : Unités de taille fixe et unité de taille relative.
Les unités de taille fixe sont le point (1pt=0.35mm environ), le centimetre (cm) le millimètre (mm) et le pouce (1in ou inch vaut environ 2.54 cm).
Les unités de taille relatives sont la largeur "M" (em), 1 em représente la taille du caractère "M" dans la police de référence. Le pourcentage se définit relativement à la taille de référence dans le conteneur de l'élement.
Il y a aussi le pixel qui est égale à la taille d'un pixel sur l'écran.
Note : Pour ces trois unités, la taille de la police de référence se transment par héritage dans le cas d'éléments imbriqués, la police de référence change à chaque nouveau conteneur.
Definir donc une taille de référence de 2em dans un paragraphe puis une taille de 2em dans un de ses éléments enfants, on attribue à ce dernier une taille de 2em par rapport à 2em, soit 4em!
| Citation: | CSS
p, span{font-size:2em;}
HTML
<p>un <span>est un style</span></p>
ici <p> et <span> reçoivent chacune la taille de texte 2em. <span> descendant de <p>, sa taille sera double de la taille de référence. |
Alsacreation offre aussi des détails sur la taille des polices : http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em
Dernière édition par admin le Lun Jan 21, 2008 3:40 pm; édité 1 fois |
|
| Revenir en haut de page |
|
|
admin
Spécial
Inscrit le: 01 Juin 2006
Messages: 24
|
| Posté le: Jeu Nov 16, 2006 9:41 pm Sujet du message: Selecteurs classes et identifiants |
|
|
Les selecteurs et identifiants
Les selecteurs sont des styles precedés par un point (.), alors que les identifiants par un dièse (#),
| Citation: | identifiant
#top
{background-color:#ccc;
padding: 1em }
class
.intro {
color: red;font-weight: bold;
} |
d'ou dans le code HTML:
| Citation: | <div id="top">
<h1>Chocolat</h1>
<p class="intro">This Une recette de chocolat
</p>
<p class="intro">Mmm mm mmmmm</p>
</div> |
La différence est que l'Id est utilisé pour identifier un seul élément alors que la classe est pour plusieurs éléments.
Grouper les styles
Vous pouvez grouper vos styles afin de mieux travailler rapidement et aussi gagner de la place.
| Citation: | le code :
h2 {
color: red;
}
.intro{
color: red;
}
.desc
color: red;
}
peut être écrit comme ceci:
h2, .intro, .desc{color: red; } |
Vous pouvez aussi insérer des id et selecteurs à l'intérieur des autres :
| Citation: |
#top{background-color: #ccc; padding: 1em }
#top h1 {color: #ff0; }
#top p {color: red; font-weight: bold;}
ceci veut dire que le titre h1 à l'intérieur de "top" est de couleur gris et le ou les paragraphes ont des textes rouges et gras
NB : il faut mettre une espace entre les selecteurs |
et dans le code HTML
| Citation: | <div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div> |
|
|
| Revenir en haut de page |
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
|
| |
|
FAQ
Rechercher
Liste des Membres
Groupes d'utilisateurs
Profil
S'enregistrer
Connexion
Se connecter pour vérifier ses messages privés
