Antwort schreiben  Thema schreiben 
Verfasser Nachricht
_Kai_
be linux
**


Beiträge: 2.680
Gruppe: Programmierung
Registriert seit: Nov 2009

Status: Abwesend
Danke erhalten: 2809
Beitrag: #1
xPSP  [FAQ] Was ist CSS ? + [TUT] CSS Navigationsleiste

Cascading Stylesheets (CSS)

Was ist CSS

CSS ist eine Stylesheet-Sprache die meist in Zusammenhang mit HTML und XML Verwendung findet.

CSS Level 1 wurde erstmalig 1996 von W3C vorgestellt, konnte sich jedoch einige Jahre im Web nicht wirklich durchsetzen, was unter anderem auch der mangelnden Kompatibilität gängiger Browser zuzuschreiben war. 1998 folgte die Version 2.0, bald setze sich CSS dann auch bei den gängigen Browsern durch. Der heute verwendete Standard ist CSS Level 2.1.

Die Zeit vor CSS:
Danke dem HTML Attrbut "border=0" ist es möglich mit Tables ein unsichtbares Raster über eine Seite zu ziehen, um die Inhalte daran auszurichten. Doch das zieht mehrere große Nachteile mit sich. Zum einen wird eine nachträgliche Änderung dadurch oft aufwendig, zum anderen wird dadurch der Quelltext einer Seite, den der Client eines Besuchers ja bei jedem Aufruf neu herunterladen muss, unnötig groß.

Einsatz von CSS:

Und da sind wir auch schon beim Grundgedanken von CSS, den Quellcode des Contents vom Quellcode des Layouts zu trennen. Das HTML Dokument soll also nur Daten wie Texte, Links, Bilder und sonstige Medien sowie deren Gliederung enthalten. So werden nur Grundlegende HTML Tags verwendet. Beispielsweise enthält das HTML Dokument Div Container für Header, Contentbereich, die Navigation und der Footer. Der Seitentitel erhalten den h1 Tag, Überschriften einzelner Artikel im Contentbereich den h2 Tag, einzelne Container sind in CSS über das HTML Attribut "class" identifizierbar. Zusätzliche Attribute werden so sparsam wie möglich verwendet. Im Seitenkopf wird dann ein externes CSS File eingebunden, dass die Eigenschaften der einzelnen Elemente enthält.

Vorteile:
Bei den Vorteilen kann ich weder sagen, wo ich anfangen, noch wo ich aufhören soll.

  • Der Funktionsumfang geht weit über den von HTML hinaus.
  • Positionierung von Elementen pixelgenau möglich.
  • Schöner übersichtlicher Quellcode, was sich u.a. auch auf die Positionierung bei Suchmaschinen auswirken wird.
  • Schnellere Ladezeiten.
  • Komplette Designänderung möglich ohne den HTML Code ändern zu müssen.
  • Es ist einfach das Design über mehrere Unterseiten hinweg beizubehalten.
  • Besucher können eigene Stylesheets verwenden.

Außerdem kann ein Webmaster mehrere Stylesheets für verschiedene Medientypen zur Verfügung stellen. Beispielsweise können verschiedene Stylesheets für Handhelds, Druckversionen und Ausgabegeräte für Blindenschrift eingebettet werden.

PHP-Code:
<link href="bildschirm.css" rel="stylesheet" type="text/css" media="print" 


Wie ihr sehen könnt, wurde mit dem Attribut "media" der Medientyp für dieses Stylesheet festgelegt.

Hier ein paar Medientypen:

  • all - Für alle Geräte geeignet
  • braille - Geräte für Braille-Schrift (Blindenschrift)
  • embossed - Braille Drucker
  • handheld - Zur Ausgabe auf Geräten mit kleinen Bildschirmen
  • screen - Normaler PC Bildschirm
  • projection - Zur Ausgabe auf einem Projektor/Beamer
  • print - Druckversion
  • ...

Im Firefox kann der Besucher unter dem Menüpunkt "Ansicht => Webseiten Stil" einen der zur Verfügung stehenden Stylesheets auswählen.

CSS in HTML einbetten

Es gibt mehrere Möglichkeiten CSS zu benutzen.

Zum einen gibt es die Möglichkeit den CSS Code in HTML über <style> einzubinden

PHP-Code:
<style type="text/css">
<!-- 
CSS Code -->
</
style


Zum anderen gibt es die Möglichkeit den CSS Code für ein einzelnes Element über das style Attribut einzubinden

PHP-Code:
<p style="font size: 10px">Beispiel</p


Aber wir wollen ja den Grundgedanken bei der Sache nicht aus den Augen verlieren, ich würde empfehlen ein externes Stylesheet einzubinden um die Übersicht beizubehalten:

PHP-Code:
<link href="stylesheet.css" type="text/css" rel="stylesheet" /> 


Alternative Stylesheets einbinden:

PHP-Code:
<link rel="alternate stylesheet" href="stylesheet1.css" type="text/css" title="Style 1" media="screen">
<
link rel="alternate stylesheet" href="stylesheet2.css" type="text/css" title="Style 2" media="screen">
<
link rel="alternate stylesheet" href="stylesheet3.css" type="text/css" title="Style 3" media="screen"


Bei diesem Beispiel würden im Firefox unter dem Menüpunkt "Ansicht => Webseiten-Stil" die Styles mit den Titeln "Style 1" bis "Style 3" zur Verfügung stehen.

Doctype-Switch

Zu früheren Zeiten hielten sich die Entwickler der Browser selten an die von W3C vorgegebenen Standards. Das führte dazu dass sie so ihre Eigenarten bei der Darstellung hatten. Ein gutes Beispiel dafür ist der berühmte Box-Modell Fehler, laut W3C Standards zählen Rahmen und Abstände nicht zur Breite und Höhe von Boxen.

Die neueren Versionen der Browser richteten sich nun immer mehr an die Standards, dabei gab es nur ein Problem. Die Millionen von an die alten "Eigenarten" angepassten Webseiten im Netz.

Die Lösung war ganz einfach. Die meisten Browser unterstützten mehrere Darstellungsvarianten.

Seit CSS Level 2 parallel zu HTML 4 veröffentlicht wurde sieht W3C vor, die erste Zeile eines HTML Dokuments mit einem gültigen Doctype zu versehen. Dank dieser Neuerung war es möglich, Abwärtskompatibilität gewährleisten zu können. Falls kein oder ein falscher Doctype deklariert wurde, schaltet der Browser in den so genannten "Quirksmodus". Ist der Quirksmodus aktiv, interpretiert der Browser die Seite wie in älteren Versionen.

Die Unterschiede zwischen dem Quirks und dem Standardmodus können große Auswirkungen auf die Darstellung einer Seite nehmen, auf Details werde ich erst mal nicht weiter eingehen. Ein Beispiel wurde ja schon mit dem Box-Modell Fehler gezeigt.

In welchem Modus sich der Browser gerade befindet, lässt sich mit einem einfachen Javascript anzeigen:

PHP-Code:
javascript:alert(document.compatMode


Im Firefox ist die Rückgabe im Quirksmodus == BackCompat.
Im Standartmodus hingegen == CSS1Compat.

Der Quirksmodus ist heute weitestgehend überflüssig. Wird aber noch oft von Ahnungslosen Webmastern benutzt die ihr HTML Dokument mit <HTML> beginnen.

Weil mein Kopf schon raucht ist an dieser Stelle ERSTMAL Ende. Hier noch ein paar Linkempfehlungen:

Informationen zum CSS Level 2 Rev 1 Standart des W3-Konsortiums:
http://www.w3.org/TR/CSS2/

RFC 2318 - text/css
ftp://ftp.rfc-editor.org/in-notes/rfc2318.txt

CSS-Validator:
http://jigsaw.w3.org/css-validator/check/referer

SelfHTML Dokumentation zum Thema CSS:
http://de.selfhtml.org/css/


PSVita mit 16gb Memorystick und PlayStation+
+ Uncharted + Army Corps of Hell + Assassins Creed
+ NFS Most Wanted + COD Black Ops + Resistance
+ Everybodys Golf + Modnation Racers
Für PSN ID => PN

Dieser Beitrag wurde zuletzt bearbeitet: 02.07.2011 04:11 von _Kai_.

06.02.2011 19:25
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Folgende User bedanken sich:
Gin-Chan (Apr-11-2012), Luigi Boy (Jul-2-2011), Geicher (May-8-2011), speedy (May-5-2011), Cha0z (Feb-14-2011), loveless74 (Feb-13-2011), EuRoFiGHTeR (Feb-12-2011), noobie (Feb-12-2011), dark-awesome (Feb-12-2011), Total_AMD (Feb-11-2011), PSPslayer (Feb-10-2011), pspbricker (Feb-9-2011), m33leads (Feb-9-2011), Sammler (Feb-7-2011), alexking (Feb-7-2011), PSPManu (Feb-6-2011), Lett1 (Feb-6-2011), WinterFrost (Feb-6-2011)
dark-awesome
stehn


Beiträge: 3.204
Gruppe: Banned
Registriert seit: Jul 2010

Status: Offline
Danke erhalten: 2192
Beitrag: #2
xPSP  RE: [FAQ] Was ist CSS ?

Könntest ja noch das zum Anfang hinzufügen:

Der erste Vorschlag für Web-Stylesheets kam 1993 auf, mehrere weitere folgten bis 1995. Cascading Style Sheets (CSS), wie sie aktuell bekannt sind, wurden 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, zusammenzuarbeiten und CSS zu entwickeln.

Aber ansonsten Top thumb


West Zeit / Westside

Dieser Beitrag wurde zuletzt bearbeitet: 12.02.2011 22:12 von dark-awesome.

12.02.2011 22:11
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
_Kai_
be linux
**


Beiträge: 2.680
Gruppe: Programmierung
Registriert seit: Nov 2009

Status: Abwesend
Danke erhalten: 2809
Beitrag: #3
xPSP  RE: [FAQ] Was ist CSS ?

stehn :
Der erste Vorschlag für Web-Stylesheets kam 1993 auf, mehrere weitere folgten bis 1995. Cascading Style Sheets (CSS), wie sie aktuell bekannt sind, wurden 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, zusammenzuarbeiten und CSS zu entwickeln.


Das hast du von Wikipedia kopiert.

Aber ansonsten Top thumb


PSVita mit 16gb Memorystick und PlayStation+
+ Uncharted + Army Corps of Hell + Assassins Creed
+ NFS Most Wanted + COD Black Ops + Resistance
+ Everybodys Golf + Modnation Racers
Für PSN ID => PN
12.02.2011 22:18
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Folgende User bedanken sich:
dark-awesome (Feb-12-2011)
PSPManu
Junior Mitglied
**


Beiträge: 24
Gruppe: User
Registriert seit: Dec 2009

Status: Offline
Danke erhalten: 28
Beitrag: #4
xPSP  RE: [FAQ] Was ist CSS ?

stehn :
Könntest ja noch das zum Anfang hinzufügen:

Der erste Vorschlag für Web-Stylesheets kam 1993 auf, mehrere weitere folgten bis 1995. Cascading Style Sheets (CSS), wie sie aktuell bekannt sind, wurden 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, zusammenzuarbeiten und CSS zu entwickeln.

Aber ansonsten Top thumb


Huch das kenn ich irgendwo her.... hmmm.. ah jetz hab ichs

http://de.wikipedia.org/wiki/Cascading_Style_Sheets

Respekt, du bist scheinbar Wikipedia Autor, oder wie ist das zu verstehn?

Edit: mhhh PSP-Hilfe war doch noch schneller

Dieser Beitrag wurde zuletzt bearbeitet: 12.02.2011 22:21 von PSPManu.

12.02.2011 22:19
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
dark-awesome
stehn


Beiträge: 3.204
Gruppe: Banned
Registriert seit: Jul 2010

Status: Offline
Danke erhalten: 2192
Beitrag: #5
RE: [FAQ] Was ist CSS ?

Nein er kann es ja umformulieren wollte bloß damit andeuten das dass nicht unerwähnt bleiben soll Wink


West Zeit / Westside

12.02.2011 22:22
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Folgende User bedanken sich:
Musik_Arab (Feb-12-2011)
_Kai_
be linux
**


Beiträge: 2.680
Gruppe: Programmierung
Registriert seit: Nov 2009

Status: Abwesend
Danke erhalten: 2809
Beitrag: #6
xPSP  CSS Navigationsleiste

Mit Hilfe von CSS lässt sich kinderleicht folgender HTML Code zu einer schönen Navigationsleiste mit grafischen Buttons formatieren.

PHP-Code:
<div class="toolbar">
<
a href="#">Startseite</a>
<
a href="#">Unterseite 1</a>
<
a href="#">Unterseite 2</a>
<
a href="#">Unterseite 3</a>
</
div




Wie auf dem Bild zu sehen stellt der HTML Code normalerweise 4 einfache Textlinks dar, als Erstes verpassen wir den einzelnen Ankern eine Umrandung, damit sie wie Buttons wirken.

PHP-Code:
.toolbar a {
border3px solid black;


Wir sprechen hier auf die "a" Elemente innerhalb des "div" Containers mit dem Attribut "class=toolbar" zu. Elemente können statt dem "class" Attribut wahlweise mit "#toolbar" auch über das "id" Attribut angesprochen werden.

Mit "border" definieren wir den Rahmen, er soll eine Breite von 3 Pixeln haben. Mit "solid" bekommen wir eine durchgehende Linie als Rahmen, andere mögliche Werte wären hier z.b. "dashed" für eine gestrichelte oder "dotted" für eine gepixelte Umrandung. Black ist natürlich die Farbe.

Wir hätten diese 3 Eigenschaften auch einzeln definieren können:

PHP-Code:
border-width3px;
border-stylesolid;
border-colorblack


Aber die erste Variante ist natürlich einfacher. Das Ganze sieht jetzt so aus:



PHP-Code:
.toolbar a {
border3px solid black;
background-color#B51515;
text-decorationnone;
color#FFFFFF;


Mit "background-color" definieren wir die Hintergrundfarbe, wie ihr seht, können auch Hex Werte verwendet werden, hier ein dunkles Rot. Mit "text-decoration: none" entfernen wir den Unterstrich der Links, mit "color" wird die Textfarbe definiert.

Das Ganze nimmt gestalt an:



Mit "padding: 5px;" können wir noch den Abstand zum Rand etwas erweitern.



Die Navigationsleiste sieht jetzt schon ganz ordentlich aus, jetzt können wir noch einen Effekt hinzufügen, der die Farben ändert wenn man mit der Maus über einen Button fährt.

PHP-Code:
.toolbar a:hover {
color#B51515;
background-color#FFFFFF;




Und hier noch der komplette Code:

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
    <
head>
        <
title>Toolbar</title>
        <
style type="text/css">
        .
toolbar {
            
padding5px;
        }
        
        .
toolbar a {
            
border3px solid black;
            
background-color#B51515;
            
text-decorationnone;
            
color#FFFFFF;
            
padding5px;
        } 
        
        .
toolbar a:hover {
            
color#B51515;
            
background-color#FFFFFF;
        
}
        </
style
    </
head>
    
    <
body>

        <
div class="toolbar">
        <
a href="#">Startseite</a>
        <
a href="#">Unterseite 1</a>
        <
a href="#">Unterseite 2</a>
        <
a href="#">Unterseite 3</a>
        </
div>
    
    </
body>
</
html


Mit "display: block;" können die Buttons horizontal ausgerichtet werden, allerdings muss dem Div Container dazu eine Breite zugeteilt werden, da die Buttons sich sonst über die komplette Bildschirmbreite strecken

Vorschau


PSVita mit 16gb Memorystick und PlayStation+
+ Uncharted + Army Corps of Hell + Assassins Creed
+ NFS Most Wanted + COD Black Ops + Resistance
+ Everybodys Golf + Modnation Racers
Für PSN ID => PN

Dieser Beitrag wurde zuletzt bearbeitet: 03.07.2011 01:22 von _Kai_.

02.07.2011 04:02
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Folgende User bedanken sich:
sike0ne (Jul-2-2011), James_Cutter (Jul-2-2011)
James_Cutter
TeamCheyTac
*****


Beiträge: 1.084
Gruppe: User
Registriert seit: Jul 2009

Status: Offline
Danke erhalten: 1055
Beitrag: #7
xPSP  RE: [FAQ] Was ist CSS ? + [TUT] CSS Navigationsleiste

Nice1, vielleicht wäre ein kleines Tut für ein einfaches dropdownmenü noch gut




Kein Support mehr per PM

Dieser Beitrag wurde zuletzt bearbeitet: 02.07.2011 12:20 von James_Cutter.

02.07.2011 12:19
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
_Kai_
be linux
**


Beiträge: 2.680
Gruppe: Programmierung
Registriert seit: Nov 2009

Status: Abwesend
Danke erhalten: 2809
Beitrag: #8
xPSP  RE: [FAQ] Was ist CSS ? + [TUT] CSS Navigationsleiste

James_Cutter :
Nice1, vielleicht wäre ein kleines Tut für ein einfaches dropdownmenü noch gut


Ist auch nicht viel komplizierter, werd ich heute Abend vieleicht noch einfügen Wink


PSVita mit 16gb Memorystick und PlayStation+
+ Uncharted + Army Corps of Hell + Assassins Creed
+ NFS Most Wanted + COD Black Ops + Resistance
+ Everybodys Golf + Modnation Racers
Für PSN ID => PN
02.07.2011 14:59
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Antwort schreiben  Thema schreiben 

Druckversion anzeigen
Thema einem Freund senden
Thema abonnieren | Thema zu den Favoriten hinzufügen




» zum Seitenanfang