Stucture d'une feuille de style par défaut

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Commençons à comprendre le fonctionnement:
Votre feuille de style sera placée entre
les balises:
Code:
 < head > et </head>
Le squelette défini:
Code:


<head>


<style type="text/css">

</style>
</head>




"Body" le contenu de votre page web ou d'un forum.
Code:
Le body est encadré par les balises  et .
"Table"Les tableaux de votre page web ou forum.
Code:
Le tableau est encadré par les balises et <table> </table>.
"tr"Les lignes des tableaux.
Code:
Les lignes sont encadrés par les balises <tr>  et </tr>.

"th"Les cellules d'en tête
Code:
 Les cellules  sont encadrées des balises <th> et </th>

"td" Les cellules de valeur
Code:
 Les cellules  sont encadrées des balises <td> et </td>

En conclusion votre feuille de style sera composée de cette façon:
Code:
.body
{
votre contenu
}
Code:
.table
{
votre contenu
}
Code:
.tr
{
votre contenu
}
Code:
.th
{
votre contenu
}
Code:
.td
{
votre contenu
}

Le squelette terminé:
Code:


.body
{
votre contenu
}
.table
{
votre contenu
}
.tr
{
votre contenu
}
.th
{
votre contenu
}
.td
{
votre contenu
}




Dernière édition par Milouze14 le Dim 4 Déc 2011 - 8:41, édité 7 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Instruction

Icône par defaut le Jeu 27 Jan 2011 - 16:27
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Apportons des effets à notre page.
Toutes les balises peuvent être complétées par:
Couleur de fond ou image.
Couleur de la police.
Couleur de lien.
Bordures et leurs effets


Dernière édition par Milouze14 le Ven 4 Mar 2011 - 9:50, édité 6 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



L'apparence de la page

Icône par defaut le Jeu 27 Jan 2011 - 16:28
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Exemple
Si on veut mettre une couleur dans notre "body"
il faudra procéder de cette façon:


Code:
.body
{
background-color;# votre couleur;
}
Si on veut mettre une image dans notre "body"
il faudra procéder de cette façon:

Code:
.body
{
background-image: url("LIEN IMAGE");
background-repeat:  repeat-x;
}
repeat l'arrière plan ou fond se répète, valeur par défaut.
repeat-x l'arrière plan ou fond se répète horizontalement.
repeat-y l'arrière plan ou fond se répète verticalement.
no-repeat l'arrière plan ou fond ne se répète pas.


Dernière édition par Milouze14 le Ven 4 Mar 2011 - 9:50, édité 2 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



La couleur de police

Icône par defaut le Jeu 27 Jan 2011 - 16:29
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Exemple
Si on veut changer la couleur de police dans notre "body"
il faudra procéder de cette façon:

Code:
.body
{
color:# votre couleur ;
}


Dernière édition par Milouze14 le Ven 4 Mar 2011 - 9:51, édité 2 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



L'apparence des liens

Icône par defaut le Jeu 27 Jan 2011 - 16:30
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Exemple
Si on veut personnaliser les liens de notre page web
il faudra procéder de cette façon:


Code:
.a:link {

    color: #Votre couleur;
}
.a:visited {
   
    color: #Votre couleur;
}
.a:hover {
   
    color: #Votre couleur;
}
.a:active {
   
    color: #Votre couleur;
}


Lien normal

Code:
.a:link: 
Lien déjà visité
Code:
.a:visited:
Changement de couleur au survol de la souris
Code:
.a:hover:
lien sélectionné par clic
Code:
.a:active:


Dernière édition par Milouze14 le Ven 4 Mar 2011 - 9:52, édité 2 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Les bordures et leurs effets

Icône par defaut le Jeu 27 Jan 2011 - 16:31
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Les bordures et leurs effets

Bordure invisible
Code:
border:0px;
Bordure avec une épaisseur d'un PX
Code:
border:1px;
On peut aussi attribuer une couleur sur chaque côté avec une épaisseur
respective.
Code:
border-left: solid 1px #votre couleur;
border-right: solid 1px #votre couleur;
border-top: solid 1px #votre couleur;
border-bottom: solid 1px #votre couleur;
Explications:
border-left correspondant à la bordure à gauche
border-right correspondant à la bordure à droite
border-top correspondant à la bordure du haut
border-bottom correspondant à la bordure du bas

Afin d'avoir des effets avec des coins arrondis.
Ne fonctionne pas sous I.E
Procédez de cette façon

Code:

-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
Explications:
moz-border-radius-topleft correspondant à l'arrondi haut gauche
moz-border-radius-topright correspond à l'arrondi haut droit
moz-border-radius-bottomright correspond à l'arrondi bas droit
moz-border-radius-bottomleft correspond à l'arrondi bas gauche


Dernière édition par Milouze14 le Ven 4 Mar 2011 - 9:52, édité 2 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Personnalisons notre page avec un aperçu

Icône par defaut le Jeu 27 Jan 2011 - 16:32
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
#Css{Forum LiensUtiles}

Personnalisons notre page avec un aperçu,

Le fond de page de couleur noire #000000
La police d'écriture de couleur blanche #ffffff
La couleur des liens normaux de couleur orange #ED7F10
la couleur des liens visités de couleur vert bouteille #096A09
la couleur des liens au survol de couleur gris acier #AFAFAF
la couleur des liens au clic de couleur bleu ardoise #686F8C
Votre feuille de style sera donc:
Code:

<style type="text/css">

body {
    background-color: #000;
color:#ffffff;
}


a:link {
    color: #ED7F10;
}
a:visited {
    color: #096A09;
}
a:hover {
    color: #AFAFAF;
}
a:active {
    color: #686F8C;
}
</style>
Squelette de votre page web
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>@milouze14</title>
<style type="text/css">

body {
    background-color: #000;
    color: #FFF;
}
a:link {
    color: #ED7F10;
}
a:visited {
    color: #096A09;
}
a:hover {
    color: #AFAFAF;
}
a:active {
    color: #686F8C;
}

</style>
</head>

<body>
@Milouze14
<a href="http://le-site-milouze14.bbactif.com/">http://le-site-milouze14.bbactif.com/</a>


</body>
</html>


Voir l'aperçu



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum