CSS

Seitenübersicht

Zur Seite "HTML"

Zur Seite "JavaScript"

Zur Seite "Webprogrammierung"

Style-Regeln

Style-Attribut (Inline Styling):

<h1 style="color: yellow; background: blue">

Inline-Styles sind zu vermeiden.

---

Style-Element (internes Stylesheet) im Kopfbereich (head section):

<style type="text/css" media="screen">
  <h1 style="color: blue; background: yellow">
</style>

---

Externe CSS-Datei (externes Stylesheet) in css-Dateien: Nach dem </title>-Tag wird mit folgendem Linkelement das Stylesheet spezifiziert:

<link type="text/css" rel="stylesheet" href="external.css" media="screen">

Schreibweise für Selektoren:

h1 { color : blue ; background : yellow }
p { color : red ; background : White }

---

Import: Über ein Master-Stylesheet können weitere Stylesheets importiert werden. Die @import-Direktiven müssen vor allen anderen Regeln stehen und mit einem Semikolon abgeschlossen werden.

@import "headings.css" ;
@import "paragraphs.css" ;

---

Kommentare:

/* Hier steht ein Kommentar. */

---

Selektoren

CSS Selector Reference

---

Rangfolge nach Exklusivität

1. ID-Selektor
2. Klassenselector
3. Elementselektor
4. Universalselector

---

Elementselektor

h1, ol	{ background : aqua  }

div	{ width : 50% }

---

Universalselektor

Der Universalselektor kann verwendet werden, um ein Format für den gesamten HTML-Text vorzugeben.

* { font-style:sans-serif }

div * { border : 0.2em solid green }

Der div * Selektor wirkt sich auf alle Elemente innerhalb von div aus, nicht aber auf das div-Element selbst.

---

Klassenselektor

.frame { border : 0.2em solid red }

p.frame { border : 0.2em solid blue ; width : 50% }

---

ID-Selektor

#span1 { background : yellow }
#span2 { background : lime }

p#para1 { background : cyan ; width : 70% }

---

Kombinationen von Selektoren

Ein Tag innerhalb eines anderen Tags:

h3 em
{

}

---

Ein Tag, das direkt auf ein anderes folgt:

h3 + p
{

}

---

Ein Tag mit einem Attribut:

a[title]
{

}

Erfasst alle Links, die eine Attribut title haben.

---

Ein Tag mit einem Attribut und einem genauen Wert:

a[title="Klicken Sie hier."]
{

}

---

Ein Tag mit einem Attribut und einem Bestandteil des Werts:

a[title*="hier"]
{

}

Im Wert des Attributs muss das Wort "hier" enthalten sein.

---

CSS-Eigenschaften

Schlagschatten

	box-shadow: 2px 2px 2px 0px #515151;	 

Wert 1 und 2 sind Pflicht, 3 und 4 optional.

• Wert 1: verschiebt den Schatten nach rechts (positiver Wert) oder nach links (negativer Wert).
• Wert 2: verschiebt den Schatten nach unten(positiver Wert) oder nach oben(negativer Wert).
• Wert 3: gibt an, wie stark der Schatten verwischt werden soll.
• Wert 4: macht den Schatten größer.

Mit einem weiteren Wert - inset - zeichnet man einen Schlagschatten, der nicht außerhalb, sondern innerhalb des Elements liegt.

---

Browser-spezifisches Präfix

• Chrom und Safari: -webkit-
• Firefox: -moz-
• Internet Explorer IE: -ms-
• Opera: -o-

Beispiel:

-webkit-box-shadow: 10px 10px 50px grey;
-moz-box-shadow: 10px 10px 50px grey;
box-shadow: 10px 10px 50px grey;

• https://www.html-seminar.de/css3-box-shadow.htm

---

Hintergrundbild

background-image: url(bilder/hintergrund.png);

Der Speicherort bezieht sich auf die CSS-Datei, nicht auf das HTML-Dokument.

---

Wiederholung:

background-repeat: repeat

horizontal:

background-repeat: repeat-x

horizontal

background-repeat: repeat-y

Wiederholung unterdrücken:

-background-repeat: norepeat

---

Kurzschreibweise background

Korrekte Reihenfolge:

#image {background: #000000 url(bild.jpg) no-repeat scroll center top;}

---

Runde Ecken

Man kann für ein Element mit der Eigenschaft border-radius den Radius bestimmen, mit dem die Ecken abgerundet werden.[1][2]

border-radius: 10 px

Mit diesem Wert hat der gedachte Kreis, mit dem das Element abgerundet wird, einen Radius von 10 Pixeln.

• Can I use: CSS3 Border-radius (rounded corners)

---

Positionierung

Elemente können durch Verwendung der Eigenschaft position aus dem normalen Elementfluss entfernt werden und an jede beliebige Stelle des Viewports positioniert werden. Auf andere Elemente haben positionierte Elemente keinen Einfluss.[3]

position: absolute

position: fixed

position: relative

position: static

position:static ist der Defaultwert der Eigenschaft position. Das Element verbleibt im Textfluss. Die Eigenschaften Top, Bottom, Left, Right werden ignoriert.

position: sticky

Tabellen

Grundgerüst

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Max</td>
      <td>Mustermann</td>
    </tr>
  </tbody>
</table>
</table>

• w2.org: Tabellen-Elemente

---

Rahmen

Syntax:

<table border="1">

• HTML table border Attribute

---

Farben

Links

• https://html-color-codes.info

• http://wiki.selfhtml.org/wiki/Grafik/Farbpaletten

• https://wiki.selfhtml.org/wiki/Grafik/Farbpaletten#Farbnamen

• CSS Color Module Level 3

• Adobe Kuler

• Color Scheme Designer (Color Wheel)

• Color-Picker

• ColorZilla

• Colorzilla: Ultimate CSS Gradient Generator

• http://cssmatic.com: CSS für grafische Effekte und simple Texturen

---

Beispiele

(Bei dunklen Farben wird der Code durch Markieren mit der Maus sichtbar.)

---

Wikipedia-Farben:

#B9FFC5

#FFAA00

#FFCBCB

#FFFF40

#FFEBAD

#B3B7FF

#E0E0E0

---

Schwarz:

#000000

#000

---

Weiß:

#FFFFFF

#FFF

---

Grau:

#EEEEEE

#EEE

#FAF9F8

#f2f1f0

#555555

#515151

#99a9b4

#808080

#eff2f5

#E1E4F3

#777777

---

Blau:

#0000FF

#00F

#366BF4

#33607f

lightblue

---

Grün:

#00FF00

#0F0

---

Gelb:

#FFFF00

#FF0

---

Orange:

#ffa500

RGB(255,165,0)

---

Rot:

#FF0000

#F00

#6E0026

---

Lila:

#707

---

Ocker, Braun:

#FFCF6F

#FFBE40

#FF910B

#A66E00

---

Typografie

• CSS Reference

• Zeichenreferenz

Schriftart

@font-face dient zur Verwendung personalisierter Schriftarten.

Schriftarten kann man u.a. hier herunterladen:

• https://www.fontsquirrel.com
• https://fonts.google.com/

Formate:

• ttf: TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
• eot: Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft.
• otf: OpenType Font. Ne fonctionne pas sur Internet Explorer.
• svg: SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.
• woff: Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.

[4]

Beispiel:

@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */
    font-family: 'cac_champagneregular';
    src: url('cac_champagne-webfont.eot');
    src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('cac_champagne-webfont.woff') format('woff'),
         url('cac_champagne-webfont.ttf') format('truetype'),
         url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'cac_champagneregular', Arial, serif;
}

[5]

---

text-align

text-align: left
text-align: right
text-align: center
text-align: justify

(justify = Blocksatz)

---

text-indent

text-indent: 2em
text-indent: -2em

Mit negativen Werten kann man Textzeilen zum Verschwinden bringen.

• https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/text-indent

---

Notizen

Erster Buchstabe als Majuskel:

p:first-letter { font-size : xx-large }

---

Parallax-Effekt

Parallax Scrolling. Parallax Scrolling bezeichnet einen Trend im Webdesign. Websites mit Parallax Scrolling lassen sich mittels der Scrollfunktion steuern. Scrollt der Nutzer herunter, bewegen sich die Elemente der Website unterschiedlich schnell.[6]

• Parallax Scrolling: Demos

<style>
.parallax { 
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>

[7]

---

Grundgerüst für "responsive layout"

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Tolle Webseite</title>
		
		<style>
		
			* {font-family:sans-serif; padding:0; margin:0;}
		
			.col {float:left;}
			.row {float:left; width:100%;}
		
			/* SMARTPHONE */
			@media screen and (max-width:400px) {
				.sm-100 {width:100%;}
				.sm-75 {width:75%;}
				.sm-50 {width:50%;}
				.sm-33 {width:33.333333%;}
				.sm-25 {width:25%;}
				.sm-20 {width:20%;}
				.hidden-sm {display:none;}
			}
			
			/* TABLET */
			@media screen and (min-width:401px) and (max-width:768px){
				.md-100 {width:100%;}
				.md-75 {width:75%;}
				.md-50 {width:50%;}
				.md-33 {width:33.333333%;}
				.md-25 {width:25%;}
				.md-20 {width:20%;}
				.hidden-md {display:none;}
			}
			
			/* DESKTOP */
			@media screen and (min-width:769px){
				.lg-100 {width:100%;}
				.lg-75 {width:75%;}
				.lg-50 {width:50%;}
				.lg-33 {width:33.333333%;}
				.lg-25 {width:25%;}
				.lg-20 {width:20%;}
				.hidden-lg {display:none;}
				.wrapper {width:769px; margin:0 auto;}
			}		
		
			article {background:lightblue; margin:5px;}
			.row {background:#00F; margin-bottom:5px;}
		
			.h50 {min-height:50px;}
			.h100 {min-height:100px;}
			.h150 {min-height:150px;}
		
		</style>
		
		
	</head>
	
	
	
	<body>
		
		<div class="wrapper">
		
		
		<div class="row">
			<div class="col sm-100 md-100 lg-100"><article class="h50">TEXT</article></div>

		</div>
		
				<div class="row">
			<div class="col sm-100 md-100 lg-100"><article class="h50">TEXT</article></div>

		</div>
		
				<div class="row">
			<div class="col sm-100 md-100 lg-100"><article class="h50">TEXT</article></div>

		</div>
		
				<div class="row">
			<div class="col sm-100 md-100 lg-100"><article class="h50">TEXT</article></div>

		</div>
		
		
		
		</div><!-- end of wrapper-->
	</body>
	
</html>

---

Gulp

Ist Node.js vorhanden?

node -v

Ggf. installieren:

yum install nodejs

bzw.

apt install nodejs

gulp installieren:

apt install gulp

bzw.

yum install gulp

less-Dateien kompilieren:

cd ./less
gulp less

• A Beginners Guide to the Task Runner Gulp

---

Troubleshooting

Schrift extrem klein auf Android-Smartphone

Abhilfe: Im head-Bereich folgende Zeile einfügen:

<meta name="viewport" content="width=device-width" />

---

Notizen

Mouseover

To add the mouseover text though, you'll need to take advantage of the span's title attribute. Assigning a value to an attribute looks like this:

 <span title="I am hovering over the text">This is the text I want to have a mousover</span>

Result:

This is the text I want to have a mousover

[8]

---

Links

• https://www.w3schools.com/w3css/default.asp

• https://developer.mozilla.org/de/docs/Web/CSS/CSS_Referenz

• Can I use

• Browsershots: zeigt an, wie Seiten in verschiedenen Browsern aussehen

• http://www.csszengarden.com/

• https://www.freeformatter.com/css-beautifier.html

• https://www.cssmatic.com/

---

|