18
JUIN

BaseCSS - Un point de départ pour vos CSS

Publié le 18/06/09 à 07h18 par DJo

Voici une feuille de styles bien utile si vous démarrez un nouveau WebDesign de zéro.

CSS Base

Cette feuille de styles CSS comporte des instructions pré écrites pour vous faire gagner du temps.

Je l'ai conçu pour ma propre utilisation pour gagner du temps au lieu de commencer un Webdesign de zéro.

 

/* =====================================
======     DJo - La Ferme du Web   =====
======       Copyrights 2009	   =====
====== http://www.lafermeduweb.net =====
======================================== */

/* Reset 
===================== */

* {
	margin: 0;
	padding: 0;
}

a img {
	border: none;
}

/* Structure
===================== */

#conteneur {
	width: 950px;
	margin: 0 auto;
	overflow: hidden;
}

#header {
	height: 150px;
	width: 950px;
}

#centre {
	overflow: hidden;
	width: 950px;
}

#col_gauche  {
	float: left;
	width: 200px;
}

#col_droite {
	float: right;
	width: 750px;
	overflow: hidden;
}

#footer {
	height: 20px;
	width: 950px;
}

/* Polices, titres et liens
===================== */

body {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
}

h1 { }
h1 a { }
h1 a:hover { }

h2 { }
h2 a { }
h2 a:hover { }

h3 { }
h3 a { }
h3 a:hover { }

a:link, a:active, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }


/* Form
===================== */

input { }
input[type=submit] { }
input[type=button] { }
input[type=checkbox] { }
input[type=radio] { }
input[type=text] { }
select { }
textarea { }
label { }
fieldset { }


/* Divers
===================== */

.float_gauche { float: left; }
.float_droite { float: right; }
.clear { clear: both; }

/* Vos instructions ...
===================== */

 

La feuille de style permet aussi de créer une architecture HTML en 2 colonnes avec header et footer.

A vous de tout personnaliser à votre guise maintenant :)

Baraguiné par HammHetfield le 18/06/09 à 07h28
HammHetfield sur La Ferme du Web
Hum ça peut être intéressant... Dans le même registre, j'avais vu un css qui réinitialisait toutes les valeurs par défaut qui diffèrent entre les différents navigateurs principaux, assez pratique, si quelqu'un met la main dessus, jveux bien ^^.

Sinon pour ton organisation, bon ben t'as tes propres termes, du coup je pense pas que tout le monde puisse s'y faire, mais c'est sympa de partager, ça peut donner des idées :)
Baraguiné par DJo le 18/06/09 à 08h08
DJo sur La Ferme du Web
Ouai, c'est vrai que c'est ma façon de nommer en CSS, donc après c'est à modifier pour l'adapter à ses méthodes :)
Baraguiné par darkcristal le 18/06/09 à 08h57
darkcristal sur La Ferme du Web
Tu tapes "reset css" sur google et tu trouveras ton bonheur :)
Baraguiné par HammHetfield le 18/06/09 à 11h40
HammHetfield sur La Ferme du Web
Ah merci, c'est cool :)
Baraguiné par Orni le 19/06/09 à 09h17
Orni sur La Ferme du Web
input[type=submit] { }
input[type=button] { }
input[type=checkbox] { }
input[type=radio] { }
input[type=text] { }

Malheureusement ça en dehors de Firefox, Opera et (peut être ?) IE8, c'est mort ... Bien dommage d'ailleur on pourrait l'utiliser à presque toutes les lignes :'((( ainsi que les last, nth-child, .... :'(

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web