Tayo
Astuce et Tutorial » Le Web » Internet vrac » Aide rédigée par Zabuza
Description de cet article : Comment trouver rapidement les classes css d'un site?
Lire les commentaires

Copier code Css d'un site





Voilà votre situation :

Vous arrivez sur un site web et vous trouvez une partie superbement bien réalisée, d'un point de vue design, autrement dit, le css vous plaît.

Sans avoir obligatoirement comme idée la volonté de plagier bêtement le contenu, le travail de l'auteur, vous désirez avoir une idée, un apperçu du code css de la page.

Cela n'est pas toujours simple, dépendant des sites web..

 


Sommaire : Ctrl +C du css !


Voir la classe css et son code d'un site


Il existe des milliers de moyens. Le plus classique, mais pas le plus pratique est d'inspecter manuellement le code source de la page html en question, ce qui peut coûter du temps, être fastidieux et au final, pas nécessairement révélateur, pour peu qu'il y ait des @include dans les nombreux fichiers .css d'un site web.



Trouver rapidement le css qui nous importe :

Le code css d'un élément peut être trouvé rapidement à l'aide de firebug. Cette extension, disponible pour Firefox, permet d'aider les développeurs à réaliser ce genre de choses. En voici un apperçu ( cliquez sur l'image pour l'aggrandir ).


Code css inspecter élément


Description de Firebug :


[quote]Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...[/quote]


Installer un module pour Firefox qui aide pour le CSS


Logique, mais vous devez avoir le navigateur web Firefox d'installé. Cela ne fonctionne donc pas avec Internet Explorer, ni avec Google Chrome...

Rendez vous sur la page officielle de Mozilla Firefox pour installer Firebug à cette adresse :

https://addons.mozilla.org/fr/firefox/addon/firebug/


Cliquez sur le bouton vert Ajouter à Firefox. Une fois le téléchargement accompli, il vous sera redemandé de rebooter Firefox. Faites le.


Maintenant, lorsque vous trouvez un élément dont le code css vous intéresse dans une page web, selectionnez le, puis cliquez bouton droit et choisissez Inspecter l'élément.

Vous obtiendrez une console affichant le code html à gauche, puis à droite, le style css correspondant. Dans notre exemple :








specs.css (ligne 248)





specs.css (ligne 243)


th {



    text-alignleft;

Libre à vous maintenant de copier plus simplement ces classes, vous pouvez même les éditer en ligne.



 


 



réduireNews
réduireTutoriel lié
  • Empecher sélection javascript
    Comment empêcher de copier un texte sélectionné
  • Convertir une page Web en PDF
    Du code html vers du PDF
  • Un Auto-Op Simple.
    Voici un auto op pour irc.
  • Modifier texte FCKeditor Ajax
    Un petit truc pratique pour Fckeditor...
  • Dans la même catégorie : Internet vrac

    La première astuce est vraiment bon à savoir !

    Une petite astuce pour s'amuser 30 secondes avec cette fonction cachée de Twitter
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 1
    Note: 1 sur 10

    Donnez votre note à ce tuto sur 10 :

    Modifier la date de naissance de son compte sur Facebook

    Un module pour firefox obligatoire si on aime les mp3

    Facebook, utilité pour le référencement et l'impact du nbre de visiteurs

    Liste des commentaires pour Copier code Css d'un site


    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).