css3 Mise en forme

Portrait de Jenny
Soumis par Jenny le 16 sep 2013 - 19:18

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)

  • xx-small : minuscule et x-small : très petit ;
  • small : petit ;
  • medium : moyen ;
  • large : grand ;
  • x-large : très grand et meme xx-large !
    ex: p {font-size: small;}

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');
}
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-s...
 

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é.

Ex d'héritage (ici sur body et un span)
Pour le HTML suivant: et CSS suivant:


<h1>Exemple d'héritage CSS</h1>

<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

 

ex opacity: 0.3Proprié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 /* angle des 4 coins ht-gch ht-drt bas-drt bas-gch  */
  • courbes elliptiques  border-radius: 20px / 10px