Heim >Web-Frontend >HTML-Tutorial >Allgemeine CSS-Tags

Allgemeine CSS-Tags

WBOY
WBOYOriginal
2016-12-05 13:26:291245Durchsuche

Gemeinsame CSS-Tags

Ein CSS-Textattribut

Farbe: #999999; /*Textfarbe*/

Schriftfamilie: 宋体,sans-serif; /*Textschriftart*/

Schriftgröße: 9pt; /*Textgröße*/

font-style:itelic; /*kursiver Text*/

font-variant:small-caps; /*kleine Schriftart*/

Buchstabenabstand: 1pt; /*Leerzeichen zwischen Buchstaben*/

Zeilenhöhe: 200 %; /*Zeilenhöhe festlegen*/

font-weight:bold; /*Text fett*/

vertikal-align:sub; /*subscript*/

vertikal-align:super; /*superscript*/

text-decoration:line-through; /*Durchgestrichen hinzufügen*/

text-decoration: overline; /*Obere Zeile hinzufügen*/

text-decoration:underline; /*underline*/

text-decoration:none; /*Keine Dekorationszeile*/

text-transform : großschreiben; /*Das erste Wort groß schreiben*/

text-transform : Großbuchstaben; /*Englischer Großbuchstaben*/

text-transform : Kleinbuchstaben; /*Englischer Kleinbuchstabe*/

text-align:right; /*Text rechts ausrichten*/

text-align:left; /*text linksbündig*/

text-align:center; /*Text-zentriert ausgerichtet*/

text-align:justify; /*Text-aligned*/

vertical-align:top; /*Die Oberseite des größten Elements innerhalb der Elementreihe vertikal ausrichten/

vertical-align:bottom; /*Die Unterseite des größten Elements innerhalb der Elementreihe vertikal ausrichten*/

vertikal-align:middle; /*Vertikale zentrierte Ausrichtung*/

vertical-align:text-top; /*Die Oberseite des übergeordneten Elements vertikal ausrichten*/

vertical-align:text-bottom; /*Die Unterseite des übergeordneten Elements vertikal ausrichten*/

Der Unterschied zwischen oben, unten, Text-oben und Text-unten:



2. CSS-Rand leer

padding-top:10px; /*Oberen Rand leer lassen*/

padding-right:10px; /*Rechten Rand leer lassen*/

padding-bottom:10px; /*Unteren Rand leer lassen*/

padding-left:10px; /*Den linken Rand leer lassen


3. CSS-Symbolattribute

list-style-type:none; /*Keine Markierung*/

list-style-type:decimal; /*Arabische Ziffernmarkierung*/

list-style-type:lower-roman; /*Kleine römische Ziffern, wie zum Beispiel: i, ii, iii, iv, v usw.*/

list-style-type:upper-roman; /*Große römische Ziffern, wie zum Beispiel: I, II, III, IV, V usw.*/

list-style-type:lower-alpha; /*kleine englische Buchstabenmarkierung*/

list-style-type:upper-alpha; /*große englische Buchstabenmarkierung*/

list-style-type:disc; /*durchgezogene Kreismarkierung*/

list-style-type:circle; /*Hohle Kreismarkierung*/

list-style-type:square; /*Volle quadratische Markierung*/

list-style-image:url(/dot.gif); /*Benutzerdefiniertes Bild-Tag*/

list-style-position: Outside; /*convex row*/

list-style-position:inside; /*indent*/


4. CSS-Hintergrundstil

/*Hintergrundfarbe*/

Hintergrund:transparent; /*Perspektivischer Hintergrund*/

Hintergrundbild: url(/image/bg.gif); /*Hintergrundbild*/

Hintergrundanhang: behoben; /*Wasserzeichen behobener Hintergrund*/

Hintergrundwiederholung: wiederholen; /*Anordnung wiederholen – Webseitenstandard*/

Hintergrundwiederholung: keine Wiederholung; /*Keine Wiederholungsanordnung*/

Hintergrundwiederholung: Wiederholung-x; /*auf der X-Achse wiederholen*/

Hintergrundwiederholung: Wiederholung-y; /*auf der Y-Achse wiederholen*/

Hintergrundposition angeben

background-position : x% y%; /*Die Position der x- und y-Achse des Hintergrundbildes*/

Hintergrundposition: oben; /*nach oben ausrichten*/

background-position : buttom; /*nach unten ausrichten*/

Hintergrundposition: links; /*Links ausrichten*/

Hintergrundposition: rechts; /*Rechts ausrichten*/

Hintergrundposition: Mitte; /*Mitte ausgerichtet*/



5. CSS-Verbindungseigenschaften

a /*Alle Hyperlinks*/

a:link /*Hyperlink-Textformat*/

a:visited /*Linktextformat besucht*/

a:active /*Format des gedrückten Links*/

a:hover /*mouse to link*/

Mauszeigerstil:

Verbotener Cursor:nicht zulässig;

Link-Finger-Cursor: Zeiger

Fadenkreuz-Cursor:Fadenkreuz

Hilfe-Cursor (es wird ein Fragezeichen angezeigt) Cursor:Hilfe

Kreuzpfeil-Cursor:bewegen

Text T-förmiger Cursor:Text

Hintergrundprogramm läuft vom Typ Cursor:Fortschritt

Trichtercursor:warten

Der Pfeil zeigt nach rechts oder nach rechts, Cursor:w-resize oder Cursor:e-resize

Pfeil nach oben oder unten Cursor:n-resize oder Cursor:s-resize

/*Diese vier Werte entsprechen den Anfangsbuchstaben der englischen Buchstaben „Southeast“, „Northwest“ und „Northwest“ bzw. */

Der Pfeil zeigt auf den oberen oder unteren rechten Cursor:ne-resize oder Cursor:se-resize

Der Pfeil zeigt auf den Cursor oben links oder unten links: Cursor:nw-resize oder Cursor:sw-resize

/*Der erste Buchstabe dieser vier Werte ist der erste Buchstabe von Norden oder Süden*/

Benutzerdefinierter Cursor p {cursor:url("cursor file name.ico"),text;}

/*Benutzerdefinierte Cursor sind anfällig für Inkompatibilitätsprobleme, daher müssen Sie einen Standard-Cursortyp hinzufügen*/



6. Liste der CSS-Frames

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*/

Das Obige ist die empfohlene Schreibmethode, Sie können jedoch 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 der Randlinie fest*/

Andere Randstile

solider /*solider Rahmen*/

gepunktet /*gepunktetes Kästchen*/

doppelter /*doppelter Rahmen*/

Nut /*Dreidimensionaler innerer konvexer Rahmen*/

Grat /*dreidimensionaler Reliefrahmen*/

Einsatz /*konkaver Rahmen*/

Anfang /*konvexer Rahmen*/



7. CSS-Randstil

margin-top:10px; /*oberer Rand*/

margin-right:10px; /*rechter Randwert*/

margin-bottom:10px; /*unterer Randwert*/

margin-left:10px; /*linker Randwert*/

8. Häufig verwendete CSS-Kombinationen

myCSS1{display:block; margin: 0px; padding: 0px; wrap;">#ddd;padding:50px;Schriftgröße: 30px;}

Stellungnahme:
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
Vorheriger Artikel:Bootstrap-StudiennotizenNächster Artikel:Bootstrap-Studiennotizen