1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Nachträglich in Seite CSS (Stylesheets) einbauen - Wie?

Dieses Thema im Forum "Web-Design" wurde erstellt von drylightning.de, 08.01.2005.

  1. drylightning.de

    drylightning.de Thread Starter MacUser Mitglied

    Mitglied seit:
    02.12.2003
    Beiträge:
    537
    Zustimmungen:
    13
    Hi habe bei meiner Webseite versäumt von Anfang an mit Stylesheets zu arbeiten. Texte sind einfach direkt auf den einzelnen Seiten formatiert. Künftig würde ich das gerne ändern, blicke es aber nicht. Wie erstelle ich eine Stylesheet, das meine Formatierung definiert und kann bei einem Text auf einer Content-Seite darauf verweisen??

    Danke für Anweisung, Hilfe, Tipps.
     
  2. Thommy

    Thommy MacUser Mitglied

    Mitglied seit:
    23.06.2003
    Beiträge:
    1.831
    Zustimmungen:
    0
    ui das ist ja wie ne frage "wie mach ich mit php ein forum?", also doch im ersten Moment ein sehr großer Berg (wenn man bisher nichts mit zu tun gehabt hat).

    Du kannst direkt die HTML Befehle steuern, indem du einfach dessen Name so ins Stylesheet einbaust:

    body {
    background-color:#992254;
    }

    oder

    hr {
    color:#333333;
    }

    dann wird automatisch bei Anwendung von <hr> die Farbe 333333 genommen.

    Dann gibt es noch die eigenen Klasse, die irgendwie heißen können, z.B.

    meinBereich {
    position:absolute;
    top:200px;
    color:#332233;
    border-style:solid;
    }

    -> Im HTML File:

    <div id="meinBereich">Hier steht mein Text nun 200px top und mit einer Umrahmung</div>

    Es gibt da natürlich noch einiges mehr .....
    Ansonsten empfehle ich diesen Link:
    http://de.selfhtml.org/css/index.htm
     
  3. drylightning.de

    drylightning.de Thread Starter MacUser Mitglied

    Mitglied seit:
    02.12.2003
    Beiträge:
    537
    Zustimmungen:
    13
    oh je, dann muss ich mir wohl mal die bergsteigerausrüstung anlegen und los laufen.
    aber danke.
     
  4. also:

    Du definierst z.B eine Überschrift h1 im Stylesheet (Schriftart, Größe, Farbe usw.)

    Später muss du dann nur noch h1 sagen und die Informationen werden aus dem Stylesheet abgerufen. Wo ist dein Problem? Versteh ich nicht ganz...

    <link href="mystyle.css" rel="stylesheet" type="text/css">
     
  5. HAL

    HAL

    Vielleicht ist das Problem, das nicht jeder so ein Überflieger der
    Materie ist wie Du? Und wenn schon Tipps, dann bitte ausführlich:


    @dry:

    Normalerweise werden die CSS-Eigenschaften in einer externen Datei definiert, welche dann in die HTML-Dateien eingebunden wird. Dies hat den Vorteil, dass man durch das ändern einer Datei alle anderen ebenfalls beeinflusst. Die externe Datei wird mit folgendem Code, welcher in den <head></head>-Tag der Dateien muss, eingebunden:

    <head>
    <LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
    </head>

    Hinweis: style.css gibt den Namen der Datei an in welcher die
    Eigenschaften definiert werden.

    Nun muss man die Datei style.css erstellen.
    Man kann nun für besteimmte Elemente, wie beispielsweise die <h1></h1>-Tags, eigene Formate definieren. So kann man beispielweise einstellen, dass der Text der in h1 dargestellt werden soll immer rot sein soll.

    Dies geht wie folgt: Man schreibt in die CSS-Datei folgenden Code:

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color:#FF0000 }

    Mit diesem Code wird der gesamte Text zwischen <hi>und</hi> in der Schriftart Verdana bzw. Arial bzw Helvetica - aber auf jeden Fall sans-serif, in der Schriftgröße 20px und der Farbe rot dargestellt.
    Gleiches kann man auch mit den anderen Tags wie h2, h3, b, i, u machen.

    Außerdem besteht mit CSS die Möglichkeit die Links zu definieren. Dies geht wie folgt:

    a:link {color:#CCCCCC; text-decoration:underline;}<!--Eigenschaften für Link-->
    a:visited {color:#99A0AF; text-decoration:none;}<!--Eigenschaften für besuchten Link-->
    a:hover {color:#99A0AF; text-decoration:none;}<!--Eigenschaften für Hover-Effekt des Links-->
    a:active {color:#99A0AF; text-decoration:none;}<!--Eigenschaften für aktiven Link-->

    Diese Eigenschaften können wieder an jede Seite angepasst werden.


    :)
     
  6. drylightning.de

    drylightning.de Thread Starter MacUser Mitglied

    Mitglied seit:
    02.12.2003
    Beiträge:
    537
    Zustimmungen:
    13
    SUPER! Danke, mit diesen Hinweisen komme ich denke ich weiter. Versuche das mal demnächst und poste dann mein hoffentlich glückliches Lächeln über den erreichten Erfolg.
     
  7. ;)

    Ich dachte, dry wüsste, was ein Stylesheet ist :)

    Wichtig ist auch noch:

    Stylesheets werden z.Z. nur von Firefox korrekt wiedergegeben.
    Ist doch richtig, oder?
     
  8. HAL

    HAL

    Nicht wirklich. Mit den Basics kann jeder Browser umgehen,
    aber der Feuerfuchs ist dem Standard des W3C momentan
    noch am nächsten. Allerdings gibt es Unterschiede zwischen
    Mozilla basierten Browsern und dem Internet Explorer. Aber
    das ist in diesem Falle momentan (noch) nicht wichtig.
     
  9. michanismus

    michanismus MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    434
    Zustimmungen:
    0
    das kommt ganz auf die version an. css2 wird nur zu 99% richtig interpretiert. auch safari und firefox sind da nicht ganz der selben meinung
     
  10. Das ist meine persönliche Erfahrung. Nur Firefox zeigte in meinem Fall die Formatierung komplett an. Safari und der IE hatten Probleme damit.
    Aber ich bin ja auch Newbie in dem Bereich ;)