Cours de css

Cours de css

Cliques sur manga ou graph' pour revenir à l'accueil:
Les bases

Par louna-kilari le 25 Septembre 2011 à 10:09

Voilà à quoi doit ressembler un css:

selecteur { propriete : valeur ;
propriete : valeur;}

Le selecteur est la chose sur laquelle on va faire le changement (Par exemple le texte d'un module...)

Quelques propriétés:

COLOR= la couleur (souvent du texte)

POLICE = la police

VALEUR = en px ou en %

URL = adresse (D'une image ou d'un lien vers une page voir autre)

BACKGROUND= fond

SHADOW = ombre

Je vous donnerait quelques sélecteurs au cours suivants!

 

4 commentaires
Le sélécteur général

Par louna-kilari le 25 Septembre 2011 à 10:17

Pour modifier le texte:

p { propriete : valeur }

Pour modifier les liens:

a { propriete : valeur }

(Changement: hover, link... )

Pour les images:

img { propriete : valeur }

 

2 commentaires
Shadow

Par louna-kilari le 25 Septembre 2011 à 10:24

POUR LE TEXTE:

selecteur { text-shadow : VALEURpx VALEURpx VALEURpx COLOR }

POUR LES BLOCS:

selecteur { box-shadow: VALEURpx VALEURpx VALEURpx COLOR }

Le 1er VALEUR est le décalage horizontale de l'ombre.

Le deuxième VALEUR c'est le décalage verticale de l'ombre.

Le troisième VALEUR est pour modifier l'intensitée de l'ombre!

Color correspond à la couleur ( la couleur doit être en anglais comme purple ou darkviolet).

 

37 commentaires
Curseurs

Par louna-kilari le 25 Septembre 2011 à 10:26

HTML,BODY{cursor: url("URL"), auto;}

URL= l'adresse de votre curseur ( .ani ou .ico )

Il y a aussi des curseurs utilisés par les navigateurs, le code est donc:

HTML,BODY{cursor: NOM , auto;}

 

18 commentaires
Barre de menu

Par louna-kilari le 25 Septembre 2011 à 10:38

Le selecteur de la barre d'outils est:

#menubar

Le code css pour modifier le fond de la barre de menu avec l'url d'une image:

#menubar{background:url(http://data0.shojoblog.com/mangagraph/mod_html216908_1.png?695) ;}

Le code css pour modifier la couleur et la taille du texte
(Mon compte; contenu...) est:

#menubarabsolute{font-size:VALEUR(EN PX) ;color: COULEUR EN ANGLAIS;}

L'image est:

 

20 commentaires
Modifier les sous-menus de la barre d'outils

Par louna-kilari le 25 Septembre 2011 à 10:57

Les codes pour modifier les sous-menus:

Premier: général (mon compte:de information personnelles à Désinscription)avec une image:

.menubar_section li{ background:url(URL DE L'IMAGE) no-repeat; }

Avec une couleur:

.menubar_section li{ background: COULEUR EN ANGLAIS ;}

Le dernier (exemple: mon compte, dernier: déconnexion) avec une image:

.menubar_section li:last-child{ background:url(URL DE L'IMAGE) no-repeat; }

Avec une couleur:

.menubar_section li:last-child{ background: COULEUR EN ANGLAIS; }

Mais tout d'abors, les images !

Sa, c'est l'image tout en bas !

Et sa les autres:

 

10 commentaires
Les couleurs

Par louna-kilari le 25 Septembre 2011 à 11:02

Toutes les couleurs sont >ICI<

http://stylescss.free.fr/couleurs.php

ICI

(les 3 liens vont vers le même site)

 

1 commentaire
Notifications

Par louna-kilari le 11 Octobre 2011 à 19:30

Voiçi l'image des notifications a modifier:

Premier carré blanc:
Notification déjà vues

Carré bleu très clair:
Notification non-lues

Carré bleu très foncé:
Notification survolée

Forme blanche:
Afficher toutes les notifications

Forme bleu foncé:
Afficher toutes les notifications survolé

Code css pour modifier les notifications:

#notifications_panel a,
#notifications_paneldiv{ background:url("URL DE L'IMAGE")no-repeat;}

 

2 commentaires
Sélécteurs en vrac

Par louna-kilari le 28 Octobre 2011 à 23:56

Article titre

.module_titre {propriété: valeur;}

Bas article

#module_bottom {propriété: valeur;}

Commentaire

.comment_normal {propriété: valeur;}

Commentaire auteur

.comment_admin {propriété: valeur;}

Header

#header {propriété: valeur;}

Avatar commentaire:

.commentavatar {propriété: valeur;}

Fond de la fenêtre

#body {propriété: valeur;}

Fond de la page

#background {propriété: valeur;}

Menu de gauche

#menu1 {propriété: valeur;}

Menu de droite

#menu2 {propriété: valeur;}

Menu de l'en tête

#menu {propriété: valeur;}

Pied de page

#footer {propriété: valeur;}

Article (contenu):

.module_contenu {propriété: valeur;}

Bouton et champ de texte
input {propriété: valeur;}

Image

img {propriété: valeur;}

Lien

a {propriété: valeur;}
Texte

p {propriété: valeur;}

[Image non-chargées]

[Connexion interompue]

 

votre commentaire
Comment modifier le fond de la boite messages

Par louna-kilari le 15 Novembre 2011 à 19:17

Voici ce que nous allons modifier:

Image à modifier (Taille déduite par moi) Pour tous:

Le code css à mettre:

Statut normal:
.window_membres_msg_msgline { background: url("URL DE L'IMAGE") ;}

Statut survolé:
.window_membres_msg_msgline:hover{ background: url("URL DE L'IMAGE") ;}

Statut Nouveau message:
.window_membres_msg_not_read {background: url("URL DE L'IMAGE") ;}

Il faudra que vous remplaciez URL DE L'IMAGE avec l'url de votre image !

NE PAS COPIER NI PRENDRE !

TUTORIEL BY louna-kilari !

©louna-kilari
Manga Graph'

 

11 commentaires

Toutes les couleurs sont >ICI<