Website - Styles / CSS

- - - - Styles / CSS - - - -


Inhalt


Hinweis :

Um Styles zu benutzen kannst du verschiedene Wege nehmen. Alle funktionieren auch zusammen:

1- bei einem Element (wie z.B: einem h1 / div / p):

<p style="background-color: black;"> Mein Hintergrunnd ist schwarz </p>




2- oder im Head Element als Klasse (".") oder ID ("#"):

<style>
.klassenname {
background-color: black;
}
</style>



3- oder als Klasse (".") oder ID ("#") in CSS:


.klassenname {
background-color: black;
}



Für Punkt 2 und 3: <p class:"klassenname"> Mein Hintergrunnd ist schwarz </p>

Protipp :

Bentutze "%" anstatt "px" oder "em" bei z.B. höhen, damit kannst du deine Seite auf jeder Bildschirmgröße ungefähr gleich aussehen lassen, bzw es gibt keine Elemente die aus z.B. einer Box (mit background-color) rausguckt.

Noch ein Tipp: Halte deinen Code sauber!! Benutze die Tabulator Taste und mache Absätze damit du deinen Code auch noch später verstehst und durchblicks. Benutze die Tabulator Taste z.B. sobald ein neues Element in einem anderen Anfängt. Benutze außerdem Kommentare (bei CSS /* Hier steht ein Kommentar */ und bei HTML <!-- Hier steht ein Kommentar --> ).


ID's und Klassen

Klassen werden bei CSS immer mit einem Punkt angegeben und ID's immer mit einem Hashtag. Solltest du es mal verstauschen, klappt der Style in den Klammern nicht.

Import Style.css

Hiermit kannst du dein Stylesheet mit der Seite verbinden, füge diese Datei im Head Element ein. Sobald du den Stylesheet mit der Website verknüpfst sucht er dort nach den Klassen und IDs die du auf deiner Seite angegeben hast.

<link href="style.css" rel="stylesheet">


Hintergrundfarbe

Hiermit kannst du die Hintergrundfarbe ändern. Mit rgba gibst du die Rote, Blaue und Grüne Farbe an, sowie die Deckkraft dieser mit der letzten Zahl, diese kann zwischen 0 bis 1 liegen; achte auf den Punkt bei einer Kommazahl (50% also halb durchsichtig wären dann z.B.: 0.5).

background-color: orange;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.5);


Text: Farbe

Hiermit kannst du die Farbe deines Textes ändern. Mit den #-Angaben kannst du die Farben mischen: rot, blau und grün.

color: orange;
color: #ffffff;


Text: Größe

Hiermit kannst du die Größe deines Textes ändern. Prozentangaben eignen sich meistens gut für Handyansichten.

font-size: 5px;
font-size: 5em;
font-size: 200%;


Text: Ausrichtung

Hiermit kannst du die Ausrichtung deines Textes ändern. Mit center liegt der Text zum Beispiel in der mitte.

text-align: left;
text-align: center;
text-align: right;


Position: Absolute

Hiermit kannst du ein Element z.B. ein Div frei platzieren. Dies benutze ich z.B. bei Werbung am rand oder für eine Menüliste (wie bei Empfehlung) am rand. Mit left oder right (margin-left / margin-right / padding [...]), sowie Top und Bottom kannst du den Abstand zur jeweiligen Seite ändern. Ich würde zur Handyfreundlichkeit mit Protzenten arbeiten. Was sich auch anbietet ist width und height, siehe weiter unten.

top:: 5%;
left: 5%;
right: 5%;
bottom: 5%;


Höhe und Breite

Hiermit kannst du z.B. deine Hintergrundfarbe für ein Element (z.B. Text) begrenzen. Ich nutze dies z.B. für den Grauen sowie den weißen Hintergrund den ihr auf dieser Seite seht.

width:: 55%;
height: 55%;






Es ist was falsch? Bitte E-Mail an: service@kilihd.de !

Letztes Update: 25.03.2019 (17:53 Uhr)