CSS (Cascading Style Sheet) definiert die Darstellung einer Website in HTML.
CSS verfügt über mehrere verschiedene Einheiten zum Ausdrücken einer Länge wie „width“, „height“ usw. Die Länge ist eine Zahl gefolgt von einer Längeneinheit, z. B. 10 Pixel, 2 Em usw.
Es gibt absolute Einheiten
Relative Masseinheiten
CSS Elemente werden anhand ihrer „Klasse“ oder „Id“ identifiziert. Mehrere Elemente können die selbe „Klasse“ haben, „Id“s sollten aber eindeutig sein um eindeutigen Zugriff auf Elemente zugewährleisten. (siehe Selektoren)
In der Definition (dem Stylesheet) werden „Klassen“ mit einem „.“ (Punkt) davor gekennzeichnet, „Id“s mit einer „#“ (Raute).
<style>
.testClass { background: yellow; }
#a { color: red; }
#b { color: blue; }
#c { color: green; }
</style>
<div class="testClass" id="a">a</div>
<div class="testClass" id="b">b</div>
<div class="testClass" id="c">c</div>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
<div style="background:url('https://cdn.zarat.ml/images/large/1.jpg'); min-height: 100%; background-position: center; background-size: cover;">
<div class="z-display-middle" style="white-space:nowrap;">
<span class="z-center z-padding-large z-xlarge z-wide z-animate-opacity">Introduction</span>
</div>
</div>
You can use variables and calculate them.
<style>
div {
--a: 1em;
--b: 2em;
padding: calc( var(--b) + var(--a) );
background: #e53b2c;
}
</style>
<div>Hello world</div>
@keyframes splash {
0% {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
to {
transform: scale(1, 1);
}
}
#div {
animation: splash 1s normal forwards ease-in-out;
}
<style>
body, html {
padding: 0px;
margin: 0px;
}
.wrapper {
display: inline-block;
position: relative;
padding: 10px 30px 10px 10px;
}
.wrapper:after {
content: "\2bc6";
position: absolute;
top: 0.5em;
right: 0.5em;
}
</style>
<div class="wrapper">Fake Dropdown</div>
Define Variables: To define a variable, use the – prefix followed by the variable name and the value you want to assign to it. Variables are typically defined in the :root pseudo-class, which makes them available globally throughout the stylesheet.
:root { --primary-color: #007bff; --font-size-large: 18px; }
2. Use Variables: You can use variables by referencing them using the var() function. This function takes the variable name as an argument and returns its value.
body { font-size: var(--font-size-large); color: var(--primary-color); }
3. Updating Variables: Changing the value of a variable is as simple as modifying it in the :root block. This change will be automatically applied wherever the variable is used.
:root { --primary-color: #ff9900; }
4. Fallback Values: You can provide a fallback value for variables in case they are undefined. This can be helpful for maintaining compatibility with older browsers.
body { background-color: var(--background-color, white); }
5. Scoping: Variables are scoped to their respective elements. If you define a variable within a specific selector, it will only be available within that scope and its children.
.button { --button-color: red; background-color: var(--button-color); }