Heim >Web-Frontend >HTML-Tutorial >CSS von Grund auf neu starten (1 21.09.2016)
CSS von Grund auf neu starten (1 21.09.2016)
- WBOYOriginal
- 2016-09-22 08:42:151117Durchsuche
1.Grundlegende Grammatik
CSS-Regeln bestehen aus zwei Hauptteilen: einem Selektor und einer oder mehreren Deklarationen.
<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}
Selektoren sind normalerweise HTML-Elemente, die gestaltet werden müssen.
Jede Deklaration besteht aus einem Attribut und einem Wert.
Eigenschaft ist das Stilattribut, das Sie festlegen möchten. Jedes Attribut hat einen Wert. Eigenschaften und Werte werden durch Doppelpunkte getrennt.
<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}
Die folgende Codezeile setzt die Textfarbe innerhalb des h1-Elements auf Rot und die Schriftgröße auf 14 Pixel.
In diesem Beispiel ist h1 der Selektor, Farbe und Schriftgröße sind Attribute und Rot und 14px sind Werte.
<span style="color: #800000;">h1</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;}
Die meisten Stylesheets enthalten mehr als eine Regel und die meisten Regeln enthalten mehr als eine Deklaration. Mehrere Deklarationen und die Verwendung von Leerzeichen erleichtern die Bearbeitung von Stylesheets:
<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
font-family</span>:<span style="color: #0000ff;"> Georgia, Palatino, serif</span>;
}
2. Erweiterte Syntax
① Gruppierung von Selektoren. Sie können Selektoren gruppieren, sodass gruppierte Selektoren dieselbe Deklaration verwenden. Verwenden Sie Kommas, um Selektoren zu trennen, die gruppiert werden müssen. Im folgenden Beispiel haben wir alle Überschriftenelemente gruppiert. Alle Titelelemente sind grün.
<span style="color: #800000;">h1,h2,h3,h4,h5,h6 </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> green</span>;
}
② Vererbung
Laut CSS erben untergeordnete Elemente Eigenschaften von ihrem übergeordneten Element. Aber es funktioniert nicht immer so. Schauen Sie sich diese Regel an:
<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
font-family</span>:<span style="color: #0000ff;"> Verdana, sans-serif</span>;
}
Basierend auf der oben genannten Regel verwendet das Hauptelement der Website die Schriftart Verdana (vorausgesetzt, diese ist auf dem System des Besuchers verfügbar).
Durch die CSS-Vererbung erben untergeordnete Elemente die Attribute, die dem Element der obersten Ebene (in diesem Fall body) gehören (diese untergeordneten Elemente sind z. B. p, td, ul, ol, ul, li, dl, dt, und dd). Es sind keine zusätzlichen Regeln erforderlich. Alle untergeordneten Elemente des Körpers sollten die Schriftart Verdana anzeigen, ebenso wie die untergeordneten Elemente des untergeordneten Elements. Und in den meisten modernen Browsern ist dies tatsächlich der Fall.
3.CSS-abgeleiteter Selektor
Sie können das Markup prägnanter gestalten, indem Sie Stile basierend auf dem Kontext der Position eines Elements definieren.
Im folgenden Beispiel ist nur das starke Element im li-Element kursiv dargestellt. Es ist nicht erforderlich, eine spezielle Klasse oder ID für das starke Element zu definieren, und der Code ist prägnanter.
<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> normal</span>;
}
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
4 ID-Auswahl
Derid-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind. Der ID-Selektor wird mit „#“ definiert.
Für die beiden ID-Selektoren unten kann der erste die Farbe des Elements als Rot und der zweite die Farbe des Elements als Grün definieren:
<span style="color: #800000;">#red </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;">
#green </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">green</span>;}
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
① ID-Selektor und abgeleiteter Selektor
In modernen Layouts werden ID-Selektoren häufig zum Erstellen abgeleiteter Selektoren verwendet.
Der obige Stil wird nur auf Absätze angewendet, die in Elementen mit der ID der Seitenleiste erscheinen. Bei diesem Element handelt es sich höchstwahrscheinlich um eine Div- oder Tabellenzelle, es könnte sich jedoch auch um eine Tabelle oder ein anderes Element auf Blockebene handeln.
<span style="color: #800000;">#sidebar p </span>{<span style="color: #ff0000;">
font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
margin-top</span>:<span style="color: #0000ff;"> 0.5em</span>;
}
② Individuelle Auswahl
Der ID-Selektor kann unabhängig funktionieren, auch wenn er nicht zum Erstellen abgeleiteter Selektoren verwendet wird:
<span style="color: #800000;">#sidebar </span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px dotted #000</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 10px</span>;
}
5. Klassenauswahl
In CSS werden Klassenselektoren mit einem Punkt angezeigt:
Im Beispiel unten sind alle HTML-Elemente mit der Center-Klasse zentriert.
<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}
Im folgenden HTML-Code haben sowohl h1- als auch p-Elemente die Mittelklasse. Das bedeutet, dass beide die Regeln im „.center“-Selektor respektieren.
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> This heading will be center-aligned </span><span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> This paragraph will also be center-aligned. </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
① Wie id kann auch class als abgeleiteter Selektor verwendet werden:
Tabellenzellen innerhalb größerer Elemente mit dem Klassennamen Fancy zeigen orangefarbenen Text auf grauem Hintergrund an. (Das größere Element namens fancy könnte eine Tabelle oder ein Div sein)
<span style="color: #800000;">.fancy td </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #666</span>;
}
② Elemente können auch anhand ihrer Klasse ausgewählt werden:
Tabellenzellen mit dem Klassennamen fancy werden orange mit grauem Hintergrund angezeigt.
<span style="color: #800000;">td.fancy </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #666</span>;
}
6.CSS-Attributauswahl
Stile für HTML-Elemente mit angegebenen Attributen festlegen Sie können Stile für HTML-Elemente mit angegebenen Attributen festlegen, nicht nur für Klassen- und ID-Attribute.
① Attributauswahl
Stilisieren Sie alle Elemente mit einem Titelattribut:
<span style="color: #800000;">[title]
</span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;">red</span>;
}
② Attribut- und Wertselektoren
Stilisieren Sie alle Elemente mit title="W3School":
<span style="color: #800000;">[title=W3School]
</span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;">5px solid blue</span>;
}
③ 属性和值选择器 - 多个值
为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
<span style="color: #800000;">[title~=hello] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<span style="color: #800000;">[lang|=en] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }
7.如何插入CSS
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部，内部，内联。
① 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
<span style="color: #800000;">hr </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> sienna</span>;}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">background-image</span>:<span style="color: #0000ff;"> url("images/back40.gif")</span>;}
② 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用