CSS Cascading Stylesheets
|
|
|
- Oldwig Fleischer
- vor 5 Jahren
- Abrufe
Transkript
1 1 CSS Cascading Stylesheets
2 CSS Einführung CSS: Cascading Style Sheets Bestimmt die Darstellung von HTML-Elementen CSS löste ein Problem HTML war ursprünglich nicht dafür entwickelt worden, Formatierungen zu beinhalten HTML 3.2 führte Formatierungstags ein, welche die Entwicklung jedoch kompliziert machten (z.b. <i>, <b> für kursive und fette Schrift) Änderungen mussten in jedem HTML-Dokument einzeln vorgenommen werden Als Lösung für das Problem führte das W3C CSS ein CSS trennt Design vom Inhalt Alle Formatierungen sollten in eine gesonderte.css Datei ausgelagert werden So lässt sich die Darstellung der Website in nur einer Datei bearbeiten 2
3 CSS Versionen CSS 1 (1996) Erste Version von CSS Unterstützt Fonts, Farben, Alignments, etc. Von allen aktuellen Browsern unterstützt CSS 2 (1998) Führte u.a. absolute und relative Positionen ein War zunächst fehlerhaft und daher wenig beliebt, heutzutage vom W3C nicht mehr empfohlen CSS 2.1(2011) Überarbeitete Version von CSS 2, behob einige Fehler und Unstimmigkeiten Mittlerweile von den meisten gängigen Browsern korrekt implementiert CSS 3 Seit 2000 in Entwicklung CSS Namespaces, Media Queries, u.v.m. 3
4 CSS Syntax h1 {color:blue; font-size:12px; Selekto r Deklaration Eigenschaft : Wert Deklaration Eigenschaft: Wert Selektor wählt das betroffene HTML-Element aus Deklarationsblock enthält die Formatierungen Formatierung wird für alle passenden Elemente übernommen <html> <h1> Dies ist eine Überschrift </h1> </html> Dies ist eine Überschrift 4
5 CSS Einbindung Externe Einbindung Empfohlen für CSS-Regeln, die mehr als nur eine Seite betreffen Textdatei mit Dateiendung.css Einbindung in das HTML-Dokument über Link <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Interne Einbindung Sollte nur verwendet werden, wenn die CSS-Regeln nicht mehr als eine Seite betreffen CSS-Regeln werden innerhalb von <style>-tags definiert <head> <style> <! CSS Regeln > </style> </head> 5
6 CSS Selektoren Einleitung Selektoren Dienen dazu, die zu formatierenden Elemente des HTML-Dokuments auszuwählen Dürfen nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben beginnen Aufbau einer CSS-Anweisung Selektor, Selektor { Anweisung:Wert; Anweisung:Wert; 4 Typen von Selektoren Format Selektor Selektierte Elemente Beispiel span Element Selektieren alle span-elemente im span {... Dokument.Klasse1 Klasse Selektieren alle Elemente mit der.klasse1 {... Klasse Klasse1 im class-attribut #logo ID Selektieren genau das Element mit #Logo {... dem id-attribut-wert logowrapper * Universal Selektiert alle Elemente des Dokuments * {... 6
7 CSS Selektoren Verschachtelung An Beispielen Typ-Selektoren können ein Element präzisieren Selektiert alle span-elemente mit der Klasse Klasse1 Selektiert nur span-elemente mit der ID logo Selektiert alle span-elemente mit der Klasse wrapper und der ID logowrapper Typ-Selektoren können geschachtelt werden Nachfahren-Selektor p span {... Alle span-elemente, die sich innerhalb von Paragraphen befinden, z.b.: span#logo {... span.klasse1 {... span.wrapper#logowrapper {... <p> <span>selektiert</span> <div><span>selektiert</span></div> </p> Kind-Selektor p>span {... Alle direkten span-element-kinder von Paragraphen, z.b.: <p> <span>selektiert</span> <div><span>nicht selektiert</span></div> </p> 7
8 CSS Selektoren Verschachtelung An Beispielen Typ-Selektoren können geschachtelt werden (Forts.) Nachbar-Selektor Attribut-Selektor div + p {... <div></div> <p>selektiert</p> <p>nicht Selektiert</p> Format Erklärung Beispiel Sel.[Attr] Sel.[Attr="Wert"] Sel.[Attr^="Wert"] Das Attribut muss vorhanden sein Das Attribut muss den Wert Wert haben Der Wert des Attributs muss mit Wert beginnen img[alt] {... input[type="checkbox"] {... a[href^=" {... 8
9 CSS Selektoren Pseudoklassen Pseudoklassen werden durch Benutzerinteraktion oder durch die Struktur des HTML-Dokuments vergeben, z.b.: 9 Überfahren eines Links :hover Erstes Element in einer geordneten Liste :first-child Format Erklärung Beispiel Selektor:hover Überfahren eines Links a:hover{... Selektor:active Link ist angeklickt a:active{... Selektor:visited Besuchter Link a:visited{... Selektor:link Unbesuchte Links a:link{... Selektor:focus Element ist fokussiert input[type="text"]:focus{... Selektor:first child Erstes Kind des Elements #linkliste:first child{... Selektor:not(S) Selektiert alle Elemente, die den Selektor S nicht besitzen img:not(.thumbnail){... Weitere Selektoren siehe:
10 CSS Hintergründe Hintergrundfarbe Mit background-color:lightgrey wird die Hintergrundfarbe festgelegt (hier: hellgrau) Hintergrundbild Mit background-image:url("logo.png") wird die URL zur Bilddatei angegeben Positionierung Background-position: bottom right gibt die Position des Bildes an Der Rest der Seite bekommt die festgelegte Hintergrundfarbe (hellgrau) bottom, top, center, left, right können alleine oder auch in Kombination verwendet werden Alternativ kann der horizontale und vertikale Abstand zum Bildschirmrand angegeben werden Beispiel: background-position: 50% 30px; 10
11 CSS Hintergründe Hintergrundbild Wiederholung horizontal oder vertikal background-repeat: no-repeat gibt an, wie oft das Bild wiederholt werden soll no-repeat: keine Wiederholung repeat: das Bild wird horizontal und vertikal wiederholt repeat-x: das Bild wird nur horizontal wiederholt repeat-y: das Bild wird nur vertikal wiederholt Background-attachment background-attachment: fixed gibt an, ob sich das Hintergrundbild beim Scrollen mitbewegt fixed: Bild scrollt nicht mit scroll: Bild scrollt mit 11
12 CSS Hintergründe Beispiel für horizontale Wiederholung Kleines Ausgangsbild spart Bandbreite und erhöht die Ladegeschwindigkeit Hintergrund beliebig skalierbar Homepage Home Über Mich Download Blog s Neuigkeiten Lorem impsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod 12
13 CSS Hintergründe Mehrere Hintergrundbilder Mehrere Hintergrundbilder für ein Element Mit background-image werden die URLs der Bilder komma-separiert angegeben Die Reihenfolge bei background-image ist ausschlaggebend background-image: url(logo.png), url(verlauf.png); background-position: bottom right, 100% center; background-repeat: no-repeat, repeat-x; Der jeweils erste Wert der Attribute bezieht sich auf das erste Bild (logo.png) und der zweite Wert auf das zweite Bild (verlauf.png) Durch mehrere Hintergrundbilder kann man zum Beispiel Hintergründe dynamisch an die Bildschirmgröße anpassen (Responsive Design) 13
14 CSS Hintergründe Mehrere Hintergrundbilder Beispiel background-image: url(logo.png), url(verlauf.png); background-position: bottom right, top left; background-repeat: no-repeat, repeat-x; 14
15 CSS Größeneinheiten Einheit Verhältnis Beschreibung in (Inch) cm (Zentimeter) mm (Millimeter) 1 in = 2.54 cm Größenangabe in Inch 1 cm = 10 mm Größenangabe in Millimetern 10 mm = 1 cm Größenangabe in Zentimetern pt (Punkte) 1 pt = 1/72 in = 0, mm Größenangabe in (Bild-)Punkten (Vereinheitlicht durch 1/72 Inch definiert) pc (Pica) 1 pc = 12 pt Größenangabe in Pica em (Schriftgröße) ex (x-schriftgröße) px (Pixel) 15 1 em = 100% Schriftgröße 1 ex = 100% Schriftgröße des kleinen x 1 px = 1 Pixel Größenangabe in Prozent, relativ zur Standard-schriftgröße Größenangabe in Prozent, relativ zum kleinen x in Standardgröße Größenangabe relativ zur Auflösung 1 px entspricht einem Pixel des Bildschirms Quelle:
16 CSS Fonts Schriftarten auswählen Mit font-family lassen sich Schriftarten auswählen Achtung: Schriftart muss auf dem System des Benutzers installiert sein Es sollten stets mehrere Schriftarten angegeben werden, falls der Browser die gewünschte nicht unterstützt Beispiel: font-family: "Times New Roman", Times, serif Erster Parameter: die bevorzugte Schriftart Letzter Parameter: generische Font-Family, damit der Browser selbst eine ähnliche Schriftart wählen kann 16
17 CSS Fonts font-style bestimmt den Schrifttyp normal für gewöhnlichen Text italic für kursive Schrift font-weight bestimmt die Dicke der Buchstaben normal für gewöhnliche Buchstaben bold für fette Buchstaben 100, 200,, 900 für genau bestimmte Dicke 400 ist wie normal, 700 ist wie bold 17
18 CSS Fonts Webfonts Benötigen keine Installation im Browser Werden automatisch von einer Online-Ressource bezogen font-family: 'Calligraffitti' ; font-style: normal; font-weight: normal; src: local('calligraffitti'), url(' /... /calligraffitti.otf'); Google bietet eine Reihe von frei verwendbaren Schriftarten an Externe CSS-Dateien mit den Schriftart-Definitionen werden, wie gewohnt, mit dem <link>-tag eingebunden <link href = " rel="stylesheet" type="text/css"> 18
19 CSS Boxmodell Jedes HTML Blocklevel Element ist von einem Rahmen umgeben Mit margin, padding und border gibt man den Außenabstand, Innenabstand und die Rahmenbreite an 19
20 CSS Boxmodell Border border-width gibt die Rahmenbreite an Längenangaben: z.b. em, ex, px Vordefiniert: thin, medium, thick border-color gibt die Farbe an border-style gibt die Form an None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset Will man nur eine bestimmte Seite des Rahmens adressieren, kann man dies mit entsprechenden Attributen tun z.b. border-left-style für nur die linke Seite des Rahmens 20
21 CSS Textschatten Das Attribut text-shadow erlaubt es, Texte mit Schatteneffekten zu versehen Beispiel: text-shadow: -4px 4px 2px dimgrey Der erste Wert (-4px) gibt die horizontale Verschiebung an Negative Werte versetzen den Schatten nach Links und positive Werte nach rechts Der zweite Wert (4px) gibt die vertikale Verschiebung an Negative Werte versetzen den Schatten nach oben und positive Werte nach unten Der dritte Wert (2px) gibt die Schärfe des Schattens an Je größer der Wert, umso mehr wird der Schatten verwischt (0px = scharfe Kanten) Der letzte Wert gibt die Farbe des Schattens an 21
22 CSS Textschatten Beispiel <!DOCTYPE html> <html> <head> <style> h1 {text-shadow: -4px 4px 2px dimgrey; </style> </head> <body> <h1>text mit Schatteneffekt!</h1> </body> </html> 22
23 CSS Box Schatten Das Attribut box-shadow verleiht jedem Element einen Schatteneffekt Selbes Prinzip wie bei text-shadow <head> <style> div { box-shadow: 10px 10px 5px grey; width: 300px; height: 70px; padding: 15px; background-color: cornflowerblue; font-weight: bold; </style> </head> <body> <div> <br> Div-Element mit Schatteneffekt! wort</div> </body> 23
24 CSS Abgerundete Ecken Das Attribut border-radius erlaubt es, HTML- Elemente mit abgerundeten Ecken zu versehen Beispiel: border-radius: 30% 24 Je höher der Wert, umso runder die Ecken Bei einem Wert ab 50% sind keine geraden Kanten mehr vorhanden <head> <style> div { border-radius: 30%; box-shadow: 10px 10px 5px grey; width: 250px; height:150px; padding: 15px; background-color: cornflowerblue; font-weight: bold; </style> </head> <body> <div> Div-Element mit abgerundeten Ecken! </div> </body>
25 CSS Farben CSS bietet unterschiedliche Techniken zur Farbwahl Mit unterschiedlichen Techniken können dieselben Farben erzielt werden Keine Technik ist der anderen überlegen Wahl der Technik abhängig von Gewohnheit oder persönlicher Präferenz RGBA(Rot, Grün, Blau, Alpha) Die Werte rot, grün und blau können zwischen 0 und 255 liegen Alpha beeinflusst die Transparenz der Farbe Der Wert alpha kann zwischen 0.0 (völlige Transparenz) und 1.0 (Blickdicht) liegen Wenn keine Transparenz gewünscht ist, kann statt dessen auch RGB(Rot, Grün, Blau) verwendet werden 25
26 CSS Farben HSLA(Farbton, Sättigung, Helligkeit, Alpha) Farbton kann zwischen 0 und 359 liegen (in Anlehnung an ein 360 Farbrad) Die Reihenfolge der Farben entspricht der eines Regenbogens Rot, Orange, Gelb, Grün, Blau, Indigo, Violett Der zweite Parameter gibt die Sättigung der Farbe in Prozent an (100% = voller Farbton und 0% = Grau) 50% Helligkeit entspricht dem normalen Farbton. Je höher der Wert, umso heller die Farbe (100% = weiß und 0% = schwarz) Hilfreiches Tool um RGB und HSL Werte zu ermitteln unter: 26
27 CSS Farbverlauf Fließender Übergang von einer Farbe in die andere Es gibt linearen und radialen Verlauf Ein linearer Verlauf kann horizontal, vertikal oder diagonal sein Kann auch über mehr als zwei Farben gehen 27
28 CSS Farbverlauf Linearer Verlauf Syntax background: linear-gradient(to bottom, white 0%, blue 100%); Der erste Parameter gibt die Verlaufsrichtung an (hier: von oben nach unten) Die restlichen Parameter geben die Farben an Optionale Prozentwerte geben die Stellen des Farbwechsels an background: linear-gradient(45deg, blue, white); Diagonale Verläufe können durch Winkelangaben realisiert werden 28
29 CSS Farbverlauf Radialer Verlauf Syntax background: radial-gradient(blue, white); Parameter für die Farbverteilung wie bei linearem Verlauf background: repeating-radial-gradient(blue, white 15%, blue 30%); Erzeugt wiederholten Farbverlauf Hier: Verlauf von blau zu weiß, zurück zu blau für einen fließenden Übergang Box mit wiederholtem Verlauf 29
30 CSS Text-/Elementfluss Üblicherweise erscheinen Elemente untereinander Float-Attribut Nimmt ein Element aus dem normalen Seitenfluss float:left z.b. stellt das Element auf die linke Seite des Eltern-Elements Alle anderen Elemente (Text oder andere Blocklevel-Elemente) fließen um dieses Element herum Mögliche Werte float:left, float:right, float:none Clear-Attribut Wird genutzt, um das floating zu beenden Das erste Element, das nicht mehr um das floating-element fließen soll, bekommt dieses Attribut Mögliche Werte clear:left, clear:right, clear:both 30
31 CSS Text-/Elementfluss Beispiel Normaler Fluss #div1 { width:80px; height:80px; background color:#ffa; #div2 { width:80px; height:80px; background color:#ff5; #div3 { width:80px; height:80px; background color:#dd2; #div4 { width:80px; height:80px; background color:#fdd; #div5 { width:200px; height:80px; background color:#fbb; 31
32 CSS Text-/Elementfluss Beispiel Linksfluss #div1 {float:left; width:80px; height:80px; background color:#ffa; #div2 {float:left; width:80px; height:80px; background color:#ff5; #div3 {float:left; width:80px; height:80px; background color:#dd2; #div4 {float:left; width:80px; height:80px; background color:#fdd; #div5 {float:left; width:200px; height:80px; background color:#fbb; 32
33 CSS Text-/Elementfluss Beispiel Rechtsfluss #div1 {float:right; width:80px; height:80px; background color:#ffa; #div2 {float:right; width:80px; height:80px; background color:#ff5; #div3 {float:right; width:80px; height:80px; background color:#dd2; #div4 {float:right; width:80px; height:80px; background color:#fdd; #div5 {float:right; width:200px; height:80px; background color:#fbb; 33
34 CSS Text-/Elementfluss Beispiel Linksfluss und Rechtsfluss gemeinsam #div1 {float:right; width:80px; height:80px; background color:#ffa; #div2 {float:right; width:80px; height:80px; background color:#ff5; #div3 {float:left; width:80px; height:80px; background color:#dd2; #div4 {float:left; width:80px; height:80px; background color:#fdd; #div5 {float:right; width:200px; height:80px; background color:#fbb; 34
35 CSS Text-/Elementfluss Beispiel Linksfluss mit Clear #div1 {float:left; width:80px; height:80px; background color:#ffa; #div2 {float:left; width:80px; height:80px; background color:#ff5; #div3 {float:left; width:80px; height:80px; background color:#dd2; #div4 {clear:left; width:80px; height:80px; background color:#fdd; #div5 { width:200px; height:80px; background color:#fbb; 35
36 CSS Text-/Elementfluss Beispiel Linksfluss mit Clear-Unterbrechung #div1 {float:left; width:80px; height:80px; background color:#ffa; #div2 {float:left; width:80px; height:80px; background color:#ff5; #div3 {clear:left; width:80px; height:80px; background color:#dd2; #div4 {float:left; width:80px; height:80px; background color:#fdd; #div5 {float:left; width:200px; height:80px; background color:#fbb; 36
37 CSS Positionierung Absolute Positionierung Elemente erscheinen normalerweise in der Reihenfolge, in der sie im Code stehen Das Attribut position mit dem Wert absolut nimmt das Element aus dem normalen Fluss Das Element erscheint genau an der spezifizierten Stelle Die Angaben top, left, right oder bottom geben die entsprechenden Abstände zum Rand an Bei position:absolute beziehen sich die Abstände zum Rand des Eltern-Blocklevel-Elements Z-Index ermöglicht es Elemente zu Überlappen. Default-Wert ist 0 Elemente mit höherem z-index erscheinen vor Elementen mit niedrigem z-index <body> body <div id="div1">div1 absolute <div id="div2">div2 absolute</div> <div id="div3">div3 absolute</div> <div id="div4">div4 absolute</div> </div> </body> siehe Beipiel 37
38 CSS Positionierung Absolute Positionierung - Beispiel 130px -50px 100px 120px 20px 20px body { width:400px; height:400px; #div1 { position:absolute; top:120px; left:100px; width:250px; height:250px; z index:3; background color:#ffa; #div2 { position:absolute; top:20px; left:20px; width:80px; height:80px; z index:1; background color:#ff5; #div3 { position:absolute; top:20px; right:20px; width:80px; height:80px; z index:2; background color:#dd2; #div4 { position:absolute; top:130px; left: 50px; width:190px; height:70px; z index: 1; background color:#fdd; 38
39 CSS Positionierung Relative Positionierung Das Element mit dem Attribut position:relative bleibt im normalen Fluss der Seite Die Position wird relativ zur Position anderer Elemente um ihn bestimmt Alternativ ausgedrückt: Ausgangspunkt für die neue Position ist die ursprüngliche Position des Elements im Seitenfluss <body> <p>the text at the end of this sentence <span class="super">is in superscript</span></p> <p>the text at the end of this sentence <span class="sub">is in subscript</span></p> <p>the text at the end of this sentence <span class="shiftleft">is shifted left</span></p> <p>the text at the end of this sentence <span class="shiftright">is shifted right</span></p> </body> 39
40 CSS Positionierung Relative Positionierung - Beispiel.super {position: relative; top: 1ex;.sub {position: relative; bottom: 1ex;.shiftleft {position: relative; left: 1ex;.shiftright {position: relative; right: 1ex; 40
41 CSS Animation CSS-Animationen ohne Flash oder JavaScript Wurden erst durch CSS3 ermöglicht Sind für fast alle HTML-Elemente möglich Zusätzliche Software wird nicht benötigt Animationen überführen ein Element fließend von einem Zustand in den nächsten Dafür müssen Keyframes festgelegt werden Keyframes beschreiben einzelne Zustände in einer Animation Eine Animation enthält beliebig viele festgelegte Zustände Es können folglich beliebig viele CSS-Regeln beliebig oft geändert werden 41
42 CSS Animation Legt genau fest, zu welchen Zeitpunkten in der Animation, welche CSS-Regeln gelten Die fließenden Transitionen zwischen den festgelegten Zuständen geschehen automatisch Die so festgelegte Animation muss anschließend in ein Element eingebunden beispiel { from {background color: red; to {background color: yellow; Definition der Animation div { width: 100px; height: 100px; background color: yellow; animation name: beispiel; animation duration: 4s; Einbindung der Animation 42
43 CSS Animation Keyframes Syntax Für mehr als nur zwei Zustände werden statt from und to Prozentwerte angegeben Innerhalb der geschweiften Klammern können beliebig viele CSS Regeln festgelegt beispiel { 0% {background color: red; left: 0px; top: 0px; 25% {background color: yellow; left: 200px; top: 0px; 50% {background color: blue; left: 200px; top: 200px; 75% {background color: green; left: 0px; top: 200px; 100% {background color: red; left: 0px; top: 0px; Hintergrundfarbe und Position des Quadrates gehen fließend ineinander über 43
44 CSS Animation Einbindung Syntax Das Element, in dem die Animation eingebunden wurde, kann durch verschiedene Attribute die Animation weiter modifizieren animation-name: beispiel legt fest, welche Animation benutzt wird animation-duration: 4s legt fest, wie lange ein Durchlauf der Animation dauert. Dieser Wert sollte gesetzt werden, da der Standardwert 0 ist (keine Animation) animation-delay: 2s legt fest, wie lange gewartet werden soll, bis die Animation beginnt animation-iteration-count: 3 legt fest, wie oft die Animation ausgeführt werden soll. Falls sie niemals aufhören soll, kann hier der Wert infinite angegeben werden animation-direction: reverse legt fest, dass die Animation in umgekehrter Reihenfolge durchgeführt werden soll. Der Wert alternate gibt hierbei an, dass die Animation vorwärts, rückwärts, vorwärts u.s.w. ausgeführt werden soll animation-timing-function: legt die Geschwindigkeitskurve der Animation fest ease Animation startet langsam, wird schneller und dann wieder langsamer (default) linear durchgehend die selbe Animationsgeschwindigkeit ease-in langsamer Animationsstart ease-out langsames Animationsende ease-in-out langsamer Animationsstart und langsames Animationsende 44
45 CSS Animation Beispiel <!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; background image: url(logo_tu.png); background repeat: no repeat; position: relative; animation name: slide; animation duration: slide { from {left: 200px; opacity: 0.0; to {left: 0px; opacity: 1.0; </style> </head> <body> <div></div> </body> </html> 45
46 CSS Transition und Transformation Transformationen Erlauben das Bewegen, Rotieren und Skalieren von Elementen (nicht animiert) transform: rotate(180deg) scale(2, 3) skewx(20deg); Das Element dreht sich um 180 Grad (rotate(180deg)) Verdoppelt seine Breite und verdreifacht die Höhe (scale(x, y)) Wird horizontal (x-achse) um 20 Grad verzerrt (Analog: SkewY(20deg), vertikal verzerrt (y-achse)) 46
47 CSS Transition und Transformation Transitionen Erlauben es, CSS Eigenschaftswerte fließend ineinander übergehen zu lassen Beispiel: Beim Mouseover rotiert das Bild um 360 div { width: 50px; height: 50px; background-image: url(pfeil.png); transition: transform 3s; div:hover { transform: rotate(360deg); Verlässt die Maus das Element, so geht es fließend wieder in den alten Zustand über So lassen sich z.b. animierte Buttons oder Firmenlogos erstellen Im Gegensatz zu Animationen lassen sich bei Transitionen keine Zwischenpunkte (keyframes) festlegen und keine Wiederholungen angeben. Transitionen müssen über ein Ereignis wie mouseover ( :hover) ausgelöst werden. 47
48 CSS Media Types Unterschiedliche Darstellungen der selben Seite Verschiedene Endgeräte (Monitor, Smartphone, Drucker ) erfordern ggf. unterschiedliche Darstellungen In der Regel sind auf Bildschirmen größere Buchstaben und serifenfreie Schriftarten sinnvoll, wohingegen die Druckansicht eher kleinere Buchstaben und Serifen benötigt MediaTypes ermöglichen es, unterschiedliche Style-Regeln für verschiedene Endgeräte im selben Stylesheet zu definieren Definiert die unterschiedlichen CSS-Regeln für das jeweilige all Gilt für alle Typen von screen Gilt für print Gilt für Drucker und handheld Gilt für Handheld-Geräte 48
49 CSS Media Types Beispiel <!DOCTYPE html> <html> <head> screen { p { font family: verdana, sans serif; font size: print { p { font family: georgia, serif; font size: 14px; color: blue; </style> </head> <body> Regel</h2> <p>dieser Textabsatz wird in Druck Testund Normalansicht in unterschiedlicher TestSchrift, Schriftgröße und Farbe Testdargestellt</p> </body> </html> Darstellung Computerbildschirm Darstellung Drucker 49
50 CSS Präprozessoren CSS hat viele Nachteile Keine Variablen (wünschenswert bei Abständen oder Farben) Redundanter Code für unterschiedliche Selektoren Keine Imports Keine Verschachtelung von Selektoren in den Regel-Blöcken, z.b.: CSS-Präprozessoren.Klasse1{ margin: 10px;.Klasse2{ padding:2px; Viele Alternativen: SASS, LESS, Stylus, Turbine etc. In dieser Vorlesung: SASS (Syntactically Awesome Stylesheets) mit der SCSS-Syntax (Sassy CSS) 50
51 CSS SASS Einleitung SASS Anweisungen in einer ".scss"-datei Aufteilung in mehrere Dateien möglich (Import) Volle CSS-Kompabilität Reines CSS in scss-dateien ebenfalls erlaubt Nutzung nur solcher SASS-Komponenten, die benötigt werden In Anwendung Schreiben des SASS-Codes Nutzung eines Präprozessors-Tools z.b. "Prepros" oder des Online-Präprozessors Einbinden der generierten CSS-Datei in das HTML-Dokument 51
52 CSS SASS Beispiele Verschachtelung /* standard.scss */ nav { margin: 0; ul { padding: 0; list style: none; li { display: inline block; a { display: block; padding: 6px 12px; text decoration: none; $name (Variablen definieren) /* standard.css */ nav { margin: 0; nav ul { padding: 0; list style: none; nav li { display: inline block; nav a { display: block; padding: 6px 12px; text decoration: none; 52 /* standard.scss */ $font stack: Helvetica, sans serif; $primary color: #333; body { font: 100% $font stack; color: $primary color; /* standard.css */ body { font: 100% Helvetica, sans serif; color: #333; Beispiele von und "CSS" von Kai Laborenz
53 CSS SASS (Importieren) Dateiname der ausgelagerten Datei beginnt mit einem Unterstrich /* standard.scss 'reset'; body { font: 100% Helvetica, sans serif; background color: #efefef; /* _reset.scss */ html, body, ul, ol { margin: 0; padding: 0; /* standard.css */ html, body, ul, ol { margin: 0; padding: 0; body { font: 100% Helvetica, sans serif; background color: (Wiederverwendung von Code-Blöcken) Können als Methoden mit Parametern angesehen werden /* standard.scss border radius($radius) { border radius: $radius;.box border radius(10px); 53 /* standard.css */.box { border radius: 10px; Beispiele von und "CSS" von Kai Laborenz
54 CSS SASS Beispiele Operatoren (+, -, *, /, %) Achtung, inkompatible Typen beachten: (20px + 10px) * /* 20% standard.scss */.gallerywrapper { width: 100%;.galleryWrapper.galleryItem { float: left; width: 320px / 960px * 100%; /* standard.css */.gallerywrapper { width: 100%;.galleryWrapper.galleryItem { float: left; width: %; <! Beispiel.html > <html><head><style>.gallerywrapper { width: 100%;.galleryWrapper.galleryItem { float: left; width: %; </style></head><body> <div class="gallerywrapper"> <img src=" class="galleryitem"> <img src=" class="galleryitem"> <img src=" class="galleryitem"> <img src=" class="galleryitem"> <img src=" class="galleryitem"> </div> </body></html> 54 Beispiele von und "CSS" von Kai Laborenz
55 CSS SASS (Vererbung) /* standard.scss */.message { border: 1px solid #ccc; padding: 10px; color: #333;.success border color: green;.error border color: red; /* standard.css */.message,.success,.error { border: 1px solid #ccc; padding: 10px; color: #333;.success { border color: green;.error { border color: red; Schleifen und Kontrollstrukturen Siehe z.b.: 55 Beispiele von und "CSS" von Kai Laborenz
56 CSS Frameworks Einleitung Bestimmte CSS-Eigenschaften und Strukturelemente sind für den Stil aller Websites sinnvoll Hervorhebungen für Quellcode, Hinweise etc. Icons zum Weiterblättern (Pagination) Tooltips, Dialoge, etc. Weitere Beispiele: Erstellung eigener CSS-Bibliothek Wiederverwendbare CSS-Regeln Implementierung des eigenen Stils Zeitintensiv bei Erstellung und Pflege Browser- und Abwärtskompatibilitäten zu berücksichtigen Daher: Nutzung von fertigen Frameworks, die die Grundgestaltung übernehmen Z.B.: Foundation, Bootstrap, Skeleton, YAML, etc. 56
57 CSS Frameworks Bootstrap Einführung Bootstrap wurde 2011 von Twitter veröffentlicht Nutzt HTML, CSS und JavaScript Benötigt JQuery-Bibliothek (s. Kapitel JavaScript) <script src=" Vordefinierte Klassen und Komponenten "Mobile first"-ansatz Automatische Anpassung des Layouts auf kleinen Displays Schnelle Entwicklung von "gutaussehenden" Websites Einbindung des Frameworks (extern) <link rel="stylesheet" href=" <link rel="stylesheet" href=" theme.min.css"> <script src=" 57
58 CSS Frameworks Bootstrap Buttons Hinzufügen der Klasse "btn btn default" lässt Element wie einen Button aussehen Verschiedene Farbgestaltungen möglich <html><head> <link rel="stylesheet" href=" <link rel="stylesheet" href=" theme.min.css"> <script src=" </head><body> <a class="btn btn default" href=" dortmund.de">link</a> <span class="btn btn default">default</span> <span class="btn btn primary">primary</span> <span class="btn btn success">success</span> <span class="btn btn info">info</span> <span class="btn btn warning">warning</span> <span class="btn btn danger">danger</span> <span class="btn btn link">link</span> </body></html> 58
59 CSS Frameworks Bootstrap Hinweise Hinzufügen der Klasse "alert alert success" zu einem div-tag lässt das Tag wie einen Hinweis aussehen Verschiedene Farbgestaltungen möglich <div class="alert alert success">erfolgreich</div> <div class="alert alert info">info</div> <div class="alert alert warning">warnung</div> <div class="alert alert danger">fehler</div> 59
60 CSS Frameworks Bootstrap Icons Verwendung von Icons sinnvoll, um Semantik zu verdeutlichen Nutzung mittels span-tag und der Klasse "glyphicon glyphicon T" (T ist der Icon-Typ) Bootstrap bietet über 250 Icons in Form einer Schriftart Verlustfreie Skalierung Nutzung mit Buttons und anderen Elementen möglich Übersicht über verfügbare Icons: Apfel: <span class="glyphicon glyphicon apple"></span> <br> <a class="btn btn default" href=" dortmund.de"> <span class="glyphicon glyphicon globe"></span> Website </a> 60
61 CSS Framworks Bootstrap Komponenten Grid-System zur einfachen Erstellung von Layouts Anpassung je nach Displaygröße: "Responsive Design" Standardmäßig 12 Spalten verfügbar Bei zu wenig Platz: Spalten werden in Zeilen umgebrochen Syntax Umgebendes div-element mit der Klasse: row Innere div-elemente (Spalten) mit Klasse: col K B K: Geräteklasse B: Breite der Spalte (1-12) Bsp.: "col md 6" Mehrere Geräteangaben je div-tag möglich Gerät Größe Präfix Sehr klein < 768px col xs (Smartphone) Klein (Tablet) >= 768px col sm Medium (Desktop) >= 992px col md 61 Groß (Desktop) >= 1200px col lghttp://getbootstrap.com/css/#gr id
62 Bootstrap Container Container bilden die Basis des Grid-Systems in bootstrap Zeilen (rows) und darin enthaltene Spalten (cols) werden in Container gefasst Container sind responsiv und wahlweise mit fixierter Breite (fixed-width) oder voller Breite (fluid-width).container => Rand links und rechts.container-fluid => 100% breit, auch bei verschiedenen Geräten 62
63 CSS Frameworks Bootstrap Komponenten Beispiel zum Grid-System Geräteklasse: Groß Geräteklasse: Medium 63 Geräteklasse: Kleiner als medium <div class= container > <div class="row"> <div class="col lg 2">Navigations Spalte</div> <div class="col lg 10"> <div class="row"> <div class="col lg 8 col md 6"> <h1>überschrift</h1> </div> <div class="col lg 4 col md 6"> <h2>weitere Informationen</h2> </div> </div> </div> </div> </div> id
64 CSS Frameworks Bootstrap Weitere Komponenten Viele weitere Komponenten verfügbar Labels, Button-Gruppen, etc. Spezielle Effekte benötigen JavaScript (hier nicht behandelt) Dialoge, Tooltips, Bilder-Gallerien, Tabs, etc. Auch durch ledigliche Einbindung bereits Vorteile Schriftarten, Abstände, grundlegendes Aussehen, uvm. bereits für die Standard-Tags definiert Bild links: ohne Bootstrap Bild Rechts: mit Bootstrap 64
65 Weiterführende Dokumentation zu Bootstrap 65
66 CSS Frameworks Bootstrap Vor- & Nachteile Vorteile Zeiteinsparung durch vorgegebenen Stil Viele Elemente wie Buttons, Tooltips usw. bereits vorhanden Einheitliches browserübergreifendes Design Erweiterbarkeit und Anpassbarkeit durch sass-quellcode Nachteile Einarbeitungszeit Größe des Frameworks Höhere Ladezeit Nutzung zu vieler Features, kann zu "verspielten" Websites führen Das HTML-Layout ist stark an das Framework gebunden (Austausch schwierig) 66
Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10
CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
CSS. Cascading Style Sheets
CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln
ANWENDUNGSSOFTWARE CSS
ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00
Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS
Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15
Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei
CSS CSS-Übersicht Cascading Style Sheets Formatierung 2.0: Anstatt durch Tags und Attribute jedes Mal die Formatierung neu zu gestalten, arbeitet man mit Formatvorlagen Später kann man sämtliche Bereiche
Allgemeine Technologien II Sommersemester Mai 2011 CSS
Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden
Introduction to Technologies for Interaction Design. Stylesheets
Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen
CSS in HTML-Elementen. Syntax und Grammatik von CSS
CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,
Grundlagen-Beispiel CSS
Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:
Eine Schnelleinführung in CSS
Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00
CSS Einführung & CSS Frameworks
CSS Einführung & CSS Frameworks Leif Singer leif.singer@inf.uni-hannover.de Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen
HTML & CSS. Beispiele aus der Praxis
HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ
Tabellenfreies Layout in HTML
Tabellenfreies Layout in HTML 0. Inhaltsverzeichnis Philipp Wahle 12.12.12 2 von 40 Seiten 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel
Inhalt 1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Einstieg - Eine Formatvorlage besteht aus mindestens einer Anweisung. - Eine Anweisung
[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort](/thumbs/92/108574680.jpg "[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort")
[Guide] CSS (+ CSS 3!) Vorwort CSS in HTML einbinden HTML mit CSS ansprechen Farben Jetzt geht es los: Normales Stylen Boxen (DIVs) mit dem Boxmodel Fliessende Boxen Links formatieren & Pseudoklassen/Elemente
Übung: Bootstrap - Navbar
Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:
SASS und Compass. Struktur für eure Stylesheets
SASS und Compass Struktur für eure Stylesheets Guten Tag Thomas Moseler Frontend-Developer www.rufzeichen-online.de Warum? .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler
1 Ein erster Überblick 3
xiii I Grundlagen 1 Ein erster Überblick 3 1.1 CSS im Zusammenhang........................................3 1.2 Der eigentliche Zweck von CSS.................................4 1.3 Warum die meisten Tabellen
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:
1 2 Fach: Klasse: Datum: Web BW1 16.05.2019 (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel
Der CSS-Problemlöser
Rachel Andrew Der CSS-Problemlöser Über 100 Lösungen für Cascading Stylesheets 2., überarbeitete und aktualisierte Auflage «j dpunkt.verlag Inhalt 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS 1
Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13
D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................
Web-basierte Anwendungssysteme XHTML- CSS
Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen
Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei
Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.
Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente.
HTML 8 Vorbereitung Hintergrundbilder background-image Werte: URL (Standort des Bildes) none inherit Standard: none Gilt für: alle Elemente Vererbung: nein => URL ist relativ zur Stylesheet-Datei anzugeben!
Digitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
Sass. Syntactically Awesome Stylesheets. Christian Kaula christiankaula.com
Sass Syntactically Awesome Stylesheets Christian Kaula christiankaula.com Sass? Sass? Metasprache auf Basis von CSS Sass? Metasprache auf Basis von CSS vereinfacht CSS durch Entfernung redundanter Elemente
Entwicklung multimedialer Anwendungen
Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659
Entwicklung multimedialer Anwendungen
Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung
HTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker martin.stricker@rz.hu-berlin.de 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen :
Nachbau der Website http://www.lake-festival.at/ Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen : https://archive.org/web/ dann Erstelle eine neue Bootstrapsite im Ordner lakefestival.
Übung zur Vorlesung Digitale Medien. Ludwig-Maximilians-Universität München Wintersemester 2010/2011
Übung zur Vorlesung Digitale Medien Ludwig-Maximilians-Universität München Wintersemester 2010/2011 1 Über den Studiengang und das Forschungsgebiet Medieninformatik informieren Studenten, Interessenten
Abgabetermin: , 23:59 Uhr
HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo
CSS(3) verstehen und anwenden. Alexej Schneider APEX Connect 2017
CSS(3) verstehen und anwenden Alexej Schneider APEX Connect 2017 Facts & Figures Mittelständischer IT-Dienstleister Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Managing
Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut
Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen
CSS. Cascading Stylesheets
CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische
Responsive Webdesign mit Frameworks. Martin Gruber AG-INF, März 2018
Responsive Webdesign mit Frameworks AG-INF, Sinn von Frameworks schnelle und einfache Webentwicklung vordefnierte HTML und CSS Templates für Formulare Buttons Tabellen JavaScript Plugins Responsive Design
HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
Modul 8: Browser-Processing- Pipeline
Modul 8: Browser-Processing- Pipeline 10.06.2018 16:20:17 M. Leischner Internetkommunikation Folie 1 Grundmodell: Webbrowser Copyright 2013 Ilya Grigorik. Published by O'Reilly Media, Inc. Licensed under
Wert. { color: blue; }
CSS im Überblick HTML wurde vom W3C entwickelt, um die Inhalte einer Webseite zu gliedern und zu strukturieren. In HTML wird festgelegt, ob ein Textinhalt bspw. dies ist eine Überschrift oder
CSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr -
// = 3) version = "n3"; if (browsername == "Netscape" && browserver >= 4) version = "n4"; if (browsername == "Microsoft Internet Explorer" && browserver >= 3.01 && browsermac!= -1) version = "ie3m"; if
Digitale Medien 4. STYLESHEETS, CSS
Digitale Medien 4. STYLESHEETS, CSS Vergangene Vorlesungen HTML-Grundlagen Wichtige HTML-Elemente Heute: Stylesheets Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie
HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick
HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der
Inhalt: 1)Das Box-Modell
Inhalt: 1. Das Box-Modell 2. Reset-CSS 3. CSS-Eigenschaft: position (static, relative, absolute) 4. CSS-Eigenschaft: float, clear 5. Übung 6. Die Seite zentrieren mit margin:auto 1)Das Box-Modell Die Box
SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1
SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der
HTML-STANDARDS ZUR OPTIMALEN VERWENDUNG IN WCMS VOM HTML-DUMMY ZUR CONTENT-KLASSE
HTML-STANDARDS ZUR OPTIMALEN VERWENDUNG IN WCMS VOM HTML-DUMMY ZUR CONTENT-KLASSE HTML-DUMMY MUSS ICH VON NULL STARTEN? MUSS ICH VON NULL STARTEN? FRAMEWORKS Foundation 5 bzw. NEU 6 Basis CSS für Elemente
Kapitel 17: CSS. Inhalt. Was kann CSS? (1) Was kann CSS? (2) 1. Einführung CSS. 2. Farben, Hintergründe, Zeichensätze. 3. Gruppierungen. 4.
17. CSS - Cascading Style Sheets 17-1 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze Kapitel 17: CSS 3. Gruppierungen 4. Box-Modell 5. Validierung
Inhaltsverzeichnis. Vorwort 1. 1 CSS3 heute 9. 2 Umgang mit unterschiedlichen Browsern 33
D3kjd3Di38lk323nnm v Vorwort 1 1.1 Besser mit CSS3...2 1.2 Was in diesem Buch steht...3 1.3 Was nicht in diesem Buch steht...6 1.4 Was Sie sonst noch wissen sollten...6 1 CSS3 heute 9 1.1 CSS3 Stand der
Übung: Überschriften per CSS gestalten
Übung: Überschriften per CSS gestalten Teil 1: Umsetzung eines Layouts mit zwei Überschriften mit zwei verschiedenen Hierarchieebenen, ergänzt durch einen beschreibenden Textabsatz. Teil 2: Wie Teil 1,
Formatierung eines Text Ads in CSS
Formatierung eines Text Ads in CSS Damit sich die Text Ads möglichst harmonisch in Ihre Webseite einfügen, haben Sie verschiedene Möglichkeiten Ihr Text Ad über CSS (Cascading Style Sheets) zu formatieren.
Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012
Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:
Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013
Übung zur Vorlesung Digitale Medien Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte
4.8 Das Box Modell, Block- vs Inline-Elemente
4 Formatierung mit CSS Webdesignkurshandbuch:: :: :: :: :: :: :: :: :: :: :: :: Büchli :: Süsstrunk :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : 4.8 Das Box Modell, Block- vs Inline-Elemente
Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut
Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
33 CSS in HTML einbinden
D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben
CSS Cascading Stylesheets
CSS Cascading Stylesheets 1. Einführung Warum denn CSS= Cascading Style Sheets? CSS ist eine Spache, bestimmt für die Formatierung von HTML-Seiten. Sie greift auf die Sprachelemente von HTML zu und verleiht
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
Literatur. Webtechnologien WS 2018/19 - Teil 4/CSS I
Literatur [4-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [4-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [4-3] Münz, Stefan: . Addison-Wesley, 2005 [4-4]
Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS
Inhalt Vorwort 13 Teil I CSS kennenlernen: Einstieg in XHTML und CSS 1 Auf die Plätze 17 1.1 Wozu CSS lernen? 18 1.2 Wem nützt dieses Buch? 19 1.3 Wie funktioniert dieses Buch? 19 2 Was Sie wissen sollten
CSS Cascading Style Sheets
XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,
Navigationsmenü im Stil von Registern
Navigationsmenü im Stil von Registern Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005 Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen,
Erstellung eines Webshops für Hak-T-Shirts und Hak-Pullis
Erstellung eines Webshops für Hak-T-Shirts und Hak-Pullis Version: Bootstrap 4, jquery-plugins Inhalt: 0)Brainstorming 1)index.html mit nav, brand und fixed-top 2)carousel 3)cards (card decks) gleiche
17. CSS - Cascading Style Sheets Kapitel 17: CSS
17. CSS - Cascading Style Sheets 17-1 Kapitel 17: CSS 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung
4. Blöcke und Gebiete
4. Blöcke und Gebiete Inhalt 1. Einführung 2. Architektur 3. Vorlagen 4. Blöcke 5. Tabellen 6. Listen 7. Textformatierung 8. Grafik und Farbe 9. Buch-Erstellung Grundlagen Verfeinerung, Formatierung Formatierung
Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
Navigation für Internetpräsenzen
Navigation für Internetpräsenzen Gestern und heute 2016 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben
FARBEN MIT RGB-WERTEN DEFINIEREN
FARBEN FARBEN MIT RGB-WERTEN DEFINIEREN Farben mit Hexadezimalwerten Bisher sind Sie gewohnt Farben mit Hexadezimalwerten zu formatieren. Zwei Stellen geben dabei jeweils den Wert für Rot, Grün und Blau
Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6
ix Einleitung 1 Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design 1 So geht der Workshop vor 6 2 Vorbereitungen 8 2.1 Anlegen einer sinnvollen Ordnerstruktur... 9 2.2 Das brauchen
Responsive Web Design
Responsive Web Design Am Beispiel: Government of Alberta Frank Steffen, Senior Product Manager 22 Januar 2013 Copyright OpenText Corporation. All rights reserved. Agenda AlbertaCanada.com Responsive Design
Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel
Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:
Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen.
CSS3 Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. Klicke auf Menü Datei und dann Neu. Wähle CSS und dann erstellen
Beautify your APEX. Alexej Schneider DOAG 2016
Beautify your APEX Alexej Schneider DOAG 2016 Im Überblick Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Ausbildungsbetrieb Inhabergeführte Aktiengesellschaft Gründungsjahr
ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?
HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit
3 XML, HTML und XSL die Ausgabe
3 XML, HTML und XSL die Ausgabe XML und VBA lernen ISBN 3-8273-1952-8 Nun, nachdem eine wohlgeformte oder eine gültige XML-Datei erstellt worden ist, stellt sich die Frage, was mit ihr geschieht. Die Anzeige
JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober
JavaScript II Bildaustausch mit dem Attribut name und zwei Funktionen function asterix() { document.images1.src="bilder/asterix.jpg"; function obelix() { document.images1.src="bilder/obelix.jpg";
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente
Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch
Joomla! Templates Professionelle Vorlagen mit CSS Daniel Koch Daniel Koch Joomla!-Templates Professionelle Vorlagen mit CSS Daniel Koch Joomla!-Templates. Professionelle Vorlagen mit CSS ISBN: 978-3-86802-325-1
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
HTML und CSS. Eine kurze Einführung
HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2
Duale Hochschule Baden-W ürttemberg Villingen-Schwenningen Fakultät für W IRTSCHAFT Studiengang Wirtschaftsinformatik Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2 Jahrgang: WWI 2009,
CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte
CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
CSS3. Die neuen Features für fortgeschrittene Webdesigner. von Florence Maurice. 2., aktualisierte und erweiterte Auflage. dpunkt.
CSS3 Die neuen Features für fortgeschrittene Webdesigner von Florence Maurice 2., aktualisierte und erweiterte Auflage dpunkt.verlag 2013 Verlag C.H. Beck im Internet: www.beck.de ISBN 978 3 86490 118