CSS: Unterschied zwischen den Versionen

Version vom 3. Oktober 2019, 19:52 Uhr

Zur Startseite "Fachinformatiker"

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

ID-Selektor
Klassenselector
Elementselektor
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:

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/

|

@@ Zeile 1: / Zeile 1: @@
 <div align="right">'''[[Fachinformatiker|Zur Startseite "Fachinformatiker"]]'''</div>
 <div align="right">'''[[HTML|Zur Seite "HTML"]]'''</div>
+<div align="right">'''[[JavaScript|Zur Seite "JavaScript"]]'''</div>
 <div align="right">'''[[Webprogrammierung|Zur Seite "Webprogrammierung"]]'''</div>
 __FORCETOC__

CSS: Unterschied zwischen den Versionen

Version vom 3. Oktober 2019, 19:52 Uhr

Inhaltsverzeichnis

Style-Regeln

Selektoren

Rangfolge nach Exklusivität

Elementselektor

Universalselektor

Klassenselektor

ID-Selektor

Kombinationen von Selektoren

CSS-Eigenschaften

Schlagschatten

Browser-spezifisches Präfix

Hintergrundbild

Kurzschreibweise background

Runde Ecken

Positionierung

Tabellen

Grundgerüst

Rahmen

Farben

Links

Beispiele

Typografie

Schriftart

text-align

text-indent

Notizen

Parallax-Effekt

Grundgerüst für "responsive layout"

Gulp

Troubleshooting

Schrift extrem klein auf Android-Smartphone

Notizen

Mouseover

Links

Navigationsmenü

Suche