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

Diskutiere mit über: Nachträglich in Seite CSS (Stylesheets) einbauen - Wie? im Web Page Design Forum

  1. drylightning.de

    drylightning.de Thread Starter MacUser Mitglied

    Beiträge:
    537
    Zustimmungen:
    13
    Registriert seit:
    02.12.2003
    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

    Beiträge:
    1.833
    Zustimmungen:
    0
    Registriert seit:
    23.06.2003
    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
     
    Zuletzt bearbeitet: 08.01.2005
  3. drylightning.de

    drylightning.de Thread Starter MacUser Mitglied

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

    morten Gast

    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 Gast

    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.


    :)
     
    Zuletzt von einem Moderator bearbeitet: 08.01.2005
  6. drylightning.de

    drylightning.de Thread Starter MacUser Mitglied

    Beiträge:
    537
    Zustimmungen:
    13
    Registriert seit:
    02.12.2003
    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. morten

    morten Gast

    ;)

    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 Gast

    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.
     
    Zuletzt von einem Moderator bearbeitet: 08.01.2005
  9. michanismus

    michanismus MacUser Mitglied

    Beiträge:
    434
    Zustimmungen:
    0
    Registriert seit:
    23.08.2004
    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. morten

    morten Gast

    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 ;)
     
Die Seite wird geladen...
Ähnliche Themen - Nachträglich Seite CSS Forum Datum
Wie ist diese Seite umgesetzt Web Page Design 25.11.2015
Wordpress Seite optimieren Web Page Design 09.04.2015
Seite wird nicht gefunden. Web Page Design 29.11.2013
Wie Textformat für Seite umwandeln? Web Page Design 30.04.2013
womit ist diese Seite erstellt...... Web Page Design 17.08.2012

Diese Seite empfehlen

Benutzerdefinierte Suche