Web Design: Die Verwendung von externen und internen Style Sheets in CSS

Cascading Style Sheets (CSS) Technologie ermöglicht es Ihnen, eine Reihe von Schriftstilen zu definieren, die Sie konsequent in Ihrer Website voll umfänglich nutzen können. Zum Beispiel vorstellen, dass Sie eine große Website sind die Gestaltung und Sie wollen ein einheitliches Erscheinungsbild für alle Seiten: Alle Überschriften sollten in Arial Narrow Bold, 18-Punkt eingestellt werden (Sie echte Punktgrößen in CSS verwenden können), und ein dunkelrotes Farbe. Alle Beschriftungen sollten Verdana Italic, 11-Punkt und Stahl blau sein.

Der Vorteil von CSS ist, dass es spart Ihnen Zeit, indem Sie konsistente Einstellungen schnell anzuwenden alle Text Elemente in einer Webseite. Einen globalen Stil ändern auf Ihre Website ist daher so einfach wie eine einzige Zeile CSS-Code zu ändern.

CSS gibt es in zwei Varianten: extern Stylesheets und intern Stylesheets.

Externe Stylesheets in Web-Design

Für externe Stylesheets, definieren Sie eine Reihe von Textstile in einer CCS-Datei wie mystyles.css. Jeder Stil kann einen benutzerdefinierten Namen Ihrer Wahl haben wie .BigHeadline, .SectionHeadline, und so weiter, solange es keine Leerzeichen und der Name wird durch einen Punkt voraus. Ein Stil wie das nennt man eine Klasse in CSS-Terminologie. Nach der Definition der Klasse mit einem benutzerdefinierten Namen, Sie offene Klammern und enthalten eine Liste von Stileigenschaften wie Schriftwahl, Farbe und Größe, wie im folgenden Beispiel:

.BigHeadline {font-family: Arial, Helvetica, sans-serif-font-size: 24px; line-height: 30px; font-weight: 800-font-variant: small-caps-color: # 900-Letter-Abstand: 2px ; text-shadow: 2px 2px 3px 999999 # -} SectionHeadline {font-family: Arial, Helvetica, sans-serif-font-size: 18px; line-height: 22px; font-weight: 600-color: # 333-. Text-transform: capitalize-} 

Bei der Verwendung eines externen Stylesheets, jede Ihrer Referenzen Webseiten diese einzelne mystyles.css Datei für ihre Schrift Styling Informationen. Dies wird erreicht durch eine einzige Zeile Code in jede Web-Seite platzieren, die es sagt, wo mystyles.css online zu finden. Dann werden alle Textelemente auf der Web-Seite, die einen Ihrer benutzerdefinierten Stil Namen (wie .BigHeadline) zugeordnet sind, machen wird, wie Sie codiert haben.

Auf diese Weise, wenn Sie jemals das Bedürfnis haben eine globale Schriftwechsel zu machen - sagen wir, die .BigHeadline Farbe blau von dunkelrot ändern - Sie machen die Änderung einmal auf die Klasse in der mystyles.css CSS-Datei, und alle Web-Seiten mit Text, der die BigHeadline Stil verwenden sofort aktualisiert.

Dies sind zwei Beispiele für benutzerdefinierte CSS-Klassen bestimmt werden kann, wie Schlagzeilen und Abschnitt Schlagzeilen
Dies sind zwei Beispiele für benutzerdefinierte CSS-Klassen bestimmt werden kann, wie Schlagzeilen und Abschnitt Schlagzeilen aussehen sollte.

Interne Stylesheets in Web-Design

Interne Stylesheets sind CSS-Stile, die Sie nur für eine Seite definieren - nicht für die gesamte Website. Interne Stylesheets sind praktisch für die kleinen Nuancen finden nur auf einer Seite, obwohl es nicht die beste Praxis, sie zu nutzen. Wenn alle Ihre CSS-Codes in verschiedenen Web-Seiten verteilt sind, stellt es eine Website-Wartung Belastung: Sie müssen graben zu finden, wo alle Codes befinden. Es ist besser, alle CSS zusammen in einer Datei leicht zugängliche konsolidiert zu haben.

Interne Stylesheets, wenn Sie sie verwenden entscheiden, werden innerhalb des Tags und überschreiben externen Stylesheets, dass die Seite auch referenziert werden können. Der Klassenname und die Eigenschaftswerte gehen im oberen Bereich des HTML-Codes, wie in diesem Beispiel gezeigt:

Beispiel interner CSS-Stile 

In diesem Code können Sie sehen, dass die .headline Stil in 16-Punkt Arial Narrow Bold ist. Die # 990033 Zahl nach Farbe ist ein hexadecimalcode, die einen dunkelroten schafft. Wie Sie Überschriften Ihrer Webseite hinzufügen, können Sie sie schnell formatieren, indem die .headline Stil Anwendung, die Sie für die Seite definiert:

Schlagzeilen sind ein Kinderspiel zu formatieren

Menü