•  

    Ce tuto nécessite que le javascript soit activé sur votre compte pour fonctionner.

    Sur Eklablog, il est possible via le menu (Apparence / Modifier le thème / Ajouter du CSS) de compléter la feuille de style. Alors, vous me direz: quel est l'intérêt d'ajouter une feuille de style ?

    Eh bien, il y a plusieurs raisons à cela:

    1. Pouvoir créer tranquillement sa feuille de style sur son PC puis la charger sur son blog
    2. Créer différentes feuilles de style qui seront chargées au choix de son visiteur
    3. Pouvoir utiliser des propriétés ou sélecteurs CSS qui ne sont pas acceptés par l'éditeur d'Eklablog (TinyMCE)

    Remarque: En cas d'utilisation de propriétés ou sélecteurs non reconnus par TinyMCE et une fois votre feuille de style CSS uploadée sur votre blog, il ne faut évidemment pas l'ouvrir avec l'éditeur d'Eklablog. Sinon, vous perdrez vos précieuses propriétés et vous serez obligés d'uploader à nouveau votre fichier.

    Dans la procédure qui suit, on va juste ajouter une feuille de style à celle déjà présente sur votre blog. Ainsi, il n'est nécessaire d'y placer que le code CSS supplémentaire. Le code de la page d'accueil de votre blog commence comme ci-dessous et ce qui nous intéresse est à la ligne 18 (surlignée):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Ajouter une feuille de style - Tout le CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="identifier-url" content="http://toutlecss.ek.la" />
    <meta name="robots" content="index, follow" />
    
    <meta property="og:title" content="Ajouter une feuille de style"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="http://toutlecss.ek.la/ajouter-une-feuille-de-style-a91836413"/>
    <meta property="og:site_name" content="Tout le CSS"/>
    <meta property="og:description" content="Sur Eklablog, il est possible via le menu (Apparence / Modifier le thème / Ajouter du CSS) de compléter la feuille de style. Alors, vous me direz: quel est l'intérêt d'ajouter une feuille de..."/><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://toutlecss.ek.la/xmlrpc.php?rsd" />
    
    
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="/themes/style.css?21953" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" id="css_theme" href="http://ekladata.com/theme-283317-171.css" />
    <link rel="alternate" type="application/rss+xml" href="/rss/" title="Flux RSS des Articles" /><link rel="alternate" type="application/rss+xml" href="/rss/comments/" title="Flux RSS des Commentaires des articles" /><link id="favicon" rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><!--[if IE]>
    <style type="text/css">
    * {zoom: 1;}
    </style>
    <![endif]-->

    En effet, c'est cette ligne qui charge le CSS de votre blog. Comme je le disais plus haut, on ne va pas toucher à cette ligne mais en ajouter une supplémentaire. Supposons que nous souhaitions utiliser le code CSS suivant:

    .moncube
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    }
    
    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }
    
    @-webkit-keyframes mymove /* Safari and Chrome */
    {
    from {top:0px;}
    to {top:200px;}
    }

    Faites l'essai sur votre blog et vous verrez que l'éditeur vous indique que le CSS comporte une erreur. Et pourtant, ce CSS est parfaitement valide mais l'éditeur ne sait pas l'interprêter. Ce CSS aura pour effet le suivant :

     

    Pour obtenir cela, vous allez créer un fichier (par exemple avec Notepad ++) que vous nommerez styleperso.css et dans lequel vous placerez le code css ci-dessus (ou un autre si vous le désirez). Uploadez ensuite ce fichier parmi les fichiers de votre blog et récupérez son url.

    Enfin, vous allez placer le code javascript ci-dessous dans un module simple HTML en veillant à y mettre l'url de votre fichier de style (ligne 10). Je rappelle que vous devez éviter d'ouvrir ce fichier avec l'éditeur d'Eklablog sauf s'il ne contient que du css basique.

    <script type="text/javascript">// <![CDATA[
    	if(typeof(onJSFilesLoaded) != "object") onJSFilesLoaded = [];   
    	onJSFilesLoaded.push(function(){   
    		var st=$('css_theme');
    		var myCSS  = new Element('link', {
    		id:  'complement_css',
    		rel: 'stylesheet',
    		type: 'text/css',
    		media: 'screen',
    		href:'lien vers votre fichier de style'});
    		myCSS.inject(st, 'after');});
    // ]]></script>
    

    3 commentaires
  • Propriétés d'animation

    PropriétéDescriptionCSS
    @keyframes Specifie l'animation 3
    animation Une propriété qui est un condensé de toutes les propriétés d'animation ci-dessous, à l'exception de la propriété animation-play-state 3
    animation-name Specifie un nom pour l'animation @keyframes 3
    animation-duration Specifie la durée d'un cycle de l'animation en secondes ou millisecondes 3
    animation-timing-function Specifie la courbe de vitesse de l'animation 3
    animation-delay Specifie le délai avant le début de l'animation 3
    animation-iteration-count Specifie le nombre de fois ou l'animation est exécutée 3
    animation-direction Specifie si l'animation est exécutée dans les deux sens ou pas 3
    animation-play-state Specifie si l'animation est active ou en pause 3

    Propriétés du fond

    PropriétéDescriptionCSS
    background Fixe toutes les propriétés du fond en une seule déclaration 1
    background-attachment Spécifie si l'image de fond est fixe ou défile avec le reste de la page 1
    background-color Fixe la couleur de fond d'un élément 1
    background-image Définit l'image de fond d'un élément 1
    background-position Fixe la position de départ d'une image de fond 1
    background-repeat Spécifie si l'image de fond doit être répétée 1
    background-clip Définit la zone de remplissage du fond 3
    background-origin Définit la zone de positionnement des images de fond 3
    background-size Fixe la taille des images de fond 3

    Propriétés des bordures et des lignes extérieures

    PropertyDescriptionCSS
    border Fixe toutes les propriétés de la bordure en une déclaration 1
    border-bottom Fixe toutes les propriétés de la bordure inférieure en une déclaration 1
    border-bottom-color Fixe la couleur de la bordure inférieure
    border-bottom-style Fixe le style de la bordure inférieure 1
    border-bottom-width Fixe la largeur de la bordure inférieure 1
    border-color Fixe la couleur des quatre bordures 1
    border-left Fixe toutes les propriétés de la bordure de gauche en une déclaration 1
    border-left-color Fixe la couleur de la bordure gauche 1
    border-left-style Fixe le style de la bordure gauche 1
    border-left-width Fixe la largeur de la bordure gauche 1
    border-right Fixe toutes les propriétés de la bordure de droite en une déclaration 1
    border-right-color Fixe la couleur de la bordure droite 1
    border-right-style Fixe le style de la bordure droite 1
    border-right-width Fixe la largeur de la bordure droite 1
    border-style Fixe le style des quatre bordures 1
    border-top Fixe toutes les propriétés de la bordure supérieure en une déclaration 1
    border-top-color Fixe la couleur de la bordure supérieure 1
    border-top-style Fixe le style de la bordure supérieure 1
    border-top-width Fixe la largeur de la bordure supérieure 1
    border-width Fixe la largeur des quatre bordures 1
    outline Fixe toutes les propriétés de la ligne extérieure en une déclaration 2
    outline-color Fixe la couleur de la ligne extérieure 2
    outline-style Fixe le style de la ligne extérieure 2
    outline-width Fixe la largeur de la ligne extérieure 2
    border-bottom-left-radius Definit le rayon du coin inférieur gauche de la bordure 3
    border-bottom-right-radius Definit le rayon du coin inférieur droit de la bordure 3
    border-image Fixe les propriétés en une déclaration de border-image-* 3
    border-image-outset Specifie la valeur correspondant au débord au dela de la border box 3
    border-image-repeat Specifie le type de répétition de l'image de bordure 3
    border-image-slice Pas encore pris en compte par les navigateurs 3
    border-image-source Définit l'image utilisée pour la bordure 3
    border-image-width Spécifie la largeur des bordures image 3
    border-radius Fixe le rayon de la bordure pour les quatre coins 3
    border-top-left-radius Fixe le rayon du coin supérieur gauche de la bordure 3
    border-top-right-radius Fixe le rayon du coin supérieur droit de la bordure 3
    box-decoration-break   3
    box-shadow Définit les ombres de la boite 3

    Propriétés des boites

    PropriétéDescriptionCSS
    overflow-x Spécifie si le contenu doit être affiché en cas de dépassement sur la gauche ou sur la droite 3
    overflow-y Spécifie si le contenu doit être affiché en cas de dépassement en haut ou en bas de la boite 3
    overflow-style Spécifie la méthode de défilement 3
    rotation Effectue une rotation de l'élément autour d'un point défini par la propriété rotation-point 3
    rotation-point Définit les coordonnées d'un point par rapport au coin supérieur gauche de la boite 3

    Couleurs

    PropriétéDescriptionCSS
    color-profile Permet de spécifier une source de couleur différente de celle par défaut 3
    opacity Fixe le niveau d'opacité d'un élément 3
    rendering-intent Permet de spécifier un redu de couleur différent de celui par défaut 3

    Propriétés de dimensions

    PropriétéDescriptionCSS
    height Fixe la hauteur d'un element 1
    max-height Fixe la hauteur maximale d'un element 2
    max-width Fixe la largeur maximale d'un element 2
    min-height Fixe la hauteur minimale d'un element 2
    min-width Fixe la largeur minimale d'un element 2
    width Fixe la largeur d'un element 1

    Propriétés des "Flexbox"

    PropriétéDescriptionCSS
    box-align Définit la méthode d'alignement des éléments enfants d'une boite 3
    box-direction Définit la direction pour l'affichage des enfants d'une boite 3
    box-flex Indique si les enfants d'une boite ont une taille variable ou pas 3
    box-flex-group Assigne des éléments flexible au groupe flex 3
    box-lines Specifie si les colonnes s'affichent sur une nouvelle ligne dans le cas ou elles dépassent de la boite parent 3
    box-ordinal-group Specifie l'ordre d'affichage des éléments enfant d'une boite 3
    box-orient Specifie si les enfants doivent être disposés horizontalement ou verticalement 3
    box-pack Specifie la position horizontale dans les boites horizontales et la position verticale dans les boites verticales 3

    Polices

    PropriétéDescriptionCSS
    font Fixe toutes les propriétés de la police en une déclaration 1
    font-family Définit la police 1
    font-size Fixe la taille du texte 1
    font-style Définit le style 1
    font-variant Specifie si le texte doit être affiché en minuscules ou non 1
    font-weight Définit l'épaisseur de la police 1
    @font-face Une règle permettant au site de télécharger et d'utiliser d'autres polices que les polices dites "web-safe" 3
    font-size-adjust Permet de maintenir la lisibilité 3
    font-stretch   3

    Propriétés de contenu généré

    PropriétéDescriptionCSS
    content Utilisé avec les pseudo-éléments :before et :after pour insérer du contenu généré 2
    counter-increment Incrémente un compteur ou plus 2
    counter-reset Crée ou réinitialise un ou plusieurs compteurs 2
    quotes Fixe le type de symbole pour les citations 2
    crop   3
    move-to   3
    page-policy   3

    Propriétés des grilles

    PropriétéDescriptionCSS
    grid-columns Specifie la largeur de chaque colonne d'une grille 3
    grid-rows Specifie la hauteur de chaque ligne d'une grille 3

    Propriétés des hyperliens

    PropriétéDescriptionCSS
    target Permet de définir les propriétés target-name, target-new, et target-position 3
    target-name Définit la façon d'ouvrir les liens 3
    target-new Specifie si les liens new destination doivent s'ouvrir dans une nouvelle fenêtre ou un nouvel onglet 3
    target-position Specifies la position des nouveaux liens 3

    Propriétés des listes

    PropriétéDescriptionCSS
    list-style Fixe toutes les propriétés des listes en une déclaration 1
    list-style-image Définit l'image servant aux listes à puces 1
    list-style-position Indique si les puces sont situées en dehors ou pas 1
    list-style-type Specifie le type de puces 1

    Margin Properties

    PropriétéDescriptionCSS
    margin Fixe toutes les marges en une déclaration 1
    margin-bottom Fixe la marge inférieure d'un élément 1
    margin-left Fixe la marge gauche d'un élément 1
    margin-right Fixe la marge droite d'un élément 1
    margin-top Fixe la marge supérieure d'un élément 1

    Balise Marquee

    PropriétéDescriptionCSS
    marquee-direction Fixe la direction du déplacement 3
    marquee-play-count Fixe le nombre de mouvements 3
    marquee-speed Fixe la vitesse de défilement 3
    marquee-style Fixe le style du défilement 3

    Propriétés Multi-colonnes

    PropriétéDescriptionCSS
    column-count Spécifie en combien de colonnes l'élément doit être divisé 3
    column-fill Specifie la méthode de remplissage des colonnes 3
    column-gap Specifie l'écart entre les colonnes 3
    column-rule Fixe toutes les propriétés de column-rule-* 3
    column-rule-color Fixe la couleur de la règle entre les colonnes 3
    column-rule-style Fixe le style de la règle entre les colonnes 3
    column-rule-width Fixe la largeur de la règle entre les colonnes 3
    column-span Specifie sur combien de colonnes l'élément s'étend 3
    column-width Fixe la largeur des colonnes 3
    columns Propriété pour définir column-width et column-count 3

    Le Padding

    PropriétéDescriptionCSS
    padding Fixe toutes les propriétés du padding en une declaration 1
    padding-bottom Définit le padding inférieur d'un élément 1
    padding-left Définit le padding gauche d'un élément 1
    padding-right Définit le padding droit d'un élément 1
    padding-top Définit le padding supérieur d'un élément 1

    Positionnement

    PropriétéDescriptionCSS
    bottom Fixe la position du bas d'un élément 2
    clear Specifie les cotés d'un élément ou les autres éléments flottants sont interdits 1
    clip Attache un élément positionné en absolute 2
    cursor Specifie le type de curseur à afficher 2
    display Specifie la façon dont certains éléments html doivent être affichés 1
    float Specifie si une boite est flottante ou pas 1
    left Specifie la postion gauche d'un élément 2
    overflow Specifie la façon de traiter la partie qui déborde d'un élément 2
    position Specifie le typ de positionnement d'un élément (static,relative, absolute ou fixed) 2
    right Specifie la postion droite d'un élément 2
    top Specifie la postion haute d'un élément 2
    visibility Specifie si un élément est visible ou non 2
    z-index Spécifie le niveau d'affichage d'un élément 2

    Impression

    PropriétéDescriptionCSS
    orphans Fixe le nombre minimum de lignes qui doivent être laissées au bas d'une page quand la coupure se produit dans un élément 2
    page-break-after Fixe le comportement de la coupure de page après un élément 2
    page-break-before Fixe le comportement de la coupure de page avant un élément 2
    page-break-inside Fixe le comportement de la coupure de page dans un élément 2
    widows Fixe le nombre minimum de lignes qui doivent être laissées en haut d'une page quand la coupure se produit dans un élément 2

    Propriétés des tables

    PropriétéDescriptionCSS
    border-collapse Définit si les bordures de tables apparaîssent ou non 2
    border-spacing Fixe la distance entre les bordures des cellules adjacentes 2
    caption-side Spécifie la position de la légende d'une table 2
    empty-cells Indique si les bordures et fond sont affichés sur les cellules vides d'une table 2
    table-layout Permet d'adapter les largeurs de cellules au contenu 2

    Propriétés Texte

    PropriétéDescriptionCSS
    color Fixe la couleur du texte 1
    direction Fixe la direction d'écriture du texte 2
    letter-spacing Définit l'espacement entre les caractères 1
    line-height Fixe la hauteur de ligne 1
    text-align Définit l'alignement horizontal d'un texte 1
    text-decoration Définit la 'décoration' du texte (barré, surligné, sousligné etc.) 1
    text-indent Spécifie l'indentation de la première ligne dans un bloc texte 1
    text-transform Controle l'affichage en minuscules ou majuscules 1
    unicode-bidi   2
    vertical-align Fixe l'alignement vertical d'un élément 1
    white-space Comportement d'affichage avec les espaces vides 1
    word-spacing Définit l'espacement entre les mots 1
    hanging-punctuation Pas encore supporté 3
    punctuation-trim Pas encore supporté 3
    text-align-last Pas encore supporté 3
    text-justify Specifie la méthode de justification 3
    text-outline Pas encore supporté 3
    text-overflow Spécifie le comportement en cas de dépassement du conteneur 3
    text-shadow Ajoute une ombre au texte 3
    text-wrap Pas encore supporté 3
    word-break Définit la méthode pour la coupure des mots 3
    word-wrap Permet aux mots trop longs d'être coupés 3

    Transformations 2D/3D

    PropriétéDescriptionCSS
    transform Applies a 2D or 3D transformation to an element 3
    transform-origin Allows you to change the position on transformed elements 3
    transform-style Specifies how nested elements are rendered in 3D space 3
    perspective Specifies the perspective on how 3D elements are viewed 3
    perspective-origin Specifies the bottom position of 3D elements 3
    backface-visibility Defines whether or not an element should be visible when not facing the screen 3

    Transition Properties

    PropertyDescriptionCSS
    transition A shorthand property for setting the four transition properties 3
    transition-property Specifies the name of the CSS property the transition effect is for 3
    transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
    transition-timing-function Specifies the speed curve of the transition effect 3
    transition-delay Specifies when the transition effect will start 3

    User-interface Properties

    PropertyDescriptionCSS
    appearance Allows you to make an element look like a standard user interface element 3
    box-sizing Allows you to define certain elements to fit an area in a certain way 3
    icon Provides the author the ability to style an element with an iconic equivalent 3
    nav-down Specifies where to navigate when using the arrow-down navigation key 3
    nav-index Specifies the tabbing order for an element 3
    nav-left Specifies where to navigate when using the arrow-left navigation key 3
    nav-right Specifies where to navigate when using the arrow-right navigation key 3
    nav-up Specifies where to navigate when using the arrow-up navigation key 3
    outline-offset Offsets an outline, and draws it beyond the border edge 3
    resize Specifies whether or not an element is resizable by the user 3

    4 commentaires
  • SelecteurExempleExplicationCSS
    .classe .exemple Selectionne tous les éléments avec class="exemple" 1
    #id #prenom Selectionne l'élément avec id="prenom" 1
    * * Selectionne tous les éléments 2
    element h1 Selectionne tous les éléments <h1> 1
    element,element div,p Selectionne toutes les balises <div> et toutes les balises <p> 1
    element element div p Selectionne toutes les balises <p> contenues dans les balises <div> 1
    element>element div>p Selectionne toutes les balises <p> dont le parent est une balise <div> 2
    element+element div+p Selectionne les balises <p> placées immédiatement après une balise <div> 2
    [attribut] [target] Selectionne tous les éléments qui ont un attribut target 2
    [attribut=valeur] [target=_blank] Selectionne tous les éléments dont l'attribut target="_blank" 2
    [attribut~=valeur] [title~=fleur] Selectionne tous les éléments dont l'attribut title contient le mot "fleur" 2
    [attribut|=valeur] [lang|=fr] Selectionne tous les éléments dont l'attribut lang commence par "fr" 2
    :link a:link Selectionne tous les liens non visités 1
    :visited a:visited Selectionne tous les liens visités 1
    :active a:active Selectionne le lien actif 1
    :hover a:hover Selectionne les liens survolés par la souris 1
    :focus input:focus Selectionne l'élément input qui a le focus 2
    :first-letter p:first-letter Selectionne la première lettre de chaque balise <p>_ 1
    :first-line p:first-line Selectionne la première ligne de chaque élément <p> 1
    :first-child p:first-child Selectionne chaque élément <p> qui est le premier enfant de son parent 2
    :before p:before Insère du contenu avant chaque élément <p> 2
    :after p:after Insère du contenu après chaque élément <p> 2
    :lang(langage) p:lang(it) Sélectionne chaque élément <p> avec la valeur de l'attribut lang commençant par "it" 2
    element1~element2 p~ul Sélectionne chaque élément <ul> qui est précédé d'un élément <p> 3
    [attribut^=valeur] a[src^="https"] Sélectionne chaque élément <a> dont la valeur de l'attribut source commence par "https" 3
    [attribut$=valeur] a[src$=".pdf"] Sélectionne chaque élément <a> dont la valeur de l'attribut src finit par ".pdf" 3
    [attribut*=valeur] a[src*="eklablog"] Sélectionne chaque élément <a> dont la valeur de l'attribut src contient la chaine "eklablog" 3
    :first-of-type p:first-of-type Sélectionne chaque élément <p> qui est le premier élément <p> de son parent 3
    :last-of-type p:last-of-type Sélectionne chaque élément <p> equi est le dernier élément <p> de son parent 3
    :only-of-type p:only-of-type Sélectionne chaque élément <p> qui est le seul élément <p> de son parent 3
    :only-child p:only-child Sélectionne chaque élément <p> qui est le seul enfant de son parent 3
    :nth-child(n) p:nth-child(2) Sélectionne chaque élément <p> qui est le secont enfant de son parent 3
    :nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le secont enfant de son parent en partant du dernier 3
    :nth-of-type(n) p:nth-of-type(2) Sélectionne chaque élément <p> qui est le second élément <p> de son parent 3
    :nth-last-of-type(n) p:nth-last-of-type(2) Sélectionne chaque élément <p> qui est le second élément <p> de son parent, en comptant depuis le dernier 3
    :last-child p:last-child Sélectionne chaque élément <p> qui est le dernier enfant de son parent 3
    :root :root Sélectionne l'élément racine du document 3
    :empty p:empty Sélectionne chaque élément <p> qui n'a pas d'enfant.(Y compris les noeuds texte) 3
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
    :enabled input:enabled Sélectionne chaque élément <input> actif 3
    :disabled input:disabled Sélectionne chaque élément <input> désactivé 3
    :checked input:checked Sélectionne chaque élément <input> coché 3
    :not(selecteur) :not(p) Sélectionne tous les éléments qui ne sont pas des <p> 3
    ::selection ::selection Sélectionne l'élément surligné 3

    2 commentaires
  • Bienvenue sur ce nouveau blog qui sera consacré essentiellement au CSS.

    Hormis l'apprentissage des sélecteurs et de la façon d'appliquer le style voulu à votre blog, vous découvrirez aussi certaines techniques pour contourner les limitations de l'éditeur utilisé sur nos blogs (TinyMCE).


    3 commentaires



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires