Übung 1:
1. Übung zur Verwendung des Klassenselektors:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>类选择器使用示例</title> <style type="text/css"> .red { color:red; font-size:12px; } .blue { color:blue; font-size:20px; } </style> </head> <body> <p>无类选择器效果</p> <p class="red">类选择器red效果</p> <p class="blue">类选择器blue效果</p> <h3 class="blue">同一个类别选择器可以使用到另外的标记上</h3> </body> </html>
3 :
Effekt der ersten Zeile: Da es keine Selektordefinition für Markierung P gibt, werden die Standardfarbe und -größe angezeigt.
Effekt der zweiten Zeile: Da die rote Klassenauswahl für Markierung P verwendet wird dritte Wirkungslinie: Da der Bule-Klassenselektor für Markierung P verwendet wird, wird die Schriftart in Blau und mit einer Größe von 20 Pixeln angezeigt. Vierte Wirkungslinie: Dies zeigt, dass derselbe Klassenselektor auf verschiedenen verwendet werden kann Zusätzlich zukann es auch
ID-Selektor
Übung:2. Wirkung:
3. Erläuterung:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>标记选择器和ID选择器练习</title> <style type="text/css"> /* * 标记选择器定义 */ p { color:blue; } /* * 交集复合选择器定义 */ p.special { color:red; } /* * ID选择器定义 */ #special { color:green; } </style> </head> <body> <p>普通段落文本</p> <h3>普通h3标记文本</h3> <p class="special">指定了special类选择器的p段落文本</p> <h3 id="special">指定了special的ID选择器的h3标题文本</h3> </body> </html>
Effekt der ersten Zeile: Da der Markierungsselektor p definiert ist, wird der Inhalt in Absatz p blau angezeigt.
Die zweite Zeile von Effekten: Da der Tag-Selektor h3 nicht definiert ist, wird der Inhalt im Titel h3 standardmäßig in Schwarz angezeigt.
Die dritte Reihe von Effekten: Da der Tag-Selektor p und der Klassen-Selektor Special verwendet werden Gleichzeitig entspricht dies der Definition des Kreuzungsselektors, sodass der Inhalt in der durch den Kreuzungsselektor p.special definierten Form angezeigt wird, sodass er in Rot angezeigt wird. Die vierte Zeile Wirkung: Aufgrund der Verwendung des ID-Selektors wird gleichzeitig die Standardverarbeitung von h3 verwendet, sodass der Inhalt im Titel h3 sowohl grün ist als auch in der durch h3 definierten Schriftgröße angezeigt wird 3: 1. Union-Selektor-Übung:>