- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
css3 Mise en forme
caractères
absolue : en pixels, en centimètres ou millimètres |
relative : en pourcentage, « em » ou « ex » (em mais qui est plus petit de base)
|
ex 2 : 1 em = taille normale |
p { font-size: 0.8em; }
h1 { font-size: 1.3em;
color : maroon } |
http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-...
Polices
Depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur (@font-face) relativement mal supporté par les browsers.
Mémo: Sans serif est plus simple que serif. Polices bien supportées:Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana.
ex de css : balise {font-family: Arial, "Arial Black", serif; }
Formats de fichiers de polices qui existent et qu'il faut connaître :
- .ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
- .eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft.
- .otf : OpenType Font. Ne fonctionne pas sur Internet Explorer.
- .svg : SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.
- .woff : Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.
@font-face {
font-family
:
'MaSuperPolice'
;
src
:
url
(
'MaSuperPolice.eot'
)
format
(
'eot'
),
url
(
'MaSuperPolice.woff'
)
format
(
'woff'
),
url
(
'MaSuperPolice.ttf'
)
format
(
'truetype'
),
url
(
'MaSuperPolice.svg'
)
format
(
'svg'
);
}
couleur
p {
color
:
#FFFFFF
;}
ou p {
rgb
(
240
,
96
,
204
)
}
-> couleur du texte ou via noms (16 seulement)position
text-align: left ou right, justify, center
float
left ou right. Voir aussi inline-block
Ex de html: <
p
><
img
src
=
"flash.gif"
class
=
"imageflottante"
alt
=
"Image flottante"
/> Texte à droite de image </p>
avec css
.imageflottante
{
float: left;
}
Stopper le float avec la propriété clear (left right ou both)
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-s...
backgroud et ex héritage
Avec en css body { background-color: black; color: white; } les p et hx sont aussi en blanc, car ils sont imbriqués sous la balise body (ils héritent des propriétés de leur père, ici body ; ie en donnant un style à un élément, tous les sous-éléments auront le même style). En spécifiant par la suite par ex que les titres seront rouges, ce style aura la priorité.
Pour le HTML suivant: | et CSS suivant: |
---|---|
<p>C'est d'un glauque, cette <mark>ambiance</mark> noire, non ? !!!</p> |
body
{ background-color: black;
color: white;}
mark
{ /* La couleur de fond prend le pas sur celle de toute la page */
background-color: red;
color: black;}
|
c'est la déclaration la plus précise qui l'emporte. |
background-attachment (fixed ou scroll)
background-repeat (no-repeat repeat-x repeat-y repeat )
repeat-x: le fond sera répété uniquement sur la première ligne, horizontalement.
background-position
intéressante que si elle est combinée avec background-repeat: no-repeat;
Ex: background-position
:
30px
50px
;
sur p, sera à 30px du coin gauche du parag et 50 px du haut de ce para
body
{
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite */
}
ou plus court:
body
{
background: url("soleil.png") fixed no-repeat top right;
}
New css 3 : plusieurs images de fond à un element (avec , )
body
{
background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed;
}
L'ordre donne la superposition: le 1er élément sera au-dessus du suivant. Seul IE9 (et suivant) + firefox et chrome
Propriété opacity: entre 1 opaque et 0 transparent
p { opacity: 0.6;} /* à 60% */
body
{
background: url('neige.png');
}
p
{
background-color: black;
color: white;
opacity: 0.3;
}
Browsers récents (pas IE 8). Tout le contenu de cet élément sera rendu transparent (même les images, les autres blocs à l'intérieur, etc.).
Si vous voulez juste rendre la couleur de fond transparente, utilisez plutôt la notation RGBa.
Pour les navigateurs plus anciens:
- indiquer la notation RGB classique en plus de RGBa.
- le fond ne sera pas transparent mais, au moins, il y aura une couleur d'arrière-plan.
p { background-color: rgb(255,0,0); /* Pour navigateurs anciens */
background-color: rgba(255,0,0,0.5); /* Pour les plus récents */ }
Bordures
bordures: http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-...
new css3 border-radius
voir http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-... (voir aussi ombres)
-
border-radius:
10px
5px
10px
5px
-
courbes elliptiques
border-radius:
20px
/
10px