Was ist CSS? Einführung in drei CSS-Stile und Textattribute-CSS-Tutorial-php.cn

Was ist CSS? Einführung in drei CSS-Stile und Textattribute

不言

Freigeben： 2018-08-09 15:31:55

Original

2705 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

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";

Nach dem Login kopieren

4 Schriftstärke: font-weight

Optionaler Wert

Beschreibung

normal

Standardwert, nicht fett

fett

可选值	说明
normal	默认值，不加粗
bold
bolder	加粗，效果比bold更明显
value	100~900的不带单位数值，一般100~500为正常效果，600~900为加粗，数值越大，字体越粗

fetter

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;

Nach dem Login kopieren

5 Die Groß- und Kleinschreibung von der Text: text-transform

可选值	说明
none	默认值，无效果
capitalize	首字母大写
uppercase	全部大写
lowercase	全部小写

text-transform: capitalize;

Nach dem Login kopieren

6 Horizontale Textausrichtung: text-align

可选值	说明
left	默认值，左对齐
right	右对齐
center	居中对齐
justify	两端对齐

text-align: left;

Nach dem Login kopieren

7 Vertikale Textausrichtung

可选值	说明
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
inherit	规定应该从父元素继承 vertical-align 属性的值