CSS inlinetyyleiksi — muunnin
Muunna CSS-säännöt inline-tyylimääritteiksi HTML-sähköposteihin ja mallipohjiin.
CSS-syöte
Inline-tyylikatkelmat
Esimerkkejä CSS → inline
Muunna CSS-säännöt inline-style-katkelmiksi sähköpostia tai HTML:ää varten. Esimerkki:
Otsikko- ja painiketyylit
CSS-syöte:
Inline-katkelmien tuloste:
Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää dataa.
Mikä on CSS inlinetyyleiksi?
Inline-tyylit ovat HTML-elementtien style-attribuutteja. Sähköpostiohjelmat, jotkut CMS:t ja kehykset vaativat inline-tyylejä, koska ne poistavat tai ohittavat ulkoiset tyylitiedostot. Työkalu muuntaa CSS-säännöt inline-style="..."-katkelmiksi, jotka voit liittää HTML:ään. W3C:n CSS-määrittelyt kuvaavat lähdemuodon.
Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Tulos on HTML-valmista. Täyteen HTML-sähköpostiin (valitsimet elementteihin) käytä erikoistyökalua kuten Juice. Tämä työkalu luo tyylikatkelmia CSS-säännöistä.
Miten työkalua käytetään
Liitä tai lataa CSS
Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa. Virheellinen CSS näyttää virheen.
Tarkista inline-katkelmat
Oikea paneeli näyttää tyylikatkelmat jokaiselle säännölle. Jokainen katkelma on style="..." -merkkijono, jonka voit lisätä HTML-elementteihin. Valitsimet on listattu, jotta tiedät mihin elementtiin tyylit kuuluvat.
Kopioi tai lataa
Käytä Kopioi tai Lataa tiedostona. Liitä katkelmat HTML:ään. Muotoile CSS ensin CSS-muotoilijalla. Tiivistä CSS-tiivistimellä.
Miten muunnos toimii
Työkalu jäsentää CSS-säännöt ja muuntaa jokaisen deklaratiolohkon merkkijonoksi style="ominaisuus: arvo; ...". Valitsimet on listattu, jotta tiedät mihin katkelma liittyy. Tulos noudattaa HTML style -attribuutin syntaksia. Täyteen HTML+CSS-inlinaukseen käytä työkaluja kuten Juice; Can I Email kuvaa sähköpostiasiakkaiden tukea.
Milloin CSS → inline auttaa
Sähköpostin HTML on yleisin käyttökohde. Gmail, Outlook ja monet asiakkaat poistavat <style>-tagit ja ulkoiset tyylitiedostot. Inline-tyylit ovat luotettavin tapa tyylitellä sähköpostia. CSS:n muuntaminen täällä antaa katkelmia, jotka voit lisätä <td>-, <div>- ja muihin elementteihin.
CMS:t, PDF-generaattorit tai vanhat työkalut, jotka hyväksyvät HTML:n mutta eivät CSS-tiedostoja, tarvitsevat usein inline-tyylejä. Muunnos antaa odotetun muodon. Vendor-etuliitteisiin ennen inlinetystä CSS-etuliite. Muotoiluun tai tiivistykseen ensin CSS-muotoilija tai CSS-tiivistin.
Usein kysyttyä
Inlineeeko se koko HTML:n?
Työkalu luo tyylikatkelmia CSS-säännöistä. Se ei jäsenä HTML:ää eikä sovella tyylejä elementteihin. Täyteen muunnokseen (HTML + CSS → inline-tyylitetty HTML) käytä esim. Juicea.
Onko datani yksityinen?
Kyllä. Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Entä pseudoluokat?
Pseudoluokkia kuten :hover ja ::before ei voi inlinetä. Inline-tyylit tukevat vain staattisia ominaisuuksia. Käytä niitä perustyyleihin; sähköpostiasiakkaat saattavat tukea rajoitetusti <style>:ä hoverille.
Entä media-kyselyt?
Media-kyselyitä ei voi inlinetä. Inline-tyylit ovat elementtikohtaisia. Responsiiviseen sähköpostiin käytä hybridia: inline-perustyylit ja <style> media-kyselyille siellä missä tuetaan.
Spesifisyys ja periytyminen?
Inline-tyyleillä on korkea spesifisyys. Kun liität katkelman elementtiin, se korvaa useimmat muut tyylit. Järjestyksellä on merkitystä, kun useat säännöt koskevat samaa elementtiä.
Liittyvät työkalut
CSS-määrittely: W3C CSS. Viite: MDN CSS. Can I Email kuvaa CSS-tuen sähköpostiasiakkaissa.