Quelques tips en CSS
Bonjour, aujourd'hui je vous ai préparé un article sur le CSS (Cascading Style Sheet).
3 méthodes pour ajouter le CSS dans vos pages :
En inline qui consiste a ajouter le CSS directement dans vos balises HTML (pas propre mais utile pour faire des tests rapides)
<a href="http://www.point2zero.net" style="font-size:1.2em;">Point2Zero</a>
Avec le CSS entre les balises <head> et du type :
<html> <head> <title>Ma Page Web</title> <style type="text/css"> /* Votre css ici */ </style> </head> ...
Ou en utilisant une feuille de style externe par exemple : style.css que l'on inclus dans notre <head> soit avec :
<html> <head> <title>Ma Page Web</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> ...
Ou avec ce code :
<html> <head> <title>Ma Page Web</title> <style type="text/css" media="all"> @import "style.css"; </style> </head> ...
Comment centrer un élément dans une page web en CSS ?
Nous avons une page web avec une balise <div> qui se trouve dans la balise <body>. Le but étant de centrer la balise <div> quoi qu'il se passe.
Dans un premier temps nous allons ajouter des "background" a nos balises <body> et <div> pour les différencier.
Mettre la balise <body> avec un fond gris #AAA et la balise <div> avec un fond blanc #FFF.
body{
background-color:#AAA;
}
div{
background-color:#FFF;
}
Jusque là rien de trés difficile. Maintenant ajoutons une taille à notre <div> pour pouvoir le centrer en fonction de sa taille.
body{
background-color:#AAA;
}
div{
background-color:#FFF;
width:960px;
}
Et ajoutons une marge sur notre <div>
body{
background-color:#AAA;
}
div{
background-color:#FFF;
margin:0 auto;
width:960px;
}
Petite explication : j'utilise un racourcis pour la marge. Normalement j'aurai du faire :
margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;
Le racourci permet d'écrire beaucoup moins de texte (chargement plus rapide, css moins lourd etc...).
J'ai une margin en haut et en bas à 0 donc pas de marge et a gauche et a droite en auto. Donc en fonction de la place disponible à droite et a gauche de l'élément il centrera le contenu.
Autres choses :
- Triez les propriétés dans l'ordre alphabétique.
- N'indiquez pas l'unité quand la valeur est 0. 0px = 0% = 0 
Avant :
body{
border:0px;
margin:0%;
padding:0;
background:#FFF;
outline:0;
}
Apres :
body{
background:#FFF;
border:0;
margin:0;
padding:0;
outline:0;
}
Facile non ?
Voici quelques liens de Framework CSS pour construire vos pages facilement :
- 960grid.
- Elasticss.
