Hier einige Links, die hilfreich sein können. Bitte aufklappen. [mehr]

Design und CSS

Nächste Vorherige Lösung Punkte

Wofür steht CSS?
Das Akronym CSS steht für Cascading Style Syntax.
Das Akronym CSS steht für Common Style Syntax.
Das Akronym CSS steht für Cascading Style Sheets.
Was ist eine zulässige HTML-Schreibweise, wenn der Hintergrund der Seite gelb sein soll?
<body style="background-color: #ffff00;">...</body>
<body style="background-color='#ff00ff';">...</body>
<background>yellow</background>
<body style="background: #ff0;">...</body>
<body background="yellow"> ...</body>
Wo kann CSS-Quelltext stehen?
CSS-Quelltext kann in einer separaten .css-Datei stehen.
Seiteninterner CSS-Quelltext kann im style-Tag des Documenten-Header stehen.
Taginterner CSS-Quelltext kann im style-Attribut eines HTML-Tags stehen.
Welche Methode eignet sich am besten, wenn alle Seiten einer Homepage mit Hilfe von CSS das gleiche Erscheinungsbild haben sollen?
Internal CSS (Seiten internes Style-Tag im HTML-Header)
Inline CSS (Tag-interne Style-Attribute)
External CSS (Style-Sammlung in einer externen .css-Datei)
Wie kann ein externe .css-Datei in einen HTML-Seite includiert werden?
<stylesheet>mystyle.css</stylesheet>
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<style src="mystyle.css">
<copy src="mystyle.css">
Welche der folgenden CSS-Farbwerte sind nach CSS 2.x gültig?
#555555
grey
rgb(80, 80, 80)
#666
Welche CSS-Syntax ist nicht korrekt? Bitte die falschen Aussagen anhaken.
Im style-Tag des Documenten-Header steht:
p, h1, h2 { color: #007; }
Im style-Tag des Documenten-Header steht:
p { border = 1px dotted #000000; }
In einem p-Tag steht:
<p style="border: 1px dotted #ccc;"> </p>
Im style-Tag des Documenten-Header steht:
p, .p { border-bottom: 1px dotted #cccccc; }
Hier geht es um den Begriff "Font". Richtige Aussagen bitte ankreuzen.
Historisch wurden Lettern für den Buchdruck in "Metall-gegossenen" und waren wieder verwendbar.
Der englische Begrif "Font" meint etwa "eine gegossene Form der Schrift".
Ein Font entspricht einem Schrifttypensatz.
Serifenschriften ( franz. Serifen, Füßchen; z.B. "Times New Roman", Garamond ) verbessern die Leserlichkeit von längerer Fließtexten.
Serifenlose Schriften (wie z.B Arial oder Verdana ) betonen die Grundlinien der Zeichen.
Hier geht es um Schrifttypensätze in der Informationstechnologie. Richtige Aussagen bitte ankreuzen. [mehr]
In der Informationstechnologie entspricht ein Font einer internen Daten-Repräsentation, die für die grafische Darstellung eines Zeichens (Rendervorgang ) verwendet wird.
Zu jedem Zeichen z.B. aus dem Unicode gehört ein ( Alphabet- ) Index.
Eine interne, zeichenbezogene Daten-Repräsentation, die dem wiederholten Rendern von Zeichen dient, wird Font genannt.
Bei einem Rasterfont ( Pixelfonts, Bitmapfonts ) entspricht jedem Map-Bildpunkt ein konkretes, bitgleiches Erscheinungsbild ( = Glyphe ).
Ein Vektorfont hat zu jedem Zeichen eine Linien-Tabelle der Buchstaben-Koordinaten. Der Anfangspunkt und der Endpunkte einer Linie ermöglichen die Berechnung der Pixel-Zwischenpunkte, die auf der Linie liegen ( Rasterung von Linien ).
Ein True-Type-Font kann zusätzlich zu einem Vektorfont auch geschlossene Polygone farblich füllen. [mehr]
Ein Font kann für Ausgabegeräten mit geringer Auflösung Hints (engl.: Hinweis) enthalten. Bei Unterschreitung einer gewissen Mindest-Schriftgröße können Hints die Darstellung verbessern. [mehr]
WOFF ist ein komprimierendes Containerformat für Webfonts, die im Netz übertragen werden und durch Komprimierung die Ladezeiten verkürzen kann. WOFF steht für Web Open Font Format. [mehr]
Es geht um Typografie-Maße im Internet ( HTML-Seiten-Styles ). Welche Typografie-Einheiten gehören zu den numerisch absoluten/relativen Maßen und welche der folgenden Aussagen sind richtig? http://www.w3.org/Style/Examples/007/units.de.html
Point ( 1 pt entspricht 1/72 Inches )
Pica ( 1 pc entspricht 12 Punkten )
Inch ( 1 in entspricht 2.54 Zentimetern )
Millimeter ( mm )
Zentimeter ( cm )
Es geht um Typografie-Maße im Internet ( HTML-Seiten-Styles ). Welche Einheiten gehören zu den numerische relativen Maßen und welche der folgenden Aussagen sind richtig?
Die em - Maßeinheit verhält sich relativ zur Höhe des Schriftgrades des übergeordneten Elements.
Die ex - Maßeinheit verhält sich relativ zur Höhe des kleingeschriebenen Buchstabens x im Schriftgrad des übergeordneten Elements.
Die Pixel - Maßeinheit px hängt mit der besten Bildschirm-Auflösung zusammen.
Ein px ist ein absolutes Maß bei demselben Ausgabegerät.
Ein px hat von Ausgabegerät zu Ausgabegerät eine relative Größe.
Gemäß den W3C-Spezifikationen können Cascading Style Sheets mit spezifischen CSS-media-Attribut includiert werden.
@media all includiert Stylesheet gilt für alle Ausgabegeräte
@media speech (CSS 2: aural) includiert aurale Ausgabegeräte (z. B. Screenreader)
@media braille includiert Blindenschriftfähige Ausgabegeräte
@media embossed includiert Blindenschriftfähige Drucker
@media handheld includiert Handhelds (Palmtops, PDAs, WinCE-Geräte)
@media print includiert Drucker
@media projection includiert Video-Beamer, Overhead-Projektoren
@media screen includiert Bildschirme
@media tty includiert Ausgabegeräte mit feststehenden Zeichentypen, wie z. B. Fernschreiber, Terminals oder auch Mobiltelefone
@media tv includiert TV-Geräte
Diese @media ...-W3C-Spezifikationen funktioniert (2011) bei allen Browsern.
Welche CSS-Aussagen sind korrekt? Es werden die CSS-Definition ('#', '.', 'tagname') und die zugehörigen HTML-Tag-Attribite ('id', 'class', 'tagname') betrachtet. [mehr]
CSS-Klassen-Namen stehen im Header-Style-Tag vor den öffnenden/schließenden geschweiften CSS-Klammern und beginnen mit einem einleitenden '.'-Zeichen.
Einem einleitendes #-Zeichen vor den öffnenden/schließenden geschweiften CSS-Klammern weist auf ein Tag im HTML-Body, dessen id-Attribut-Wert dem #-Namen entspricht.
Steht vor den öffnenden/schließenden geschweiften CSS-Klammern ein HTML-Tag-Name, so wirkt sich dieser Style auf alle Tags mit diesem HTML-Tag-Namen aus.
Was bezeichnen bei einer CSS-Deklarationen die Begriffe Selector, Property, Value? 



   (1)
 
    |    
    |       (2)
    |        
    |        |      (3)
    |        |         
    |        |       |

   h1 { background: snow; }
   
        —————————————————
               |
               |

              (4)
Bei (1) ist Selector einzutragen. (1) ist der Teil vor der öffnende und schließenden geschweiften Klammer.
Bei (2) ist Property einzutragen. (2) ist der Teil vor dem Doppelpunkt.
Bei (3) ist Value einzutragen. (3) entspricht der Teil nach dem Doppelpunkt.
Bei (4) ist Declaration einzutragen. Zu einer Declaration gehört Property und Value.
Was ist der Unterschied zwischen margin and padding?
padding ändert die inneren Abstände zwischen dem Element-Inhalt (.innerHTML) und dem Element-Rand.
margin ändert die äußeren Abstände zwischen dem Element-Rand und dem übergeordneten Element.
margin: 0px 0px 0px -20px; schiebt das Element um 20px nach links (im Vergleich mit margin: 0px;).
padding: 0px 0px 0px -20px; verringert den linken Innenabsand um 20px.
Die box-Reihenfolge (von innen nach außen) ist content, padding, border, margin.
Hier ist ein CSS-Beispiel. Bitte aufklappen [mehr]
Werden diese Zeilen 1-17 als HTML-Seite betrachtet, so validiert dies Seite nicht, weil gemäß einer XHTML-DTD Tags fehlen (html, body, header, title).
Das style-Tag kommt stets in das header-Tag.
Diese Zeilen 1-17 werden in ("allen gängigen") Browsern gemäß den CSS-Anweisungen formatiert angezeigt, so als ob die Seite valieren würde.
Der Text "h1-Tag" der Zeilen 9-11
<h1 class="inline">h1-Tag </h1>
wird infolge class="inline" (siehe Zeilen 2-5) eingerahmt angezeigt.
Der default-Style für das h1-Tag macht das h1-Tag zu einem Block-Element.
Das h1-Tag der Zeilen 9-11
<h1 class="inline">h1-Tag </h1>
wird als inline-Element angezeigt (siehe Zeilen 2-5).
Das p-Tag (<p class="inline">) der Zeile 12 wird als inline-Element mit einem grauen Hintergrund (background-color:#ddd;) angezeigt.
Das p-Tag (<p class="float_clear">) der Zeile 15 verwendet die User-definierte CSS-Klasse "float_clear".
Was meint "a:hover"?
"a:hover" wirkt als pseudo-class dann, wenn sich der Maus-Cursor über dem Element befindet.
Soll sich beim Überstreichen eines H1-Tags die Mause-Cursor-Form ändern, so kann dies mit h1:hover {cursor: pointer;} erfolgen.
Hier ist ein CSS-Beispiel. Bitte aufklappen [mehr]
Infolge von Zeile
overflow:auto;
erscheinen bei zu umfangreichen Text automatisch scroll-Balken.
Durch Zeile 2
font:15px monospace;
wird eine Zeichensatz eingestellt, der mit gleichbreiten Zeichen arbeitet und eine Breite von 15 Pixeln je Zeichen hat.
Durch Zeile 2
max-height:8em;
wird das div-Blocktag bis zu 8 Zeilen ohne vertikalen scroll-Balken dargestellt.
Die Zeile 3
siehe border:1px solid;
enthält einen Fehler, weil die Randfarbe fehlt, d.h. es muß heißen border:1px solid #a0f;
Nach dem Aufklappen von dem folgenden Info wird der Quelltext für ein @media aural Style-Sheets-Beispiel angezeigt. Es geht um die CSS-Zeile 2, die
h1, h2, h3 { stress: 20; richness: 90; }
enthält und nach dem Aufklicken sichtbar wird. [mehr]
Der stress-Value in der 2 Zeile
h1, h2, h3 { stress: 20; richness: 90; } des Beispiels kann einen Wert zwischen 0 und 100 sein.
Der stress-Value gibt die Höhe der "lokalen Spitzen" in der Intonationskontur eine Stimme an.
Der richness-Value kann einen Wert zwischen 0 und 100 sein.
Ein niedrigerer richness-Value ergibt eine weiche, einschmeichelnde Stimme.
Ein niedrigerer richness-Value ergibt eine weiche, einschmeichelnde Stimme.
In einer HTML-Seite stehe 
<!-- im HTML-Body-Tag -->
<h1 id="title center"> Titel der Seite </h1>
<p class="absatz"> Mein Ansatz </p>
<!-- im HTML-Header-Tag -->
<style>
.title { }
.center { text-align: center;}
#absatz { color: #ff0; }
</style>
Wegen class="title center" im h1-Tag tritt ein Fehler auf.
Der Content ( innerHTML ) des h1-Block-Elementes wird zentriert dargestellt.
Wegen class="absatz" im p-Tag wird der Text-Content ( innerHTML ) des p-Tags gelb geschrieben.
CSS unterscheidet class="..."-Selektoren ( "."-Selectoren ) und id="..."-Selektoren ( "#"-Selectoren ). Richtige Aussagen bitte ankreuzen.
Ein '.'-Style-Selektor steht für eine Klassen ( class="..." ).
Ein id-Selektor kann innerhalb der HTML-Datei mehrfach benutzt werden.
CSS unterscheidet class="..."-Selektoren ( "."-Selectoren ) und id="..."-Selektoren ( "#"-Selectoren ). Richtige Aussagen bitte ankreuzen.
Die beiden '.'-Style-Selektoren .fett {...} .center {...} dürfen in einer Klasse auftreten, etwa class="fett center"
Ein '#myId'-Style-Selektor muß innerhalb der HTML-Seite eindeutig sein und darf lediglich einmal in einem Tag mit id="myId" auftreten.
Beim Rendern einer Seite gehören zu den Selektoren bestimmte Ausführungszeiten.
Universal "*"-Selektoren und :hover-Pseudoklassen benötigen ( gegenüber den anderen Selektoren ) die kürzesten Ausführungszeiten.
Die id="..."-Selektoren ( "#"-Selectoren ) und die '.'-Style-Selektor ( class="..." ) und die Typ-Selektoren ( Tagname h1, p, div, usw. ) gegenüber den anderen Selektoren die kürzesten Ausführungszeiten.
Die "CSS-shorthand"-Schreibweise, wie z.B. 
body { margin: 20px 10px 5px 10px; }
anstelle von 
body { 
 margin-top: 20px;
 margin-right: 10px; 
 margin-bottom: 5px; 
 margin-left: 10px; 
}
ist für die Ausführung des Renderprozesses effizienter.
Es geht um CSS-Pseudoklassen. Richtige Aussagen bitte ankreuzen.
Zu Pseudoklassen gehören u.a. :first-line, :first-letter, :before
Es gibt Pseudoklassen, die Abhängigkeit von Aktionen des Benutzers die Bildschirmanzeige ändern.
Die Pseudoklassen :link, :visited, :active, :hover, :focus wirken infolge von Aktionen des Benutzers.
Alle a-Tags, die class="..." haben, sollen eine rote Hintergrundfarbe bekommen. Richtige Aussagen bitte ankreuzen.
Bei <a class="extern" wirkt der Style a.extern {background-color: #f00;}
Bei <a class="intern" wirkt der Style a[class] {background-color: #f00;}
Bei <a class="extern" und bei <a class="fett extern" wirkt der Style a[class~="extern"] {background-color: #f00;}
Es geht um CSS- und/oder ECMAScript-Zugriffe auf den HTML-Node-Baum mit Hilfe von Selektoren. Teilbaum: 
<div id="DIV">
 <p> A 
  <span> B </span> 
  <span> C 
    <span> D </span> 
  </span> 
  E 
</p>
</div>
Richtige Aussagen bitte ankreuzen.
Infolge des folgenden Styles werden die Buchstaben A blau, B rot, C rot, D grün, E blau 
div { background-color: gray; color: blue;}
div > p   span { color: green; }
div   p > span { color: red; }

A B C D E

Infolge des folgenden Styles werden die Buchstaben A blau, B grün, C rot, D grün, E blau 
div { background-color: gray; color: blue;}
div span { color: green; }
div span ~ span { color: red; }

A B C D E

Infolge des folgenden ECMAScript-Codes werden die Buchstaben A blau, B grün, C rot, D grün, E blau 
function $(sel, par) { return (par || document).querySelectorAll(sel); }
function set_cssAll(nodes, arr) { var i;
for (i=0; i < nodes.length; i+=1) { 
 nodes[i].style.cssText = arr[i] || arr[0];}
}
set_cssAll($("#DIV"),["background-color: gray; color: blue;"]);
set_cssAll($("#DIV > p  span"),["color: green;"]);
set_cssAll($("#DIV   p > span"),["color: red;"]);

A B C D E

Nach dem Aufklappen von dem folgenden Info wird der Quelltext für ein @media aural Style-Sheets-Beispiel angezeigt. Es geht um die 4. CSS-Zeile, die p.copyright { volume: x-soft; speech-rate: x-fast; } enthält. [mehr]
Der Selector p.copyright wirkt bei allen p-Tags mit der Klasse copytight.
Der volume-Value kann in Zahlen von 0 bis 100 angegeben werden.
Der volume-Value kann in Prozent (z.B. 50%) angegeben werden.
Der volume-Value kann benannt angegeben werden, wobei 
  x-loud  dem Wert 100,
  loud    dem Wert 75, 
  medium  dem Wert 50,
  soft    dem Wert 25,
  x-soft  dem Wert 0   und ebenso 
  silent  dem Wert 0   entspricht.
Die speech-rate wird in wpm (number of words per minute) angegeben
Eine speech-rate:240; bedeutet 240 wpm, d.h. zu einem Wort gehört die mittlere Dauer von 60/240 = 0.25 Sekunden.
speech-rate: x-slow; entspricht 80 wpm
speech-rate: slow; entspricht 120 wpm
speech-rate: medium; entspricht 200 wpm
speech-rate: fast; entspricht 300 wpm
speech-rate: x-fast; entspricht 500 wpm
speech-rate: faster; entspricht einer wpm-Erhöhung um 40 wpm
speech-rate: slower; entspricht einer wpm-Erniedrigung um 40 wpm
In der CSS-Zeile 5 steht
dt { pause-before: 20%; }. Bei einer speech-rate:240; bedeutet pause-before: 10% eine Verzögerung von 60/240*0.1 = 0.025 Sekunden.
In der 5. CSS-Zeile steht
pre { speak-punctuation: code; }. Der speak-punctuation Value kann sein: code (auch Punctuationen werden gesprochen), none (Punctuationen werden nicht gesprochen).
Für Mobilfons (HTML5) können Viewport-meta-Tag's und/oder CSS-@viewport-Blöcke verwendet werden. Richtige Antworten bitte ankreuzen. [mehr]
Das meta-Tag <meta name="viewport" content="initial-scale=1.0"> entspricht dem CSS-Block: 
@viewport {
  zoom: 1.0;
  width: auto;
}
Der CSS-Block 
@viewport {
  width: 480px;
  zoom: 2.0;
  user-zoom: zoom;
}
entspricht dem meta-Tag <meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">
Der CSS-Block 
@viewport {
  width: 980px;
  min-zoom: 0.25;
  max-zoom: 5;
}
bewirkt bei einem Mobile-Device mit 320 Pixel (width)
eine Dokumenten-Width-Anzeige von maximal 1280px
und bei einem Mobile-Device mit 240 Pixel (width)
eine Dokumenten-Width-Anzeige von maximal 960px .