Internet & XML (Fach) / CSS (Lektion)
In dieser Lektion befinden sich 14 Karteikarten
Es geht hier um den Einsatz von CSS in HTML Webseiten. http://web.fhnw.ch/personenseiten/holger.wache/lectures/ix/03_CSS.pdf
Diese Lektion wurde von aureo erstellt.
- In welchem Teil des HTML Codes wird eine externe CSS Datei "mycss" eingebunden und wie sieht der Code dazu aus? <head> <link rel="stylesheet" href="mycss.css" type="text/css"> <title>Meine Homepage</title></head> Zusammen mit dem Tag style ist die Angabe des Attributs ‚type‘ notwendig.Hiermit erfährt der Browser um welchen Dialekt von CSS es sich handelt.
- Wie sieht der Code aus, wenn die CSS Definition direkt im HTML-Dokument eingebunden werden soll? In welchem Bereich der Seite muss sich der Code befinden? <head> <style type="text/css"> <!-- p { font-family: Arial; font-size: 8pt; } --> </style></head> Der Style Code muss sich im HEAD Bereich befinden.
- Wie sieht der CSS Code aus, wenn er direkt im HTML Tag verwendet werden soll? Beispiel für einen p-Tag mit Font Arial mit der grösse von 8 Punkten <p style="font-family: Arial; font-size: 8pt">Text</p> Beachte: Selector wird weggelassen; stattdessen werden dieEigenschaften im style attribute angegeben. Lokale Formate haben vor globalen Formaten Priorität.
- Wie sieht der Code aus, wenn Eingeschränkt auf das Vorkommen innerhalb eines anderen HTML-Tags berücksichtigt werden muss? Was genau ist die Besonderheit in der Schreibweise? Z.B. h1-Tag soll blau sein, wenn es innerhalb von einem i-Tag ist. <style type="text/css"> h1 i { color:blue; font-style:normal; }</style> Die Tags werden ohne Trennzeichen vor der geschweiften Klammer hintereinander geschrieben in der Reihenfolge die gewünscht ist.
- Attributbestimmte CSS Formatierung: Wie sehen folgende zwei Beispiele aus? Wenn ein p-Tag mit einem align versehen ist, soll es rot geschrieben werden. Wenn ein p-Tag mit einem center align versehen ist, soll es blau geschrieben werden und lin p[align] { color:red; } p[align=center] { color:blue; text-align:left; }
- Wie kann man für einzelne Tags mehrere Formatierungen festlegen? Dazu bitte ein Beispiel für einem h1-Tag machen. Mit Klassen, damit ist es möglich für einzelne Tags mehrere Formatierungen festzulegen. Z.B. können mehrere Formatierungen für das Tag <h1> festgelegt werden.Klassennamen werden mit einem Punkt hinter dem HTML-Tag angegeben: h1.big { font-size: 30pt} Dabei ist jede Formatierungsart durch einen Klassennamen eindeutig gekennzeichnet.Dieser Klassenname muss dann bei der Formatzuweisung mit angegeben werden mit class.
- Wie ist es möglich für einzelne Tags mehrere Formatierungen festzulegen? Mach ein Beispiel für einen h1-Tag Mit Klassen ist es möglich für einzelnen Tags mehrere Formatierungen festzulegen. h1.big { font-size: 30pt}
- Wie sieht der Aufruf einer CSS Klasse mit dem Namen "klein" für einen i-Tag aus? <i class="klein">Text</i>
- Wie sieht die CSS Definition aus, wenn der Aufruf in einem i-Tag wie folgt aufssieht? class="gross" (Font 20 Punkte, Farbe rot) i.gross {font-size: 20pt; color: red;}
- Wie sieht eine CSS Klassendefinition aus die für alle Tags Gültigkeit haben kann? (Name 'mittel', Fontgrösse 20 Punkte, Farbe schwarz) .mittel {font-size:20pt; color:black;}
- Wie unterscheiden sich die beiden Tags DIV und SPAN voneinander? Mit <div> kann man eine neue Zeile im Textfluss erzwingen. (Der Zeilenumbruch findet gleich nach dem Endtag </div> statt) Mit <span> kann man einen Zeilenumbruch im Textfluss verhindern.
- Wie sieht ein Individualformat im CSS aus? Mache je ein kurzes Beispiel für ein Format welches für alle Tags und ein Beispiel wo das Individualformat nur für H1 Gültigkeit hat. Nenne auch gleich den Aufruf im HTML Code für die Formate. #roterBereich {font-size: 12pt; color:red;} <div id="roterBereich">Text</div> h1#Titel {font-size: 20pt; color: blue;} <h1 id="Titel">Text</h1>
- Mit welchem Attribut erfolgt die Definition der Schriftart? Mache gleich ein kleines Beispiel für H3 für die Schriftart Arial. h3 {font-family: arial;}
- Können mehrere Schriftarten definiert werden für ein Attribut? Mache ein Beispiel für H3 mit Arial, Helvetica und Garmond. Was bringt das wenn man mehrere nennt? h3 {font-family; arial, herlvetica, garmond;} Sollte eine vom System von wo aus die Seite aufgerufen wird nicht unterstützt werden wird einfach die nächste in der Liste verwendet.