CSS (CSC-tyylisivut) antaa sinulle huomattavan hallinnan siitä, kuinka verkkosivujesi sisältö näytetään näytöllä. Tämä ohjaus ulottuu myös muihin tietovälineisiin, kuten verkkosivun tulostamisen yhteydessä.
Saatat miettiä, miksi haluat lisätä tulostusominaisuus Web-sivullesi; loppujen lopuksi suurin osa ihmisistä tietää tai osaa helposti selvittää Web-sivun tulostamisen selaimen valikoiden avulla.
Mutta on tilanteita, joissa tulostuspainikkeen tai linkki sivulle ei vain helpota prosessia käyttäjillesi, kun heidän täytyy tulostaa sivu mutta ehkä vielä tärkeämpää, antaa sinulle paremman hallinnan siitä, kuinka nämä tulosteet näkyvät paperi.
Näin lisäät joko tulostuspainikkeet tai tulostuslinkit sivuillesi ja kuinka määrität, mitkä sivusi sisällön osat tulostetaan ja mitkä eivät.
Tulostuspainikkeen lisääminen
Voit lisätä tulostuspainikkeen helposti verkkosivullesi lisäämällä seuraavan koodin HTML-asiakirjaasi, jossa haluat painikkeen näkyvän:
onclick = "window.print (); return false;" />
Painike merkitään
Tulosta tämä sivu kun se ilmestyy verkkosivulle. Voit mukauttaa tätä tekstiä mihin haluat, vaihtamalla teksti seuraavien lainausmerkkien välilläarvo =yllä olevassa koodissa.
Huomaa, että tekstiä edeltää ja sitä seuraa yksi tyhjä tila; tämä parantaa painikkeen ulkonäköä lisäämällä välilyöntiä tekstin päiden ja näytetyn painikkeen reunojen väliin.
Tulostuslinkin lisääminen
Vielä helpompaa on lisätä yksinkertainen tulostuslinkki verkkosivullesi. Lisää vain seuraava koodi HTML-asiakirjaasi, missä haluat linkin näkyvän:
Tulosta
Voit mukauttaa linkkitekstiä muuttamalla "tulosta" mihin tahansa valitset.
Tiettyjen osioiden tulostaminen
Voit määrittää, että käyttäjät voivat tulostaa tiettyjä verkkosivun osia tulostuspainikkeen tai linkin avulla. Voit tehdä tämän lisäämällä print.css arkistoida sivustoosi, kutsua sitä HTML-asiakirjan päähän ja määritellä sitten ne osiot, jotka haluat tehdä helposti tulostettaviksi määrittelemällä luokan.
Lisää ensin seuraava koodi HTML-asiakirjan otsikkoosi:
type = "text / css" media = "print" />
Luo seuraavaksi tiedosto nimeltä print.css. Lisää tähän tiedostoon seuraava tiedosto:
runko {näkyvyys: piilotettu;}
.print {näkyvyys: näkyvä;}Tämä koodi määrittelee kaikki rungon elementit piilotettuina tulostettaessa, ellei elementille ole määritetty "tulostus" -luokkaa.
Nyt sinun tarvitsee vain määrittää "tulostus" -luokka verkkosivusi elementeille, jotka haluat tulostaa. Esimerkiksi, jos haluat tehdä div-elementistä määritetyn osan tulostettavaksi, käytä
Mitään muuta sivulla, jota ei ole määritetty tähän luokkaan, ei tulosteta.