Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 16

Thema: CSS Stylesheet Tutorial *update

  1. #1
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Stylesheet Tutorial *update

    hier erkläre ich wie man ein CSS (Cascading Style Sheets) Stylesheet erstellt.

    # Einleitung

    CSS braucht man um HTML zu formatieren, mit CSS lassen sich zb. rollover effekte erstellen, man kann auch text, tabellen oder andere HTML elemente formatieren.

    also, fangen wir an.

    # Stylesheet erstellen

    1. erstelle in deinem website ordner eine textdatei. benenn sie stylesheet.css - somit ändert sich der dateityp automatisch in eine css datei.
    2. öfffne das stylesheet im editor oder ein ähnliches programm
    3. nun kannst du eigentlich hier alles einfügen was du willst, hier ein beispiel:

    Code:
    /* eine html "überschrift" formatieren */
    h1 {
    	font-family:arial; 
    	font-size:14px; 
    	color:#000000; 
    	text-align:center;
    }
    
    /* tabellenfelder formatieren */
    td {
    	font-family:arial; 
    	font-size:10px; 
    	color:#000000;
    }
    
    /* links formatieren */
    a:link {
    	color:#000000;
    	text-decoration:none; 
    	font-size:9pt; 
    	font-family:arial;
    }
    
    a:visited {
    	color:#000000; 
    	text-decoration:none; 
    	font-size:9pt; 
    	font-family:arial;
    }
    
    a:hover {
    	color:#FF00FF; 
    	text-decoration:none; 
    	font-size:9pt; 
    	font-family:arial;
    }
    a:active {
    	color:#000000; 
    	text-decoration:none; 
    	font-size:9pt; 
    	font-family:arial;
    }
    
    /* das <body> tag formatieren.. */
    body &#123;  
        margin&#58; 0px;
           
        background-color&#58; #FFFFFF;
        background-image&#58; url&#40;background.jpg&#41;;
        background-repeat&#58; no-repeat;
       &#125;
       
    /* beispiel&#58; irgendein html tag formatieren */
    img &#123;
    	border&#58; 0px;
    &#125;
    /* somit werden alle <img> tags so formatiert! */
    
    
    /* beispiel&#58; eine class erstellen &#40;zb. für eine navigation */
    a.navi&#58;link, a.navi&#58;active, a.navi&#58;visited &#123;
    	background-color&#58; #FFFFFF;
    	font-size&#58; 18px;
    	font-family&#58; verdana;
    &#125;
    
    a.navi&#58;hover &#123;
    	background-color&#58; #183050;
    	font-size&#58; 18px;
    	font-family&#58; verdana;
    &#125;
    /* der html tag muss dann so sein&#58; <a href="" class="navi" */
    # Erklärung

    » im code - fragen könnt ihr ja unten posten.

    # Einbinden

    CSS einbinden ist einfach. wenn man ein stylesheet hat, muss man lediglich im head bereich ein tag einfügen welcher den pfad zum stylesheet beinhaltet.
    Code:
    <html>
    <head>
    <title></title>
    <link rel=stylesheet type="text/css" href="stylesheet.css">
    </head>
    CSS lässt sich auch direkt einbinden, erfordert einfach ein anderes tag im head bereich.

    # Einsetzen

    html eigenschaften (zb. die links oder <img>) werden automatisch so formatiert wie es im stylesheet vorgegeben ist. klassen muss man mit class="" "ansprechen"...siehe beispiel im code mit der navigation.
    (man kann auch id="" einsetzen, kann man aber nur 1mal verwenden / seite).

    # Links zu CSS

    weitere infos zu css gibts auf
    » selfhtml
    » schattenbaum
    » intensivstation
    » css 4 you
    » w3schools

    so - ich hoffe das war verständlich..bei fragen schreibt einfach in den thread.
    ps. das sind nur _grundlegende_ sachen - es lassen sich auch ganze layouts mit css und xhtml umsetzen, liest euch bitte noch auf den seiten die ich gepostet habe rum.

    so long

    //edit: hab noch ein paar sachen angepasst / verbessert
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also ich hoffe, dass ich dir jetzt nicht zu nahe trete, aber ich find es ist nur verbrasste Zeit noch ein Tutorial zu schreiben.
    Es gibt ja bereits so viele, besonders zu HTML, CSS und JS. Zudem würdest du dein Tutorial in einem Forensystem verfassen, was der
    Sache auch nicht zuträglich ist.

    Dein Vorsatz in allen Ehren, aber mir fehlt so ein wenig der Glaube an den Sinn. Lasst uns lieber weiter hier alle möglichen
    Probleme diskutieren. Das bringt sicher mehr.
    "Carpe Diem" powered by positiv Feelings

  3. #3
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ich finds eigentlich sehr gut ... da man sehr schnell diese Forum zur hand hat, um auf dieses Tutorial zu verlinken.

    zudem kann man bei selbstgeschrieben Tutorial, nichtverstandene Dinge besser erklären.

    und es ist nochmal eine "Verfestigunsübung" für die Leute die das Tutoriel schreiben.

    etc...

    ng.
    Lukas
    Maybe this world is another planet's hell

  4. #4
    Forum Guru
    Themenstarter

    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ich finds eigentlich auch nicht schlecht - mann muss ja nicht für alles ein tutorial haben aber css fragen werden immer wieder gestellt und jetzt haben wir mal eins wo wir sie "hinschicken" können.mfg

  5. #5
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.779
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard

    Ich finde jetzt auch ein Stylesheet Tutorial auch nicht schlecht.
    Im laufe der Zeit kommen immer die gleiche Fragen und warum nicht dann auf ein Tutorial verlinkne, das auf forum-hilfe liegt ?

    Es gibt ja bereits so viele, besonders zu HTML, CSS und JS
    Kein Argument
    Denn nach dieser Aussage müßte ich mein Forum schließen, den es gibt im I-Net schon genug Foren über HTML
    Es gibt im I-Net zu jedem Thema oder Problem hunderte von Webseiten, die eine Lösung dafür haben .
    Ich sehe das Tutorial Forum mehr als eine Berreicherung und auch die Möglichkeit bei Standardfragen auf diese verweisen zu können.
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  6. #6
    Forum Guru
    Themenstarter

    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    so - hab das ding mal etwas überarbeitet..

  7. #7
    Prinz(essin)
    Registriert seit
    10.07.2005
    Beiträge
    914
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    also ich finde das tutorial sehr nütlich und gut gelunge

  8. #8
    König(in)
    Registriert seit
    03.07.2004
    Ort
    Rosenheim
    Beiträge
    1.024
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Gutes Tut,

    als ergänzung möchte ich noch diesen Link hinzufügen:

    www.w3schools.com

    Eine sehr sehr gute CSS/HTML u.a. erlärung. Mit Online TestSeite, d.h. du gibst einen Testcode ein, undin danebenliegenden FEnster erscheint was dein Code so alles macht.
    Sehr nützlich!

    greetz

  9. #9
    Youngster
    Registriert seit
    25.12.2005
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Sehr gutes tut!

  10. #10
    Forum Guru
    Themenstarter

    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    das ganze hab ich jetzt überarbeitet und erweitert: www.zeroweb.ch?show=artikel

    viel spass damit

Ähnliche Themen

  1. FF erkennt PHP-Stylesheet nicht
    Von Niels im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 15.10.2007, 20:45
  2. Kardinalfehler beim Stylesheet?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.05.2007, 11:51
  3. Bilder per Stylesheet verkleinern??
    Von Darius im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 23.03.2007, 08:50
  4. stylesheet problem
    Von cola-weiß im Forum HTML & CSS Forum
    Antworten: 19
    Letzter Beitrag: 12.01.2007, 18:00
  5. Stylesheet
    Von allbird im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.06.2004, 21:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •