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

    Comment enregistrer en mp3 n'importe quel son provenant de Deezer

    La premiĂšre astuce est vraiment bon Ă  savoir !
    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 :

    Internet pratique : un length de javascript en ligne

    Générateur Flash de couleur HEX

    Un site simulateur pour savoir si le futur bébé aura les yeux bleus par exemple !

    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 ! ).