Создание таблицы стилей на основе встроенного HTML-стиля?

Я некоторое время работаю над стилей различных частей своего веб-сайта, однако мне еще нужно поместить мои встроенные стили в таблицу стилей. Мне было интересно, существует ли инструмент для анализа HTML-файла и создания таблицы стилей. Например, вот фрагмент моего сайта:Создание таблицы стилей на основе встроенного HTML-стиля?

<div class="block" style="border:1px solid"> 
    <img id="profile-pic" style="float:left;border:0px"/> 
</div>

И я хотел бы быть в состоянии произвести это:

.block { 
    border: 1px solid; 
} 

#profile-pic { 
    float: left; 
    border: 0px; 
}

Существует ли что-то подобное?

источник

2012-06-17 n0pe

Это может быть дубликатом этого: HTTP: // StackOverflow .com/вопросы/2546960/tool-to-automate-conversion-inline-css-to-external-css – nbsp

@nbsp; Я проверю некоторые из перечисленных там инструментов. Тем не менее, я пробовал большинство из этих инструментов, и они обычно не заботятся, если вы уже назвали класс/id inline – n0pe

. Было бы много дублирования; это беспокойство? – nbsp

Здесь я написал функцию, чтобы сделать это (специфичность не будет идеальным, но это будет, чтобы вы начали):

function getInlineStyles() { 
    var stylesList = "", 
     thisElement, 
     style, 
     className, 
     id; 
    $("*", "body").each(function() { 
    thisElement = $(this); 
    style = thisElement.attr("style"); 
    className = thisElement.attr("class"); 
    id = thisElement.attr("id"); 
    if (id !== undefined) { 
     stylesList += " #" + id; 
    } 
    if (className !== undefined) { 
     stylesList += " ." + className; 
    } 
    if (id !== undefined || className !== undefined) { 
     stylesList += "{"; 
    } 
    if (style !== undefined) { 
     stylesList += style; 
    } 
    if (id !== undefined || className !== undefined) { 
     stylesList += "}"; 
    } 
    }); 
    return stylesList; 
}

источник

2012-06-17 21:15:42 nbsp

Вау, это имеет большой смысл, я даже не думал о написании js, чтобы сделать это для меня. Принятый ответ изменился, так как это дает мне автоматическое решение. – n0pe

Попробуйте с Firebug. В CSS части у вас есть что-то вроде этого:

element.style {
border: 1px solid;
}

для <div class="block">

Просто скопировать это в .block { } и вот оно! Это не слишком легко, но это может помочь.

источник

2012-06-17 16:38:37

Неплохая идея, она бьет, копируя только строку. Спасибо – n0pe

Это может помочь вам http://primercss.com/. Он генерирует скрипт CSS из идентификаторов и классов. Он не может читать стиль элементов, но вы можете быстрее выполнять свою работу. Надеюсь, это поможет вам! :) –

Нет, не существует такого инструмента. Что вы делаете, когда есть несколько классов? Или класс и идентификатор? Или элемент, который является дочерним элементом элемента с идентификатором?

Нет, HTML является сложным для анализа таким образом, чтобы создать эффективный CSS-код. Вам нужно будет сделать это вручную.

Общий подход к этому вопросу - сделать тяжелую страницу inline-css и загрузить ее локально. Затем восстановите страницу с нуля. Яркая сторона заключается в том, что вам нужно только сделать CSS один раз. Когда у вас будет глобальная таблица стилей, остальные страницы будут вставлены на свои места.

источник

2012-06-17 16:41:54

Создание таблицы стилей на основе встроенного HTML-стиля?

ответ

Смежные вопросы