CSS di input

Frammenti di Stile Inline

Esempi CSS a Inline

Konwertuj le regole CSS in frammenti style inline per email o HTML. Przyklad:

Stili intestazione e pulsante

CSS di input:

Input

Output frammenti inline:

Output

Usa Przyklad in alto per caricare altri dane di esempio.

Cos'è CSS a Stili Inline?

Gli stili inline sono attributi style sugli elementi HTML. I client email, alcuni sistemi CMS e certi framework richiedono stili inline perché eliminano o ignorano i fogli di stile esterni. Questo narzedzie converte le regole CSS in frammenti style="..." inline che puoi incollare nell'HTML. Le specifiche W3C CSS definiscono il formato sorgente.

La conversione avviene interamente nel tuo browser. Nulla viene inviato a un server. L'output è pronto per HTML. Per l'inlining completo delle email HTML (abbinamento dei selettori agli elementi), usa uno narzedzie dedicato come Juice o simili. Questo narzedzie genera frammenti di stile dalle regole CSS.

Come usare questo narzedzie

Incolla o carica CSS

Kopiuj il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Wczytaj per caricare un plik .css. Il pulsante Przyklad carica dane di esempio. Il CSS nieprawidlowy mostrerà un errore.

Esamina i frammenti inline

Il pannello di destra mostra i frammenti di stile per ogni regola. Ogni frammento è una stringa <code>style="..."</code> che puoi aggiungere agli elementi HTML. I selettori sono elencati così sai quale elemento riceve quali stili.

Kopiuj o scarica

Usa Kopiuj o Pobierz. Incolla i frammenti nel tuo HTML. Per formattare prima il CSS, usa il Formater CSS. Per minificare, usa il Minifikator CSS.

Jak to dziala la conversione

Lo narzedzie analizza le tue regole CSS e converte ogni blocco di dichiarazioni in una stringa style="proprietà: valore; ...". I selettori sono elencati così sai quale frammento si applica a quale elemento. L'output segue la sintassi dell'attributo style HTML. Per il pieno inlining HTML+CSS (abbinamento automatico dei selettori agli elementi), narzedzia come Juice o Can I Email documentano il supporto dei client email.

Quando CSS a Inline è utile

L'email HTML è il caso d'uso più comune. Gmail, Outlook e molti client eliminano i tag <style> e i fogli di stile esterni. Gli stili inline sono il modo più affidabile per stilizzare le email. Convertire il tuo CSS qui ti dà i frammenti da aggiungere a <td>, <div> e altri elementi.

I widget incorporati, i componenti Web o i sistemi che non permettono <style> globale richiedono stili inline. La conversione qui ti dà un punto di partenza. Per estrarre CSS dall'HTML, usa l'Estrattore CSS. Per combinare più plik CSS, usa il Combinatore CSS.

Czesto zadawane pytania

Converte l'intero HTML?

Questo narzedzie genera frammenti di stile dalle regole CSS. Non analizza l'HTML né applica stili agli elementi. Per la conversione completa (HTML + CSS in HTML con stili inline), usa uno narzedzie come Juice.

I miei dane sono privati?

Sì. La conversione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.

E le pseudo-classi?

Le pseudo-classi come :hover e ::before non possono essere rese inline. Gli stili inline supportano solo proprietà statiche. Usali per gli stili di base. I client email potrebbero supportare <style> limitato per l'hover.

E le media query?

Le media query non possono essere rese inline. Gli stili inline sono per elemento. Per le email responsive, usa un approccio ibrido: stili di base inline, media query in <style> dove supportato.

Specificità ed ereditarietà?

Gli stili inline hanno alta specificità. Incollare i frammenti in un elemento sovrascriverà la maggior parte degli altri stili. L'ordine conta quando più regole si applicano allo stesso elemento.

Powiazane narzedzia

Specifica CSS: W3C CSS. MDN CSS è il riferimento. Can I Email documenta il supporto dei client email per CSS.