Bezpłatny Ekstraktor CSS Online
Natychmiast wyodrębnij cały CSS z dowolnego pliku HTML w przeglądarce.
Wejściowy HTML
Wyodrębniony CSS
Przykłady wyodrębniania CSS
Wyodrębnij CSS z tagów <style> i stylów inline. Przykład:
HTML z osadzonymi stylami
Wejściowy HTML:
Wyodrębniony CSS:
Użyj Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest Ekstraktor CSS?
Zescrapowałeś stronę, wyeksportowałeś z CMS-a lub odziedziczyłeś legacy codebase, gdzie cały CSS jest w tagach <style> i atrybutach style inline. Ręczne kopiowanie tych reguł jest żmudne i podatne na błędy. Ekstraktor CSS parsuje HTML i wyciąga każdy styl do czystego, samodzielnego arkusza stylów. Dokumentacja MDN elementu <style> oraz specyfikacja CSS W3C definiują, jak przeglądarki interpretują te osadzone style.
To narzędzie działa w przeglądarce. Wklej HTML lub wczytaj plik .html. Wyodrębnia zawartość bloków <style> i style inline. Nic nie jest wysyłane na serwer. Do formatowania wyjścia użyj Formatera CSS. Do łączenia wielu plików CSS użyj Łącznika CSS.
Jak używać tego narzędzia
Wklej lub wczytaj HTML
Wklej HTML do lewego edytora lub kliknij Wczytaj, aby załadować plik .html lub .htm. Użyj Przykład, aby załadować przykładowy HTML z osadzonymi stylami.
Sprawdź wyodrębniony CSS
Prawy panel pokazuje CSS wyodrębniony z tagów <style> i stylów inline. Do walidacji użyj Walidatora CSS. Do minifikacji użyj Minifikatora CSS.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz, aby zapisać CSS. Do konwersji HTML na Markdown użyj HTML do Markdown. Do CSS inline (e-mail) użyj CSS do Inline.
Kiedy wyodrębnianie CSS pomaga
Podczas migracji starszej strony lub konwersji jednorazowego dokumentu HTML do projektu strukturalnego, wyodrębnianie CSS jest pierwszym krokiem. Szablony e-mail, eksporty CMS lub pobrane strony często mają osadzone style. To narzędzie daje punkt wyjścia do refaktoryzacji. MDN HTML i MDN CSS dokumentują standardy.
Do łączenia wyodrębnionego CSS z innymi arkuszami stylów użyj Łącznika CSS. Do dodawania prefiksów vendor użyj Prefiksera CSS. Do konwersji preprocesorów użyj SCSS do CSS lub Stylus do CSS.
Często zadawane pytania
Czy moje dane są prywatne?
Tak. Wyodrębnianie odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Czy wyodrębnia @import lub połączony CSS?
Nie. Wyodrębnia tylko zawartość bloków <style> i atrybuty style inline. Zewnętrzne arkusze stylów (@import lub <link>) nie są pobierane ani dołączane.
Co ze stylami inline?
Style inline są wyodrębniane i opakowane w komentarz dla odniesienia. Dotyczą konkretnych elementów, więc wyjście może wymagać ręcznej korekty przy ponownym użyciu.
Czy obsługuje style scoped?
Style scoped (np. Vue scoped, enkapsulacja widoków Angular) są wyodrębniane tak jak są. Atrybuty scope mogą wymagać uwzględnienia przy użyciu CSS w innym miejscu.
Czy mogę wyodrębnić z adresu URL?
To narzędzie działa z wklejonym lub wczytanym HTML. Aby wyodrębnić z adresu URL, pobierz HTML gdzie indziej i wklej go tutaj.