Herzliches Hallo! Wir, die MMORPG-Core Community, heißen dich bei bei uns Herzlich Willkommen. Schön das du ein Teil unserer Community geworden bist. Damit wir etwas mehr von dir erfahren, wäre es schön wenn du dich im Forum Vorstellst ( HIER ). So findest du am schnellsten Gleichgesinnte. Du musst uns natürlich nicht alles von dir erzählen. Gut wären Infos wie z.B: Natürlich soll dies nicht nur ein Forum zum Spieler finden diverser Online Spiele, wir bieten dir auch einige eigene Server an. Derzeit bieten wir dir World of Warcraft, Minecraft und ARK Survival Evolved an. Auch einen The Forest Server gibt es noch und einen Drift City Test Server ( noch in der Entwicklung ). Du bietest einen Server an oder suchst Team Mitglieder oder suchst sogar selbst ein bestehndes Team? Dann bist du bei uns ebenfalls richtig gelandet. In der Server Vorstellungs Sektion kannst du bequem deinen Server Vorstellen um neue Mitspieler zu finden. Oder aber Team Mitspieler oder ein bestehendes Team kannst du ganz einfach in unserer Ich/Wir suche(n) Sektion suchen und finden. Falls du Fragen oder Vorschläge hast dann kannst du mich jederzeit per PN erreichen. ( Moody privat kontaktieren ) Am besten du stöberst einfach durch unser Forum und vielleicht findest du ein passendes Thema. Wir freuen uns mehr von dir zu erfahren und ggf. sehen wir uns Ingame. Bis dahin, Liebe Grüße, Dein MMORPG-CORE Team

Ankündigung

Einklappen

WIR SUCHEN DICH! [Redakteur]


Wir suchen dich!
Du bist leidenschaftlicher Gamer und möchtest über das was du Zockst schreiben?
Dann Bewerbe dich als Redakteur bei uns.
Wir bieten dir Zugang zu neuen Spielen, große Beitrags Reichweite und vieles mehr.
Mehr Infos findest du HIER zum nachlesen.
Mehr anzeigen
Weniger anzeigen

[Einsteiger] Css für Anfänger

Einklappen
Das ist ein wichtiges Thema.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Einsteiger] Css für Anfänger

    Guten Tag GodLikerz
    Heute führe ich euch etwas ein in css
    So dann mal los...

    CSS steht für Cascading Style Sheets, und sollen das Leben eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt. CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt. Der IE 6 hängt noch ein wenig nach.
    Über CSS kann man das Aussehen von bestimmten HTML Elementen definieren.

    Ein einfaches Beispiel:


    PHP-Code:
    <p><font color="#ff0000">Ein Text</font></p
    Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden, z.B. in einem Menü, oder einem anderen Element. Möchten Sie nun, das der Text blau dargestellt wird, dann müssten Sie in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
    Dies ist schon viel Aufwand, doch stellen Sie sich das einmal bei 100, 200 oder gar 300 Unterseiten vor?

    Die Lösung bringt CSS mit sich. Über CSS kann man, wie bereits erwähnt das Aussehen, also die Formatierung von Elementen definieren. Folgende CSS Anweisung würde das oben beschriebene Problem lösen:

    PHP-Code:
    p               {color#0000ff } 
    Diese CSS Anweisung wird in einer Datei *.css gespeichert, und in die jeweiligen HTML Dateien über eine Anweisung im <head> Bereich (siehe unten) eingebunden. Sie definiert, das alle <p> Tags blau dargestellt werden.

    Stylesheets einbinden

    Eine CSS Style Definition kann auf zwei Möglichkeiten in eine HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen, oder, das die Styleanweisungen im <head> Bereich jeder Seite definiert werden.
    Eine weitere Möglichkeit, ist die Verwendung des style-Attributes bei HTML Tags, die auf diese Weise direkt formatiert werden.

    1. Einbindung einer ausgelagerten CSS Datei:
    <link rel="stylesheet" href="style.css" type="text/css">
    Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die die Style-Definitionen verwenden soll. Über das href-Attribut wird auf die Adresse der Stylesheet Datei verwiesen.
    2. Styledefinition im head-Bereich
    Die Styledefinitionen im <head> Bereich werden durch den <style> Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden werden:

    PHP-Code:
    <style type="text/css">
                  
    p               {color#0000ff}               
                  
    </style
    Hierbei steht man natürlich wiederum vor der Problematik, dass das Stylesheet bei einer Änderung in jeder Datei geändert werden muss.
    3. Styledefinitionen bei einem Element
    Man kann CSS Style, durch das style-Attribut direkt bei einem Element definieren. Das obere Beispiel würde wie folgt aussehen:
    PHP-Code:
    <p style="color: #0000ff">Der Text</p
    Elemente und Klassen

    Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren. So definiert folgende CSS Anweisung, das alle Überschriften (<h1>) Rot sein sollen.

    PHP-Code:
    h1               color#ff0000 } 
    Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften definieren möchten. So soll z.B. eine Überschrift grün, die andere Rot sein.
    Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen werden, wenn dieses Element über die jeweilige Klasse definiert werden soll.

    Ein Beispiel veranschaulicht dies:
    PHP-Code:
    style.css 
                  
    .rot               {color#ff0000}               
                  
    .gruen               {color#00ff00}               
                  
                  
    css_1.html 
                  
    <html><head>
                  <
    title>
                  
    CSS Beispiel 2 
                  
    </title>
                  <
    link rel="stylesheet" href="style.css" type="text/css">               
                  </
    head>
                  <
    body>
                  <
    h1 class="rot">Rote Ueberschrift</h1>
                  <
    h1 class="gruen">Gruene Ueberschrift</h1>
                  </
    body>
                  </
    html
    Das Ergebnis im Browser (kann man sich schon vorstellen):

    CSS Klassen anwenden


    Über die class-Attribute muss also auf die Klassendefinition in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.

    Was ist nun eine Klasse erster Ebene?

    Eine Klasse erster Ebene ist für alle HTML Tags, die sich im <body> Bereich befinden, anwendbar.
    Man kann auch Klassen definieren, die sich nur auf einen HTML Tag beschränken. Die Klasse kann dann von anderen Tags nicht mehr aufgerufen werden.
    Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen. Dabei müssen Sie die Klassendefinitonen wie folgt verändern.

    PHP-Code:
    style.css 
                  h1
    .rot               {color#ff0000}               
                  
    h1.gruen               {color#00ff00} 
    Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese Klassen können jedoch nur von <h1> Tags aufgerufen werden. Ein Aufruf z.B. über <p class="rot"> würde nicht "funktionieren".

    Mehrere HTML Befehle "gleichzeitig" definieren

    Man kann auch mehrere HTML Befehle "in einem" über CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein für Überschriften. Folgende CSS Definition definiert, das die h1-h6 Tags alle Grün dargestellt werden sollen.

    PHP-Code:
    h1h2h3h4h5h6               {color#00ff00 } 
    Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren möchte, z.B. die Schriftart, dann kann man diese Definition einfach darunter setzten.
    PHP-Code:
    style.css 
                  h1
    h2h3h4h5h6               {color#00ff00 }               
                  
    h2               {font-familyArial
    PHP-Code:
    css_2.html
                  
    <html><head>
                  <
    title>
                  
    CSS Beispiel 3
                  
    </title>
                  <
    link rel="stylesheet" href="style.css" type="text/css">
                  </
    head>
                  <
    body>
                  <
    h1>Überschrift 1</h1>
                  <
    h2>Überschrift 2</h1>
                  </
    body>
                  </
    html
    Das Ergebnis sieht im Browser wie folgt aus:


    Verschachtelte CSS Anweisungen


    Zunächst werden alle Überschriften so definiert, das die Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart Arial sein soll.

    Kommentare in CSS

    Ja, innerhalb einer Styledefinition können Sie Kommentare verwenden, diese dienen dem besseren Verständnis des CSS Codes. Kommentare werden vom Browser, der den CSS Code interpretiert einfach übersehen.

    PHP-Code:
    h1               color#ff0000 }               /* dies ist ein Kommentar */ 
    So jetzt seid ihr etwas in css eingeführt

    MFG lassu

    PS: Wer ernsthaft mit css coden möchte, sollte natürlich noch mehr dazu lernen und am besten ein handbuch kaufen!

    ~Lunatic Edit: Bitte nächstes mal Quelle angeben, CSS - Einstieg in CSS - Eine Einfhrung
    Zuletzt geändert von Lunatic; 26.06.09, 01:19.








  • #2
    Dieser Guide ist wirklich gut für Einsteiger . :)'

    ~MfG-'
    ~escaPe-'
    Zuletzt geändert von escaPe; 06.05.09, 18:44.

    Kommentar


    • #3
      Hehe nich schlecht der Guide, selber geschrieben?
      Ein Manko hab ich noch =)
      PS: Wer ernsthaft mit css coden möchte, sollte natürlich noch mehr dazu lernen und am besten ein handbuch kaufen!
      Ich denke es is nicht nötig extra ein Buch zu kaufen um CSS zu lernen, dass Geld dazu investiert man lieber in anständige Bücher wie z.B. PHP (<3)

      Eine sehr sehr gute Anlaufstelle für Anfänger wie auch für Fortgeschrittene ist
      CSS 4 You
      Es hat sehr schöne Tutorials für Anfänger sowie eine sehr umfangreiche Referenz da :)

      Lg
      Luna
      http://www.mckay-relocation.com

      Kommentar


      • #4
        finde den guide auch recht gut :D
        ich habe eigendlich alles daovn gewusst *stolz sei* auser:
        Mehrere HTML Befehle "gleichzeitig" definieren.

        Kommentar


        • #5
          Nettes Tutorial ;D
          Falls jemand mal Farbcodes sucht .
          mediaevent.de :: Farbcodes :: Farbnamen

          Daron

          Kommentar


          • #6
            Na da haste doch was gelernt =D

            Gut das es euch gefällt







            Kommentar

            Lädt...
            X