Převod inline CSS na externí

Nástroj extractCSS dokáže v HTML kódu najít elementy, které mají nastavenou třídu nebo ID a vytvořit pro ně CSS předpis. Když element s class/id bude mít nějaké inline styly (např. style="color: red"), bude i toto rovnou převedeno do externího CSS.

Využití

K čemu je to dobré? Kromě extrahování inline stylů to může posloužit i ke zrychlení tvorby CSS k existujícímu HTML.

Navrhneme si strukturu HTML kódu s třídami a extractCSS z toho připraví kostru pro vytváření CSS.

HTML

<div class="obal">
  <div class="hlavicka"></div>
  <div class="obash"></div>
  <div class="menu"></div>
  <div class="paticka"></div>
</div>

To jde mimochodem s nástrojem Emmet zapsat jako .obal>(.hlavicka+.obash+.menu+.paticka).

CSS

extractCSS

Odpovídající a automaticky vygenerovaná CSS kostra bude vypadat následovně:

.obal {
}

.hlavicka {
}

.obash {
}

.menu {
}

.paticka {
}

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Zobrazení popisku při najetí myší

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

Komentáře