CSS 101 Part I ✤
Hallo alle zusammen :)
Es gibt ja schon viele Tutorials hier, die spezifische Beispiele geben, was für Möglichkeiten CSS bietet, aber viele Leute sind dennoch nicht dazu im Stande eine eigene CSS zu schreiben, selbst etwas zu gestalten. In dieser Serie möchte ich euch CSS etwas näherbringen, bis ihr dazu im Stande seid selbst etwas zu gestalten.
Am besten lernt ihr CSS, wenn ihr euch ganz zu Beginn weg von Blogger bewegt, allgemein weg davon irgendetwas innerhalb einer Seite zu gestalten. Beginnt mit einfachen Elementen, die ihr gestalten könnt.
Für meine "CSS Übungen" verwende ich Dablett oder CodePen, dort könnt ihr schön eintippen und gleich das Ergebnis angucken. Und speichern geht auch, ohne Anmeldung. Das find ich immer gut, weil ich mich ungern überall anmelde.
Okay. CSS. What to know?
Wenn ihr euch mit dem "Gerüst" von jeder Website nicht auskennt, dann könnte es schwer werden.
Ihr solltet wissen, was man unter den geläufigsten Tags versteht, beispielsweise wie ihr Links schreibt, Headings, Paragraphs, Spans, Container. Das alles sind die wichtigsten Voraussetzungen für die Anwendung von CSS.
Für den Anfang reicht es, wenn ihr folgendes wisst.
Und wie das alles ganz ohne CSS aussieht, könnt ihr euch hier ansehen. Das meiste davon seht ihr nicht. Die Span, Paragraph, UL und DIVs werden nicht sichtbar, solange wir das nicht wollen. Aber sie geben uns die Möglichkeit zur Gestaltung.
Wenn wir allgemein gestalten wollen, machen wir das mit body, welches den ganzen Körperteil der HTML anspricht. Dazu müsst ihr den ganzen Aufbau einer Seite kennen, der im einfachsten Fall so aussieht:
Wenn ihr oben gezeigte HTML in den body-Teil packt und das ganze als .html-Datei speichert, könnt ihr das mit eurem Browser öffnen.
Okay, genug zu HTMl, das wisst ihr ja alles, oder habt es zumindest schon einmal gehört, denn das ist ja Voraussetzung für CSS.
CSS, das ich im folgenden jetzt endlich einführen möchte.
CSS ist relativ einfach.
Um beispielsweise ein Listenelement zu gestalten, schreibt ihr einfach die Zeichen, die innerhalb des Tags stehen, öffnet eine Mengenklammer, schreibt eure Defis rein (immer mit Semikolon am Ende) und schliesst die Mengenklammer wieder.
Um beispielsweise rote Links zu verwenden würden wir in der CSS also folgendes machen:
In diesem Fall verwendet man Klassen. Klassen können mehrmals angewendet werden, im Gegensatz zu IDs. IDs werden nur einmalig vergeben.
Ich hab früher nicht ganz verstanden, warum man IDs verwenden sollte oder wo, dann habe ich mich zum ersten Mal mit Menus beschäftigt. Ihr braucht auf eurer Seite sicher nur eine einzige Navigation, also kann man das sicher mit einer ID versehen. Alle "Downloadlinks" kommen allerdings möglicherweise mehr als einmal vor, also wäre hier eine Klasse angebracht.
Ich zeig euch das wieder anhand des Links wie das aussehen könnte. hier ein Beispiel.
Ihr seht, die basic-Definitionen werden durch das hinzufügen einer Klasse sozusagen nichtig, wenn eine andere Spezifikation folgt. Bei der Klasse hab ich beispielsweise die Schriftfarbe geändert, und obwohl wir gesagt haben, dass alle Links rot sein sollen, ist die Schrift dennoch weiss.
Weiter wichtig ist auch, umso weiter unten etwas im Code steht, umso relevanter. Das heisst, wenn ihr aus Versehen zwei Mal die Hintergrundfarbe definiert, hat das Element die Farbe, die tiefer unten steht.
Das ist jetzt nichts richtig ausgefallenes, einfach nur die Basis jetzt vor Allem zur Textgestaltung:
Das sind jetzt wirklich nur einige Basic-Sachen. Und weil ich sicher bin, dass man nicht alles gleich versteht, gibt's hier auch noch ein Demo wie das Zeug so ausschaut.
Das ist jetzt wirklich nur ein Anfang, aber damit könnt ihr beispielsweise schon etwas machen.
Die erste Sache, die wahrscheinlich am interessantesten ist, ist ein Link, weil ein Link verschiedene Zustände hat. Den Schluss dieses 1. Teils also:
a:link, a:hover und a:visited
Was soviel bedeutet wie: "link, wenn man ihn zum ersten Mal sieht", Link wenn das Mäuschen drüber fährt und Link sobald man einmal draufgeklickt hat, also der besuchte Zustand.
Diese drei Stadien definieren wir jetzt mal.
Wenn wir das jetzt umsetzen schreiben wir folgendes:
Und dann wär's das für den ersten Teil. ^^
edit
Es gibt ja schon viele Tutorials hier, die spezifische Beispiele geben, was für Möglichkeiten CSS bietet, aber viele Leute sind dennoch nicht dazu im Stande eine eigene CSS zu schreiben, selbst etwas zu gestalten. In dieser Serie möchte ich euch CSS etwas näherbringen, bis ihr dazu im Stande seid selbst etwas zu gestalten.
Am besten lernt ihr CSS, wenn ihr euch ganz zu Beginn weg von Blogger bewegt, allgemein weg davon irgendetwas innerhalb einer Seite zu gestalten. Beginnt mit einfachen Elementen, die ihr gestalten könnt.
Für meine "CSS Übungen" verwende ich Dablett oder CodePen, dort könnt ihr schön eintippen und gleich das Ergebnis angucken. Und speichern geht auch, ohne Anmeldung. Das find ich immer gut, weil ich mich ungern überall anmelde.
Okay. CSS. What to know?
Was ist CSS
Cascading Style Sheets, kurz CSS ist eine Sprache mit der man HTML (/XML) Dokumente gestaltet. Die Grundidee dahinter ist, mittels HTML bloss das Formale zu machen, also die grunsätzliche Gliederung einer Seite. Mit CSS wird dem ganzen dann etwas mehr Individualität gegeben, die Seite bekommt das Styling. Schriftfarben, Hintergrundfarben etc.Vorraussetzung
Ich muss es leider sagen: Basic HTML-Wissen.Wenn ihr euch mit dem "Gerüst" von jeder Website nicht auskennt, dann könnte es schwer werden.
Ihr solltet wissen, was man unter den geläufigsten Tags versteht, beispielsweise wie ihr Links schreibt, Headings, Paragraphs, Spans, Container. Das alles sind die wichtigsten Voraussetzungen für die Anwendung von CSS.
Für den Anfang reicht es, wenn ihr folgendes wisst.
| HTML | Erklärung |
|---|---|
| <a href="URL">Angezeigter Link-Text</a> | Link, der als Text angezeigt wird |
| <p>Absatz</p> | Absatz |
| <span>Text</span> | Text-container |
| <h1>Heading</h1> | Heading 1. Ordnung |
| <li>Listenelement</li> | Listenelement |
| <ul>Listencontainer</ul> | Listencontainer, enthält Listenelemente |
| <div>Container</div> | Div-Container, sehr wichtig! |
Wenn wir allgemein gestalten wollen, machen wir das mit body, welches den ganzen Körperteil der HTML anspricht. Dazu müsst ihr den ganzen Aufbau einer Seite kennen, der im einfachsten Fall so aussieht:
<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
</body>
</html>Wenn ihr oben gezeigte HTML in den body-Teil packt und das ganze als .html-Datei speichert, könnt ihr das mit eurem Browser öffnen.
Okay, genug zu HTMl, das wisst ihr ja alles, oder habt es zumindest schon einmal gehört, denn das ist ja Voraussetzung für CSS.
CSS, das ich im folgenden jetzt endlich einführen möchte.
CSS - Basic Knowledge
Formales
Als erstes stellt sich natürlich die Frage, nach der Form. Wie schaut CSS aus?CSS ist relativ einfach.
Um beispielsweise ein Listenelement zu gestalten, schreibt ihr einfach die Zeichen, die innerhalb des Tags stehen, öffnet eine Mengenklammer, schreibt eure Defis rein (immer mit Semikolon am Ende) und schliesst die Mengenklammer wieder.
Um beispielsweise rote Links zu verwenden würden wir in der CSS also folgendes machen:
a{
color: red;
}In diesem Fall verwendet man Klassen. Klassen können mehrmals angewendet werden, im Gegensatz zu IDs. IDs werden nur einmalig vergeben.
Ich hab früher nicht ganz verstanden, warum man IDs verwenden sollte oder wo, dann habe ich mich zum ersten Mal mit Menus beschäftigt. Ihr braucht auf eurer Seite sicher nur eine einzige Navigation, also kann man das sicher mit einer ID versehen. Alle "Downloadlinks" kommen allerdings möglicherweise mehr als einmal vor, also wäre hier eine Klasse angebracht.
Ich zeig euch das wieder anhand des Links wie das aussehen könnte. hier ein Beispiel.
Ihr seht, die basic-Definitionen werden durch das hinzufügen einer Klasse sozusagen nichtig, wenn eine andere Spezifikation folgt. Bei der Klasse hab ich beispielsweise die Schriftfarbe geändert, und obwohl wir gesagt haben, dass alle Links rot sein sollen, ist die Schrift dennoch weiss.
Weiter wichtig ist auch, umso weiter unten etwas im Code steht, umso relevanter. Das heisst, wenn ihr aus Versehen zwei Mal die Hintergrundfarbe definiert, hat das Element die Farbe, die tiefer unten steht.
Basic CSS Befehle
Okay, soviel für den Anfang. Jetzt möchte ich noch ein paar Basic-CSS-Befehle aufführen.Das ist jetzt nichts richtig ausgefallenes, einfach nur die Basis jetzt vor Allem zur Textgestaltung:
| CSS | Erklärung | Wert/Beispiel(was nach Doppelpunkt folgt) |
|---|---|---|
| color | Schriftfarbe | Farbname, HEX (#fffff), rgb(255,255,255) rgba(0,0,0,1) |
| background | Hintergrund | Farbe (Hex, rgb, rgba,) url() |
| font-family | Schriftart | Times New Roman, Arial, Monospace |
| font-size | Schriftgrösse | Grösse in px, pt, em, % |
| font-style | Schriftstil | normal, italic |
| font-weight | Schriftstärtke | normal, bold |
| font-variant | Schriftvariante (normal, Kapitälchen) | normal, small-caps |
| line-height | Zeilenabstand | Wert (1, 1.5, 2...) |
| text-decoration | Text-Dekoration | underline, overline, line-through, blink |
| letter-spacing | Buchstabenabstand | Wert pt, em, px |
| text-transform | Art des Texts | capitalize, uppercase, lower-case, none |
| border | Rahmen(Shorthand) | [Dicke](px, pt, em, %), [Stil](solid, dotted, double, dashed, ridge, inset, outset, groove, none), [Farbe](hex, rgb, rgba, name) |
Das ist jetzt wirklich nur ein Anfang, aber damit könnt ihr beispielsweise schon etwas machen.
Die erste Sache, die wahrscheinlich am interessantesten ist, ist ein Link, weil ein Link verschiedene Zustände hat. Den Schluss dieses 1. Teils also:
Styling Links
Grunsätzlich hat ein Link drei Zustände, die man für gewöhnlich definiert.a:link, a:hover und a:visited
Was soviel bedeutet wie: "link, wenn man ihn zum ersten Mal sieht", Link wenn das Mäuschen drüber fährt und Link sobald man einmal draufgeklickt hat, also der besuchte Zustand.
Diese drei Stadien definieren wir jetzt mal.
- Ziel:
- Grüner Link, Schriftgrösse 14, Monospace, Keine Unterstreichung
- Bei Hover, Farbe: Dunkelrot, Times New Roman, Grossbuchstaben, Keine Unterstreichung
- Besuchter Link Farbe navy, Times New Roman, keine Grossbuchstaben, keine Unterstreichung
Wenn wir das jetzt umsetzen schreiben wir folgendes:
a:link{
font-size: 14;
font-family: Monospace;
text-decoration: none;
color: green;
}
a:hover{
color: dark red;
font-family: Times New Roman;
text-transform: uppercase;
text-decoration: none;
}
a:visited{
color: navy;
font-family: Times New Roman;
text-decoration: none;
}
Und dann wär's das für den ersten Teil. ^^
3 comments:
Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+
Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered
wow myri,
ReplyDeleteneues outfit hier und gleich ein super tut.
bin begeistert.
weisst du was ich besonders klasse auch finde?
dein menu hier, das ist spitzenmäßig, ich hoffe, du lässt uns auch bei gelegeheit mal wissen, wie man das auf den blog bekommt.
und noch mal.............welcome back, schön, dass du wieder hier bist.
ein grüßle sendet dir flo
Das Menü ist von hier. Ich bin nicht sicher, ob ich das selbst mal noch schreibe, weil das schon so gut ist, aber vielleicht, wenn ich mal etwas ganz viel Zeit übrig hab ^^
DeleteLiebe Grüsse
Myri
lach myri,
Deleteja das wäre dann schon ein bissle sehr aufwendig so ein tut.
lieben dank erst mal für den link, ich schaus mir an.
grüßle flo