Learning Design
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
Accueil  Dernières imagesDernières images  Rechercher  S'enregistrerS'enregistrer  Connexion  
Le deal à ne pas rater :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
Voir le deal

 

 [Cours / Code] Faire une feuille de style en CSS

Aller en bas 
AuteurMessage
mYn
Modératrice
mYn


Féminin
Nombre de messages : 4409
Age : 31
Localisation : 93 [Seine St-Denis]
Logiciels : Photoshop

[Cours / Code] Faire une feuille de style en CSS Empty
MessageSujet: [Cours / Code] Faire une feuille de style en CSS   [Cours / Code] Faire une feuille de style en CSS EmptyMer 18 Juin - 21:39

1/ Intro.
Le CSS est très pratique pour la mise en forme du texte, des images, des titres, des liens tableaux, formulaires... surtout pour les sites ayant un bon nombre de pages.
Le but est de créer une feuille de style CSS qui sera apliquée sur toutes les pages du site à l'aide de balises HTML.

2/ Le commencement
Pour commencer, ouvrez votre bloc-note ou Notepad++ et enregistrer votre fichier dans le dossier de votre site sous ce nom : "style.css"
Puis copiez/collez ce code entre les balises <head> dans toutes les pages de votre site.
Code:
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">

3/ La base
Copiez/collez ce code :
Code:
body{
color:#000000;
font-size:10pt;
font-family:arial;
line-height: 15px;
margin-top: 10px;
}

select
{background:#D9D5D2; font-family:arial narrow; color:#464646; font-size:10pt}

textarea, input{
font-family:arial narrow;
font-size:10pt;
color:#464646;
background:#DFDAC7;
border-style:1px solid;
border-color:#000000;
}

Explications :
color:#000000; Arrow Couleur du texte
font-size:10pt; Arrow Taille du texte
font-family:arial; Arrow Nom de la police d'écriture
line-height: 15px; Arrow Hauteur des lignes (en pixels)
margin-top: 10px; Arrow Marge à partir du haut de la page
background-color:#FFFFFF; Arrow Couleur du fond de page.
background-image: url(http://URL_DE_VOTRE_IMAGE.jpg); Arrow Si vous souhaitez mettre une image en fond plutôt qu'une couleur (remplacez l'URL entre parenthèses).



4/ Modification de la scrollbar (Barre pour monter et descendre dans la page située à droite de l'écran)

Code:
Code:
body {
background-color:transparent;
background-attachment : fixed;
scrollbar-face-color:#D9D5D2;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#D9D5D2;
scrollbar-shadow-color:#000000;
scrollbar-darkshadow-color:#D9D5D2;
scrollbar-highlight-color:#D9D5D2;
scrollbar-3dlight-color:#D9D5D2;

Voici un schéma trouvé [url=\"http://www.le-webmaster.com\"]ici[/url] pour vous aider à remplir ce code à votre guise :
[Cours / Code] Faire une feuille de style en CSS Scrollbar


5/ Mise en forme des liens.

Code:
Code:

a:link {
   color: #C29D42;
   text-decoration: none;
   
}
a:visited {
   color: #C29D42;
   text-decoration: none;
}
a:hover {
   color: #DDB470;
   border-bottom: #000000 1px dotted;

}
a:active {
   color: #C29D42;
   text-decoration: none;
}

a:link Arrow Lien normal
a:visited Arrow Lien visité
a:hover Arrow Quand on passe la souris sur le lien
a:active Arrow Lien quand on clique dessus

Il vous reste à changer les couleurs et à ajouter des effets.

Exemples d'effets :

Surlignement :

background-color:#777777;

Soulignement :
border-bottom: #000000 1px;

Texte barré :
text-decoration:line-through;

Encadrement :
border:#000000 1px;






Je complèterai ce cours plus tard.
Revenir en haut Aller en bas
http://kpweb.c.la/
 
[Cours / Code] Faire une feuille de style en CSS
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Code] Div (Faire une zone de texte sur un layout)
» [Code + Cours] Image MAP
» [COURS] Comment puis-je faire un tableau ?
» CSS ou "Cascading Style Sheets"
» [Code] Iframe

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: Les tutoriaux :: Le CSS-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser