informatik:css:start [Unterrichtswiki

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== CSS - Cascading Style Sheets ======
Die [[informatik:html:start|HTML-Datei]] legt die Struktur der Seite sowie die Inhalte fest. Oft benötigt man aber genaue
Angaben zum Layout. Kommt beispielsweise eine Auswahlbox vor, so möchte man festlegen, wie
groß sie genau ist, ob sie einen Rand hat, wie dick dieser Rand sein soll, welche Farbe er hat usw.
Solche Angaben kann man in einer sogenannten CSS-Datei speichern, auf die die HTML-Datei
verweist. CSS steht für cascading style sheets, auf Deutsch etwa „mehrstufige Stilvorlagen“.

----
===== Seitenaufteilung mit DIV und CSS =====
Eine Internetseite besteht in der Regel aus mehreren Elementen und enthält z.B. ein Banner (die Haupttitelzeile), Menüs und verschiedene Inhaltsbereiche. Mit dem HTML-Tag <file> <div>...</div> </file> lässt sich die Seite strukturieren, also in ihre Elemente aufteilen. Anschließend kann man jedem Element einen Eintrag in einer separaten Layoutdatei zuordnen. Dadurch wird das genaue Aussehen des Elements (Rahmen, Farben, Abstände usw.) festgelegt.
\\
Die Datei muster.htm stellt eine einfache Internetseite (siehe oben) dar, zu deren Strukturierung div-Tags benutzt wurden. In dieser Datei wird auf die zugehörige Layoutdatei layout.css verwiesen, in der jedem Element der Seite genaue Layoutangaben zugeordnet werden.\\
\\
Näheres zum ID-Selektor: https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor\\
\\
== Beispiel ==

<file html muster.htm>
<html>
<head>
   <title>Muster zur Seitenaufteilung</title>
   <link rel="stylesheet" href="layout.css" type="text/css"/>
</head>

<body>
   <div id="seite">
      <div id="links">
         Inhalt links (z. B. Navigation)
      </div>
      <div id="rechts">
         Inhalt rechts (z. B. Texte, Bilder)
      </div>
   </div>
</body>

</html>
</file>


<file css layout.css>
body {
   background-color:#ffffff;
   color:#000000;
   font-family:Verdana, Arial;
   line-height:18px;
   font-size:13px;
   text-align:center;
}

#seite {
   text-align:left;
   width:950px;
   margin:0px auto;
}

#links {
   width:220px;
   float:left;
   margin-top:30px;
   border:1px;
   border-color:#27408B;
   border-style:solid;
}

#rechts {
   width:720px;
   float:right;
   margin-top:30px;
   border:1px;
   border-color:#27408B;
   border-style:solid;
}
</file>
\\
<note>Lade beide Dateien (**muster.htm** und **layout.css**) herunter, speichere sie gemeinsam in einem Ordner und überzeuge dich davon, dass layout.css tatsächlich das Aussehen der Elemente bestimmt, indem du die Angaben (z.B. Schriftfarbe, Hintergrundfarbe, Textausrichtung) variierst.</note>
----

===== Selektoren =====
  * Einache Selektoren: https://wiki.selfhtml.org/wiki/CSS/Selektoren/einfacher_Selektor
  * Element-/Typselektor: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Typselektor
  * Klassen-Selektor: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor
  * ID-Selektor: https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor

----

===== Regelsätze =====
In CSS sind Eigenschaften innerhalb von Regelsätzen (auch Regeln) organisiert. Ein Regelsatz besteht aus:

  * Einem Selektor oder einer Gruppe von Selektoren, gefolgt von
  * einem durch geschweifte Klammern begrenzten Bereich, in dem
  * eine oder mehrere Deklarationen stehen, in denen Eigenschaften ein Wert zugewiesen wird.

https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS

----

===== Stylesheet-Klassen =====
Mit dem Konzept der Klassen ist es möglich, Formatdefinitionen sehr flexibel einzusetzen.\\
Näheres zu Klassenselektoren: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor\\
Beziehungsweise: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Universalselektor\\

== Beispiel ==
**CSS**
<file css style-blog.css>
body {
font-family: antiqua;
font-size: 14px;
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
}

a {
text-decoration: none;
}

*.header {
background-color: #2E9AFE;
text-align: center;
}

*.block1 {
text-align: center;
width: 600px;
background-color: #A9E2F3;
padding: 10px;
margin: 10px;
float: right;
}

.selected {
font-weight: bold;
}

*.nav {
text-align: center;
width: 140px;
float: left;
background-color: #00BFFF;
margin: 10px;

}

*.nav ul {
list-style-type: none;
padding: 0;
}

*.footer {
clear: both;
background-color: #BFBFBF;
text-align: right;
}
</file>

**HTML**
<file html SimpleBlog_index.htm>
<!DOCTYPE html>
<html>
<head>
<title>Simple Blog</title>
<link rel="stylesheet" type="text/css" href="style-blog.css">
</head>

<body>
<div class="header">
<h1>Simple Blog</h1>
</div>
<h3><i>Hey, this is my blog!</i></h3>

<div class="nav">
<h3>Navigation</h3>
<ul>
<li><a class ="selected" href="SimpleBlog_index.html">Home</a></li>
<li><a href="SimpleBlog_about.html">About</a></li>
<li><a href="SimpleBlog_contact.html">Contact</a></li>
</ul>
</div>

<div class="block1">
<p>Blogpost #1</p>
<br>
</div>

<div class="block1">
<p>Blogpost #2</p>
</div>


<div class="block1">
<p>Blogpost #3</p>
</div>


<div class="footer">
Copyright &copy; 2017 MyName.
</div>
</body>

</html>
</file>

----
===== Das Box-Modell =====
  * [[informatik:css:css-lernpfad-box-modell|Lernweg CSS Box-Modell]]

Das Boxmodell beschreibt rechteckige Bereiche, die auf dem Bildschirm mit Hilfe von Blockelementen dargestellt werden. Die vorrangige Eigenschaft von Blockelementen ist, dass sie standardmäßig Zeilenumbrüche vor und nach sich erzwingen.\\
\\
Ein Beispiel für ein Blockelement ist das div-Element (div = division = Bereich). Dieser Bereich besteht aus dem eigentlichen Inhalt, einem Innenabstand zu dem Rahmen des Elements, dem Rahmen und dem Abstand zu anderen Elementen, die auf einer Seite zu finden sind. Die abgebildete Grafik soll diese veranschaulichen:
{{:informatik:css-box-modell.png?540|}}

Im CSS-Boxmodell besteht die Struktur einer Webseite aus mehreren sogenannten Div-Boxen, die entweder ineinander verschachtelt oder auf einer Webseite entsprechend angeordnet werden können.\\
Eine Div-Box hat dabei die Eigenschaften width, height, padding, border und margin.\\ 
Div-Elemente sind dazu gedacht, um Texte, Grafiken, Tabellen usw. in gemeinsamen Bereichen einzuschließen. 


[[https://wiki.selfhtml.org/wiki/CSS/Box-Modell]] sowie {{ :unterricht:arbeitsauftraege:css_ab2.pdf |CSS #2}}

----

===== Dropdown-Menüs =====

HTML-Datei
<file html dropdown.htm>
<!DOCTYPE html>
<html>
<head>
   <title>Dropdown-Menu</title>
   <link rel="stylesheet" href="dropdown.css" type="text/css"/>
</head>

<body>
   	<div class="dropdown">
	<button class="dropbtn">Dropdown</button>
	<div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
	</div>
	</div>

</body>

</html>
</file>
\\
CSS-Datei
<file css dropdown.css>
/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - 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;
}
</file>
\\
=== 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.

<file css zweispaltiges_layout.css>
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;
}
</file>

=== 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 =====
<code>
/*Dies ist ein Kommentar.*/
</code>

===== 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
<code>
<table class="tdesign">
</code>
\\
\\
css
<code>
.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;
}
</code>
===== 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**\\
<code css>
@font-face {
  font-family: 'Name';
  src: url('fonts/DateinameDerSchriftart.ttf') format('truetype');
 }
</code>

**Schriftart in CSS nutzen**\\
<code css>
body {
  font-family:'Name';
}
</code>

===== 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]}}