Konwerter CSS do Stylów Inline
Konwertuj reguły CSS na atrybuty stylu inline dla emaili HTML i szablonów.
Wejściowy CSS
Fragmenty Stylów Inline
Przykłady CSS do Inline
Konwertuj reguły CSS na fragmenty style inline dla e-maili lub HTML. Przykład:
Style nagłówka i przycisku
Wejściowy CSS:
Wyjście fragmentów inline:
Użyj Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest CSS do Stylów Inline?
Style inline to atrybuty style na elementach HTML. Klienci poczty e-mail, niektóre systemy CMS i pewne frameworki wymagają stylów inline, ponieważ usuwają lub ignorują zewnętrzne arkusze stylów. To narzędzie konwertuje reguły CSS na fragmenty style="..." inline, które możesz wkleić do HTML. Specyfikacje W3C CSS definiują format źródłowy.
Konwersja odbywa się całkowicie w przeglądarce. Nic nie jest wysyłane na serwer. Wyjście jest gotowe dla HTML. Do pełnego inlinowania HTML e-mail (dopasowywanie selektorów do elementów) użyj dedykowanego narzędzia jak Juice lub podobnego. To narzędzie generuje fragmenty stylów z reguł CSS.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Skopiuj CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy CSS wyświetli błąd.
Sprawdź fragmenty inline
Prawy panel pokazuje fragmenty stylów dla każdej reguły. Każdy fragment to ciąg style="...", który możesz dodać do elementów HTML. Selektory są wylistowane, żebyś wiedział, który element otrzymuje jakie style.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz. Wklej fragmenty do swojego HTML. Do formatowania CSS najpierw użyj Formatera CSS. Do minifikacji użyj Minifikatora CSS.
Jak działa konwersja
Narzędzie analizuje reguły CSS i konwertuje każdy blok deklaracji na ciąg style="właściwość: wartość; ...". Selektory są wylistowane, żebyś wiedział, który fragment dotyczy którego elementu. Wyjście jest zgodne ze składnią atrybutu style HTML. Do pełnego inlinowania HTML+CSS (automatyczne dopasowywanie selektorów do elementów) narzędzia jak Juice lub Can I Email dokumentują obsługę klientów poczty.
Kiedy CSS do Inline pomaga
E-mail HTML to najczęstszy przypadek użycia. Gmail, Outlook i wielu klientów usuwa tagi <style> i zewnętrzne arkusze stylów. Style inline to najbardziej niezawodny sposób stylizowania e-maili. Konwersja CSS tutaj daje fragmenty do dodania do <td>, <div> i innych elementów.
Osadzone widżety, komponenty Web lub systemy, które nie dopuszczają globalnego <style>, wymagają stylów inline. Konwersja tutaj daje punkt wyjścia. Do wyodrębniania CSS z HTML użyj Ekstraktora CSS. Do łączenia wielu plików CSS użyj Łącznika CSS.
Często zadawane pytania
Czy konwertuje pełny HTML?
To narzędzie generuje fragmenty stylów z reguł CSS. Nie analizuje HTML ani nie stosuje stylów do elementów. Do pełnej konwersji (HTML + CSS do HTML ze stylami inline) użyj narzędzia takiego jak Juice.
Czy moje dane są prywatne?
Tak. Konwersja odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Co z pseudo-klasami?
Pseudo-klasy takie jak :hover i ::before nie mogą być inline'owane. Style inline obsługują tylko właściwości statyczne. Używaj ich do podstawowych stylów; klienci poczty mogą obsługiwać ograniczone <style> dla hover.
Co z zapytaniami mediów?
Zapytania mediów nie mogą być inline'owane. Style inline są dla każdego elementu osobno. W przypadku responsywnych e-maili użyj podejścia hybrydowego: podstawowe style inline i <style> dla zapytań mediów tam, gdzie jest obsługiwane.
Specyficzność i dziedziczenie?
Style inline mają wysoką specyficzność. Wklejenie fragmentu do elementu nadpisze większość innych stylów. Kolejność ma znaczenie, gdy wiele reguł dotyczy tego samego elementu.
Powiązane narzędzia
Specyfikacja CSS: W3C CSS. MDN CSS to punkt odniesienia. Can I Email dokumentuje obsługę CSS przez klientów poczty.