CSS
CSS dient zum Stylen von Elementen.
/* define variable */
:root{
--space-left: 15px;
--space-right: 15px;
}
/* use variable */
.main{
padding-left: var(--space-left);
padding-right: var(--space-right);
}In CSS ist es auch möglich Variablen zu nutzen. Dies ist vor allem dann nützlich, wenn sich einen Wert oft wiederholt. Nutzt man diese Funktion, in kombination mit Breakpoints, lässt sich die Webseite sehr schnell und einfach anpassen. Es müssen in den Breakpoints lediglich neue Werte für die Variablen eingetragen werden.
Um eine Variable zu setzen, nutzt man die Pseudoklasse :root.
Anschließend werden zwei Bindestriche notiert und dahinter der Name der Variable mit dem Wert: --meine-variable: 15px.
Um die Variable auszulesen wird diese in die Funktion var() gesetzt: var(--meine-variable)
Diese Variable könnt ihr nun an beliebiegen stellen in euren CSS Code verwendem. Zum Beispiel um einen Abstand nach links "padding-left: var(--meine-variable)" oder eine Position von Rechts "right: var(--meine-variable)" zu setzen.
Achtet dabei auf die Benennung eurer Variable, es macht keinen Sinn wenn ihr als Variable --xx15 verwendet und nach 1 Minute nicht mehr wisst, wie die Variable heißt oder wozu sie verwendet wird ^-^.
.truncate{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}Mit text-overflow kann ein zu langer Text gekürzt werden. Diese Methode funktioniert allerdings nur mit einer Zeile, dafür ist sie sehr performant.
Um einen Text zu kürzen müss das Element diese Eigenschaften haben.
overflow:hidden - Damit versteckt ihr den überlaufenden Text
white-space: nowrap - Das Umbrechen der Texte wird hiermit verhindert
Und zum Schluss kommt text-overflow: ellipsis. Damit wird der überstehende Text als Punkte symbolisiert.
@media screen and (min-width: 781px) {
/* Window greater than 781px */
body { color: blue; }
}
@media screen and (max-width: 780px) {
/* Window smaler than 780px */
body { color: green; }
}
@media screen and (min-width: 320px) and (max-width: 768px) {
/* Window greater than 320px and smaller than 768px */
body { color: black; }
}Mit Breakpoints kann man das Design einer Webseite unter Berührung definierter Regeln, ändern. Diese Regeln können sein, das sich das Design bei einer Fenstergröße unter 780px anders verhalten soll, als dadrüber.
Mit min-width definiert man das Verhalten bei Fenstern die Größer sind als der angegebene Wert. Mit max-width definiert man das Verhalten bei Ferstern die kleiner sind als der angegebene Wert. Es ist auch möglich ein min- und max-Wert anzugeben. So gelten die Regeln nur in diesem Bereich.
bg-image1 {
background-image: url(bild.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bg-image2{
background-image: url(bild.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.bg-image3{
background-image: url(bild.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 150px 50px;
}Mit background-size kann man die Größe eines Hintergrundbildes festlegen. Die Größe kann durch Pixel- (px) oder Prozentwerte (%) gesetzt werden. Über contain wird das Bild automatisch nach der längsten Kante eingepasst und mit cover füllt es das Element immer vollständig aus. Generell wird das Bild immer unter Berücksichtigung des Seitenverhältnisses eingepasst, außer es soll verzert werden. Das ist nur möglich wenn die Werte als Pixel- bzw. Prozentwerte angageben werden. Statt einer Zahl trägt man zwei Zahlen ein, dabei steht der erste Wert für die X-achse und der zweite für die Y-achse - "background-size: 150px 50px". Dadurch wir das Bild auf 150px in der Breite und 50px in der Höhe gesetzt.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}Diesen Code solltet ihr alls erstes in euren CSS Datei kopieren, da er alle vordefinierten Style des Browsers zurücksetzt bzw. aufhebt.
Ein Vertikales Css Flyout Menü, welches sich seitlich entfaltet
Zum Tutorial
Bei Überfahren einer Rubrik erscheinen die Unterkategorien. Ein simples aber dennoch sehenswertes Menü
Zum Tutorial
#div_layer {
}
.class_layer {
}Mit Id und Class kann man sogenannte Container erstellen. Angesprochen wird der Id Container mit einem # und der Class Container mit einem Punkt ".". Das ist aber noch nicht der einzige unterschied, Id Container darf man nur einmal Pro Seite verwenden wo hingegen Class Container beliebig oft werwendet werden dürfen. In beiden fällen wird der Inhalt wie in einer einfachen Tabelle dargestellt.
body {
background-image: url(bild.jpg);
background-repeat: repeat-x;
}Mit diesem Code wird ein Bild im Body dargestellt welches sich Horizontal so lange wiederholt bis der Seiten- bzw. Bildschirmrand erreicht wurde. Mit background-repeat:repeat-y wird das Bild vertikal wiederholt. background-repeat:no-repeat verhindert die Wiederholung.
a:link {
color:#CCCCCC;
text-decoration:none
}
a:visited {
color:#000000;
text-decoration:none
}
a:hover {
color:#ffffff;
text-decoration:none
}
a:active {
color:#CCCCCC;
text-decoration:none
}Als A sind alle Hyperlinks auf der Seite gemeint.
A:link {color:#CCCCCC } Alle Links werden grau
A:visited {color:#000000 } Bereits Besuchter Link wird schwarz
A:hover {color:#ffffff } Färbt den Link beim Mouseover weiß
A:active {color:#CCCCCC} Färbt den Link beim Anklicken grau
text-decoration:none weitere Text Effekt wie z.b. ein Unterstrich,
indem Fall wurden keine zusätzlichen Optionen verwendet.
<link rel="stylesheet" href="style.css" type="text/css" />Der Code wird bei einer HTML Datei zwischen eingefügt. Um die CSS Datei extern einlesen zu können muss im head Bereich folgender Code stehen