Stel die CSS-plotstylblad vir ‘n webwerf op [2018]

Wydrukuj arkusz stylów CSS Trick for Blogger - Problogbooster
Leer om maak u werf drukker vriendelik met CSS. Omdat dit regtig belangrik is om ‘n spesiale CSS te hê om vir enige webwerf te druk, sou die leser die artikel wil druk om later vanlyn te lees. Dit word gewoonlik ‘n bykomende opsie vir alle webmeesters en bloggers dink aan wie eintlik afdrukke van gepubliseerde artikels aanlyn druk. Hulle vergeet egter om te dink dat die leser die bladsy ook in PDF-formaat kan stoor. Hoe om ‘n gedrukte stylblad vir die 2018-webwerf op te stel – Keuse topverkoper SEO-vriendelike onderwerpe dit is nie genoeg nie, u moet ook die faktor vir die drukstylvel oorweeg kies die beste sjabloon vir u onderneming. Dit is die beste gids vir alle eienaars van die webwerf, waar u ‘n drukstylblad vir u werf kan opstel. Hierdie CSS-drukstylblad werk ook goed met ‘n blogger. U kan ‘n heeltemal aparte CSS-stylblad skep vir drukwerk, van voor af begin, of self moderne “skerm” -style ontwikkel. Hierdie hele metode word in CSS ingesluit deur die definiëring van drukspesifieke style deur @media Rule. Waarom is hierdie stylblad nodig? Omdat die CSS-stylvelkode gebruik word om webblaaie te druk wanneer ‘n besoeker ‘n webblad vir inligting wil druk. Leer hoe om ‘n drukstylblad op te stel, hoe om u drukker vriendelike webwerf te maak met behulp van CSS, en om drukstyle te maak met behulp van CSS3 @media-navrae. Volg alle stappe om binne enkele minute ‘n pasgemaakte drukstylblad te maak.

Druk die CSS Trick for Blogger - Problogbooster-stylblad
Druk ‘n CSS-stylblad: Wenke vir blogging

Kyk ook na: 5 maniere waarop slytegnologie ons daaglikse lewens sal verbeter

Wat is ‘n drukstylblad of print.css?

Dit is ‘n spesiale CSS-kode wat gedefinieër is vir ‘n webwerf, waarmee die leser ‘n spesifieke bladsy baie duidelik kan druk sonder om die hoeveelheid papier en ink te oorskry.

Voordele:

  • Verhoog bruikbaarheid en toeganklikheid: die leser / student kan dit druk en gebruik vir latere verwysing.
  • Verminder die laai van bladsye: baie gebruikers gebruik ‘n stadige internetverbinding wat onmiddellik die gedrukte weergawe kies, sodat hulle die regte inligting vinniger kry, omdat so ‘n stadige internetverbinding die bladsy baie stadig laat laai om dit aanlyn te sien.

nadeel:

Verhoog die grootte van die bladsy om te laai nadat u hierdie nuwe CSS bygevoeg het, of as u ‘n hiperskakel byvoeg, sal die volgende versoek ‘n bladsylading voeg.

Hoe u die drukstylblad kan besigtig en ontfout

Kontroleer die voorskou van die huidige bladsy met u blogpos voordat u vertrek. Kyk ook na die voorskou van hierdie bladsy.

  • In Firefox: Menu bar >> File >> Druk voorskou
  • In die geval van Chrome: klik met die rechtermuisknop op die bladsy >> Kyk item >> soek die instellingsknoppie in die regter onderhoek >> kontroleer – Emuleer CSS-media.

Hoe om te bou: print.css

Dit is regtig maklik, want ons het ‘n CSS-sjabloon vir mobiele toestelle geskep. U hoef net te weet watter deel gedruk moet word en watter NIE moet doen nie.

Laat ons begin

Om ‘n CSS-drukstuk te begin skep, ‘n spesiale CSS-etiket @media druk word gebruik om die blaaier in te lig dat die huidige bladsy gedruk sal word.

@media druk {
… … …
… gebruiker-gedefinieerde ander tags …
… … …
}

Lys nou die dele van die bladsy wat u nie wil uitdruk nie, soos spyskaarte, navigasie, sybalk, ens. En plaas dit in die etiket hierbo genoem, soos

@media druk {
#menu, #nav, # sidebar, # sidebar-wrapper {display: none}
}

Voeg die inhoud van die hoofverpakking in die volle breedte:

# hoofverpakking {breedte: 100%; marge: 0; dryf: geen;}

Vee agtergrond uit:

liggaam {agtergrond: wit; }
#houer {agtergrond: deursigtig;}

Stel die lettertipe en grootte in

body {font: normal 14px Georgia, Times New Roman, Times, serif; lynhoogte: 1,5 em; kleur: # 222; }

Diversifiseer skakels en teks

a: skakel {font-weight: bold; teksversiering: onderstreep; kleur: # 000; }

Druk URL na skakels

a: skakel: na {content: “(” attr (href) “)”;}

Wys ‘n dankie-boodskap

liggaam: na {vertoon: blok; inhoud: “Dankie dat u ons inhoud afgedruk het.”; boonste marge: 30px; lettergrootte: 11pt; kleur: # 555; rand-bo: 1px gestippel # 555; }

Definieer die kantlyn

@ bladsy {marge: 0,5 cm; }

Finale CSS-drukstylblad

@media druk {
#menu, #nav, # sidebar, # sidebar-wrapper {display: none}
# hoofverpakking {breedte: 100%; marge: 0; sweef: geen; }
liggaam {agtergrond: wit; }
body {font: normal 14px Georgia, Times New Roman, Times, serif; lynhoogte: 1,5 em; kleur: # 222; }
#houer {agtergrond: deursigtig;}
@ bladsy {marge: 0,5 cm; }
a: skakel {font-weight: bold; teksversiering: onderstreep; kleur: # 000; }
a: skakel: na {content: “(” attr (href) “)”;}
liggaam: na {vertoon: blok; inhoud: “Dankie dat u ons inhoud afgedruk het.”; boonste marge: 30px; lettergrootte: 11pt; kleur: # 555; rand-bo: 1px gestippel # 555; }
.noprint { Dit verskyn nie }
}

Bogenoemde voorbeeld is slegs vir leer. Daar is ‘n verskillende stylblad vir elke blogger.

Vermy ekstra dinge om te druk

As u in die voorbeeld hierbo sien, sal u CSS-kode sien . druk. Terwyl ek daaraan werk, kom ek agter dat sommige widgets nog steeds gedruk is, en dit is regtig ongewenst en irriterend op papier. Daar is dus ‘n spesiale CSS-klas gedefinieër om ekstra papiere te vermy. U moet net die ongewenste HTML-kode as;


… u ongewenste ekstra goed …

En definieer hierdie klas Dit verskyn nie in die CSS-stylblad.
Begin nou met u eie stylblad vir u pragtige blogblad en maak dit meer leesbaar, toeganklik, bruikbaar en aanlyn.