Fonts - CSS - Lernen Basic HTML

Zurück ◈ Weiter

Fonts (Schriftbild) spielen eine große Rolle in dem Look and Feel einer Web-Seite. Wo keine weiteren Änderungen angegeben sind, Browser ist so programmiert, dass eine Standard-Schriftart zu verwenden:

Dies ist der Standard-Browser Schrift (Times New Roman, schwarz).

Arial
Arial Black
Comic Sans MS
Kurier
Courier New
Einfluss
Times New Roman
trebuchet MS
Verdana

Es gibt zwei Möglichkeiten, um die Standard-Schriftart in Browser zu ändern:

HTML Schriftstile

HTML Schriftstile sind das ursprüngliche Verfahren zur Bestimmung der Standardschriftart zu ändern (die immer noch funktioniert, übrigens). Dies erfordert den Text mit einem umgebenden Tags und die Schriftart (Art-Stil), Größe und Farbe spezifiziert - in jedem Absatz, Textauswahl oder mitten im Satz Schriftart ändern.

Beachten Sie, dass wir serifenlose unserer Schriftart Auswahl hinzugefügt haben:

Dies ist eine Schriftart.

Dies kann ziemlich viel zu tun bekommen; beachten Sie, wie sich die Font-Tags verschachtelt sind (es kann tatsächlich noch schlimmer, aber das ist genug, um zu Veranschaulichungszwecken).

Das ist ein Schriftart .

CSS Schriftstile

C ascading S tyle S heets: ein "style" ist ein Schriftstil. Unter anderem ist CSS ein Verfahren anzugeben, wie Schriftarten angezeigt werden soll. Die Spezifikationen „Kaskade“, weil späte Spezifikationen frühere außer Kraft setzen, so wie eine spätere Bestellung überschreibt eine früheres.

Es gibt drei Möglichkeiten CSS-Stile zu implementieren; diese haben Vorrang oder „Kaskade“, wie folgt, mit dem letzten Vorrang vor dem ersten:

Doch wie bei allen Dingen Web, schlagen wir vor, dass Sie Ihre Ergebnisse in mehreren Browsern testen.

. Inline-Styles

Inline-Stil.

Beachten Sie, dass Sie in der Regel müssen nicht CSS-Stile aus mit einem schließenden Tag drehen.

. Intern Styles (Seite weit)

CSS-Stile können auf eine gesamte Seite angewendet werden.

Noch besser wäre es: Sie können angeben, dass sie HTML-Tags anwenden - und können auch Ihre eigenen Stile bilden angewendet werden, wo Sie es wünschen.

Zuerst stellen Sie den CSS-Bereich in der oben -Tag. Zunächst identifizieren wir in einem

. Restyling HTML Stichworte

Als nächstes wollen wir einen neuen Stil der zuweisen

Tag, der Effekt dann nehmen, wenn die

Tag verwendet wird, ohne dass Sie etwas anderes zu tun. Wir spezifizieren Farbe. Schriftgröße. und die Schriftfamilie.

Beachten Sie, dass wir die „geschweifte Klammern“ verwenden - und> - in unseren Stil-Spezifikationen.

Schließlich beachten Sie, dass Sie die Schriftgrößen in Punkten (pt) oder Pixel (px) zuweisen können.

Ergebnisse. der p style wirksam wird, wenn Sie eine verwenden

Tag - ohne irgendetwas anderes mit dem Tag zu addieren!

Dies ist die neue p style!

. Klassen - Custom Styles

Wir werden einen benutzerdefinierten Stil bilden genannt angewendet werden, wo wir für richtig halten. Benutzerdefinierte Stile sind „Klassen“ genannt. Beachten Sie auch, dass unsere eigene Art, .title. hat eine Periode vor ihm, was darauf hindeutet, dass es sich um eine Klasse ist. Sie können Klassen, was Sie wollen nennen, aber nicht vergessen, die Zeit!

Um unseren eigenen Stil oder „Klasse“ zu verwenden, fügen wir es zu einem HTML-Tag der „Klasse“ Spezifikation verwendet wird; beachten Sie, dass wir nicht die Zeit verwenden, wenn es in die HTML einfügen - und dass es zu einem Tag hinzugefügt werden kann, die bereits einen zugewiesenen Stil hat:

Dies ist der p-Tag mit der Titel-Klasse hinzugefügt.

Intern Styles zu ändern ist einfach: die Stile in dem ändern -Tag.

Notizen. der Stylesheet-Datei Name muss in .css beenden.
Stellen Sie sicher, dass der Link auf das Stylesheet korrekt ist; das heißt, wenn stylesheet.css in Ihrer Wurzel oder „main“ -Ordner, dann Seiten in Unterordner sollten es als href = „../ stylesheet.css“ verweisen, um anzuzeigen, dass es ein Ordner nach oben.

Die Codierung für Stile im Stylesheet selbst ist die gleiche wie für Inline-Styles ohne andere Schreibweisen:

Das ist alles was man braucht!

. Span Tag

Das ist ein Demonstration Satz.

Dies ist ein demonstrationsentence.

. A (Short) Liste der CSS-Stile

Dies ist eine sehr kurze Liste von CSS Stylings:

Denken Sie daran, dass nicht alle Browser CSS unterstützen; immer testen Sie Ihre Seiten in mehreren Browsern. Welche? Es hängt davon ab, was Ihr Publikum verwendet.

Um die Links entsprechen Ihr Design, können Klassen auf Links angewandt werden über den a href-Tag.

Hier ist ein Link mit einer Klasse hinzugefügt.

. Text Rollovers

„Rollovers“ normalerweise auf Bilder verweisen, wenn Sie über sie den Cursor zu ändern, wie ein Menü-Taste, die gedrückt aussieht, wenn Sie darüber Cursor. Was tatsächlich passiert ist, dass, wenn Sie über die Original-Taste Cursor wird „ausgelagert“ für ein anderes Bild:

Ein solches Menü erfordert den ursprünglichen Satz von Schaltfläche Bilder, eine Reihe von „gedrückt“, um Bilder und einen ganzen Haufen von Code, um den Schalter zwischen den beiden zu bewirken. Dies bewirkt, dass Ihre gesamte Seitengröße und Downloadzeit (für die Verwendung von anderen Bildern einer Senkung auf Ihrem Spielraum) erhöhen - und erfordert Messing mit Bildern, wenn Sie das Menü ändern mögen.

Glücklicherweise gibt CSS uns einige Werkzeuge auch hier: die Fähigkeit, ein regelmäßiger Text-Link zu verursachen Aussehen zu ändern, wenn Sie über ihn Cursor. In CSS wird dieser Effekt schweben genannt. Um zu demonstrieren, werden wir einen Menü-Link machen. Nehmen wir an, dass wir zunächst betont werden, nicht über die Menü-Links wollen:

Der Code für den Link selbst (beachten Sie, dass die CSS-Klasse auf den Link angewendet wird, anstatt die

Tag):

Zuhause

Nun Cursor über unser Menü-Link: Home
[Anmerkung: Da Text Rollovers, nicht in Adobe Acrobat angezeigt werden
Sie können sie in unserem Menü DianeV Web Design Hilfe anzuzeigen.]

Unser „schweben“ -Stil oben auf eine aufgetragen. das heißt, alle a href-Tags. Wenn Sie möchten, trennen „Rollover“ Stile regelmäßig Links und Menülinks zuzuordnen:

CSS Probleme:

Weitere Informationen über CSS (und große Verwendungsbeispiele), besuchen w3schools.com. Wenn Sie CSS möchten, bereiten Sie begeistert zu sein!

In Verbindung stehende Artikel

Zurück ◈ Weiter