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.
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"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
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.
font-family: „Times New Roman“, serif;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.
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
font-family: " Times New Roman", Serif;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!
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.
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.
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
}
#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.
}
#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'écranFigure 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
.
