Heim >Web-Frontend >HTML-Tutorial >Zusammenfassung der CSS-Eigenschaften
Allgemeine CSS-Eigenschaften:
Schriftartattribut: (Schriftart)
Größe Schriftgröße: x-groß; (extra groß) xx-klein) Im Allgemeinen verwendet für Chinesisch Nein, verwenden Sie einfach numerische Werte. Einheit: PX, PD
Schriftstil: schräg;(kursiv) kursiv;(kursiv) normal;(normal)
Linienhöhe: normal; (normal) Einheiten: PX, PD, EM
Schriftstärke: fett (fett) normal;( normal)
Variante Schriftart-Variante: Kapitälchen normal; (Normalschrift)
Großschreibung; ) keine; (keine)
Textdekoration ändern: unterstrichen; (obere Linie) blinken; 🎜>Häufig verwendete Schriftarten: (Schriftfamilie)
"Courier New", Courier, Monospace, "Times New Roman", Times, Serif, Arial, Helvetica, Sans-Serif, Verdana
Hintergrundattribut
: (Hintergrund)Farbe
Bildhintergrundbild: url();
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang scrollen: fest;(fest) scroll;( scroll)
Hintergrund positionieren -Position: links (horizontal) oben (vertikal);
Abkürzungsmethode Hintergrund:#000 URL(..) Wiederholung fest links oben; Attribut: (Block)
Buchstabenabstand: normal; Wert
right Liu text-align: justify; (beide Enden ausrichten) left) right; (right) center; (center)
Indent text-indent: value px;
vertikal-align: baseline; (tiefgestellt) oben; text-unten; : pre; (reserviert) nowrap; (kein Zeilenumbruch)
display:block (eingebettet) run-in; kompakt; (kompakte) Tabelle; Tabellenkopf-Gruppe; cell;table-caption;(table title)
Box-Attribut
width:; float:; :beide; Rand:; Reihenfolge: oben, rechts, unten, links
Randattribute
: (Rand)
Rahmen Stil: gepunktet; (gestrichelte Linie) durchgehend; (Rillenlinie) Grat;(Delle) Anfang;Rand -width:; border width
border-color:#;
Abkürzungsmethode border: width style color;
Listenattribut: (Listenstil)
Typ list-style-type: disc (dot) circle (square) decimal; ; (dezimale römische Codezahl) Großbuchstaben; Kleinbuchstaben;
Position list-style-position: Outside; >Image list-style-image: url(..);
Positionierungsattribute: (Position)
Position: absolut; relativ;Sichtbarkeit: erben; sichtbar; versteckt;
Überlauf: sichtbar;
clip: rect(12px,auto,12px ,auto) (Zuschneiden)
CSS-Attributcode-Sammlung
Ein CSS-Textattribut:
Farbe: #999999; /*Textfarbe*/
Schriftfamilie: Song Dynasty, serifenlos; /*Textschrift*/
Schriftgröße : 9pt; /*Textgröße*/
font-style:itelic; /*Text kursiv*/ font-variant:small-caps; Schriftart*/
Buchstabenabstand: 1pt; /*Leerzeichen zwischen Zeichen*/
Zeilenhöhe: 200 %; /*Zeilenhöhe festlegen*/
Schriftstärke:fett; /*Text fett*/
vertikal ausrichten :sub; /*subscript*/
vertikal-align:super; /*superscript*/
text-decoration:line-through; /
text-decoration: overline; /*Top line hinzufügen*/
text-decoration:underline; /*Add underline*/
text-decoration:none; /*Link-Unterstreichung entfernen*/
text-transform : großschreiben; /*Das erste Wort groß schreiben*/
text- transform: Großbuchstabe; /*Englischer Großbuchstabe*/
text-transform: Kleinbuchstabe /*Englischer Kleinbuchstabe*/
text-align:right ; rechts*/
text-align:left; /*Text linksbündig*/
text-align:center; /*Text zentriert */
text-align:justify; /*Text-Ausrichtung*/
vertikal-align-Attribut
vertikal-align: top /*Vertikal ausrichten nach oben*/
vertikal-align:bottom; /*Vertikal nach unten ausrichten*/
vertikal-align:middle; /*Vertical-Center-Alignment*/
vertikal-align:text-top; /*Text vertikal nach oben ausrichten*/
vertical-align:text-bottom; /*Text vertikal nach unten ausrichten*/
2. CSS-Rand leer
padding-top:10px; /*Oberen Rand leer lassen*/
padding-right:10px; /*Lassen Sie den rechten Rand leer*/
padding-bottom:10px; /*Lassen Sie den unteren Rand leer*/
padding-left :10px /*; Lassen Sie den linken Rand leer
3. CSS-Symbolattribute:
list-style-type:none; /*Nicht nummeriert*/
list-style-type:decimal; /*Arabische Ziffern*/
list-style-type:lower-roman; /*Kleine römische Ziffern*/
list-style-type:upper-roman; /*große römische Ziffern*/
list-style-type:lower-alpha; /*kleine englische Buchstaben*/
list-style-type:upper-alpha; /*große englische Buchstaben*/
list-style-type:disc; /*durchgezogenes Kreissymbol*/
list-style-type:circle; /*Hohles Kreissymbol*/
list-style-type:square; /*Volles quadratisches Symbol*/
list-style-image:url(/dot.gif); /*Picture-style symbol*/
list-style-position: external; /*Convex row*/ /
list-style-position:inside; /*indent*/
4. CSS-Hintergrundstil:
/* Hintergrundfarbe*/
Hintergrund:transparent; /*Perspektivischer Hintergrund*/
Hintergrundbild: url(/image/bg.gif); /*Hintergrundbild */
Hintergrundanhang: behoben; /*Wasserzeichen fester Hintergrund*/
Hintergrundwiederholung: wiederholen; /*Anordnung wiederholen – Webseitenstandard*/
Hintergrundwiederholung: keine Wiederholung; /*Keine Wiederholungsanordnung*/
Hintergrundwiederholung: Wiederholung-x; /*Wiederholungsanordnung auf der x-Achse*/
Hintergrundwiederholung: Wiederholung-y; /*Wiederholen Sie die Anordnung auf der y-Achse*/
Geben Sie die Hintergrundposition an
Hintergrundposition: 90 % 90 %; /*Die Position der x- und y-Achse des Hintergrundbilds*/
background-position : top; /*Nach oben ausrichten*/
Hintergrundposition: unten; /*Nach unten ausrichten*/
Hintergrundposition: links; /*Nach links ausrichten*/
Hintergrundposition: rechts; Nach rechts ausrichten*/
Hintergrundposition: Mitte; /*Mitte ausrichten*/
5. CSS-Verbindungsattribute:
a /*Alle Hyperlinks*/
a:link /*Hyperlink-Textformat*/
a:besucht /*Linktextformat angezeigt*/
a:aktiv /*Linkformat gedrückt*/
a: Hover /*Maus zum Verlinken */
Mauszeigerstil:
Linker Finger-CURSOR: Hand
Kreuzkörpercursor: Fadenkreuz
Pfeil nach unten zeigender Cursor:s-resize
Kreuzpfeil-Cursor:bewegen
Pfeil nach rechts zeigender Cursor:bewegen
Fügen Sie ein hinzu Fragezeichen Cursor:Hilfe
Pfeil zeigt nach links Cursor:w-Resize
Pfeil zeigt nach oben Cursor:n-Resize
Der Pfeil zeigt auf den oberen rechten Cursor:ne-resize
Der Pfeil zeigt auf den oberen linken Cursor:nw-resize
Text, den ich eingebe Cursor:text
Pfeil diagonal unterer rechter Cursor:se-resize
Pfeil diagonal unterer linker Cursor:sw-resize
Trichtercursor:warten
Cursormuster (IE6) p {cursor:url("cursor file name.cur"),text;}
6. CSS-Rahmenliste:
border -top : 1px solid #6699cc; /*Top border*/
border-bottom : 1px solid #6699cc; /*Bottom border*/
border -left : 1px solid #6699cc; /*Left border*/
border-right : 1px solid #6699cc; /*Right border*/
Oben ist die empfohlene Schreibmethode, Sie können aber auch die herkömmliche Methode wie folgt verwenden:
border-top-color: #369 /*Legen Sie die obere Farbe der Randlinie fest*/
border-top-width: 1px /*Legen Sie die obere Breite des oberen Randes fest*/
border-top-style: solid/*Legen Sie den oberen Stil des oberen Randes fest* /
Andere Rahmenstile
solid /*solider Rahmen*/
gepunktet /*gepunkteter Rahmen*/
doppelt / *Doppellinienrahmen*/
Nut /*Dreidimensionaler innerer konvexer Rahmen*/
Rippe /*Dreidimensionaler Reliefrahmen* /
Einsatz /*konkaver Rahmen*/
Anfang /*konvexer Rahmen*/
7. CSS-Formularanwendung:
Textfeld
Schaltfläche
Kontrollkästchen
Auswahlschaltfläche
Multi -Zeilen-Textfeld
Dropdown-Menü Option 1 Option 2
8. CSS-Randstil:
margin-top:10px ; /*oberer Rand*/
margin-right:10px; /*rechter Randwert*/
margin-bottom:10px; /
margin-left:10px; /*Linker Randwert*/
CSS-Eigenschaften: Schriftart (Font Style)
Seriennummer Chinesische Beschreibung Markup-Syntax
1 Schriftstil {font:font-style, Schriftart-Variante, Schriftart-Gewicht, Schriftart-Größe, Schriftart-Familie}
2 Schriftart {Schriftfamilie: „Font 1“, „Font 2“, „Font 3“,...}
3 Schriftgröße {font-size: value |erben|. groß|. x-groß|. klein| 6 Schriftfarbe {color:Number;}
7 Schattenfarbe {text-shadow: 16-Bit-Farbwert}
8 Schriftzeilenhöhe {line-height: value|inherit|normal;}
9 Wortabstände {letter-spacing: numerischer Wert|inherit|normal}
10 Wortabstände {word-spacing: numerischer Wert|inherit|normal}
11 Schriftverformung{ Font-Variante:inherit|normal|small-cps }
12 Englische Konvertierung {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 Schriftartverformung {font-size-adjust:inherit|none}
14 Schriftart {font-stretch:confided|expanded|extra-confided|extra-expanded|inherit|narrower|normal| -kondensiert|. halberweitert|ultra-kondensiert|ultra-erweitert|breiter}
Textstil (Textstil)
Syntax der chinesischen Beschreibungsmarke für Seriennummern
1 Zeilenabstand {line-height:numeric|inherit|normal;}
2 Textdekoration {text-decoration:inherit|none|underline|overline|line-through| blinken}
3 Leerzeichen am Absatzanfang {text-indent:value|inherit}
4 Horizontale Ausrichtung {text-align:left|right|center| justify}
5 Vertikale Ausrichtung {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 Schreibmodus {writing-mode :lr-tb|tb-rl}
Hintergrundstil
Seriennummer Chinesische Beschreibungszeichensyntax
1 Hintergrundfarbe {
2 Hintergrundbild {background-image: url(URL)|none}
3 Hintergrundwiederholung {background-repeat:inherit|no- Wiederholung|Wiederholung|Wiederholung-x|. Wiederholung-y}
4 Hintergrund behoben {background-attachment:fixed|scroll}
5 Hintergrundpositionierung {background-position: numerisch|oben|unten|links|. rechts|Mitte}
6 Hintergrundstil {Hintergrund: Hintergrundfarbe|Hintergrundbild|Hintergrundwiederholung|Hintergrundanhang|Hintergrundposition}
Rahmenstil (Box-Stil)
Seriennummer Chinesische Beschreibungsmarkierungssyntax
1 Rand leer {margin:margin-top margin-right margin-bottom margin-left}
2 Polsterung {padding:padding-top padding-right padding-bottom padding-left}
3 Randbreite {border-width:border-top-width Rand -right-width border-bottom -width border-left-width}
Breitenwert: dünn|mittel|dick|numerischer Wert
4 Rahmenfarbe {border- color:numeric value value value} numeric value : Stellt jeweils die oberen, rechten, unteren und linken Farbwerte dar
5 Rahmenstil {border-style:none|hidden|inherit|dashed|solid |double|inset|outset|ridge|groove}
6 border {border:border-width border-style color}
Oberer Rand {border-top:border -top-width border-style color}
Rechter Rand {border-right:border-right-width border-style color}
Unterer Rand {border-bottom :border-bottom-width border-style color}
Linker Rand {border-left:border-left-width border-style color}
7 Breite {width : length|percent|. auto}
8 height {height: value|auto}
9 float {float:left|right|none}
10 klar {clear:none|left |right|both}
Kategorieliste
Seriennummer Chinesische Beschreibungszeichensyntax
1 Steuerung der Anzeige {display:none|block|inline |list-item}
2 Steuerung des Leerraums {white-space:normal|pre|nowarp}
3 Symbolliste {list-style-type:disc|circle |square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 Grafikliste {list-style-image:URL}
5 Positionsliste {list-style-position:inside|outside}
6 Verzeichnisliste {list-style: Verzeichnisstiltyp|Verzeichnisstilspeicherort|URL}
7 Mausform {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize| w-resize|s-resize|se-resize|sw-resize}
Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!