CSS Intro




Unser nächster Schritt ist CSS (Cascading Style Sheets), ein wichtiges Instrument für die heutigen Web Designer zu lernen.
Was ist CSS?

CSS ist die Abkürzung für: "Cascading Style Sheets". CSS ist die Schwester Sprache HTML, dass Sie Ihre Web-Seiten zu gestalten, ermöglicht. Ein Beispiel für einen Stilwechsel wäre Worte fett zu machen. In Standard-HTML würden Sie das Tag <b> wie so verwenden:

  <B> machen mich fett </ b> 

Das funktioniert gut, und es ist nichts falsch mit ihm per se, mit der Ausnahme, dass jetzt, wenn Sie wollte zuerst den Text, sagen wir, zu ändern, die Sie zunächst fett gemacht unterstrichen, würden Sie auf jeder Seite zu jedem Punkt gehen und den Tag ändern .

Ein weiterer Nachteil kann bei diesem Beispiel zu finden: Sie sagen, die oben Text fett, machen den Schriftart Verdana und ändern ihre Farbe auf Rot machen wollte würden Sie eine Menge Code um den Text eingewickelt müssen:

  <Font color = "# FF0000" face = "Verdana, Arial, Helvetica, sans-serif">
 <B> Dieser Text </ b> </ font> 

Dies ist die ausführliche (wortreich) und trägt Ihre HTML chaotisch zu machen. Mit CSS können Sie einen benutzerdefinierten Stil anderswo erstellen und alle seine Eigenschaften, geben Sie ihm einen eindeutigen Namen und dann "Tag" Ihre HTML diese stilistischen Eigenschaften anzuwenden:

  <P class = "myNewStyle"> My CSS Stil Text </ p> 

Und zwischen den <head> </ head> -Tags an der Spitze Ihrer Webseite würden Sie diese CSS-Code einfügen, die den Stil definiert wir nur angewandt:

  <style type = "text / css">
 <! -
	 .myNewStyle {
		 font-family: Verdana, Arial, Helvetica, sans-serif;
		 font-weight: bold;
		 color: # FF0000;
	 }
 ->
 </ style> 

Im obigen Beispiel sind wir das Stylesheet-Code inline, oder mit anderen Worten, auf der Seite. Das ist in Ordnung für kleinere Projekte oder in Situationen, in denen die Stile Sie definieren, wird nur auf einer einzigen Seite verwendet werden.

Es gibt viele Male, obwohl, wenn Sie Ihre CSS-Stile zu viele Seiten Anwendung sein wird, und es ist ein Streit zu haben, den CSS-Code in jede Seite zu kopieren und einfügen. Neben der Tatsache, dass Sie jede Seite mit doppelten CSS-Code wird unübersichtlich, finden Sie auch mit sich selbst jede dieser Seiten zu bearbeiten ... wenn Sie einen Stil ändern wollen.

Die Lösung: wie mit JavaScript können Sie Ihre CSS - Stil in einer separaten Datei definieren / erstellen und verknüpfen Sie dann auf die Seite , die Sie den Code anwenden möchten:

  <Link href = "myFirstStyleSheet.css" rel = "stylesheet" type = "text / css"> 

Die obige Codezeile verknüpft Ihre externen Stylesheets 'myFirstStyleSheet.css' auf das HTML-Dokument genannt. Sie diesen Code zwischen dem <head> </ head> -Tags in Ihrer Webseite ein.

ein externes Stylesheet zu erstellen alles, was Sie tun müssen, ist ein einfaches Textdokument erstellen (unter Windows Sie einfach mit der rechten Maustaste und wählen Sie Neu -> Textdokument) und dann von einem Dateityp .txt ändern .css. Sie können den Dateityp ändern, indem Sie einfach die Dateinamen-Erweiterung ändern. Die Erweiterung des Dateinamen auf Windows teilt dem Computer mit, welche Art von Datei es sich handelt und ermöglicht dem Computer, um zu bestimmen, wie die Datei zu handhaben, wenn zum Beispiel, Sie versuchen, es zu öffnen.

Sie ahnen es wahrscheinlich,. CSS - Dateien sind nur speziell (speziell) formatierten Text in der gleichen Art und Weise viel Dateien , die HTML - Seiten sind Es ist nichts Besonderes oder anders über die Datei selbst, sondern es ist der Inhalt der Datei , die ein CSS - Dokument macht ein CSS-Dokument.

Wenn Sie mit einem externen CSS-Dokument arbeiten gibt es ein paar Punkte zu beachten:

1. Sie fügen Sie nicht diese Tags in der CSS-Dokument / Seite selbst als würden Sie, wenn Sie den CSS-Code in Ihre HTML eingebettet:

  <Style type = "text / css"> </ style> 

Da der Link in Ihrer Web-Seite die CSS Seite an Ihre HTML-Seite verbinden, sagt, dass Sie eine CSS-Seite verweisen, brauchen Sie nicht zu erklären, dass der Code in der Seite CSS ist. Das ist, was die oben genannten Tags tun. Stattdessen würden Sie einfach Ihre CSS-Code direkt auf die Seite hinzufügen:

.myNewStyle { font-family : Verdana , Arial , Helvetica , sans-serif ; font-weight : bold ; color : #FF0000 ; } .my2ndNewStyle { font-family : Verdana , Arial , Helvetica , sans-serif ; font-weight : bold ; color : #FF0000 ; } .my3rdNewStyle { font-family : Verdana , Arial , Helvetica , sans-serif ; font-weight : bold ; font-size : 12pt ; color : #FF0000 ; } 

In dem obigen Beispiel habe ich eine Reihe von CSS Klassen erstellt, die für jede HTML-Tag wie so angewendet werden kann:

  <P class = "myNewStyle"> My CSS Stil Text </ p> 

oder

  <H2 class = "my3rdNewStyle"> My CSS Stil Text </ h2> 

Sie werden feststellen, dass in dem obigen Beispiel, das ich einen CSS-Stil zu einem <h2> -Tag angewendet. Dieses Tag stellt die Größe des Textes, den er zu einer Größe wickelt, die im Browser voreingestellt (ex: 10 Punkte). Wenn Sie eine CSS-Klasse für sie gelten, überschreibt der CSS-Code die Standard-Größe, die Sie normalerweise mit einem <h2> -Tag zugunsten der angegebenen Größe in der CSS-Klasse bekommen würde. So, jetzt können Sie, dass CSS sehen Standard-HTML-Tag-Verhalten außer Kraft setzen können!

In den obigen Beispielen habe ich CSS-Code, wo ich meine CSS-Klassen definieren und dann "gelten", sie auf verschiedene Elemente auf der Seite. Eine andere Möglichkeit, CSS anzuwenden ist global ein HTML-Tag neu definieren eine bestimmte Art und Weise zu suchen:

  h1 {font-family: Garamond "Times New Roman", serif; font-size: 200%;} 

Was diese CSS-Code tut gesetzt wird, um die Schriftart und Schriftgröße aller <h1> Tags in einem Schuss. Jetzt müssen Sie nicht eine CSS-Klasse gelten wie wir vor einem <h1> -Tag, da sie automatisch alle betroffen von den CSS-Stilregeln sind.

Hier ist ein weiteres Beispiel dafür, wo gebe ich die ganze Seite in größeren Margen:

  body {margin-left: 15%; margin-right: 15%;} 

Wie Sie sehen können, können Sie jeden Tag neu zu definieren und die Art und Weise es aussieht! Dies kann sehr mächtig sein:

 div {background: rgb (204, 204, 255); padding: 0.5em; border: 1px solid # 000000;} 

In dem obigen Code, jede <div> </ div> Tag haben nun eine Hintergrundfarbe von 'rgb (204.204.255)' und haben eine Polsterung von 0.5em und eine dünne 1-Pixel-Grenze, die schwarz ist.

Ein paar Dinge, über die oben genannten zu erklären:

Farbe in CSS kann in ein paar Möglichkeiten ausgedrückt werden:

    In Hex -> zum Beispiel: # 000000 - das ist schwarz, und dies: # FF0000 ist rot.
    In rgb -> rgb (204204255) ist ein Licht lila-blaue Farbe.
    Mit dem Namen Farben wie: 'red' oder 'blau' 

Ich benutze normalerweise hex Farbe, da ich mit ihnen vertraut bin, oder ich verwende nur benannte Farben. So kann das letzte Beispiel, wie so neu geschrieben werden:

  div {
	 Hintergrund: grün;
	 padding: 0.5em;
	 border: 1px solid # FF0000;
 } 

Also statt "rgb (204.204.255) ', ich angegeben nur" grün ".

Durch die Verwendung von RGB (RGB ist die Abkürzung für: 'Red Green Blue') und Hex Farbe, können Sie wirklich die genaue Farbe, die Sie wollen einfach erhalten, wenn Sie Ihre Codes kennen. Zum Glück viele Programme (wie Dreamweaver) bieten einfach für Sie Farbwähler zu verwenden, so dass Sie die Werte für den Code nicht wissen müssen.

In diesem letzten Beispiel zeige ich Ihnen die "super cool" CSS-Code, die Sie Link Roll-over-Effekte ohne Bilder erstellen können:

 : link {color: rgb (0, 0, 153)} / * für nicht besuchte Links * /: visited {color: rgb (153, 0, 153)} / * für besuchte Links * /: hover {color: rgb (0 , 96, 255)} / * , wenn die Maus über Link ist * /: active {color: rgb (255, 0, 102)} / * wenn Link geklickt wird * / 

Die obige CSS wird dazu führen, dass Link die Farbe zu ändern, wenn jemand ihre Mauszeiger darüber, Instant-Rollovers ohne Bilder schwebt! Eine wichtige Anmerkung mit dem obigen Code ist, dass es wichtig ist, dass die Art Erklärungen in der richtigen Reihenfolge sein: "link-visited-Hover-aktiv", sonst kann es in einigen Browsern brechen.

CSS ist sehr leistungsfähig und ermöglicht es Ihnen, die Dinge zu tun, die Sie nicht mit Standard-HTML tun können. Es wird in allen modernen Browsern schön jetzt unterstützt und ist ein Muss Werkzeug für Web Designer lernen.

Die oben genannten Beispiele sind nur eine kleine Auswahl dessen, was Sie mit CSS zu tun, aber es sollte mehr als genug sein, für Sie schön Styling Ihre Seiten zu beginnen. Wie bei vielen Technologien, hat CSS viel Fähigkeit, die meisten Leute nicht oft, wenn überhaupt verwenden müssen. Lassen Sie sich nicht in die Falle des Denkens gefangen, wenn es einige Funktionen / Features verfügbar ist, dass Sie es zu benutzen. 








Name:
Email:
Nachricht:
 
xhtml
akan google plus
akan facebook
akan twitter
akan instagram
css