Envie d'être informé avec bonne humeur ? Marre de la langue de bois ? Bienvenue sur Net-Actuality, votre site de décryptage informatique sans prétention !
[Tutoriel] Le CSS ? Créer sa feuille de style
Index du forum >> Informatique >> Sujet : [Tutoriel] Le CSS ? Créer sa feuille de style
n°1 - Ecrit par Elliot, le 23 octobre 2008, à 20:18.
Bonjour à tous et toutes.
Suite à mon tutoriel sur comment créer un site web qui n'était pas assez détaillé sur la feuille de style CSS, je décide de faire un tutoriel exclusivement sur le CSS. Voici le plan du tutoriel :
I - Qu'est-ce que le CSS ?
II - Les principales balises du CSS.
III - Créer sa feuille CSS.
[question]Qu'est-ce que le CSS ?[/question]
Le CSS gère beaucoup de choses, comme les couleurs, les images, les positions ... C'est un langage reconnu par tous les navigateurs et qui est très utile lors que vous voulez créer un site web. C'est un langage important puisque c'est lui qui construit votre site, le design ... Il y a un certain nombre de balises, mais elles s'apprennent très vite et sont facilement compréhensible du fait que ce soit en anglais
[information]Les principales balises du CSS.[/information]
Voici la liste des balises les pus importante dans le CSS.
PS : Si j'oublie des balises importantes, faites le moi savoir.
#nomdevotrediv { (Ceci est l'entrée de votre feuille div c'est à l'intérieur que toutes les autres balises se trouve).
* Les balises suivantes se trouveront dans #nomdevotrediv { *
width: 100px; (Ceci représente la longeur de votre div, notez que vous n'êtes pas obliger de mettre 100px; ).
height: 100px; (C'est la hauteur de votre div, notez que n'êtes pas forcer de mettre 100px ).
margin(-top,-left,-right,-bottom): 10px; (Propriétés qui permettent dans une boîte CSS, de définir séparément chaque "bord" (nom donné aux quatre cotés du rectangle d'une boîte, exmple :
Source de l'image).
padding(-top,-left,-right,-bottom): 10px; (Propriété qui permet de définir la distance entre le contenu d'une boîte et la bordure de ce dernier, sera par exemple utilisé pour éloigner un contenu de la bordure qui l'entoure).
background-image: url('liendevotreimage'); (Cette balise sert à afficher une image en fond de votre div).
background-color: #codecouleur; (Cette balise permet d'afficher une couleur au fond de votre div).
float: left, right; (Ceci permet de placer votre div à gauche ou droite).
text-align: left, right; (Permet de positionner votre texte à gauche ou à droite dans votre div).
color: #codecouleur; (Permet de mettre le texte du div en couleur).
border(-left,-top,-bottom,-right): 1px; (Permet de mettre une bordure à votre div, image ... Vous n'êtes pas obliger de mettre 1px).
[attention]Créer sa feuille CSS.[/attention]
Voici une page CSS avec a peut près toutes les balises que j'ai cité au dessus
body {
font : normal 83%/1.5em verdana, microsoft sans sherif;
color : #6b747b; (couleur du texte)
background-image: url("placer l'url de votre image");
text-align: ;
}
a {
text-decoration: none;
color:#6b747b;
}
a:hover {
text-decoration:;
}
#banniere { (Ici c'est pour votre bannière/header)
width: 500px;
height: 150px;
background-image: url("placer l'url de votre image");
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
}
#content_menu { (ce qui contient le menu)
width: 500px;
height: 40px;
background-image: url("placer l'url de votre image");
margin-top: 100px;
}
#textmenu {
padding-top: 7px;
}
#corps { (ce qui contient vos images, textes ...)
width: 500px;
height: auto;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
}
A vous de lire et d'essayer de comprendre avec ces deux citations.
Pour plus d'informations, merci de laisser vos commentaires, vos remarques et vos questions.
A bientôt
[ Ce message a été modifié pour la dernière fois le 23 octobre 2008, à 20:35 ]
Suite à mon tutoriel sur comment créer un site web qui n'était pas assez détaillé sur la feuille de style CSS, je décide de faire un tutoriel exclusivement sur le CSS. Voici le plan du tutoriel :
I - Qu'est-ce que le CSS ?
II - Les principales balises du CSS.
III - Créer sa feuille CSS.
[question]Qu'est-ce que le CSS ?[/question]
Le CSS gère beaucoup de choses, comme les couleurs, les images, les positions ... C'est un langage reconnu par tous les navigateurs et qui est très utile lors que vous voulez créer un site web. C'est un langage important puisque c'est lui qui construit votre site, le design ... Il y a un certain nombre de balises, mais elles s'apprennent très vite et sont facilement compréhensible du fait que ce soit en anglais
[information]Les principales balises du CSS.[/information]
Voici la liste des balises les pus importante dans le CSS.
PS : Si j'oublie des balises importantes, faites le moi savoir.
#nomdevotrediv { (Ceci est l'entrée de votre feuille div c'est à l'intérieur que toutes les autres balises se trouve).
* Les balises suivantes se trouveront dans #nomdevotrediv { *
width: 100px; (Ceci représente la longeur de votre div, notez que vous n'êtes pas obliger de mettre 100px; ).
height: 100px; (C'est la hauteur de votre div, notez que n'êtes pas forcer de mettre 100px
).margin(-top,-left,-right,-bottom): 10px; (Propriétés qui permettent dans une boîte CSS, de définir séparément chaque "bord" (nom donné aux quatre cotés du rectangle d'une boîte, exmple :
padding(-top,-left,-right,-bottom): 10px; (Propriété qui permet de définir la distance entre le contenu d'une boîte et la bordure de ce dernier, sera par exemple utilisé pour éloigner un contenu de la bordure qui l'entoure).
background-image: url('liendevotreimage'); (Cette balise sert à afficher une image en fond de votre div).
background-color: #codecouleur; (Cette balise permet d'afficher une couleur au fond de votre div).
float: left, right; (Ceci permet de placer votre div à gauche ou droite).
text-align: left, right; (Permet de positionner votre texte à gauche ou à droite dans votre div).
color: #codecouleur; (Permet de mettre le texte du div en couleur).
border(-left,-top,-bottom,-right): 1px; (Permet de mettre une bordure à votre div, image ... Vous n'êtes pas obliger de mettre 1px).
[attention]Créer sa feuille CSS.[/attention]
Voici une page CSS avec a peut près toutes les balises que j'ai cité au dessus
body {
font : normal 83%/1.5em verdana, microsoft sans sherif;
color : #6b747b; (couleur du texte)
background-image: url("placer l'url de votre image");
text-align: ;
}
a {
text-decoration: none;
color:#6b747b;
}
a:hover {
text-decoration:;
}
#banniere { (Ici c'est pour votre bannière/header)
width: 500px;
height: 150px;
background-image: url("placer l'url de votre image");
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
}
#content_menu { (ce qui contient le menu)
width: 500px;
height: 40px;
background-image: url("placer l'url de votre image");
margin-top: 100px;
}
#textmenu {
padding-top: 7px;
}
#corps { (ce qui contient vos images, textes ...)
width: 500px;
height: auto;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
}
A vous de lire et d'essayer de comprendre avec ces deux citations.
Pour plus d'informations, merci de laisser vos commentaires, vos remarques et vos questions.
A bientôt
[ Ce message a été modifié pour la dernière fois le 23 octobre 2008, à 20:35 ]
Flux RSS des derniers messages du sujet [Tutoriel] Le CSS ? Créer sa feuille de style.
8 requêtes -
0.03232 secondes