Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:26
#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





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:27
#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





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:28
#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





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:29
#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





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:30
#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





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:31
#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





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 27 Jan 2011 - 16:32
#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





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus