[QT] Klassen, IDs und allg. CSS ✤

Klassen, IDs und allg. CSS

OMG! Es gibt sie noch! Die QuickTips :)

Ich hatte es ja schon angekündigt, ich möchte ein paar kurze Tipps machen, die sich mit Basics beschäftigen, also für irgendwelche Wünsche, bitte einen kurzen Kommentar abgeben :)

Heute geht es um CSS. Und zwar ganz allgemein wie man Dinge styled, was Klassen und was eindeutige IDs sind.
Hier geht es weniger um die vielen Möglichkeiten, dazu hab ich ja schon einiges geschrieben, aber was bedeuten die Punkte oder #s vor den ganzen Namen die da definiert werden?

Zu Beginn aber ganz allgemein, wie definiert man CSS.

Ganz allgemein ist die CSS meistens in einem HTML-Bereich, also muss die CSS eingeleitet werden. Dies tut man, indem man die CSS in style Tags packt. Also so:
<style>
...
CSS
...
</style>
Haben wir allgemein Lust etwas zu formatieren, zum Beispiel alle Links auf unserer Seite, dann machen wir das so:

a:link{
color: blue;
}
a:hover{
color: black;
}

In diesem Fall wären all unsere Links blau und beim drüberhovern würden sie schwarz werden. Wie ihr sehen könnt, reicht es hier also einfach wenn wir den Namen des Tags schreiben, in dem der zu formatierende Text steht.
Wollen wir alle unsere Bilder formatieren, dann würden wir das einfach mit img tun.

img {
border: none;
...
}

You get it. Aber meistens wollen wir ja nicht allgemein was definieren, hier, das hat Blogger schon gemacht. Und wir zum Teil auch.
Fügen wir aber ein HTML-Gadget hinzu, oder wollen was hier im Post machen, zum Beispiel einen Button oder ein eigenes Copyright, machen wir das mit Klassen und IDs.
Was aber ist der Unterschied? Wann verwendet man was?

Das ist eigentlich sehr einfach zu sagen. Nehmen wir die eben genannten Beispiele. Als Button wollen wir beispielsweise einen Downloadbutton.
Den machen wir mit einem Link.
<a href="LINK">Download</a>
Wie aber verwandeln wir jetzt genau den Link in einen Button?
Bemerkung: Ein Downloadbutton wird noch einige Male verwendet werden, in jedem Post der einen Download anbietet, soll der Button gleich aussehen. (Keep that in mind)

Nummer zwei ist unser Copyright. Wir wollen einen div-container, der unser Copyright anzeigt, unten an der Seite. Und die Schrift soll dann nicht so riesig sein wie auf dem Rest der Seite.

Eine Lösung für beide Probleme wäre es, in die Tags ein style="definitionen..." einzufügen, doch das wollen wir nicht, weil es unsauber wird und unsere CSS ist vielleicht nicht ganz so lange.

Eine ID ist eindeutig, was bedeutet, dass sie nur einmal verwendet werden kann, auf einer Seite. Eine Klasse hingegen kann mehrmals vorkommen.
Ihr ahnt es wahrscheinlich schon: für den Button brauchen wir eine Klasse, für das Copyright eine ID.
Aussehen tut das also jeweils im HTML folgendermassen:
<a class="button" href="LINK">Download</a>

<div id="copyright"> &copy; by beKreatief. 2013</div>
Aber wie schaut jetzt die CSS aus?

Für Klassen werden Punkte verwendet, geht es um IDs verwenden wir ein Doppelkreuz (hab extra nach der richtigen Bezeichnung für euch gewikipediat :D), auch als Hashtag bekannt.

.button{
background: red;
}

#copyright{
font-size: 11px;
}

Und so ist das mit Klassen, IDs und allgemeiner CSS und ich hoffe, dass das irgendwie weiterhilft und ein bisschen mehr Logik in diese ganzen Zeichenteilers gebracht hat ^^