SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

TELEKOM

Leider (nein notwendigerweise) arbeitet CSS mit einer Syntax, die sich von der HTML-Syntax deutlich unterscheidet. Lernbedarf besteht insofern, als die Mehrheit der Attribut- bzw. Eigenschaftnamen verändert ist. Ein guter Grund ist auch, daß eine große Zahl neuer Formatierungsmöglichkeiten hinzu gekommen ist. Erlernen wird man CSS anhand von Beispielen. Vorab nur ein paar wichtige Unterschiede:

Gegenüberstellung syntaktischer Elemente in HTML und CSS

Funktion HTML CSS
Zuweisung = :
Klammerung Tags erhalten Attributzuweisung innerhalb ihrer Klammern: 
<P>
   <FONT COLOR="blue" SIZE="+2">
      Test
   </FONT>
</P>

 
Test
Innerhalb eines <STYLE>-Tags werden ungeklammerte Tag-Bezeichnungen mit Attributen in CSS-Schreibung in geschweiften Klammern versehen. Der Browser muß allerdings gesagt bekommen, welche Art von Style-Angaben folgt:
<STYLE TYPE="text/css">I{color:red;font-size:8pt}</STYLE>
<i> Test 1</i>
 
Das Universalattribut "STYLE" in HTML verlangt die CSS-Syntax bei den Werte-Angaben und kommt ohne Klammer aus. 
<I STYLE="color:blue;font-size:13pt">Test2
Schluß- bzw. Trennzeichen
  • Leerzeichen trennt Attribute
  • "><" trennt unterschiedliche Tags
Beispiel: 
<TABLE BORDER="0"> 
   <TR> 
      <TD> 
         <FONT COLOR="red" POINT-SIZE="12"> 
Zellinhalt
         </FONT>
      </TD> 
   </TR> 
</TABLE>  
Schriftattribute gelten nur für diese Zelle
  • Semikolon beendet und trennt Attributeinträge innerhalb der "{...}"- Klammern, Leerzeichen können Störungen im Browser verursachen,
  • Komma trennt unterschiedliche Tagnamen, wenn sie gleiche Merkmale erhalten,
  • Leerzeichen trennen aufeinander folgende style-Definitionen
Beispiel:<STYLE TYPE="text/css">
TABLE{border:6;border-style:double}
TD{color:red;font-size:14pt}</STYLE> <TABLE>  
   <TR> 
      <TD>
Zellinhalt
      </TD> 
  </TR> 
</TABLE>

Table-Anlage vereinfacht sich, Schriftattribute gelten für alle Tabellenzellen bzw. für die Schriftart "feste Breite".
Das Beispiel ist hier nicht ausgeführt, da es, unabhängig vom Standort, alle Tabellen der Seite verändern würde.
Kommentare <!--
Kommentar in HTML
-->
Kommentar in CSS:
/* Bitte so stehen lassen! */

Wer sich auf "Style(s)" einläßt, bemerkt rasch, daß der Umgang damit, zumindest am Anfang,  etwa so übersichtlich ist, wie der mit dem Internet (= Suche nach einer Nadel im Misthaufen, welche nie drin war ...). Deshalb noch vor allen Einzelheiten der Versuch einer Differenzierung (Wenn mir dabei Fehler unterlaufen, mögen mir alle Internet-Götter verzeihen, oder mich eines/vieles Besseren belehren: Hier geht's zu mir!)

Was alles bedeutet 'STYLE'?

"STYLE" ist ein Attribut in HTML, das bei fast allen Tags verwendet werden kann. Man zählt es zu den Universalattributen. Es bezieht sich auf das jeweilige Tag und ermöglicht es, eine Tag-Formatierung im Einzelfall mit den Formatiermöglichkeiten der Style-Sheets vorzunehmen. Ein Aufruf könnte lauten:
  <H1 STYLE="color:#00ff00;font-size:36pt">

Test

Um Style-Sheet-Bereiche zu definieren ("lokale Definition"), gibt es zwei spezielle Tags: DIV und SPAN, denen dann mit dem Attribut STYLE Formatierungsanweisungen zugewiesen werden können. Der Aufruf lautete dann etwa:
<SPAN STYLE="font-style:italic;color:blue">
   Ich bin blau und stehe schief!
</SPAN>
"style" ist ein Objekt in der JavaScript-Erweiterung von Microsoft. Es ist Unterobjekt von "all"; wird mit
all.html_element.style.eigenschaft=wert oder all.html_element.style.funktion()
aufgerufen, wobei html_element hier für den Namen eines (fast) beliebigen Tags steht. Wegen dieser speziellen Art des Aufrufes kann man dieses "style" kaum mit den anderen verwechseln. Natürlich geht es bei diesem style auch um Styles im allgemeinen Sinne. Man kann damit Style-Sheet-Werte für das benannte HTML-Element erfragen, sie ändern oder löschen.
"STYLE" ist ein normales HTML-Tag mit der Aufgabe, Bereiche für Style-Sheet-Angaben zu definieren. Dabei ist die Angabe des Style-Typs erforderlich. Der Aufruf, vorzugsweise aber nicht notwendig im <HEAD>-Teil des Dokuments, erfolgt in der Form:
<STYLE TYPE="text/css">
   style_sheet_angaben
</STYLE>

Für die Style-Sheet-Angaben gilt die in der Tabelle beschriebene Syntax.
Es können für ein Tag mehrere Formate vorgesehen werden. Zur Unterscheidung wird die Tag-Bezeichnung duch '.typname' ergänzt. Dieser Name ist frei wählbar. Man könnte also drei Absatzformate mit den Namen P.rot{}, P.gelb{}, P.grün{}usw. anlegen. Man nennt diese unterschiedlichen Definitionen Klassen. Der Aufruf erfolgt dann in der allgemeinen Form <P CLASS="rot"> etc.
Klassen können auch mit allgemeiner Gültigkeit (globale Klassen) vereinbart werden. Die Sheet-Definition erfolgt dann mit dem durch '.' eingeleiteten Klassennamen. Diese Klasse ist für alle Tags verfügbar. Also nach vereinbarter Klasse '.rot{}' könnte im Dokument geschrieben werden <H1 CLASS="rot">..., <P CLASS="rot">... etc.

Beispiel

Der wichtigste Fall ist der zuletzt aufgeführte. Während bei den ersten drei Fällen nur die Eigenschaftsnamen und die syntaktischen Regeln der Style-Sheets verwendet werden, kommt es erst bei der kompletten Definition von Style-Sheets zur Verwendung der speziellen Schreibweise: Tag-Bezeichner, ggf. mehrere mit Komma getrennt, in geschweiften Klammern alle Attribut-Bezeichner, denen mit Doppelpunkt Werte zugewiesen werden. Attributzuweisungen werden mit Semikolon voneinander getrennt. Klingt komplizierter als es dann aussieht. Zeilen wie diese:
 
<STYLE TYPE="text/css"> 
   BODY{color:#663366;background-color:#f0ffff} 
   TT{font-type:tt;font-size:11pt;color:green} 
   TABLE{color:#991133;background-color:#e0e0e0} 
</STYLE>

könnten etwa im head-Teil dieser Seite stehen. Zu den Einträgen gilt im Einzelnen:
TYPE="text/css" ist der MIME-Typ, der die Befehlssyntax der Style-Sheets definiert
Es folgen die einzelnen Sheets, also hier eines für BODY{} für die Eigenschaften des Dokuments, eines für TT{} wie nichtproportionale Schrift (typewriter) und eine für TABLE{} mit speziellen Eigenschaften für die Tabellen. Davon könnten noch mehr folgen.
Die Attribute heißen teilweise anders als in HTML, mir ist bisher keine vollständige Liste der funktionierenden über den Weg gelaufen. (Die komplette Übersicht dessen, was theoretisch gehen sollte, gibt es spätestens bei der W3-Behörde.
Die Wertzuweisungen erfolgen mit Doppelpunkt und funktionieren, soweit bekannte Schlüsselwörter folgen, auch für Strings ohne Anführungszeichen. Ein Ausnahme bilden Namen von Schriften, wenn sie ein Leerzeichen enthalten (Beispiel: "Times New Roman"):

DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere