Generoi CSS tasoista

Päivitetty viimeksi 29. lokakuuta 2026

Opi poimimaan CSS-koodia muoto- ja tekstitasoista ja kääntämään suunnitteluominaisuudet verkkoon sopiviksi tyylitiedostoiksi Adobe Photoshopissa.

Kopioi CSS -toiminto generoi Cascading Style Sheet -ominaisuudet suoraan Photoshop-tasoista ja tallentaa suunnittelumäärittelyt, jotka voit liittää tyylitiedostoihin. Tämä työnkulku yhdistää visuaalisen suunnittelun ja koodin toteutuksen, erityisesti kun valmistelet resursseja verkkoprojekteihin tai teet yhteistyötä kehittäjien kanssa, jotka tarvitsevat tarkkoja tyylimäärittelyjä.

Käytä Kopioi CSS -toimintoa, kun haluat kääntää visuaaliset suunnitteluelementit koodivalmiiksi tyylimäärityksiksi.Tämä toiminto toimii yksittäisten muototasojen, tekstitasojen tai näitä elementtejä sisältävien tasoryhmien kanssa. Se generoi CSS:n, jonka voit liittää suoraan tyylitiedostoon, ja tallentaa suunnitteluominaisuudet pikselin tarkkuudella. Jos tarvitset laajempia suunnittelusta verkkoon -työnkulkuja, tutustu tasotehosteisiin ja -tyyleihin, jotka tarjoavat lisää tyylivaihtoehtoja, sekä resurssien vientiin muita tulostusmuotoja varten.

Tasoista tallennetut CSS-ominaisuudet

Kopioi CSS poimii erilaisia ominaisuuksia sen mukaan, minkä tasotyypin valitset.

Muototasot generoivat CSS:n seuraaville ominaisuuksille:

  • Koko- ja sijaintikoordinaatit
  • Viivan väri
  • Täyttöväri, mukaan lukien liukuvärimääritykset
  • Heittovarjotehosteet

Tekstitasot sisältävät muototasojen ominaisuudet sekä typografiamäärittelyt:

  • Kirjasinperhe
  • Kirjasinkoko ja -lihavuus
  • Rivinkorkeus
  • Tekstin koristelu (alleviivaus, yliviivaus)
  • Pystysuuntainen tasaus (yläindeksi, alaindeksi)
  • Tekstin tasaus

Tasoryhmät luovat jäsenneltyjä CSS-luokkia, jotka kuvaavat sivupohja-lapsisuhteita. Ryhmästä itsestään tulee sivupohja-div, ja ryhmän sisällä oleva jokainen taso generoi lapsidivin. Alielementtien yläreunan ja vasemman reunan sijaintiarvot lasketaan suhteessa sivupohjasäiliöön, mikä vastaa CSS:n tavanomaista sijoittelutapaa.

Kopioi CSS -toiminnon rajoitukset

Kopioi CSS ei toimi Smart Objects -objektien kanssa.Jos taso on Smart Object, kaksoisnapsauttamalla voit muokata sen sisältöä ja kopioida CSS:n Smart Object -asiakirjan tasoista. Voit myös rasteroida tason ensin, jos se sopii työnkulkuusi paremmin.

Toiminto ei voi käsitellä useita samanaikaisesti valittuja muoto- tai tekstitasoja, jos niitä ei ole ryhmitelty.Jos haluat kopioida CSS:n useista tasoista kerralla, sijoita tasot ensin tasoryhmään.

Generoi CSS-koodi tasoistasi

Napsauta Tasot-paneelissa hiiren kakkospainikkeella muototasoa, tekstitasoa tai tasoryhmää ja valitse pikavalikosta Kopioi CSS.Voit myös valita tason ja sitten valita Kopioi CSS Tasot-paneelin valikosta.

Avaa tyylitiedosto ja liitä generoitu koodi painamalla Ctrl + V (Windows) tai Command + V (macOS).

CSS-koodi on nyt leikepöydällä ja valmis lisättäväksi verkkoprojektiisi.Tarkista generoidut ominaisuudet ja varmista, että ne vastaavat kehitystarpeitasi. Muuta arvoja tarvittaessa responsiivista suunnittelua tai selainyhteensopivuutta varten.