Wir übernehmen keine Gewähr, dass die aufgelisteten Hilfestellungen in jedem Falle funktionieren.

CSS-Tipps & Tricks

.beispielbild {
  background-image: url("photographer.jpg"); 
  background-color: #cccccc; 
  height: 500px;
  background-position: 25% 75%; |top center
  background-repeat: no-repeat; 
  background-size: cover; |contain | 3em 25%
}
img{height: 300px; width: 100% !important; object-fit: cover; object-position: top center;}

Beispiel:

table.teilnehmer_innen{border-collapse:separate !important;border-spacing: 8px 8px !important;}
table.hersteller td{background:#fdfdfd;padding:4px;vertical-align:top;border:1px solid #ccc;}

Wichtig: Der Tabellenzelle eine Hintergrundfarbe geben.

Allgemeine Schreibweise:

selector::before { content: "string" attr(x) attr(y) "string"; }
selector::after  { content: url(…) attr(x) attr(y) "string"; }

Beispiel:

<div class="anzeige">4kg Äpfel für 3,49 Euro</div>

.anzeige::before {
    content: "Sonderangebot: ";
    font-size: larger; 
    color: red; 
}

Ergebnis:

Sonderangebot:
4 kg Äpfel für 3,49 Euro

Einfügen eines Bildes

.entry-title::before{
content:url("https://domain.info/wp-content/uploads/2022/06/header.jpg"); 
 display:block;  
 vertical-align:middle;  
 width:100%;  
 height:auto;   
 overflow:hidden;  
}

Die !important-Regel in CSS wird verwendet, um einer Eigenschaft/einem Wert mehr Bedeutung als normal zu verleihen.

Wenn Sie die !important-Regel verwenden, überschreibt sie sogar ALLE vorherigen Stilregeln für diese bestimmte Eigenschaft in diesem Element!

#inhalt ul li {
   color : #00FF00;
}
ul li {
   color : #FF0000 !important;
}

Erläuterung: Normalerweise hat #content ul li die höchste Priorität, d. h. die Listenpunkte würden hellgrün dargestellt. Das !important gibt der zweiten Anweisung eine höhere Wertigkeit, so dass die Listenpunkte tatsächlich rot dargestellt werden.

Beispiel

div.bereich{position:absolute;top:40%;left:90%;z-index:1;}
/*"z-index:1" sorgt dafür, dass das Element auf der obersten Ebene liegt.*/

Linear von oben nach unten:

background: linear-gradient(to bottom, blue, white);

Linear von links nach rechts:

background: linear-gradient(to right, blue, white);

Radial:

background: radial-gradient(red, yellow, rgb(30, 144, 255));

Mehrere Farben:

background: linear-gradient(to right, red, orange, yellow, green, blue);
.klasse1 { opacity:0%; } /* Jedes Element der Klasse "klasse1" ist sichtbar (transparent). */
.klasse2 { opacity:100%; } /* Jedes Element der Klasse "klasse2" ist sichtbar */

Beispiel transparenter farbiger Hintergrund:
background: rgba(220,160,140,0.5);
overflow: visible | hidden | scroll | auto | inherit

visible

  • Inhalt wird nicht beschnitten
  • Element kann hinausragen

hidden

  • Inhalt wird beschnitten
  • keine Scrollbalken

scroll

  • Scrollbalken, auch wenn Inhalt nicht überläuft.

auto

  • browserabhängig: Firefox: Scrollbalken, wenn der Inhalt überläuft

inherit

  • Vererbung des Wertes des Elternelements
.kasten{

border-radius: 3px 15px 5px 30px; /* links oben - rechts oben - rechts unten - links unten */

 /* CSS3 */
-moz-border-radius:10px; /* Firefox */ 
-webkit-border-radius:10px; /* Safari, Chrome */ 
-khtml-border-radius:10px; /* Konqueror */ 
}

Beispiel Kreis

div.circle{
width: 200px;
padding: 100px;
box-sizing: border-box;
border-radius: 100px;
background: green;
}

Ansicht

@media (max-width: 767px) { 
.hidden-xs { display: none !important; } 
}

@media screen and (min-width: 767px) and (max-width: 1200px) { 
    /* STYLES HERE */
}

ab einer Breite unter 767px wird das div .hidden-xs nicht mehr angezeigt

table.a {
  table-layout:auto;
  width: 150px;
}
/*Breite der Spalten passt sich der jeweiligen Textbreite an.*/

table.b {
  table-layout:fixed;
  width: 150px;
}
/*Breite der Spalten gleich unabhängig von der jeweiligen Textbreite.*/

img.stimg{border:1px solid #ccc;padding:15px;}

Beispiel:

HTML-Tipps & Tricks

<script language="javascript" type="text/javascript" src="dateiname.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

« zurück