Vylepšenia Blogu

Obsah súboru (alebo nastavenia) print.css.

html, body { margin:0px; padding:0px; font-family: Tahoma, Verdana, Helvetica, sans-serif; font-size:10pt; color:#000; background-color:#fff; } form { margin:0px; } h1 { margin:0px; } a { color:#666; text-decoration:underline; } /* ******************************************************************** OBJECTS ******************************************************************** */ #blog-title { color: #000; text-align:right; padding-top:5mm; padding-right:10mm; font-size: 14pt; } #content { width: 90%;} /* ################# ARTICLES ################## */ #article, .article-list { margin-top:5mm; } #article, .article-list { color:#000; } h3 { margin:0; padding:0; font-size:140%; font-weight:normal; line-height:1.4em; color:#000; } .article-list-perex img { border:none; } .article-list-data, .article-data, .comment-info { font-size:0.8em; text-align:right; font-family:tahoma, arial, helvetica, sans-serif; } .article-data, .comment-info { margin-top: 4mm;} .article-list-data { margin:5mm 0; border-top:1px #666 solid; padding-top:5mm; } .article_todo { text-align: right; } .article-date { margin: 0em 0 .75em; font:78%/1.4em tahoma,Verdana,Arial,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#000; } .article-perex { font-size:0.9em; text-align:justify; margin:5mm 0px; font-style:italic; color:#000; } .article-content { text-align:justify; margin-top:10mm; margin-bottom:2mm; padding-bottom:5mm; } /* ### COMMENTS ### */ #comments { page-break-before:always;} #comments h4 { font-weight:normal; margin:5mm 0mm 5mm 0mm; padding:2mm; font-size:130%; line-height:1.4em; color:#000; text-transform:uppercase; letter-spacing:.1em; border-top: 1px #000 solid; border-bottom: 2px #000 solid; text-align: center; font-family:tahoma, verdana, arial, sans-serif; } #comments-list { list-style: none; margin:0; padding:0; } .comment-body h5 { margin:0mm 0mm 3mm 0mm; text-transform:uppercase; letter-spacing:.1em; } #comments-list li { clear: left; margin-bottom:1mm; } #comments-list .comment-body { padding:3mm; } .comment-detail { line-height: 120%; text-align: justify; font-size: 0.8em; color:#000; } #comments-list ul li { list-style: none; margin: 0; } #comments-list ul { margin: 0; padding: 0; } .comment-info { text-align: right; font-size: .7em; padding: 5px 0; border-top: 1px #000 solid; } .article_todo, #menu, #end, .replay-warning, .submiter, #reply-form { visibility:hidden; width:0px height:0px; position:absolute; top:0; left:0; }

Prvá vec, ktorú CSS v tlačenej forme ovplyvní bude celkové HTML a telo (BODY). Tento kód:
html, body { margin:0px; padding:0px; font-family: Tahoma, Verdana, Helvetica, sans-serif; font-size:10pt; color:#000; background-color:#fff; }
hovorí hlavne o tom, že stránka nebude mať žiadne odsadenia (margin a padding), fontom bude Tahoma, prípadne v alternatívach Verdana, Helvetica či MACovský sans-serif. Veľkosť fontu písma pritom bude 10 pt (point-ov) čo sú tlačové body. Pozadie bude biele a farba textu čierna.

Ďalej nám CSS ovplyvňuje formuláre (FORM), hlavičku (H1) a hypertextové odkazy (a):
form { margin:0px; } h1 { margin:0px; } a { color:#666; text-decoration:underline; }
Tu je zadefinované, že formuláre a hlavička - nadpis H1, nebudú mať žiadne odsadenie (margin). Farba hypertextových odkazov bude sivá a linky budú podčiarknuté. V tomto prípade by som - ja osobne - volil zmenu, hlavne čo sa hypertextových odkazov týka. Povedzme si úprimne. Má vyznam podčiarkovať niečo, na čo si aj tak nekliknete, hlavne ak to budete mať vytlačené na papieri? Podľa mňa nie. Navrhoval by som skôr:
a { color:#000; text-decoration: none !important; }
Tento môj zápis označuje, že akýkoľvek link, ktorý je kdekoľvek na stránke, bude čierny (ako ostatný text) a nebude v žiadnom prípade podčiarknutý. !important sa postará o to, aby toto pravidlo malo účinnosť vo vyššej priorite, takže ak niekde inde v kóde zadáte, že text-decoration: underline; nebude táto deklarácia platiť.

Prichádza veľmi dôležitý objekt, ktorým je názov blogu. Tu sa s tým moc nepohrali a povedzme si úprimne... Celkovo by som to asi riešil radšej úplne inak. Okrem toho, že som odhalil chybu v deklarácii zarovnania textu vpravo (text-align:rightright;), tak ja osobne by som volil celkový layout trošku inak.

Nižšie môžete vidieť, ako vlastne taký vytlačený blog vyzerá. 

Poznámočka. Vytlačená verzia je z pôvodného (mnou nemodifikovaného) print.css a preto sú tam odkazy sivé a podčiarknuté!

Isto si treba všimnúť aj to, že sú cez toto CSS ovplyvňované aj ďalšie vlastnosti a objekty. Presnejšie ide o nasledovné objekty, ktoré je potrebné si všimnúť, nakoľko (aspoň podľa mňa) si z toho môžete vziať príklad, ako sa niektoré veci dajú jednoducho "ukryť".

.article_todo, #menu, #end, .replay-warning, .submiter, #reply-form { visibility:hidden; width:0px height:0px; position:absolute; top:0; left:0; }
Tu môžete vidieť, že .article_todo, menu, end, replay_warning, submiter a reply-form, majú nastavenú "visibility: hidden;" čo v reálnom HTML znamená, že i keď sú reálne na stránke, tak ich viditeľnosť je potlačená, čo znamená, že sa vo finále v tej "printovej" verzii nezobrazia. Pre istotu im nastavili výšku aj šírku na 0 pixelov a čo sa týka umiestnenia, tak ich umiestnili úplne hore vľavo.

Ďaľší rozbor tu (zatiaľ) robiť nemusíme, takže prejdeme do ďalšieho CSS v ďalšom článočku.