CSS pour "nuls" (?) des pense-bêtes
Je ne pense pas qu'on puisse faire autre chose que dire: vous lisez, vous essayez et vous en concluez des choses pour appliquer ou modifier des paramètres
ou alors on "pond" des css tout prêts!
PENSE-BÊTE et qq exemples:
La page entière est définie par le selecteur body
exemple1
body {
background-color: #BADBFF; /* Fond de page bleu clair */
margin: 0; /* Supprimer toute marge à la page : le texte colle les bordures */
}
exemple2
body {
background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
font: 14px sans-serif; /* Style et taille de la police de la page */
margin: 1em; /* Marge du document HTML */
}
exemple3
body {
background: white url('katie.jpg') no-repeat 50% 50%; /* Fond blanc *non répété* et centré */
background-attachment: fixed; /* Même si la page scroll, l'image reste au centre de l'écran.
Vous pouvez tester sans : dans ce cas (et avec de grandes pages)
l'image restera collée au bord/centre de la page et pas de l'écran */
}
code HTML de la page
Les paragraphes (exemples)
body {
background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
font: 14px serif; /* Style et taille de la police de la page */
margin: 1em; /* Marge du document HTML */
}
p, li {
text-align: justify; /* Justifier le texte des pararaphes et des lignes de listes */
}
p:first-letter { /* Pour la première lettre de chaque paragraphes : */
font-size: x-large; /* Utiliser une police large */
font-weight: bold; /* Et grasse */
color: #0000AA; /* De couleur bleu foncée */
}
Les titres
h1 { /** gros titre */
font-family: serif; /* On se permet un changement de police : pas plus de deux par page, et à utiliser avec parcimonie (c'est le cas) */
background: #0066CC none; /* Fond du titre bleu (et sans image de fond) */
color: white; /* Donc on utilise une police blanche pour que le texte soit visible */
border: 3px dotted #9999FF; /* On encadre le titre d'un bleu clair de 3 pixels de largeur */
padding: 0.3em; /* Espacement intérieur non nul pour que le texte ne colle pas à la bordure du cadre */
text-align: center; /* Le titre doit être centré ! */
letter-spacing: 0.3em; /* On espace les caractères pour que ce soit joli :-) */
}
h2 { /** Les titres de paragraphes */
text-decoration: underline; /* On souligne ces titres */
font-variant : small-caps /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
color: #000077; /* Texte de couleur bleu très foncé, presque noir (donc lisible) */
}
h2 { /** Les sous-titres (titres de niveau 3) */
color: #2222CC; /* Texte de couleur bleu, plus clair que le titre h2 */
font-style: italic; /* Texte en italique */
text-indent: 1em; /* Et indenté par rapport aux autres titres et paragraphes, pour montrer la hierarchie */
}
ou
h2 {
margin-bottom: 0; /* Pas de marge en bas pour coller le titre au paragraphe */
padding: 0; /* Sinon le titre a aussi un léger espacement à gauche : on veut l'aligner */
/* avec le paragraphe, qui n'a pas d'espacement. */
color: blue; /* Classique : couleur... */
font: bold 14px sans-serif; /* ... et police */
}
p {
margin-top: 0; /* Là aussi, pas de marge au dessus du paragraphe */
font: 12px serif; /* Là aussi, classique */
}
Les liens
a { color: #0066CC; } /* Liens en bleu (entre clair et foncé) */
a:visited { color: black; } /* et en noir (comme le texte normal, mais souligné) si déjà visités */
a:hover, a:active { color: white; /* Lors du passage de la souris ou activation, */
background-color: #0066CC; } /* couleur blanc sur fond bleu */
et allez revoir tout ce qui est noté dans l'ensemble
http://favofleur.karmaos.com/post/8
http://favofleur.karmaos.com/post/45
http://favofleur.karmaos.com/post/48
http://favofleur.karmaos.com/post/49
http://favofleur.karmaos.com/post/50
et si quelqu'un en sait plus (dans le domaine facile et débutant) qu'il en rajopute dans des coms dessous
vendredi 12 octobre 2007 à 10h11
par fleurdatlas



Derniers commentaires