Digitale Medien 4. STYLESHEETS, CSS
|
|
|
- Ursula Albrecht
- vor 5 Jahren
- Abrufe
Transkript
1 Digitale Medien 4. STYLESHEETS, CSS
2 Vergangene Vorlesungen HTML-Grundlagen Wichtige HTML-Elemente Heute: Stylesheets Anwendung Beispiele
3 Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen ist? HTML strukturiert nur trotzdem werden HTML-Elemente formatiert Browser hat Default-Layout: Browser-Stylesheet Heute: Wie kann ich mein eigenes Design integrieren?
4 Style-/Formatangaben n Stylesheets/Style-Angaben erlauben die Beschreibung der Formateigenschaften einzelner HTML Elemente n Definition neuer Formate, die HTML Elementen zugewiesen werden n drei Möglichkeiten (mit weiterer Unterteilung): separat für jedes HTML-Element n n 4 Style-Angaben werden als Attribut des jeweiligen HTML-Elements angegeben Style-Angaben werden für eine bestimmte ID angegeben durch <style></style> Element innerhalb des HTML-Dokuments innerhalb einer Stylesheet Datei n Alle drei Möglichkeiten können gleichzeitig verwendet werden n Stylesheets können hintereinander geschaltet, kaskadiert werden n Cascading Stylesheets (CSS)
5 Style Angabe für jedes HTML-Element einfachster Fall: style-attribut 5 n Ausgangspunkt: HTML-Dokument <html> <head> <title>titel der Datei</title> </head> <body> <h1>überschrift</h1> </body> </html>
6 Style Angabe für jedes HTML-Element einfachster Fall: style-attribut <html> <head> <title>titel der Datei</title> </head> <body> <h1 style="color:red; font-size:48px;"> 48 Pixel und Rot! </h1> </body> </html> n Angabe für jedes Element einzeln zugeordnet 6
7 Stylesheets n Besser: Formatangaben zentral in Style-Element <html> <head> <title>titel der Datei</title> <style type="text/css"> /*Formatangaben für HTML-Elemente*/ </style> </head> <body> <h1>überschrift</h1> </body> </html> 7
8 Stylesheets - Syntax Syntax eines Eintrags im Stylesheet: Selektor { Eigenschaft:Wert; } Selektor: HTML-Element (Tag-Name), bspw.: H1 Eigenschaft: bspw. color, width, height, Wert: wird der Eigenschaft zugeordnet, bspw.: red, 200px, Selektor kann auch Wildcard * sein
9 Stylesheets im Style-Element <html> <head> <title>titel der Datei</title> <style type="text/css"> h1 { color:red; font-size:48px; } </style> </head> <body> <h1>48 Pixel und Rot!</h1> </body> </html> 9
10 Stylesheets Individualformate Für jedes HTML-Element kann eine eindeutige ID vergeben werden Darf nur einmal im gesamten HTML-Dokument vorkommen <html> <head> </head> <body> <h1 id="titel1">48 Pixel und Rot!</h1> </body> </html>
11 Stylesheets Individualformate IDs können für die Zuweisung von Formatangaben verwendet werden <html> <head> <title>titel der Datei</title> <style type="text/css"> #title1id { color:red; font-size:48px; } </style> </head> <body> <h1 id="title1id">48 Pixel und Rot!</h1> </body> </html>
12 Stylesheets Individualformate Verwendung des class-attributs <html> <head> </head> <body> <h1 class="title">ein bisschen Text</h1> </body> </html>
13 Formatangaben für Klassen Problem bisher: Formatangaben waren für alle Elemente <head> eines Typs <title>titel der Datei</title> <style Definition type="text/css"> auch für bestimmte Klassen von Elementen.title {font-size:18pt;color:red;} möglich <html> </style> </head> <body> <h1 class="title">überschrift 1</h1> <p>ein bisschen Fließtext</p> <h1>überschrift 2</h1> <p>ein bisschen Fließtext</p> <h1 class="title">überschrift 3</h1> <p>ein bisschen Fließtext</p> </body> </html>
14 seite.html Stylesheets 14 <html> <head> <title>titel der Datei</title>.title { font-size:18pt; color:red; } formate.css <link rel="stylesheet" type="text/css" href="formate.css"> <style type="text/css"> body { background-color:#ffffcc;margin-left:100px;}... </style> </head> <body> <div class="title">dies ist der Titel</div> </body> </html>
15 Pseudoformate Formate für HTML-Bestandteile, die sich jedoch nicht durch ein eindeutiges HTML-Element ausdrücken lassen Ein noch nicht besuchter Link Ein besuchter Link Der erste Buchstabe eines Absatzes <style type="text/css"> a:link { font-weight:bold; color:#0000e0;} a:visited { font-weight:bold; color:#000080;} a:hover { font-weight:bold; color:#e00000;} a:active { font-weight:bold; color:#e00000} a:focus { font-weight:bold; color:#00e000;} p:first-line { font-weight:bold } p:first-letter { font-size:300%; color:red;} </style>
16 Beispiele für CSS-Eigenschaften Schriftarten und -parameter Font-family (Schriftart) font-style (Schriftstil): italic, oblique, etc. font-variant (Schriftvarianten): small caps font-size (Schriftgröße) font-weight (Schriftschnitt): bold, bolder, lighter, number text-decoration (Textdarstellung): overline, line-through, underline color text-shadow (Schatten) font-stretch: Laufweite letter-spacing, word-spaching (Zeichen-, Wortabstand) text-transform (Transformationen)
17 Beispiele für CSS-Eigenschaften Hintergrundfarbe & -bilder Hintergrundfarbe: background-color <html> <head> <title>titel der Datei</title> <style type="text/css"> body { background-color:#ffffcc;margin-left:100px;} h1 { font-size:300%;color:#00ff00; font-style:italic; border-bottom:solid thin black; }.text {font-size:18pt;color:red;} </style> </head> <body> <h1>überschrift</h1> <div class="text">dies ist der Text </div> </body> </html>
18 Beispiele für CSS-Eigenschaften Hintergrundfarbe & -bilder Hintergrundbild: background-image <html> <head> <title>titel der Datei</title> <style type="text/css"> body { background-image:url(dateiname.jpg);} </style> </head> <body> <h1>überschrift</h1> </body> </html> Bildkachelung kann beliebig angegeben werden mit: background-repeat Mögliche Werte: repeat-x, repeat-y, no-repeat
19 Beispiele für CSS-Eigenschaften Hintergrundfarbe & -bilder Bildposition festlegen: background-attachment Mögliche Werte: fixed (Wasserzeicheneffekt), scroll <style type="text/css"> body { background-image:url(dateiname.jpg); background-attachment: fixed; } </style> Weitere Eigenschaften: background-position Mögliche Werte: left, right, center
20 Beispiele für CSS-Eigenschaften Position Position von Elementen festlegen: CSS Eigenschaft position Mögliche Werte: absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit. Positionierung durch die Angaben left, top, right, bottom Elemente sind außerhalb des normalen Textfluß, liegen über den anderen Elementen und beeinflussen nicht ihr Layout relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst. Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. nachfolgende Elemente verhalten sich so, als wäre das Element nicht verschoben static= keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung). fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
21 DIV zur freien Gestaltung <div> Dies ist der Titel </div> <div> Menübereich </div> <div> Hauptinhalt </div> DIV-Elemente definieren rechteckige Bereiche Ermöglichen freie Festlegung von Bereichen, beispielsweise für: Titel Menü Hauptinhalt Infoboxen
22 Boxmodell Grundlage für den Seitenaufbau Gilt nicht nur für DIV Festlegung von Breite, Höhe, Innen- und Außenabständen Prinzip <div> Inhalt: weitere div-elemente, Absätze: <p>, etc. </div>
23 Boxmodell
24 Boxmodell, Abstände margin-top border-top padding-top margin-top border-top margin-left border-left padding-left margin-left height border-left padding-left Inhalt heigh t padding-top Inhalt width width border-bottom padding-bottom Inhalt padding-right border-right margin-right padding-right border-right margin-right margin-bottom padding-bottom border-bottom margin-bottom Gesamtbreite und höhe ergibt sich aus der Summe aller Einzelwerte in x und y- Richtung
25 Boxmodell, Positionierung <div id= title > Dies ist der Titel </div> <div id= menu > Menübereich </div> <div id= content > Hauptinhalt </div> #title{ width: 500px; height: 100px; border: 1px solid black; text-align: center; } #menu{ width: 500px; height: 30px; border: 1px solid black; text-align: center; margin-top:5px; }
26 HTML und CSS 27 n n HTML beschreibt Struktur und Inhalt der Daten Tags für Struktur Inhalt normaler Text Struktur beinhaltet auch Markierung der Teile, die anders formatiert werden sollen Formatierung wird in Stylesheets (CSS) festgelegt für jedes Element kann einzeln Formatierung bestimmt werden Browser-Stylesheets sorgen für Standard-Darstellung Autoren-Stylesheets überschreiben diese Einstellungen und können für individuelle Formatierungen verwendet werden
27 Formate für verschachtelte Elemente Bisher: Festlegen von Formaten für HTML-Elemente ohne Berücksichtigung der Position innerhalb des HTML- Dokuments Weiter: Formatangaben unter Berücksichtigung der Verschachtelung von HTML-Elementen <p>to be or not to be...</p> <div> <p>ein berühmtes Zitat aus der Tragödie Hamlet, </p> </div> Wie kann man nur die <p>-elemente formatieren, die innerhalb von <div> stehen?
28 Formate verschachtelt angeben wird in <div>- Sektion rot gesetzt <style type="text/css> div p { color:red; } div > p { color:blue; } div * b { color:violet; } div + p { margin-top:100px; } </style> Text wird in <div>-sektion blau gesetzt, wenn es direkt verschachtelt ist, z.b <div><p>text</p></div> Text wird in <div>-sektion violett gesetzt, wenn es indirekt verschachtelt ist, z.b <div><p><b>text2</b></p></div> Text wird mit 100 Pixel Abstand gesetzt, wenn er direkt nach <div>-sektion auftritt
29 Formate attributabhängig angeben Rot, wenn h1 Attribut title enthält Blau, wenn h1 Attribut Kapitel mit der Zuweisung "uebersicht" enthält Rot, wenn Absatz p Attribut "align" enthält Grün und linksbündige Textausrichtung, wenn align "center" zugewiesen wurde <style type="text/css"> h1[title] { color:red; } h1[kapitel="uebersicht"] { color:blue; } p[align] { color:red; } p[align=center] { color:green; text-align:left; } </style>
30 Cascading Style Sheets - CSS n Stylesheets für unterschiedliche Ausgabegeräte n wichtig für z.b. Barrierefreiheit n Definition in HTML: <html> <head> <title>titel der Datei</title> <link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="druck.css"> <link rel="stylesheet" media="aural" href="speaker.css"> </head> <body>... </body> </html> 31
31 Cascading Style Sheets - CSS n Stylesheets für unterschiedliche Ausgabegeräte n Definition in print { /*Formatdefinitionen zum Drucken*/ selektor {eigenschaft:wert;} screen { /*Formatdefinitionen für Bildschirmausgabe*/ selektor {eigenschaft:wert;} }
32 Medientypen Werte für das media-attribut all: CSS gilt für alle Medientypen aural: für synthetische Sprachausgabe braille: für Braille-Ausgabegerät embossed: für Braille-Drucker handheld: für kleine Geräte, Organizer, Handy, etc. print: für den Ausdruck auf Papier projection: für Projektion, bspw. mit Beamern screen: für Bildschirmausgabe tty: für nicht-graphische Ausgabe mit fester Zeichenbreite, bspw. Fernschreiber oder textorientierte Browser wie lynx tv: für TV-ähnliche Ausgabegeräte, meist mit grober Bildschirmauflösung
33 Cascading Style Sheets - CSS 34 n Stylesheets können (und werden) hintereinander gehängt n und überschreiben einander n Browser Stylesheet wird durch Autoren Stylesheet überschrieben n mehrere Autorenstylesheets überschreiben einander n dadurch können sehr komplexe Layouts realisiert werden, aber auch komplex in der Anwendung
34 Cascading Stylesheets Die Kaskade Stylesheets können drei Quellen haben: Autor des HTML-Dokuments Benutzer: Nutzer können Styleinformationen für ein spezielles Dokument festlegen User-Agent: müssen ein Default-Stylesheet besitzen oder so tun als hätten sie eins. Sollten allgemeine Erwartungen erfüllen physikalische Formatierung Stylesheets überlappen und beeinflussen sich entsprechend der Kaskade
35 User Stylesheet Firefox: usercontent.css profile-directory/chrome/ Beispiel in: Mozilla Firefox\defaults\profile\chrome\userContentexample.css Opera: unter Einstellungen Inhalte Darstellungsoptionen eigenes Stylesheet auswählen Internet Explorer: unter Extras Internetoptionen Allgemein Barrierefreiheit wählen und Benutzerstylesheet festlegen
36 Stylesheets auf mehrere Dateien verteilen Bisher: einbinden mittels link-element HTML-Syntax Innerhalb des Stylesheets können CSS-Dateien eingefügt werden CSS-Syntax <HEAD> url("druck.css") url("minipc.css") handheld; </STYLE> </HEAD> im url("druck.css") url("minipc.css") handheld; im separaten Stylesheet Wichtig: muss am Anfang Des Stylesheets stehen.
37 Hilfsmittel Firebug: Firefox-Addon, das: die Arbeit mit HTML-Quellcode erleichtert Die Anzeige und Manipulation von CSS-Elementen erlaubt Dem Programmierer die Kontrolle der Abarbeitung von Scripten (bspw. Javascript) ermöglicht wichtig für die Fehlersuche Mittlerweile für alle gängigen Browser in ähnlicher Form implementiert Web-Developer Toolbar: Firefox-Addon
38 Zusammenfassung HTML beschreibt Daten CSS beschreibt Layout Angaben über Aussehen eines HTML-Elementes können: 1. dem Element selbst über style-attribut mitgegeben werden 2. innerhalb eines <style></style>-elementes angegeben werden 3. in einer separaten css-datei stehen bei Punkt 2 und 3 muss Zuordnung zu Element(n) erfolgen: für alle HTML-Elemente eines Typs: Angabe des Tag-Namens im Stylesheet: bspw. h1 über class-attribut des Elementes: Selektor im Stylesheet fängt mit Punkt an:.name über id-attribut des Elementes: Selektor im Stylesheet fängt mit Raute an: #name freie Gestaltungsmöglichkeiten über div-element Basis für das Layout: Boxmodell
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
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 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
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...
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
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 Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005 Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen,
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
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-,
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
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
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
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
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:
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
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:
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 ,
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
Unterschied zwischen HTML & XHTML?
Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare
n Stylesheets/Style-Angaben erlauben die Beschreibung der werden n drei Möglichkeiten (mit weiterer Unterteilung):
Vergagee Vorlesuge Digitale Medie HTML-Grudlage Wichtige HTML-Elemete 4. STYLESHEETS, CSS Heute: Awedug Beispiele Treug vo Ihalt ud Layout Oder: Woher weiß der Browser wie eie Seite darzustelle ist? HTML
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
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
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
Ü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
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
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
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
HTML Cascading Style Sheets
Informatik 1 für Nebenfachstudierende Grundmodul HTML Cascading Style Sheets Kai-Steffen Hielscher Folienversion: 12. Dezember 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht
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
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
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
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
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,
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
Ü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
Praktikum im Grundstudium
Praktikum im Grundstudium Teil 2: Layout mit CSS Zweck von Stylesheets Ergänzung zu XHTML XHTML legt Struktur des Dokuments fest Definiert Formateigenschaften Trennung von Inhalt und Layout Stylesheet
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
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
Nachtrag: Nested Tree im Beispiel. 7. Vorlesung. Usability - Test. Usability - Typische Elemente. Was ist zu formatieren?
Nachtrag: Nested Tree im Beispiel 7. Vorlesung Usability, CSS EWA HTML JavaScript PHP Einführung Aufgaben einfach schwer Links CSS Syntax Beispiele Id Titel links rechts 100 EWA 1 101 HTML 2 3 102 JavaScript
Ü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
[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
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
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,
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
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 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. 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
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
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
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.
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
Auf einen Blick. Vorwort Einführung in CSS Grundlegende Konzepte von CSS Die Zukunft von CSS Browser-Kompatibilität 97
Auf einen Blick Vorwort 13 1 Einführung in CSS 17 2 Grundlegende Konzepte von CSS 41 3 Die Zukunft von CSS 81 4 Browser-Kompatibilität 97 5 CSS in der Praxis 133 6 Beispiele 271 7 Tools für CSS 355 8 Die
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
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 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,
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
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
Dokumentation über CSS
Dokumentation über CSS Autor : Daniel Finger (Daniel.Finger@gmx.net) Version : 2 Inhaltsverzeichnis 1. Einleitung... 3 1.1. Was ist CSS?... 3 1.2. Wer unterstützt CSS?... 3 1.3. Woraus besteht eine CSS-Datei
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]
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung
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
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
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
IT- und Medientechnik
IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,
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
XSL-FO XSL Formatting Objects
XML-Praxis XSL-FO XSL Formatting Objects Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Funktionsweise von XSL-FO Seitendefinitionen Areas block- und inline-elemente Fonts XSLT und XSL-FO XML-Praxis
Ü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,
Scripting für Kommunikationswissenschaftler Gruppe C
Professur E-Learning und Neue Medien Institut für Medienforschung Philosophische Fakultät Scripting für Kommunikationswissenschaftler Gruppe C https://s-media-cache-ak0.pinimg.com/736x/9e/46/b5/9e46b5c98ae65d0880f37a30989781bb.jpg
CSS-Praxisbuch. Der Weg zum pflegeleichten Web-Design HELMA SPONA ( KOMPENDIUM ) Einführung Arbeitsbuch Nachschlagewerk
CSS-Praxisbuch Der Weg zum pflegeleichten Web-Design HELMA SPONA ( KOMPENDIUM ) Einführung Arbeitsbuch Nachschlagewerk 3 Browseroptimierung Im vorherigen Kapitel haben Sie schon ansatzweise erfahren, wie
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
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,
Information und ihre Darstellung: XHTML & CSS
Information und ihre Darstellung: XHTML & CSS PL Speyer Daniel Jonietz 2011 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. Was ist XHTML? Textbasierte Auszeichnungssprache
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute
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
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003
![Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003](/thumbs/27/11014032.jpg "Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003")
Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: . Addison-Wesley, 2005 [7-4]
Ü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:
Kai Laborenz. CSS-Praxis. Browserübergreifende Lösungen. Galileo Press
Kai Laborenz CSS-Praxis Browserübergreifende Lösungen Galileo Press Vorwort 13 1.1 Von HTMLzu CSS 17 1.2 Was sind CSS? 23 1.3 Kurze Geschichte der CSS 25 1.4 Wie sehen CSS aus? 26 1.5»Hallo Welt!«auf CSS
Kapitel 10: Cascading Style Sheets
10. Einführung in CSS Cascading Style Sheets 10-1 Kapitel 10: Cascading Style Sheets Literatur: Erik Wilde: World Wide Web Technische Grundlagen. Springer, 1999, ISBN 3-540-64700-7, 641 Seiten. Eric Ladd,
Web-Programmierung. HTML5-Apps für's Smartphone Thomas Perschke
Web-Programmierung HTML5-Apps für's Smartphone Thomas Perschke Heute Mobile Designprinzipien Design in der Praxis Erkennung von Browsern CSS- und Javascript-Frameworks JQueryMobile Aufgabe Mobile Designprinzipien
Die Funktionalität von Suchportalen
Studiengang Sprache und Kommunikation 1/6 Die Funktionalität von Suchportalen Anweisungen zur Erstellung eines eigenen Suchportals Ziel dieser Übung ist es, ein eigenes kleines Suchportal zu einem spezifischen
CSS EINFÜHRUNG. Cascading StyleSheets. November Seite 1
CSS EINFÜHRUNG Cascading StyleSheets Seite 1 Themen Einführung Syntax Stylesheets einbinden Alternative Stylesheets Texteigenschaften Positionieren Farben Hintergrund Pseudoklassen Selektoren (Vererbung)
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........................
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
Workshop HTML5 & CSS3
Workshop HTML5 & CSS3 Weblayouts professionell umsetzen - ein Einstieg in die Frontendentwicklung Bearbeitet von Stephan Heller 1. Auflage 2012. Taschenbuch. XIV, 302 S. Paperback ISBN 978 3 89864 807
Online-Publishing mit HTML und CSS für Einsteigerinnen
Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden
XSLT 2015/2016 S Seite 1 h_da W
XSLT Seite 1 XSL / XSLT xsltransformation ::= stylesheet stylesheet ::= template* template pattern ::= pattern, content_constructor ::= patternpath Content_constructor ::= literal_result_element instruction
CSS Was die Browser wirklich können
CSS Was die Browser wirklich können Daniel Koch CSS Was die Browser wirklich können schnell+kompakt Daniel Koch CSS Was die Browser wirklich können schnell+kompakt ISBN: 978-3-86802-034-2 2009 entwickler.press
Ändern der Schriftgröße für den Monitorexport
Ändern der Schriftgröße für den Monitorexport (Stand: 12/2017) In der Datei SUBST_ MO NITOR sind einige wenige Einträge zu ändern. Die Datei finden Sie im Programmverzeichnis von Untis: Wenn Sie diese
Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.
1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes
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