自動CSS預覽生成器 - 有CSS文件，想自動生成HTML預覽樣式

我有一個相當大的CSS文件由我的網頁設計師開發。自動CSS預覽生成器 - 有CSS文件，想自動生成HTML預覽樣式

當然有很多ID，類和標籤屬性分配在其中。是否有任何工具可以基於CSS源文件自動生成HTML？

例如：

#basicInfoHead{ 
    background:url(../images/leftHeaders.jpg) no-repeat; 
    margin-left: 0px; 
    width:185px; 
    height:28px; 
} 

#basicInfoHead span{ 
    float: left;  
}

會產生

<div id=basicInfoHead><span>#basicInfoHead span</span></div>

等等等等從那裏，我可以在我的瀏覽器中預覽生成的代碼，看看每個人的（主要是文字）樣式看起來像。

在此先感謝！

來源

2010-05-23 Marcel Chastain

爲了做到這一點，CSS必須更具體，即div＃basicInfoHead而不是#basicInfoHead。儘管不計算，要計算出什麼應該包含虛擬文本將會非常困難？ – 2010-05-23 22:24:20

這聽起來不太適用於真實世界的樣式表。你的例子很簡單（即使它必須是任何生成器的div#basicInfoHead以知道要產生什麼），但如果它變得更復雜呢？那些在不同的頁面中定義的元素呢？那麼需要在元素x之上的元素呢，還是需要一個元素直接跟隨才能看起來好呢？關於「不完整」類的例子對於沒有定義tr的任何內容的<table><tr><th>系列？聯合類.class1.class2.class3的具體規則是什麼？

在我一直在處理的樣式表列表中，沒有一個可以通過像您正在查找的生成器那樣的生成器轉換爲明智的HTML代碼。不知道這樣的工具是否存在。

您的設計師應該爲您提供HTML以測試CSS。這是通常的方法，就我所能看到的來說，這是唯一真正有意義的方法。

來源

2010-05-23 22:26:05

是的。我必須對我的設計師如何設計出不適用於其他人網站的東西做出很多假設。現在我正在一起竊聽一下perl - 祝我好運=） – 2010-05-23 22:50:10

我們走吧。我在做一些假設，僅保留，因爲我的設計人員使用某種風格：

一切都是一個div
我只希望看到的文本樣式，所以我會忽略任何事情似乎不與文字有關

不是我最好的東西，但它適用於我的大多數風格。必須手動編輯一些標籤，例如ul，ol，li，並刪除「body」。

#!/usr/bin/perl 
use warnings; 
use strict; 
my $css; 

open(FILE, '<', 'styles.css') or die(); 
while (<FILE>) { $css .= $_; } 
close(FILE); 

my (@css) = $css =~ m/^([a-zA-Z.#][^\n\r]+{.+?})/gmxs; 

my @text_css = grep { /\s(h[1-5]|span|font|color|p|a|ol|ul)\b/ } @css; 
foreach my $css(@text_css) { 
    my ($selector_text) = $css =~ /^([^{]*){/; 
    my (@selector) = split(/[\s{]/,(split(/[\n\r]+/,$selector_text))[0]); 
    @selector = grep { !/{/ } @selector; 
    my $start_html = ''; 
    my $middle_html = join(" ",@selector); 
    my $end_html = ''; 
    my $result = ''; 
    for (my $i=0; $i< scalar(@selector); $i++) { 
     $selector[$i] =~ s/:[-\w]+//g; 
     if (substr($selector[$i],0,1) eq '#') { 
      $selector[$i] =~ s/^#//g; 
      $start_html .= qq(<div id="$selector[$i]">); 
      $end_html = "</div>" . $end_html; 
     } 
     elsif (substr($selector[$i],0,1) eq '.') { 
      $selector[$i] =~ s/^\.//g; 
      $start_html .= qq(<div class="$selector[$i]">); 
      $end_html = "</div>" . $end_html; 
     } 
     else { 
      # we have a tag, possibly with an id/class 
      my($tag,$extra,$type); 
      if ($selector[$i] =~ m/\./) { 
       ($tag,$extra) = split('.', $selector[$i]); 
       $extra =~ s/^\.//g; 
       $type = 'class'; 
      } 
      elsif ($selector[$i] =~ m/#/) { 
       ($tag,$extra) = split('#', $selector[$i]); 
       $extra =~ s/^#//g; 
       $type = 'id'; 
      } 
      else { 
       $tag = $selector[$i]; 
      } 

      if ($extra and $type) { 
       $start_html .= qq(<$tag $type="$extra">); 
      } 
      else { 
       $start_html .= qq(<$tag>); 
      } 
      $end_html = "</$tag>" . $end_html; 
     } 

     # is this the last one? 
     if ($i == scalar(@selector) - 1) { 
      $result = $start_html . $middle_html . $end_html; 
     } 


     print "<div>$result</div>\n" if ($result); 
    } 
}

來源

2010-05-23 23:33:52

自動CSS預覽生成器 - 有CSS文件，想自動生成HTML預覽樣式

回答

相關問題