Informations :
Dates
- Publish : : 2010
- Modification : Saturdy 24 august 2013
- 900 views
Share :
Pour faire la mise en page de son site Web il faut se faire une feuille de style (une feuille CSS)
Ici on fixe à la balise html
, une couleur blanche aux textes et une couleur de fond grise.
Script avec 4 lignes
001body {
002color:white;
003background-color:gray;
004}
Ici on fixe à la balise a
(les liens), la couleur rouge et le soulignement.
Script avec 8 lignes
001a {
002color:red;
003text-decoration: underline;
004}
005a:hover {
006color:red;
007text-decoration:none;
008}
Ici on déclare une classe CSS important
, la couleur rouge et une épaisseur de trait grasse.
Script avec 4 lignes
001.important {
002color:red;
003font-weight:bold;
004}
On appelle cette classe depuis une page XHTML comme ceci
Script avec 1 ligne
001<span class="important ">mon texte est important</span>
Ici on déclare un IDentifiant CSS header
, avec une taille de textes de 14px
.
Script avec 3 lignes
001#header {
002font-size:14px;
003}
On appelle cet ID depuis une page XHTML comme ceci
Script avec 3 lignes
001<div id="header">
002<p>Mon Header</p>
003</div>
IMPORTANT : Ce qu'il faut savoir c'est qu'une classe CSS peut être appelée plusieurs fois sur une page alors qu'un identifiant CSS doit être unique dans une page.
Vous pouvez prendre pour exemple notre feuille de style global ou encore lire l'article "Implanter du CSS à une page Web ".
Ci-dessous "la" feuille de style global.css
En gros ici je fixe les éléments courants de mon "futur" code (x)HTML.
Script avec 135 lignes
001/**********************************
002*
003* DEFAULT
004*
005***/
006 007html, body {
008margin:0;
009padding:0;
010font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
011font-weight:normal;
012font-size:12px;
013letter-spacing:0.5px;
014color:#FFF;
015background-color:transparent;
016background-color:#191919;
017/* background-image: url("img/background.png");
018background-position:top center;
019background-repeat:no-repeat; */
020}
021 022 023table {
024margin:0;
025padding:0;
026font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
027font-weight:normal;
028font-size:12px;
029letter-spacing:0.5px;
030color:#FFF;
031border-spacing:0;
032border-collapse:collapse;
033}
034 035div, p, hr, ul, li, form {
036margin:0;
037padding:0;
038}
039 040/***
041*
042* /DEFAULT
043*
044**********************************/
045 046 047/**********************************
048*
049* ELEMENTS HTML COURANTS
050*
051***/
052 053/* les titres */
054h1, h2, h3, h4, h5, h6 {
055margin:0;
056padding:0;
057/*font-family:'Helvetica Neue', Tahoma, sans-serif;*/
058/*font-family:Tahoma, sans-serif;*/
059font-family:Impact, sans-serif;
060text-transform:uppercase;
061font-weight:normal;
062word-spacing:5px;
063letter-spacing:1px;
064}
065h1 {
066font-size:36px;
067}
068h2 {
069font-size:26px;
070}
071h3 {
072font-size:20px;
073}
074h4 {
075font-size:17px;
076padding-bottom:10px;
077padding-top:5px;
078padding-left:5px;
079padding-right:5px;
080}
081h5 {
082font-size:14px;
083}
084h6 {
085font-size:13px;
086}
087 088/* images */
089img {
090border:none;
091text-decoration:none;
092/* border:1px solid #9c0404; */
093}
094 095/* les liens */
096a {
097text-decoration:none;
098color:#FFF;
099}
100a:visited {
101color:#FFF;
102}
103a:hover {
104color:#9c0404;
105}
106a:target {
107color:#FFF;
108}
109 110 111/* pargraphes */
112p {
113text-align:justify;
114line-height:18px;
115padding-bottom:10px;
116padding-top:5px;
117padding-left:5px;
118padding-right:5px;
119}
120 121/* les barres */
122hr {
123/* clear: both; */
124height:1px;
125border:0;
126background-color:#565656;
127margin-top:15px;
128margin-bottom:20px
129}
130 131/***
132*
133* /ELEMENTS HTML COURANTS
134*
135**********************************/
Ensuite on pourait faire une 2eme feuille v1.css
avec le style des div#blocs
des éléments identifiés.. comme je viens de vous expliquer plus haut :)