CSS di input

Frammenti di Stile Inline

Esempi CSS a Inline

Converti le regole CSS in frammenti style inline per email o HTML. Esempio:

Stili intestazione e pulsante

CSS di input:

Input

Output frammenti inline:

Output

Usa Esempio in alto per caricare altri dati 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 strumento 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 strumento dedicato come Juice o simili. Questo strumento genera frammenti di stile dalle regole CSS.

Come usare questo strumento

Incolla o carica CSS

Copia il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Carica per caricare un file .css. Il pulsante Esempio carica dati di esempio. Il CSS non valido 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.

Copia o scarica

Usa Copia o Scarica. Incolla i frammenti nel tuo HTML. Per formattare prima il CSS, usa il Formattatore CSS. Per minificare, usa il Minificatore CSS.

Come funziona la conversione

Lo strumento 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), strumenti 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ù file CSS, usa il Combinatore CSS.

Domande Frequenti

Converte l'intero HTML?

Questo strumento 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 strumento come Juice.

I miei dati 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.

Strumenti Correlati

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