diedVIPs

html knowhow

Sonstiges












Sonstiges
body body kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite.
Browser zeigen nur den Inhalt zwischen dem öffnenden und schließenden body-Tag im Browserfenster.
body {width:600px;}

body {margin: 0; font-family: 'Roboto', Helvetica, sans-serif; line-height: 1.5;}
buttons Schaltflächen mit CSS gestalten.   .button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

color Schriftfarbe
  • <color>
  • inherit
body {color: blue;}
h1 {color: green;}
name Eine Textmarke funktioniert wie ein Lesezeichen in einem Buch: Sie markiert eine Stelle, die Sie einfach verlinken möchten.   <button name="subject" type="submit" value="HTML">HTML</button>
hr Dieser Befehl wird als horizontale Linie angezeigt, die verwendet wird, um Inhalte zu trennen   <hr style="width:50%;text-align:left;margin-left:0">
opacity opacity gibt die Deckkraft/Transparenz eines Elements an.
  • <alphavalue>
  • inherit
img {opacity: 0.5;}
img:hover {opacity: 1.0;}

rotation Drehung / Rotation eines Block-Elements.
rotiere definiert ein Element, das um einen festen Punkt auf der 2D-Ebene dreht, ohne es zu verformen.
  • <angle>
 
transition Transition (allgemein)
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
div {width: 80px; height: 80px; background-color: skyblue;}

.rotated {transform: rotate(45deg); background-color: pink;}
overlay     .overlay {position: absolute;bottom: 100%;left: 0;right: 0;background-color: #008CBA;overflow: hidden;width: 50%;height:0;transition: .5s ease;}
unicode Umkehr der Schreibrichtung
  • normal
  • embed
  • bidi-override
  • inherit

I will display ♠

I will display ♠

I will display ♠

visibility Sichtbarkeit
Macht Elemente sichtbar oder verborgen.
  • visible
  • hidden
  • collapse
  • inherit
h2.a {visibility: visible;}

h2.b {visibility: hidden;}
z-index Überlagerungsreihenfolge der HTML-Elemente
z-index legt die Reihenfolge eines positionierten Elements und seiner Abkömmlinge fest.
Überlappende Elemente mit einem größeren z-index überdecken diejenigen mit einem kleineren.
  • <integer>
  • auto
  • inherit
.dashed-box {position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em;
margin-top: 2em;}

.gold-box {position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold; width: 80%; left: 60px;top: 3em;}
zoom Vergrößerungsfaktor
zoom kann verwendet werden, um die Vergrößerungsstufe eines Elements zu steuern.
  • <number>
  • <percentage>
p.small {zoom: 75%;}
p.normal {zoom: normal;}
p.big {zoom: 2.5;}
p {display: inline-block;}
p:hover {zoom: reset;}






Kontakt    Datenschutz   Impressum