Heim > Web-Frontend > HTML-Tutorial > Zusammenfassung der CSS-Eigenschaften

Zusammenfassung der CSS-Eigenschaften

巴扎黑
Freigeben: 2017-07-23 16:38:57
Original
1222 Leute haben es durchsucht

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage