Indigo's bescheidenes CSS Tutorial

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Indigo's bescheidenes CSS Tutorial

      Aus Zeitmangel habe ich mich dazu entschieden das Tutorial unfertig zu veröffentlichen. Sehr chaotisch wie ihr bemweken werdet. Die grundlegenden Sachen sollten verständlich sein, ich werde das Tutorial jedoch nach und nach ergänzen. Bei Fragen könnt ihr mich gerne anschreiben. Außerdem kann jeder der mir ein wenig Arbeit abnehmen möchte seinen Teil dazu beitragen.
      Indigo
      Vorwort
      So, nun da wir CSS haben werden sich wohl einige fragen was das ist, also habe ich mich dazu entschieden ein "kleines" Tutorial zu schreiben. Falls ein gewisses Thema schwer zu verstehen ist bin ich gerne bereit es ein wenig zu erweitern. Vorschläge, Feedback und Ergänzungen sind auch gerne gesehen ^^
      Ablauf
      1. Aufbau von CSS
      2. Rahmen
      ->Einheiten
      ->Rahmenart
      ->Farben definieren
      3. Hintergründe
      ->Mitscrollen. Ja? Nein?
      ->Hintergrundfarbe
      ->Hintergrundbild
      ->Hintergrundposition
      ->Hintergrund wiederholen und Hintergrund positionieren
      4. Margin und Padding

      Hauptteil
      Bei CSS gilt wie bei vielen Dingen easy to learn, hard to master. CSS ist sehr einfach zu lernen jedoch aufgrund der vielen verschiedenen Browser und deren Verhaltensweisen teilweise komplex umzusetzen. Ich empfehle euch falls ihr einen Showcase oder ein Tutorial macht: Testet das Aussehen mit verschiedenen Styles und Browsern. Aber genug von technischer Seite. Fangen wir an! Grundsätzlich sieht CSS immer so aus:
      Eigenschaft:Wert(e);
      Die Eigenschaft ist praktisch das, was wir definieren und der Wert ist wie wir es definieren. Wenn wir beispielsweise unserem Text einen Rahmen verpassen wollen benutzen wir border. Je nachdem welche Eigenschaft wir definieren kann diese verschiedene Werte haben. Sich diese zu merken kann etwas schwer sein. Im Internet sind jedoch unzählige Listen mit allen Eigenschaften, Erklärungen etc vorhanden. Aber zurück zu unserem Rahmen. Ein Rahmen hat generell drei Werte
      Breite Art Farbe
      1px solid #000000
      Hmm. Fangen wir mit der Breite an: px ist die Einheit (Pixel). Das heißt unser Rahmen ist ein Pixel breit. Logisch oder? Mehr gibt's hier derzeit nicht zu sagen... Als nächstes kommen wir zu solid. Dieser Wert gibt an, wie unser Rahmen aussehen soll. In diesem Fall einfach... fest. Eine durchgezogene Linie. Wir könnten aber auch
      dotted
      ,
      dashed
      und noch einiges mehr verwenden. Sucht euch wie gesagt am besten eine Liste wie diese falls ihr euch die Eigenschaften und Werte nicht merken könnt. Nun sind wir beim letzten Wert. Eine Raute und sechs nullen. Das wäre die Farbe. Rom Hacker haben hier einen klaren Vorteil ^^ . Zunächst einmal der Aufbau.
      Raute|Rot|Grün|Blau
      #000000
      Zwei Stellen für jeden Farbwert. Wenn wir beispielsweise etwas rot haben wollen müssen wir die ersten beiden Ziffern erhöhen.
      #990000
      . Nun, das sieht zwar rot aus, aber es muss doch noch greller gehen!?! Der nächsthöhere Wert wäre #9A0000. Und? Fällt euch was auf? Das ist ein sogenannter Hex-Farbcode. Und wie ihr sicher an dem Namen feststellen konntet hat jede Farbe einen zweistelligen Hexwert. Unser höchster Rotton ist also
      #FF0000
      . Oder anders gesagt: 255 Rot, 0 Grün und 0 Blau. Falls euch Hex aus irgendeinem Grund nicht zusagt gibt es da noch RGB. Eine andere Möglichkeit Farben zu definieren.
      rgb(Rot, Grün, Blau)
      oder in unserem Fall
      border: rgb(255, 0, 0)
      Wie ihr seht sind die Werte diesesmal im Dezimalsystem geschrieben, macht jedoch genau das selbe. CSS lässt euch so ziemlich die freie Wahl wie ihr die Farben definieren wollt. Genau so ist es mit den Einheiten. Ihr könnt frei zwischen ihnen wählen. Wir könnten zum Beispiel unseren Rahmen nicht einen Pixel breit machen sondern einen Zentimeter.
      border: 1cm solid rgb(255, 0, 0)
      Das ist nur ein Beispiel. Bitte benutzt keine Rahmen, die breiter als ein paar Pixel sind. CSS unterstützt viele verschiedene Einheiten für viele verschiedene Zwecke, aber dazu später mehr. Kommen wir zu einer weiteren wichtigen Eigenschaft. Der Hintergrund. Die Eigenschaften sind unterteilt in background-attachment, background-color, background-image, background-position und background-repeat. Man kann sich auch viel Schreibarbeit sparen, aber dazu mehr am Ende des Tutorials unter Tipps & Tricks. Arbeiten wir uns durch. Background-attachment gibt an, ob der Hintergrund fixiert sein soll, oder mitscrollen soll. Als Demo nehm ich mir mal den RHR Banner...
      [table='fixed,scroll'][*]
      https://board.romhackersworld.eu/htdocs/wcf/images/RHR%20White%20Flavour/rhr_logo.png[/url])]Ich scrolle nicht mit
      [*]
      https://board.romhackersworld.eu/htdocs/wcf/images/RHR%20White%20Flavour/rhr_logo.png[/url])]Ich scrolle mit
      [/table]
      Mehr gibt es dazu eigendlich nicht zu sagen... Man kann der Eigenschaft die Werte fixed, scroll und inherit zuweisen. Wobei inherit einfach der Standartwert ist. Kommen wir zu background-color. Der Name lässt's vermuten: Hiermit definierten wir die Hintergrundfarbe.
      background-color: [Farbe definieren]
      background-color: #505090
      background-color: rgb(80, 80, 144)
      Auch hier sollte bereits alles erklärt worden sein also weiter geht's mit background-image.
      background-image: url([Pfad]);
      background-image: url(board.romhackersworld.eu/htdoc…te%20Flavour/rhr_logo.png);
      Was hier sofort auffallen sollte ist url(). Das ist notwendig, um dem Browser zu zeigen, dass er ein Bild von einer URL laden soll. Ebenfalls muss http:// vorhanden sein. Generell sollte es genügen einfach die URL von dem Bild aus der Browserleiste zu kopieren und zwischen den Klammern einzufügen. Als nächstes kommen background-position und background-repeat. Diese werde ich gleichzeitig erklären, da man sie oft zusammen verwendet. background-position gibt an wo sich das Bild auf der Seite befinden soll und mit background-repeat können wir den Hintergrund wiederholen. Nehmen wir wie immer den RHR Banner als Beispiel. Zunächst einmal ein Beispiel um besser verstehen zu können, was passiert.
      Beispiel
      repeat
      https://board.romhackersworld.eu/htdocs/wcf/images/RHR%20White%20Flavour/rhr_logo.png[/url]) repeat;]

      repeat-x
      https://board.romhackersworld.eu/htdocs/wcf/images/RHR%20White%20Flavour/rhr_logo.png[/url]) repeat-x;]

      repeat-y
      https://board.romhackersworld.eu/htdocs/wcf/images/RHR%20White%20Flavour/rhr_logo.png[/url]) repeat-y;]

      no-repeat
      https://board.romhackersworld.eu/htdocs/wcf/images/RHR%20White%20Flavour/rhr_logo.png[/url]) no-repeat;]
      Ein paar kurze Erklärungen: repeat wiederholt das Bild überall wo Platz ist. repeat-x horizontal. repeat-y vertikal und no-repeat zeigt das Bild nur einmal an. Nun kann es sein, dass wir unser Bild nicht immer oben links kleben haben wollen. Dazu benutzen wir background-position. Auch hier beginnen wir die Erklärung mit einem Beispiel. Dieses mal allerdings mit einer kleineren Grafik.
      Beispiel

      50px
      unten
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat bottom;]

      links
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat left;]

      zentriert
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat center;]

      links unten
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat bottom left;]


      100px
      unten
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat bottom;]

      links
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat left;]

      zentriert
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat center;]

      links unten
      https://board.romhackersworld.eu/icon/threadNewL.png[/url]) no-repeat bottom left;]


      Wie ihr seht könnt ihr mehrere Werte verwenden. (background-position: [left/center/right] [top/bottom]) Außerdem funktioniert das ganze auch mit Einheiten. Der erste Wert definiert den horizontalen Abstand und der zweite den vertikalen. Nun wisst ihr so ziemlich alles über Hintergründe. Weiter zu einem meiner Lieblingsthemen. Abstände. Oder in Eigenschaften ausgedrückt margin und padding. Zunächst einmal der Unterschied: margin definiert den Außenabstand und padding den Innenabstand. In CSS ist alles rechteckig. Das heißt wenn ihr [styIe=zeugs][/styIe] schreibt erstellt ihr praktisch ein neues Rechteck. Damit die Rechtecke nicht alle über- bzw nebeneinander liegen kann man mit margin und padding Abstände definieren. Wie das ganze Aussieht werde ich dieses Mal in einer Paint Grafik veranschaulichen.

      Wie ihr seht gehört padding praktisch zu eurem Rechteck dazu während margin außerhalb ist. Nun das Beispiel in CSS. Falls ihr den Text in eurem Stil nicht lesen könnt markiert ihn.
      Beispiel
      Ohne
      Box 1 ohne Abstände
      Box 1.1 ohne Abstände
      Box 1.1.1 ohne Abstände
      Box 1.2 ohne Abstände

      Mit
      Box 1 - 5px padding
      Box 1.1 - 10px margin
      Box 1.1.1 - 3px padding, 7px margin
      Box 1.2 - 20px/5px padding

      Verstanden? Die Eigenschaften sind margin-top, margin-right, margin-bottom, margin-left für margin und für padding padding-top, padding-right, padding-bottom, padding-left. Auch hier könnt ihr wieder frei mit den Einheiten variieren. px, %, pt, em, cm etc. Ihr könnt auch mehrstellige Kommazahlen verwenden. (Natürlich nicht bei px) Probiert am besten ein weinig herum. Man muss ein Gefühl für CSS Eigenschaften und deren Verhalten entwickeln. Das kommt mit der Zeit.

      Wird fortgesetzt...


      Referenz
      Text

      [table='Eigenschaft,Beispiel,Werte']
      [*]font-size[*][styIe=font-size:10pt]Text[/style]

      Text
      [*][Zahl][Einheit]
      inherit
      large
      larger
      medium
      small
      smaller
      x-large
      x-small
      xx-large
      xx-small

      [*]font-style[*][styIe=font-style:italic]Text[/style]

      Text
      [*]inherit
      italic
      normal
      oblique

      [*]font-weight[*][styIe=font-weight:bold]Text[/style]

      Text
      [*][Zahl]
      bold
      bolder
      inherit
      lighter
      normal

      [*]text-align[*][styIe=text-align:center]Text[/style]

      Text
      [*]center
      inherit
      justify
      left
      right

      [*]text-decoration[*][styIe=text-decoration:underline]Text[/style]

      Text
      [*]blink
      inherit
      line-through
      none
      underline
      overline

      [*]text-shadow[*][styIe=text-shadow: 1px 1px 1px #FF0000]Text[/style]

      Text
      [*][Wert*1][Einheit] [Wert*2][Einheit] [Wert*3][Einheit] [Farbcode]
      inherit
      none

      *1 Horizontale Verschiebung
      *2 Vertikale Verschiebung
      *3 Radius

      [*]text-transform[*][styIe=text-transform: uppercase]Text[/style]

      Text
      [*]capitalize
      inherit
      lowercase
      none
      uppercase[/table]
      Layout

      Um besser nachvollziehen zu können wie sich css verhält bekommen die Beispiele einen Rahmen spendiert.

      [table='Eigenschaft,Beispiel,Werte']
      [*]float[*][styIe=right:left]Text[/style]

      Text
      [*]inherit
      left
      none
      right

      [*]margin[*][styIe=margin:20px]Text[/style]

      Text
      [*][Zahl][Einheit]
      auto
      inherit

      [*]padding[*][styIe=padding:20px]Text[/style]

      Text
      [*][Zahl][Einheit]
      inherit[/table]

      Wird fortgesetzt...


      CSS3



      Da die tollsten Funktionen von CSS3 nur in einer seperaten CSS Datei anwendbar sind werde ich hier nur auf die neuen Eigenschaften und deren Werte eingehen. ACHTUNG! CSS3 ist noch in Entwicklung. Deshalb haben die meisten Eigenschaften browserspezifische erkennungen und leicht unterschiedliche Werte. Außerdem wird CSS3 von älteren Browsern nicht unterstützt! Ihr solltet daher immer eine Alternative definieren. Beispiel:
      background: #98bede; /* Alte Browser */
      background: -moz-linear-gradient(top, #98bede 0%, #deefff 100%); /* Firefox 3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98bede), color-stop(100%,#deefff)); /* Google Chrome, Safari 4+ */
      background: -webkit-linear-gradient(top, #98bede 0%,#deefff 100%); /* Google Chrome 10+, Safari5.1+ */
      background: -o-linear-gradient(top, #98bede 0%,#deefff 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #98bede 0%,#deefff 100%); /* Internet Explorer 10+ */
      Ohne background: #98bede würde unser Hintergrund auf alten Browsern ignoriert werden. Hätten wir jetzt eine Schrift, die auf dem Standarthintergrund schwer zu lesen ist wäre unser Design auf älteren Browsern futsch. (Anmerkung: Dies ist nur noch ein geringer Teil und er nimmt mit jedem Tag ab, aber ich fühle mich dazu verpflichtet es zumindest anzumerken :D)

      Wird fortgesetzt...


      Tipps & Tricks
      Viele CSS Eigenschaften kann man auch zusammenfassen und sich so sich so sehr viel Schreibarbeit sparen. Allerdings ist zu beachten, dass man bei einigen eine bestimmte Reihenfolge einhalten sollte.
      [table='Eigenschaft, Enthält, Anmerkungen'][*]background[*]background-attachment
      background-color
      background-image
      background-position
      background-repeat[*]Reihenfolge beliebig
      [*]font[*]font-family
      font-size
      font-style
      font-variant
      font-weight
      line-height[*]font-family muss der letzte Wert sein und font-size muss vorkommen.
      Ebenfalls zu beachten: Falls ihr line-height definieren wollt müsst ihr es in dieser Reihenfolge schreiben:
      [font-size]/[line-height] - bsp: 12pt/120%[/table]

      border ist bereits eine zusammengefasste Eigenschaft und besteht eigendlich aus border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style und border-top-width jede Eigenschaft einzeln zu erklären hätte wohl wenig Sinn. Falls ihr jedoch einmal einen Rahmen für weniger als alle Seiten haben wollt könnt ihr mit border-top, border-right, border-bottom und border-left einzelne Teile nach dem selben Pronzip wie border definieren. So könnt ihr beispielsweise einen bunten, oder einen halben Rahmen basteln.
      Auch für padding und margin gibt es kürzere Schreibweisen. Anstatt jede Richtung einzeln zu definieren könnt ihr mit padding oder margin alle auf einmal ansprechen. Hierbei ist zu beachten, dass es drei Fälle gibt:
      Fall1 - Allen den selben Wert zuweisen:
      [margin/padding]: [Zahl][Einheit];
      padding: 5px;


      Fall2 - rechts & links, oben & unten:
      [margin/padding]: [oben/unten] [rechts/links];
      padding: 5px 3px;


      Fall2 - Alles seperat:
      [margin/padding]: [oben] [rechts] [unten] [links];
      padding: 5px 3px 10px 4px;



      Wird fortgesetzt...


      Nützliche Links
      selfhtml
      css4you
      css3generator
      gradient-editor
      patternify
      Vielen Dank an Alen, Jiraiya und Obito für's Bespaßen während des Schreibens und prime-dialga für's Korrekturlesen.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Indigo ()

    • Hey,
      Dein Tutorial ist nicht schlecht oder so, aber vielleicht solltest Du den Unterrichteten mitteilen, wie man eine CSS Datei in eine HTML Datei einbindet. (Falls Du dies getan hast sorry, dann hab ichs überlesen.)
      Ich habe es so gelernt:
      <link rel="stylesheet" type="text/css" href="OrdnerWoDieDateiIst/Datei.css">

      Gruß,
      Adrian-Marc
    • Das mitteilen wird nicht nötig sein, da das Tutorial eig. für den BBCode ausgelegt ist und das normale einbinden einer CSS-Datei bisher gar nicht möglich ist, da man HTML nicht verwenden kann, außer es wird für die User freigeschaltet (im ACP).

      Mit freundlichen Grüßen,

      KB3

      Beta 2 jetzt Downloaden!

      Für den Banner gehen Credits an E▲SY.

      21-29.09.2013 afk => Polen... =) | Amk