Comment faire du CSS (Cascading Style Sheets)...
 Charge moyenne sur 1mn : 1.18 Charge moyenne sur 5mn : 2.02 Charge moyenne sur 15mn : 2.06




Créer une feuille de style

Type: text/css

Informations

Dates
  • Publication : 2010
  • Modification : Samedi 24 août 2013

Partager

Traduire la page

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.

001 
002 body {
003         color:white;
004         background-color:gray;   
005 }

Ici on fixe à la balise a (les liens), la couleur rouge et le soulignement.

001 
002 a {
003         color:red;
004         text-decoration: underline;        
005 }
006 a:hover {
007         color:red;
008         text-decoration:none;        
009 }

Ici on déclare une classe CSS important, la couleur rouge et une épaisseur de trait grasse.

001 
002 .important {
003         color:red;
004         font-weight:bold;        
005 }

On appelle cette classe depuis une page XHTML comme ceci

001 
002 <span class="important ">mon texte est important</span>

Ici on déclare un IDentifiant CSS header, avec une taille de textes de 14px.

001 
002 #header {
003         font-size:14px;    
004 }

On appelle cet ID depuis une page XHTML comme ceci

001 
002 <div id="header">
003         <p>Mon Header</p>
004 </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.

001 
002 /**********************************
003 *
004 *    DEFAULT
005 *
006 ***/
007 
008 html, body {
009     margin:0;
010     padding:0;
011     font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
012     font-weight:normal;
013     font-size:12px;
014     letter-spacing:0.5px;
015     color:#FFF;
016     background-color:transparent;
017     background-color:#191919;
018 /*    background-image: url("img/background.png");  
019     background-position:top center;
020     background-repeat:no-repeat;   */
021 }
022 
023 
024 table {
025     margin:0;
026     padding:0;
027     font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
028     font-weight:normal;
029     font-size:12px;
030     letter-spacing:0.5px;
031     color:#FFF;
032     border-spacing:0;
033     border-collapse:collapse;
034 }
035 
036 div, p, hr, ul, li, form {
037     margin:0;
038     padding:0;
039 }
040 
041 /***
042 *
043 *    /DEFAULT
044 *
045 **********************************/
046 
047 
048 /**********************************
049 *
050 *    ELEMENTS HTML COURANTS
051 *
052 ***/
053 
054 /* les titres */
055 h1, h2, h3, h4, h5, h6 {
056     margin:0;
057     padding:0;
058     /*font-family:'Helvetica Neue', Tahoma, sans-serif;*/
059     /*font-family:Tahoma, sans-serif;*/
060     font-family:Impact, sans-serif;
061     text-transform:uppercase;
062     font-weight:normal;
063     word-spacing:5px;
064     letter-spacing:1px;
065 }
066 h1 {
067     font-size:36px;
068 }
069 h2 {
070     font-size:26px;
071 }
072 h3 {
073     font-size:20px;
074 }
075 h4 {
076     font-size:17px;
077     padding-bottom:10px;
078         padding-top:5px;
079         padding-left:5px;
080         padding-right:5px;
081 }
082 h5 {
083     font-size:14px;
084 }
085 h6 {
086     font-size:13px;
087 }
088 
089 /* images */
090 img {
091     border:none;
092     text-decoration:none;
093 /*    border:1px solid #9c0404;  */
094 }
095 
096 /* les liens */
097 a {
098     text-decoration:none;
099     color:#FFF;
100 }
101 a:visited {
102     color:#FFF;
103 }
104 a:hover {
105     color:#9c0404;
106 }
107 a:target {
108     color:#FFF;
109 }
110 
111 
112 /* pargraphes */
113 p {
114     text-align:justify;
115     line-height:18px;
116         padding-bottom:10px;
117         padding-top:5px;
118         padding-left:5px;
119         padding-right:5px;
120 }
121 
122 /* les barres */
123 hr {
124 /*    clear: both;      */
125     height:1px;
126     border:0;
127     background-color:#565656;
128     margin-top:15px;
129     margin-bottom:20px
130 }
131 
132 /***
133 *
134 *    /ELEMENTS HTML COURANTS
135 *
136 **********************************/

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 :)


LAB3W.ORJ Alias de O.Romain JAILLET-RAMEY (NOTIF LVL 7 - 42 ans) LAB3W.ORJ
CONTACT
- Web - STEAM - Monster - LinkedIn - Viadeo - DailyMotion - FACEBOOK - GOOGLE+ - Twitter
DROITS SITES : ZW3B.Admin
INSCRIPTION : Le samedi 06 janvier 1 (2001/01/06 15:31)
CONNEXION : il y a 8 heures (2019/09/19 10:22)
DERNIERE VISITE : il y a 5 heures (2019/09/19 13:40)

les réactions des ZW3B.Nautes (0 note)

Ajouter un commentaire

Avatar par default
Pseudo :
Email :
 
Ajouter la chaine de caractères (le code) ci-dessous dans le champ du dessous.
Captcha
Code :





Valid XHTML 1.0 Strict CSS Valide !

ipv6 ready