Tyylin luominen ja käyttäminen

Tärkeää: Tämä on artikkeli on käännetty koneellisesti. Lue vastuuvapauslauseke. Tämän artikkelin englanninkielinen versio on täällä .

Tyyli koostuu joukosta muotoiluominaisuuksia, jotka määritetään CSS-tyylisivussa. Voit käyttää tyylejä verkkosivun sisältöön, kuten tekstiin (yksittäisiin merkkeihin tai kokonaisiin kappaleisiin), kuviin, kerroksiin, taulukoihin ja jopa koko verkkosivun leipätekstiin. Tyylien avulla voit käyttää tehokkaasti ominaisuus- ja arvojoukkoja uudelleen tarvitsematta määrittää ominaisuuksia aina, kun haluat käyttää niitä.

CSS-tyylisivun tyylit toimivat limittäin siten, että yleiset tyylisäännöt koskevat HTML-elementtejä, jolleivät paikalliset säännöt ohita niitä. Yleensä paikalliset tyylisäännöt ohittavat yleiset tyylisäännöt. Esimerkiksi verkkosivun sisäisessä CSS-tyylisivussa määritetty tyyli ohittaa ulkoisessa CSS-tyylisivussa määritetyn tyylin. Vastaavasti sitoutuva CSS-tyylisivu, joka on määritetty verkkosivun yksittäisessä HTML-elementissä, ohittaa tyylit, jotka on määritetty samalle elementille verkkosivun sisäisessä tai ulkoisessa CSS-tyylisivussa. Ne yleisten tyylisääntöjen osat, jotka eivät ole ristiriidassa paikallisten CSS-tyylisääntöjen kanssa, koskevat HTML-elementtejä myös silloin, kun paikallisia tyylejä käytetään.

Sisältö

Tyylien tyypit

Tyylin luominen

Tyylin käyttäminen

Tyylien tyypit

Ulkoisessa tai sisäisessä CSS-tyylisivussa oleva tyyli voi olla luokkaperäinen, elementtiperäinen tai tunnusperäinen. Tyylin määrittää sen sääntöjoukko, joka koostuu valitsimesta, jonka jälkeen ovat ominaisuusmääritelmät, jotka näkyvät vasemman aaltosulkeen ({}) ja oikean aaltosulkeen (}) välissä. Erityyppiset tyylit voidaan erottaa muista tyylin tyypeistä valitsimen perusteella; piste (.) edeltää luokkaperäisen tyylin valitsinta; numeromerkki (#) edeltää tunnusperäisen tyylin valitsinta; elementtiperäisen tyylin valitsin sisältää vain HTML-elementin, kuten H1-elementin.

Luokkaperäiset tyylit

Luokkaperäisten tyylien avulla voit määrittää ominaisuusjoukon, jota haluat käyttää verkkosivun yhdessä tai useassa kohteessa. Jos haluat myöhemmin muokata tyyliä, voit muokata tyylin sääntöjoukkoa, jolloin muutokset näkyvät automaattisesti kaikissa kohteissa, joihin olet käyttänyt kyseistä tyyliä.

Seuraavassa esimerkissä ”introduction” on tyylin valitsin ja ”font-size: small” on yksi ominaisuusmääritelmä, jonka jälkeen on toinen ominaisuusmääritelmä.

Esimerkki luokkaperäisen tyylin sääntöjoukosta

.introduction {font-size: small; color: white}

Esimerkki luokkaperäisestä tyylistä, jota käytetään <p>-tunnisteeseen

<p class="introduction">

Elementtiperäiset tyylit

Elementtiperäisten tyylien avulla voit määrittää ominaisuusjoukon, jota haluat tietyn HTML-elementin kaikkien esiintymien käyttävän verkkosivulla. Jos haluat esimerkiksi luoda 25 kuvapisteen reunuksen kaikkien kappaleiden ympärille (<p>-tunnisteiden sisällä oleva sisältö) verkkosivulla, voit luoda elementtiperäisen tyylin, joka käyttää p-elementtiä valitsimena ja sisältää reunuksen ominaisuuksien määritelmät, kuten seuraavassa koodissa esitetään.

Esimerkki elementtiperäisen tyylin sääntöjoukosta

p { margin-left: 25px; margin-right: 25px }

Tunnusperäiset tyylit

Käytä tunnusperäistä tyyliä, kun haluat määrittää ominaisuusjoukon yksittäiselle kohteelle tai kohteiden lohkolle, jonka haluat erottaa kaikista muista sisällöistä yhdellä tai usealla verkkosivulla. Käytä tunnusperäistä tyyliä, kun haluat käyttää tyyliä yksittäiseen HTML-elementtiin verkkosivulla.

Esimerkki tunnusperäisen tyylin sääntöjoukosta

#footer {background-color: #CCCCCC; margin: 15px}

Esimerkki tunnusperäisestä tyylistä, jota käytetään <p>-tunnisteeseen

<p id="footer">

Sitoutuvat tyylit

Käytä sitoutuvaa tyyliä, kun haluat määrittää ominaisuusjoukon yksittäiselle kohteelle tai kohteiden lohkolle verkkosivulla, etkä halua käyttää kyseistä tyyliä uudelleen. Toisin kuin tunnusperäiset, elementtiperäiset ja luokkaperäiset tyylit, joiden ominaisuudet määritetään joko verkkosivun otsikko-osassa (sisäinen CSS-tyylisivu) tai ulkoisessa CSS-tiedostossa, sitoutuvien tyylien (tai sitoutuvan CSS-tyylisivun) ominaisuudet määritetään suoraan HTML-elementissä, johon haluat käyttää tyyliä.

Esimerkki sitoutuvan tyylin sääntöjoukosta

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Sivun alkuun

Tyylin luominen

Voit luoda uusia tyylejä alusta alkaen tai kopioimalla aiemmin luodun tyylin. Kummassakin tapauksessa voit määrittää Uusi tyyli -valintaikkunassa kaiken tarvittavan uuden tyylin osalta, esimerkiksi valitsintyypin, ominaisuudet ja tyylisivun, joka sisältää tyylin. Jos haluat luoda uuden sitoutuvan tyylin, voit käyttää myös CSS-ominaisuudet-tehtäväruutua. Jos haluat nopeasti luoda ja käyttää uutta tyyliä sivullasi määrittämättä tyylin ominaisuuksia, voit käyttää myös Tyyli-työkaluriviä.

Tyylin luominen Uusi tyyli -valintaikkunan avulla

  1. Tee jokin seuraavista:

    • Jos haluat lisätä tyylin ulkoiseen CSS-tyylisivuun, avaa .css-tiedosto.

    • Jos haluat lisätä tyylin sisäiseen CSS-tyylisivuun, avaa verkkosivu.

    • Jos haluat lisätä sitoutuvan tyylin, avaa verkkosivu ja valitse sitten sisältö, johon haluat käyttää tyyliä.

  2. Tee jokin seuraavista toimista:

    • Uuden tyylin luominen    Valitse Uusi tyyli jossakin seuraavista sijainneista: Käytä tyylejä -tehtäväruutu tai Tyylien hallinta -tehtäväruutu, Tyyli-työkalurivi tai Muotoile-valikko.

    • Aiemmin luodun tyylin kopioiminen    Tee jokin seuraavista:

      • Osoita Käytä tyylejä -tehtäväruudussa tyyliä, jonka haluat kopioida, napsauta esiin tulevaa alanuolta ja valitse sitten Kopioi uusi tyyli.

      • Napsauta Tyylien hallinta -tehtäväruudussa tai CSS-ominaisuudet-tehtäväruudussa kopioitavaa tyyliä hiiren kakkospainikkeella ja valitse sitten Kopioi uusi tyyli.

  3. Tee Uusi tyyli -valintaikkunassa seuraavat toimet:

Käytä tätä

Toiminto

Valitsin

  • Jos haluat käyttää luokan valitsinta, kirjoita piste (.) ja sen jälkeen yksilöivä nimi.

  • Jos haluat käyttää tunnuksen valitsinta, kirjoita numeromerkki (#) ja sen jälkeen yksilöivä nimi.

    Huomautus: Luokan ja tunnuksen valitsimen nimet eivät voi sisältää välilyöntejä, paitsi jos luot monitasoisen valitsimen.

  • Jos haluat käyttää elementin valitsinta, kirjoita HTML-elementin nimi tai napsauta avattavaa Valitsin-luetteloruutua ja valitse elementin nimi.

  • Jos haluat käyttää sitoutuvaa valitsinta, valitse Sisäinen tyyli.

  • Jos haluat luoda monitasoisen valitsimen, kirjoita valitsin.

Määritä paikassa:

Valitse jokin seuraavista:

  • Nykyinen sivu lisää uuden tyylin nykyisen verkkosivun sisäiseen CSS-tyylisivuun.

  • Uusi tyylisivu lisää uuden tyylin uuteen tyhjään ulkoiseen CSS-tyylisivuun.

  • Aiemmin luotu tyylisivu lisää uuden tyylin aiemmin luotuun ulkoiseen CSS-tyylisivuun, jonka määrität.

Käytä uutta tyyliä tiedostovalinnassa

Käyttää tyyliä nykyisen verkkosivun nykyiseen valintaan.

URL

Jos valitsit Aiemmin luotu tyylisivu -vaihtoehdon Määritä paikassa: -kohdassa, kirjoita .css-tiedoston URL-osoite.

Luokka

Valitse jokin seuraavista ja määritä sitten ominaisuudet, jotka näkyvät valintaikkunan oikeassa reunassa:

Vihje: Luokat, jotka näkyvät lihavoituina Luokka-luettelossa, sisältävät määritettyjä ominaisuuksia.

  • Fontti määrittää fontin ominaisuudet, kuten koon, leveyden, muotoilun ja värin.

  • Lohko määrittää rivin korkeuden, tekstin tasauksen, tekstin sisennyksen ja tekstin välistyksen.

  • Tausta määrittää taustan värin ja taustakuvan ominaisuudet.

  • Reuna määrittää reunan ja sen ominaisuudet.

  • Ruutu määrittää ruudun ja lohkotason elementtien täytön ja reunuksen ominaisuudet.

  • Sijainti määrittää ruudun ja lohkotason elementtien mitat ja sijainnin.

  • Asettelu määrittää ruudun ja lohkotason elementtien näkyvyyden, irrallisuuden ja rivityksen, leikkaamisen ja muut asettelun ominaisuudet.

  • Luettelo määrittää luetteloelementtien ominaisuudet, kuten tyypin, sijainnin ja kuvan.

  • Taulukko määrittää taulukkoon liittyvien elementtien ominaisuudet, kuten välit, asettelun ja reunan ominaisuudet.

Huomautus: Voit myös kopioida tyylin CSS-tyylisivusta toiseen. Vedä Tyylien hallinta -tehtäväruudussa tyyli CSS-tyylisivusta, joka sisältää kyseisen tyylin, joko sen CSS-tyylisivun nimeen, johon haluat kopioida tyylin, tai tiettyyn kohtaan kohdetyylisivun tyyliluetteloon.

Sitoutuvan tyylin luominen CSS-ominaisuudet-tehtäväruudun avulla

  1. Valitse verkkosivun rakennenäkymässä tai koodinäkymässä sisältö, johon haluat lisätä sitoutuvan tyylin.

  2. Napsauta CSS-ominaisuudet-tehtäväruudun Käytetyt säännöt -kohdassa hiiren kakkospainikkeella valitsinta, johon haluat käyttää sitoutuvaa tyyliä, tai, jos ”(ei sääntöjä käytetty)” tulee näkyviin, napsauta hiiren kakkospainikkeella missä tahansa Käytetyt säännöt -kohdassa ja valitse sitten pikavalikosta Uusi sisäinen tyyli.

  3. Määritä CSS-ominaisuudet-kohdassa haluamasi ominaisuudet.

Uuden määrittämättömän tyylin luominen ja käyttäminen

Voit luoda tyylejä ja käyttää niitä kohteisiin ja määrittää tyylit vasta myöhemmin. Jos esimerkiksi haluat käyttää suunnittelutoimintoa sivujesi ulkoasun luonnissa, voit käyttää määrittämättömiä tyylejä sivun kohteisiin ja määrittää sitten tyylit myöhemmin suunnittelutoiminnolla.

  1. Valitse verkkosivun rakennenäkymässä tai koodinäkymässä kohde, johon haluat käyttää tyyliä.

  2. Jos haluat luoda ja käyttää uutta tyyliä määrittämättä ominaisuuksia, kirjoita Tyyli-työkalurivillä joko Luokka- tai Tunnus-ruutuun yksilöivä nimi uudelle tyylille.

Sivun alkuun

Tyylin käyttäminen

Voit käyttää luokkaperäisiä tai tunnusperäisiä tyylejä sisäisistä ja ulkoisista CSS-tyylisivuista Käytä tyylejä -tehtäväruudun, Tyylien hallinta -tehtäväruudun tai Tyyli-työkalurivin avulla. Käytä tyylejä -tehtäväruudun avulla voit käyttää useita tyylejä valintaan, kun taas Tyylien hallinta -tehtäväruudun ja Tyyli-työkalurivin avulla voit käyttää vain yhtä tyyliä. Tyyli-työkalurivin avulla voit nopeasti nimetä ja käyttää uutta määrittämätöntä tyyliä sivullasi.

Sinun ei tarvitse käyttää tyylejä, jotka käyttävät valitsimen elementtiä (elementtiperäiset tyylit), koska tämäntyyppisiä tyylejä käytetään automaattisesti niihin liittyvässä elementissä koko verkkosivulla. Käytä tyylejä -tehtäväruudussa luetellaan elementtiperäiset tyylit Kontekstivalitsimet-kohdassa, ja tyylin nimen vieressä näkyy sininen piste, samoin kuin Tyylien hallinta -tehtäväruudussa. Tyyli-työkalurivillä ei luetella elementtiperusteisia tyylejä.

  1. Valitse verkkosivun rakennenäkymässä tai koodinäkymässä kohde, johon haluat käyttää tyyliä.

  2. Tee jokin seuraavista:

    • Useiden aiemmin luotujen tyylien käyttäminen    Pidä Käytä tyylejä -tehtäväruudussa CTRL-näppäintä painettuna samalla, kun napsautat jokaista haluamaasi tyyliä.

    • Aiemmin luodun yksittäisen tyylin käyttäminen    Tee jokin seuraavista:

      • Valitse Käytä tyylejä -tehtäväruudussa haluamasi luokan tai tunnuksen tyyli.

      • Valitse Tyyli-työkalurivillä haluamasi tyyli joko avattavasta Luokka- tai Tunnus-luetteloruudusta.

      • Napsauta hiiren kakkospainikkeella Tyylien hallinta -tehtäväruudussa haluamasi luokan tai tunnuksen tyyliä ja valitse sitten pikavalikosta Käytä tyyliä.

    • Uuden tyylin luominen ja käyttäminen määrittämättä ominaisuuksia    Kirjoita Tyyli-työkalurivillä joko Luokka- tai Tunnus-ruutuun yksilöivä nimi uudelle tyylille.

Sivun alkuun

Huomautus: Konekäännöksestä ilmoittava vastuusvapauslauseke: Tämä artikkeli on käännetty tietokonejärjestelmällä, eikä kieliasiantuntija ole muokannut sitä. Microsoft tarjoaa nämä konekäännökset avuksi muille kuin englantia puhuville käyttäjille, jotta he saavat lisätietoja Microsoftin tuotteista, palveluista ja tekniikoista. Koska artikkeli on koneellisesti käännetty, se saattaa sisältää sanasto-, lauseoppi- ja kielioppivirheitä.

Kehitä taitojasi
Tutustu koulutusmateriaaliin
Saat uudet ominaisuudet ensimmäisten joukossa
Liity Office Insider -käyttäjiin

Oliko näistä tiedoista hyötyä?

Kiitos palautteesta!

Kiitos palautteestasi! Näyttää siltä, että Office-tukiedustajamme avusta voi olla sinulle hyötyä.

×