Detaillierte Einführung in gängige CSS-Stile

Schriftfamilie Legen Sie den Namen der Schriftart fest

Sie können mehrere Namen verwenden, die durch Kommas getrennt sind, und der Browser verwendet die verfügbaren Schriftarten in der Reihenfolge

p { font-family:'宋体','黑体','Arial'; }

font-size legt die Schriftgröße fest

length gibt die Textgröße mit einem Längenwert an, negative Werte sind nicht erlaubt

percentage gibt die Textgröße mit einem Prozentsatz an, und Der Prozentwert basiert auf der Schriftart im übergeordneten Objekt. Die Größe, negative Werte sind nicht zulässig

p { font-size:14px;}

font-weight steuert die Schriftstärke

normal normale Schriftart, entspricht dem Zahlenwert 400

fett Fett, entspricht dem Zahlenwert 700

100~900 Definieren Sie Zeichen von dünn bis dick

XML/HTML-Code Inhalt in die Zwischenablage kopieren

1. p {font-weight:bold;}

font-style steuert, ob die Schriftart kursiv ist.

normal gibt den Textschriftstil als normale Schriftart an.

italic gibt den Textschriftstil als kursiv an. Für spezielle Schriftarten sind nicht mit Kursivschrift gestaltet. Wenn Sie die kursive Darstellung verwenden möchten, wird Oblique

< angewendet 🎜>Oblique gibt den Textschriftstil als Schrägschrift an, wodurch der Text künstlich gekippt wird, anstatt die Kursivschrift in der Schriftart auszuwählen

p { font-style: normal; }   
p { font-style: italic; }   
p { font-style: oblique; }

Schriftart (Abkürzung des Schriftstils)

例：   
p{   
font-style: italic;   
font-weight: bold;   
font-size: 14px;   
line-height: 22px;   
font-family:'宋体';   
}   

缩写后：   
p { font: italic bold 14px/22px '宋体'; }

Farbe Textfarbe

•Englische Wörter wie: rot, gelb, grün...

•Hexadezimale Darstellung, beginnend mit #, einer Kombination aus 6 hexadezimalen Zeichen oder Zahlen, wie zum Beispiel: #FFFFFF, #000000...

•RGB Modus, Rot 0-255, Grün 0-255, Blau 0-255, wie zum Beispiel: RGB( 120,33,234)

•RGBA-Modus, wie zum Beispiel: RGBA(255,0,0,0.5), das letzte A bedeutet Transparenz 50 %

Text-Dekoration Text dekorative Linien

keine Standardeinstellung. Standardtext definieren

Unterstreichung Definieren Sie eine Linie unter dem Text

Überstreichung. Definieren Sie eine Linie im Text

durchgestrichen. Definieren Sie eine Linie durch den Text

blink definiert blinkenden Text

h1 {text-decoration:overline;}   
h2 {text-decoration:line-through;}   
h3 {text-decoration:underline;}

text-shadow text-shadow

h-shadow Erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt

v-shadow Erforderlich. Die Position des vertikalen Schattens. Negative Werte erlaubt

Unschärfe Optional. Unscharfer Abstand

Farbe optional. Farbe des Schattens

h1{ text-shadow: 2px 2px 2px #ff0000;}

Breite: automatisch |. Länge

Höhe: automatisch | margin: auto |. length

margin-top legt den oberen Rand fest

p { width:300px;}   
p { width:50%;}   
img { height:200px;}   
p { height:100px;}

margin-bottom legt den unteren Rand fest

margin-left legt den linken Rand fest

margin-right Legt den rechten Rand fest

Kurzform:

Rand: oberer Rand rechter Rand unterer Rand linker Rand

Rand: oberer und unterer Rand Linker und rechter Rand

Rand: oberer Rand, linker und rechter Rand, unterer Rand

Innenrandpolsterung: Länge

padding-top legt den oberen Rand fest. Die Polsterung von

p { width:300px; height:100px; margin:10px;}   
p { width:300px; height:100px; margin:0 auto;}

padding-bottom legt die untere Polsterung fest

padding-left stellt die linke Polsterung ein

padding-right legt die rechte Polsterung fest

Transparenz-Deckkraft:

Zahlenwert ist eine Dezimalzahl zwischen 0,0 und 1,0

p { width:300px; height:100px; padding:10px;}

Schreibkompatibel mit allen Browsern:

Die oben genannten allgemeinen CSS-Stile (gemeinsam genutzt) sind alle vom Herausgeber geteilten Inhalte. Ich hoffe, dass sie Ihnen eine Referenz geben können, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Eine ausführlichere Einführung in häufig verwendete CSS-Stile und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

p{ filter:alpha(opacity=50); }  /* IE6-IE8 */   
p{ opacity:0.5; }  /* 现代浏览器 */