Auszeichnungssprache – Druckstil_HTML/Xhtml_Webseitenproduktion

Klicken Sie hier, um zur HTML-Tutorial-Spalte des Web Teaching Network zurückzukehren. Um CSS-Tutorials anzuzeigen, klicken Sie bitte hier. Oben: Auszeichnungssprache – CSS-Stile, die auf Webseiten angewendet werden. Kapitel 11 Druckstil Zuvor haben wir in Kapitel 10 verschiedene Möglichkeiten zur Anwendung von CSS auf Dokumente besprochen. In diesem Kapitel geht es um die Festlegung von CSS-Regeln speziell für das Drucken von Seiten Klicken Sie hier, um zur Spalte „Script House HTML Tutorial“ zurückzukehren. Um CSS-Tutorials anzuzeigen, klicken Sie bitte hier.
Oben: Auszeichnungssprache – CSS-Stil für Webanwendungen . Kapitel 11 Druckstile
Zuvor haben wir in Kapitel 10 verschiedene Methoden zur Anwendung von CSS auf Dokumente besprochen. In diesem Kapitel geht es um das Studium von Druckstilen und die Festlegung von CSS-Regeln speziell für das Drucken von Seiten. Dadurch wird sichergestellt, dass der Markup-Inhalt strukturiert ist sieht auf Papier genauso gut aus wie auf dem Bildschirm.
Schauen wir uns zunächst die Medientypen und ihre Beziehung zur Bereitstellung von gerätespezifischem CSS an. Wie legt man den beim Drucken verwendeten Stil fest?
Bevor Sie diese Frage beantworten, müssen Sie mit einem Konzept vertraut sein, das heißt, wir können den Medientyp (Medien) für CSS angeben, damit der Stil funktioniert ein bestimmtes Medium.
Wenn Sie beispielsweise das Stylesheet eines Links exklusiv für Computerbildschirme gestalten möchten, können Sie das Medienattribut wie folgt zum -Tag hinzufügen:

< ;link rel=" stylesheet" type="text/css" media="screen" href="screenstyles.css" />

Der vorherige Code kann das sicherstellen Der mit „Der Stil“ verknüpfte Tag wird nur für Computerbildschirme verwendet. Vielleicht möchten Sie fragen: „Welche anderen Medien können zusätzlich zu Computerbildschirmen verwendet werden?“ Die Antwort lautet: „Es gibt viele Möglichkeiten.“ Medientyp
Zusätzlich zu dem im obigen Beispiel verwendeten Bildschirm stehen viele Medientypen zur Auswahl. Im Folgenden sind alle anerkannten Medientypen aufgeführt, wie vom W3C im CSS2.1-Standard definiert (verfügbar unter http:/). /www.php.cn/found): alle: Gilt für alle Geräte Blindenschrift: geeignet für taktile Rückmeldungsgeräte in Brailleschrift geprägt: geeignet für Braille-Seitendrucker handlich: geeignet für Handheld-Geräte (normalerweise mit kleinen Bildschirmen, begrenzter Bandbreite) Drucken: geeignet für paginierte Inhalte und Dokumente, die im Druckvorschaumodus auf dem Bildschirm angezeigt werden Projektion: Geeignet für Projektionspräsentationen, z. B. Overheadprojektoren. Weitere Informationen zu paginierten Medienformaten finden Sie im paginierten Inhalt (http://www.php.cn/). Bildschirm: Hauptsächlich für farbige Computerbildschirme geeignet Sprache: Geeignet für Sprachsynthesizer. CSS2 verfügt über einen Medientyp mit ähnlichen Funktionen namens aural. Weitere Informationen finden Sie im Auditory Style Sheet-Anhang (http://www.php.cn/). tty: Geeignet für Medien, die Textformate mit fester Breite verwenden (z. B. Telegrafenschalter, Terminals oder Handheld-Geräte mit eingeschränkten Anzeigemöglichkeiten). Entwickler sollten keine Pixellängeneinheiten in tty verwenden. tv: Für TV-Geräte (niedrige Auflösung, niedrige Farben, eingeschränkte Bildlauffunktionen, Möglichkeit zur Verwendung von Soundeffekten).
Dieses Kapitel konzentriert sich auf die Medientypen „Alle“, „Druck“ und „Bildschirm“.
                                                                        #P# Zwei Methoden zum Spezifizieren von Medien
Es gibt zwei Methoden im W3C, um Medientypen für CSS anzugeben. Eine der Methoden wird am Anfang dieses Kapitels gezeigt, nämlich die Verwendung des -Tags Wir vergleichen es. Methode A: Medienattribut

media="screen" href="screenstyles.css" />

Ähnlich wie im vorherigen Beispiel gibt Methode A an, dass screenstyles.css nur für Computerbildschirme verwendet werden sollte. Dadurch sollten Probleme wie Drucken, Projizieren, Durchsuchen mit Handheld-Geräten und die Verwendung von Bildschirmlesegeräten vermieden werden. Dabei gelten die Regeln in screenstyles.css. Teilweise Unterstützung
Es ist wichtig zu beachten, dass die strikte Unterstützung aller Medientypen etwas unrealistisch ist. In einer idealen Welt sollten sich alle Geräte und Browser strikt an die angegebenen Medientypen halten. Wenn Sie beispielsweise schreiben:

media="handheld" href="screenstyles.css" />

Dann würden Sie hoffen, dass nur Handheld-Geräte (wie PDAs, Mobiltelefone usw.) diese Stile anwenden. Leider scheint sich der Standardinhalt zum Zeitpunkt des Schreibens dieses Artikels noch nicht in der Welt außerhalb des Browsers verbreitet zu haben. Dies ist also nicht der Fall. Nicht jedes Gerät unterstützt den entsprechenden Medientyp.
Aus diesem Grund konzentrieren wir uns auf Medientypen, die in praktischen Anwendungen wie Druckstilen verwendet werden können.

Methode B: @media oder @import

Zweite Spezifikation Die Methode Der Medientyp besteht darin, die @import- und @media-Deklarationen zu kombinieren. Wenn wir beispielsweise ein externes Stylesheet mit @import einführen, können wir auch den Medientyp dafür angeben.
In ähnlicher Weise kann die @media-Regel das isolieren target Ein Regelabsatz für ein bestimmtes Medium, ähnlich wie Methode A, verwendet @media, um einen Stil speziell für den Druck anzugeben. Platzieren Sie es in oder platzieren Sie es außerhalb von
. In Methode A wird das
Im vorherigen Beispiel wird durch Angabe mehrerer Medientypen screenandprint.css sowohl für die Bildschirmanzeige als auch für Druckmedien verwendet und dann @media Die Regel wird verwendet, um druckspezifische Stile zu trennen.
Nachdem wir uns die beiden Methoden zur Angabe von Medientypen angesehen haben, werfen wir einen Blick darauf, wie man sie tatsächlich verwendet, um Stile für die Bildschirmanzeige und den Druck bereitzustellen.
                                                                        #p#
Getrennte Stile für Bildschirmanzeige und Druck
Angenommen, wir möchten zwei CSS für dasselbe Dokument bereitstellen: eines für die Anzeige und eines für den Druck.
Ich verwende es das -Tag, um auf das Haupt-Stylesheet (styles.css) der gesamten Website zu verweisen. Der Inhalt von style.css ist lediglich eine einfache @import-Regel, um ein weiteres externes Stylesheet einzuführen, damit die alten Browser (z Netscape 4.x) Stileinstellungen ausblenden.
Verknüpfen Sie im mit dem Haupt-Stylesheet „styles.css“

Gleichzeitig erstellen wir auch ein weiteres Stylesheet (print.css) speziell für das Druckdesign. In print.css habe ich a geschrieben Stil, der nur gilt, wenn die Seite gedruckt wird.

Dann stellen wir nun sicher, dass diese CSS nur auf sie abzielen bzw. Wie funktionieren die entsprechenden Medien? Fügen Sie einfach das Medienattribut zum -Tag hinzu (wie Methode A

media="screen"
href="/css/styles.css" />media="print
" href="/css/print.css" />Durch die Angabe des Bildschirms für „styles.css“ können Sie sicherstellen, dass die in „styles.css“ enthaltenen Stile nur auf dem Computerbildschirm verwendet werden. Ebenso Legen Sie das Medienattribut fest. Wenn Sie es auf Drucken festlegen, wird sichergestellt, dass die in print.css enthaltenen Stile nur verwendet werden, wenn Benutzer die Seite drucken.

Nachdem nun die Bildschirm- und Druckstile getrennt wurden, wollen wir sehen, welche Stile für die Platzierung in der Datei geeignet sind Druckstilblatt. Entwerfen Sie ein Druck-Stylesheet
Diese style.css kann Regeln wie Layout, Schriftart, Positionierung, Hintergrund usw. enthalten, aber print.css ist ein leeres Blatt Papier, das darauf wartet, dass wir die Stile anpassen, die wann angewendet werden sollen Drucken.
Der Schlüssel zum Entwerfen von Druckstilen ist der Medientyp. Da es sich um ein Blatt Papier (und nicht um ein Browserfenster) handelt, sind Pixellänge und -größe nicht die beste Wahl. Geben Sie die Größe in Punkten an
In einem Druck-Stylesheet ist es sehr sinnvoll, Punkte zur Angabe der Schriftgröße zu verwenden. Definieren Sie in diesem Druck-Stylesheet zunächst die Basisschriftgröße für das -Tag >body {

font-family: „Times New Roman“, serif;
font-size: 12pt;
}

ist im Vergleich zur Verwendung von Pixeleinheiten wirklich zu einfach, das sollte es auch Stellen Sie sich besser vor, wie groß die 12-Punkt-Schrift gedruckt wird. Gleichzeitig wählen wir auch Serifenschriften, die detaillierter im Druck sind und besser lesbar sind. Unnötige Tags ausblenden, um Tinte zu sparen

Es kann sein, dass viele Seitenelemente auf der Website in der gedruckten Version völlig nutzlos sind. Elemente wie Navigationslinks, Seitenleisten, Formulare und Werbespalten werden beim Drucken oft einfach verschwendet Mit dem Anzeigeattribut im Druck-Stylesheet können Benutzer festlegen, dass sie häufig nur den Inhalt der Seite drucken.
Wenn die Website beispielsweise mit #nav, #sidebar, #advertising und # beginnt. Suche Wenn Sie die Navigationsleiste, die Seitenleiste, die Werbeelemente und das Suchformular separat speichern, können Sie die folgende Anweisung im Druck-Stylesheet verwenden, um alle diese Inhalte auszublenden:

body {

font-family: " Times New Roman", Serif;
Schriftgröße: 12pt;
}

#nav, #sidebar, #advertising, #search {
Anzeige: keine ;
}
Durch die Einstellung display:none; im Druck-Stylesheet können wir diese Elemente im Druckergebnis ausblenden.

Versuchen Sie, sie auszublenden Wenn Sie unnötige Elemente auf der Seite hinzufügen, können Sie mit demselben Markup-Code schnell und einfach eine „druckerfreundliche“ Version Ihrer Website erstellen. Es ist nicht erforderlich, eine weitere reduzierte Vorlage zu verwenden, um einen identischen Website-Inhalt auf dem Server auszugeben eine zusätzliche CSS-Datei, geben Sie den Printmedientyp an und fertig!
Jetzt ist es wieder einmal bestätigt, dass die Organisation der Markup-Struktur mit logischen Seiten-„Absätzen“ die Gestaltung von Stilen in Zukunft erleichtert Wenn Sie ein Banner auf der Seite hinzufügen, ist es sinnvoll, eine ID anzugeben, da es dem CSS die Kontrolle gibt.
Das Entfernen von Hintergrundbildern und Farben ist auch einer der Tricks, um Tinte zu sparen und zu erstellen 1. Wenn Sie beispielsweise zuvor ein Hintergrundbild oder eine Farbe für das Tag angegeben haben, können Sie es jetzt wie folgt entfernen:

body { Hintergrund: keiner;
}

Natürlich können Sie diese Methode auch verwenden, um das Hintergrundbild und die Farbe zu entfernen, die im Bildschirmstil anderer Tags angegeben sind.
                                                                        #p#
Links freigeben

Es gibt auch einen cleveren Trick (der leider nur in Browsern funktioniert, die die CSS2-Spezifikation vollständig unterstützen), der darin besteht, Link-URLs offenzulegen und sie anschließend als Hyperlinks in den Druckergebnissen erscheinen zu lassen den Text.
Wir können die :after-Pseudoklasse verwenden, um CSS zu schreiben, sodass unterstützte Browser die URL, mit der sie verbunden ist, nach dem Hyperlink-Text ausdrucken können. Derzeit unterstützen alle Mozilla, Safari und Netscape 7.0. Gleichzeitig entsteht für Browserbenutzer, die :after nicht unterstützen, kein Nachteil, da sie nur den Hyperlink-Text selbst sehen (Eric Meyer, „CSS Design: Going to Print“, http://www.php.cn /).
Lassen Sie uns eine neue Regel zum Druck-Stylesheet hinzufügen, um die Hyperlink-URL im Inhaltsteil hervorzuheben:

body {
Schriftfamilie: „Times New Roman“, Serif;
Schriftgröße: 12pt;

}
#nav, #sidebar, #search {
display: none;
}

#content a:link:after, # content a :visited:after {


content: " (" attr(href) ") ";
}
Diese Regel Wird dazu führen, dass die URL nach dem Hyperlink-Text hinzugefügt wird und ein Leerzeichen davor und danach verbleibt. Dies wirkt sich jedoch nur auf den #content-Bereich der Seite aus eine allgemeine Regel zu schreiben, um alle Hyperlinks anzuzeigen, aber hier entscheiden wir uns dafür, Hyperlinks nur im Inhaltsteil anzuzeigen – ausgenommen Links oben, unten und in anderen Bereichen. Auch diese Funktion wird derzeit nur von wenigen Browsern unterstützt Browser, die die Pseudoklasse :after nicht unterstützen, sind völlig harmlos und ignorieren diese Regel einfach. LinktextWir haben gerade ein paar clevere Tricks bei der Link-URL gemacht, aber vergessen Sie nicht, den Linktext auf einzigartige Weise hervorzuheben, damit Leser die enthaltenen Hyperlinks beim Lesen allgemeiner Inhalte leicht erkennen können.

Körper {
Schriftfamilie: „Times New Roman“, Serif;
Schriftgröße: 12pt;

}
#nav, #sidebar, #search {
Anzeige: keine;
}

a:link, a:visited {


Farbe: blau;
Textdekoration: unterstrichen;
}#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") "; }
Bien sûr, vous pouvez également choisir n'importe quelle couleur ici. Maintenant, j'utilise le bleu par défaut et je le souligne, car la plupart des gens peuvent le voir comme un lien hypertexte en un coup d'œil. Pour l'impression en noir et blanc, vous pouvez expérimenter avec une certaine couleur grise. que les liens créent suffisamment de contraste avec le texte normal.
                                                                                      #p# Aperçu de l'impression pour économiser de l'encre
Une autre astuce pour économiser de l'encre consiste à utiliser la fonction d'aperçu avant impression du navigateur pour essayer de montrer comment la page s'imprimera, plutôt que d'imprimer réellement la page entière sur papier
Dans la plupart des navigateurs Dans le navigateur. , il existe une option d'aperçu dans la boîte de dialogue Fichier-Imprimer, qui vous permet de vérifier l'effet d'impression de la page. Vous pouvez jeter un œil à l'effet de la feuille de style d'impression ici. À quoi ça ressemble
L'utilisation d'une feuille de style d'impression sur mon site Web personnel est très similaire à l'exemple précédent que nous avons réalisé ensemble. Pouvez-vous comparer les figures 11-1 et 11-2 pour voir comment j'ai conçu la feuille de style d'impression Navigation, barre latérale ? , tout en exposant le contenu lié, en ajustant la police et la taille de la police pour rendre cet article plus facile à lire.

Figure 11-1 SimpleBits affichés dans un navigateur, à l'aide de feuilles de style d'écran
Figure 11 -2 Version imprimable SimpleBits
D'après les figures 11-1 et 11-2, on voit clairement que tant qu'un petit document CSS est utilisé, une version spéciale dédiée à l'impression peut être fournie pour n'importe quelle page. Des fonctionnalités faciles à ajouter à votre projet et qui peuvent enrichir l'expérience lorsque les utilisateurs essaient d'imprimer vos pages.
La prochaine fois, votre patron vous dira : "Nous devons créer un nouveau modèle imprimable pour le site Web" et "Exactement". la même structure de répertoires", vous pourrez sortir cette petite astuce de votre poche arrière (ou partout où vous pouvez insérer ce livre).
Si vous souhaitez en savoir plus sur les conseils de conception pour les styles d'impression, assurez-vous de lire Articles du gourou du CSS Eric Meyer « CSS Design: Going to Print » (http://www.php.cn/) et « Print Different » ( http://www.php.cn/). Résumé
Nous avons brièvement discuté des règles qui peuvent être incluses dans la feuille de style d'impression. Puisque le type de support peut être spécifié pour séparer tous les styles d'impression et d'affichage à l'écran, il est très simple d'ajuster les détails pour chaque support. facile à maintenir et à gérer. Il n'est plus nécessaire de créer une copie imprimable de l'intégralité du site Web, car vous pouvez utiliser le même code source de balisage, associé à un document CSS spécifique à l'impression pour accomplir la même fonctionnalité À l'avenir, j'espère que d'autres appareils prendront en charge davantage de types multimédia. Si la conception de styles CSS pour des appareils spécifiques peut permettre aux PDA, aux téléphones portables et aux lecteurs d'écran de lire normalement le même XHTML, notre travail sera beaucoup plus facile
.