- needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
\\
=== Links ===
* https://www.w3schools.com/howto/howto_css_dropdown.asp
* https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Dropdown-Men%C3%BCs_mit_CSS_gestalten
----
===== Farbgestaltung =====
* [[https://designschool.canva.com/blog/100-color-combinations/|100 Brilliant Color Combinations]]
* [[http://www.colorhexa.com/ff4422|colorhexa.com - Webseite zu Farbkombinationen]]
* [[https://www.colorcombos.com/colors/424242|Colorcombos.com - Webseite zu Farbkominationen]]
----
===== Zweispaltiges Layout mit float =====
Angenommen unsere Seite ist 800px breit und wir möchten ein zweispaltiges Layout.
body {
/*Die Seite ist 800 Pixel breit.*/
width: 800px;
}
/*Linke Spalte*/
.spalte1 {
/*Die linke Spalte ist 380 Pixel breit. Plus Außenabstand von 10px; Links, rechts, oben und unten.
Insgesamt ist die linke Spalte also 400 Pixel breit.*/
width: 380px;
margin: 10px;
/*Mithilfe der Eigenschaft float kann ein Element an die linke oder rechte Innenkante
seines Elternelements (Hier: body) verschoben werden.*/
float: left;
}
/*Rechte Spalte*/
.spalte2 {
/*Die rechte Spalte ist 380 Pixel breit. Plus Außenabstand von 10px; Links, rechts, oben und unten.
Insgesamt ist die rechte Spalte also 400 Pixel breit.*/
width: 380px;
margin: 10px;
/*Mithilfe der Eigenschaft float kann ein Element an die linke oder rechte Innenkante
seines Elternelements (Hier: body) verschoben werden.*/
float: right;
}
=== Links & Alternativen ===
* https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float
* http://blog.karenmenezes.com/2014/apr/13/floats-inline-block-or-display-table-or-flexbox/ - Vor- und Nachteile von float und seiner Alternativen
----
===== Kommentare in CSS =====
/*Dies ist ein Kommentar.*/
===== Tabellendesign =====
* https://www.w3schools.com/w3css/w3css_tables.asp
* https://www.w3schools.com/bootstrap/bootstrap_tables.asp
* https://www.w3schools.com/css/css_table.asp
**Beispiel**\\
html
\\
\\
css
.tdesign {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.tdesign td, .tdesign th {
border: 1px solid #ddd;
padding: 8px;
}
.tdesign tr:nth-child(even){background-color: #f2f2f2;}
.tdesign tr:hover {background-color: #ddd;}
.tdesign th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
===== Normalisierung =====
* http://designerzone.de/css-basis-durch-reset-oder-normalisierung/
===== Transparenz (opacity) =====
Hiermit lässt sich die Transparenz eines Elements steuern, z.B. den Hintergrund transparent gestalten.
* https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/opacity
----
=====Schriftart (Font) einbinden=====
====TrueType====
**Schriftart in CSS einbinden**\\
@font-face {
font-family: 'Name';
src: url('fonts/DateinameDerSchriftart.ttf') format('truetype');
}
**Schriftart in CSS nutzen**\\
body {
font-family:'Name';
}
===== CSS-Validator =====
http://jigsaw.w3.org/css-validator/
----
===== LearningApps =====
[[informatik:css-la|LearningApps zu CSS]]
===== Weitere Links zu CSS =====
* Komplette Übersicht zu CSS - https://wiki.selfhtml.org/wiki/CSS
* Tutorial zu HTML und CSS - https://internetingishard.com/html-and-css/
* Farben - http://html-color-codes.info/webfarben_hexcodes/
* Learn CSS in 12 Minutes by Jake Wright - https://www.youtube.com/watch?v=0afZj1G0BIE
{{rss>https://herr-pfeiffer.de/shaarli/?do=atom&searchtags=css 100 3h }}
{{tag>[informatik thema css html]}}