Heim > Artikel > Web-Frontend > Was ist CSS? Einführung in drei CSS-Stile und Textattribute
Was ist CSS? Einführung in drei CSS-Stile und Textattribute
- 不言Original
- 2018-08-09 15:31:552676Durchsuche
In diesem Artikel erfahren Sie, was CSS ist. Die Einführung der drei CSS-Stile und Textattribute hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
Was ist CSS?
Cascading Style Sheets, auch CSS genannt, Cascading Style Sheets.
Wird zum Ändern von HTML-Dateien und zum Durchführen von Vorgängen wie Schriftsatz oder Größensteuerung an Webseitenelementen verwendet.
Mit anderen Worten: Die HTML-Datei füllt den Inhalt der Webseite, während CSS die Leistung des Inhalts steuert
Zum Beispiel: die Größe des Elements, die Position des Elements auf der Webseite, der Hintergrund des Elements und andere Attribute.
Wo ist der CSS-Code geschrieben?
1 Inline-Stil (inline): CSS-Code kann in HTML-Tags geschrieben werden, mit style="css style";
<p style="color: red;">这是一个段落</p>
2 Interner Stil:
Schreiben Sie den CSS-Code in das Style-Tag
Theoretisch kann das Style-Tag an einer beliebigen Stelle im Dokument geschrieben werden, um wirksam zu werden, aber wir alle schreiben den Style in das Head-Tag
<html>
<head> ...
<style type="text/css">
css样式
</style>
</head>
</html>3 Externer Stil:
Der externe Stil ist das Schreiben den CSS-Code separat in
in einer CSS-Datei (CSS-Suffixdatei)
Verwenden Sie dann den Link-Tag, um die externe Stildatei
vorzustellen
Es sind keine Style-Tags in externen Style-Dateien erforderlich, schreiben Sie einfach CSS-Code direkt
<html>
<head> ...
<link rel="stylesheet" type="text/css" href="css文件路径" />
</head>
</html>Drei Styles können auf mehrere Arten gleichzeitig verwendet werden
Textattribut: Schriftartattribut
1 Schriftgröße: Schriftgröße
Legen Sie die Schriftgröße fest, verwenden Sie Werte mit Einheiten wie px, em, pt usw.
font-size: 12px;
2 Schriftfarbe: Farbe
Farbe: rot;
3 Schriftstil: Schriftfamilie
Legen Sie Schriftarten fest, z. B. Song Dynasty, Yahei und dergleichen
Kann mehrere Werte haben
Es wird jedoch nur ein Schriftstil angezeigt
Wenn die erste Schriftart verfügbar ist, verwenden Sie die erste, andernfalls die zweite
Wenn die zweite Schriftart nicht verfügbar ist, verwenden Sie die dritte usw.
Schriftarten werden durch englische Kommas getrennt. Wenn der Wert chinesisch ist oder aus mehreren Wörtern besteht, muss er in englische doppelte Anführungszeichen gesetzt werden
font-family: "宋体",Times,"New Century Schoolbook";
4 Schriftstärke: font-weight
| Optionaler Wert | Beschreibung | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| normal | Standardwert, nicht fett | ||||||||||
| fett |
|
||||||||||
| fetter td> | Fett, der Effekt ist offensichtlicher als fett | ||||||||||
| Wert | 100~900 ohne Einheitswert, im Allgemeinen ist 100~500 der normaler Effekt, und 600~900 ist fett. Je größer der Wert, desto fetter die Schriftart. |
font-weight: bold;
5 Die Groß- und Kleinschreibung von der Text: text-transform
| 可选值 | 说明 |
|---|---|
| none | 默认值，无效果 |
| capitalize | 首字母大写 |
| uppercase | 全部大写 |
| lowercase | 全部小写 |
text-transform: capitalize;
6 Horizontale Textausrichtung: text-align
| 可选值 | 说明 |
|---|---|
| left | 默认值，左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
text-align: left;
7 Vertikale Textausrichtung
| 可选值 | 说明 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| sub | 垂直对齐文本的下标 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
| text-bottom | 把元素的底端与父元素字体的底端对齐 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值 |
Das Vertical-Align-Attribut funktioniert nur, wenn das Element zu Inline oder Inline-Block gehört.
vertical-align: baseline;
8 Text-Dekoration
| 可选值 | 说明 |
|---|---|
| none | 无下划线 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 中间划线(删除线) |
text-decoration: underline;
9 首行缩进: text-indent
该属性接受一个带单位的值
规定文本首行缩进多少个单位的空间
只对第一行有缩进，而且只用于块元素
text-indent: 2em;
text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准
10字间距: letter-spacing
该属性接受一个带单位的值
规定每个字符之间间隔多少个单位的空间
letter-spacing: 1em;
11 词间距: word-spacing
该属性接受一个带单位的值
规定每个单词之间间隔多少个单位的空间
该属性对中文无效
相关文章推荐：
css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）
Das obige ist der detaillierte Inhalt vonWas ist CSS? Einführung in drei CSS-Stile und Textattribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!