• Css veut dire "Cascading Style Sheets" soit "feuilles de style en cascade".Il permet la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Cette séparation permet de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document.

     

     

    La structure d'un code CSS se présente comme ceci : 

    sélecteur {propriété: valeur;}

    Le sélecteur c'est la balise HTML (body, h1, p), la classe (class), l'identifiant (id).  Il désigne à quel composant le code va être appliquer ou plutôt l'effet. Par exemple le fond des menus.

    La propriété c'est l'attribut qu'on veut appliquer.  En gros se sont les effets. Par exemple l'ombre sur le bord des menus.

    La valeur précise les caractéristiques de la propriété. Par exemple pour la couleur du fond d'un menu, la valeur sera le nom de la couleur que vous voulez appliquer. 

    Exemple de code pour la couleur de la menu barre : 

    Le sélecteur sera menubar.

    La propriété sera color.

    La valeur sera par exemple red.

    Ah oui j'ai oublié de préciser que vous devez tout notez en anglais. 

    Après le sélecteur, toujours mettre ces symboles { & } et vous mettrez la propriété et la valeur entre celle-ci. Les propriétés doivent être séparées par une ,.

    Quelques sélecteurs pour Eklablog : 

    Article  : .module_contenu 

    Article titre : .module_titre 

    Article bas : #module_bottom

    Barre d'outil  : #menubar 

    Commentaire : .comment_normal 

    Commentaire auteur : .comment_admin 

    Commentaire avatar : .commentavatar 

    Dernier Visiteur : .module_menu_type_lastvisitors 

    Fond de fenêtre : #body 

    Fenêtre d'information  : .window 

    Fond de page : #background 

    Header : #header 

    Menu contenu : module_menu_contenu_block 

    Menu gauche : #menu1 

    Menu droit : #menu2 

    Menu titre : .module_menu_titre 

    Menu de l'en tête : #menu 

    Pied de page : #footer 

    Quelques propriétés : 

    Bord : border

    Couleur : color

    Ecriture : font

    Fond : background

    Hauteur : height

    Ombre : box-shadow 

    Opacité : opacity

    Visibilité : visibility

    Position : position

     

    Partager via Gmail Yahoo!

    4 commentaires
  • avec ce code:

    .module_menu_type_lastvisitors img:hover {-webkit-transform: rotate(Xdeg);
    -moz-transform: rotate(Xdeg);
    -o-transform: rotate(Xdeg);
    transform: rotate(Xdeg);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;}

    Il faut que tu remplace X par un nombre, un nombre positif fera tourner vers la droite et un nombre négatif vers la gauche. Tu peux remplacer le 1 de 1s, par le nombre que tu veux: c'est le temps de transition entre l'état normal et l'état survolé.

    Partager via Gmail Yahoo!

    1 commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique