CSS

Aus Flinkwiki
Wechseln zu: Navigation, Suche
Zur Startseite "Fachinformatiker"
Zur Seite "HTML"
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;

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.

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>

Rahmen

Syntax: 

<table border="1">

Farben

Links

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

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.

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] 

<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


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

|

Abgerufen von „https://flinkwiki.de/index.php?title=CSS&oldid=35“