2010-03-02 4 views
4

Existe-t-il une application qui prendra un fichier .css et en affichera une page de démonstration?Afficher les styles css dans une page de démonstration

Comme prendre tous les éléments span/div/a et afficher à quoi ils ressembleraient dans une page html?

+0

Entré sur cette question et voulait ajouter un cas d'utilisation. Je viens d'arriver dans un projet avec des feuilles de style très robustes en place (boussole si c'est important). Je mets un lien, et je veux le styler en fonction des fantaisies, donc je dois chercher sur le site et trouver un lien similaire pour capturer la classe. Certes, un bon guide de style, une bonne organisation et une bonne documentation pourraient rendre le problème inutile, mais ce que je veux vraiment, c'est une page de mise à jour automatique (ou app) qui restitue toutes les classes avec leurs noms. Je peux regarder en bas de la liste, trouver mon style de lien, et le brancher. – atonyc

+0

@atonyc - À mon avis c'est en arrière; Je ne modifierais pas la structure ou les [identifiants d'élément] (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2) dans le HTML pour répondre à une feuille de style CSS - J'utiliserais la puissance des sélecteurs CSS et créerais ma feuille de style pour travailler avec mon HTML. Pour moi, éditer votre code HTML pour que vous puissiez "capturer la classe" est comme reconstruire le cadre de votre voiture afin que vous puissiez utiliser une marque particulière de peinture! Rappelez-vous que le contenu est roi, pas feuilles de style;) –

Répondre

0

TopStyle le fait avec une vue interne. C'est un excellent outil.

http://www.topstyle4.com/

+0

Je ne vois pas une capture d'écran qui montre cela. – Kris

+0

Cliquez sur le lien, deuxième lien sur la gauche dit "Screenshots". Regardez le bas de l'IDE. Le panneau styles-as-HTML est extensible et peut être ancré à n'importe quel côté de l'EDI. – Robusto

2

... sans associé (X) fichier HTML? Si ce que vous devez faire implique CSS sans la connaissance de la structure ou des classes ou des ids de son document (X) HTML associé ... alors n'est-il pas assez simple d'écrire une petite page et de la prévisualiser dans un navigateur?

Pour ne pas offenser, mais personnellement je pense que prévisualiser CSS sans un document (X) HTML est un peu étrange. Quelques raisons:

Si vous commencez par CSS, vous pouvez essayer d'adapter votre HTML à votre CSS, alors que ce devrait être l'inverse. Commencer avec le CSS et ensuite écrire votre page me semble un bon moyen de finir avec du HTML désordonné, et si je dois choisir entre (HTML désordonné et CSS propre) ou (HTML propre et CSS désordonné) personnellement je choisirais le propre HTML à chaque fois. Vous mentionnez également le ciblage <div> et <span>. C'est une opinion personnelle, mais je crois fermement que les gens ne devraient pas cibler <div> et <span> sans attributs de classe ou d'id. Puisque <div> et <span> n'ont pas de signification sémantique, je ne peux pas imaginer pourquoi vous auriez besoin de les styliser à moins que vous ne réinitialisiez CSS ou remplissiez une exigence, et votre client est plus susceptible de demander "tous les noms d'employés devraient être souligné "ou" les travées doivent être soulignées "? ... mais une fois que vous ciblez la classe et l'identifiant, vous avez besoin de votre document HTML pour accompagner votre CSS.

+0

D'accord avec tout cela, curieux de ce que vous avez à dire sur le cas d'utilisation que j'ai commenté dans le PO. – atonyc

0

Essayez rendur: http://rendur.com/

Je suis d'accord avec Richard que vous ne devriez pas attendre grand-chose si vous styling éléments bruts div et span. :)

+0

Je pensais que j'étais le seul! :RÉ –

1

Bien que cela n'entraîne aucune génération automatique de votre CSS, il s'agit d'une excellente page de test XHTML qui inclut tous les tags, pages et éléments de formulaire standard que vous avez probablement utilisés. Appliquez votre feuille de style sur cette page et vous serez à 80% du chemin. Ensuite, il suffit d'ajouter des zones pour vos classes personnalisées, etc http://snipplr.com/view/8121/html-test-page-for-css-style-guide

Questions connexes