In diesem Artikel werden hauptsächlich die umfassendsten CSS-Stile beschrieben, die auf jeden Fall eine perfekte CSS-Seite vervollständigen. Ich hoffe, dass sie allen helfen kann.
Ein Schriftartattribut: (font)
size{font-size: x-large;}(extra large)xx-small;(extrem klein) Im Allgemeinen nicht auf Chinesisch verwendet , Verwenden Sie einfach numerische Werte, Einheiten: PX, PD (Normal) Einheiten: PX, PD, EM ;}(Kapitälchen) normal;(normal)
uppercase{text-transform: captialize;}(erster Buchstabe groß geschrieben) Großbuchstaben ;(Großbuchstabe) Kleinbuchstabe;(Kleinbuchstabe) keine;(keine)
Modifikation{ text-decoration: underline;}(underline) overline;(overline) durchgestrichen;(durchgestrichen) blink;(blink)
Üblicherweise Verwendete Schriftarten: (Schriftfamilie)
"Courier New", Courier, Monospace, "Times NewRoman", Times, Serif, Arial, Helvetica, Sans-Serif, Verdana
Hintergrundattribut: (Hintergrund)
Farbe{Hintergrundfarbe: #FFFFFF;}
Bild{Hintergrundbild: url();}
Wiederholen {Hintergrundwiederholung: keine Wiederholung;}
Scrollen {Hintergrundanhang: behoben;} (fest) scrollen; (scrollen)
Position {Hintergrundposition: links;}(horizontal) oben(vertikal);
Abkürzungsmethode {Hintergrund:#000 URL(..) wiederholen fest links oben;}/ *Abkürzung·Dies erscheint oft beim Lesen von Code, also studieren Sie es sorgfältig*/
Blockattribut: (Block) /*Dies ist das erste Mal, dass ich dieses Attribut kenne, daher muss ich es genauer studieren*/
Buchstabe- Abstand: normal;} Wert /*Dieses Attribut erscheint nützlich, bitte üben Sie mehr*/
Ausrichtung{text-align: justify;}(Beide Enden ausrichten)left;(Links ausrichten) rechts;(Rechts ausrichten) zentriert;( Center)
Indent{text-indent: Value px;}
Vertikale Ausrichtung{vertikal-align: baseline;}(baseline) sub;(subscript)top;(text-top; middle); ; text-bottom;
Word-spacing: normal ; value eingebettet) list-item; (zusätzlicher Teil) table-header-group; group; table-column-group; table-cell;table-caption; (table-title) /*Das Verständnis des Anzeigeattributs ist sehr vage*/
Box-Attribut:
Breite:; Rand:; Abstand: oben rechts, unten links ;(Rillenlinie) Rand; -width:; Rahmenbreite
border-color:#;
Abkürzungsmethode border: width style color;/* Abkürzung*/
Listenattribut: (List-style)
Type list-style- Typ: Scheibe; (Punkt) Kreis; (Quadrat) Dezimalzahl (Unteres Alpha; Oberes Alpha;
Position Listenstil: Außen; (Außen) inside;
Image list-style-image: url(..);
Position: absolut; sichtbar; 🎜>Überlauf: sichtbar; ausgeblendet; automatisch;
Clip: rect (12px,auto,12px,auto) (Zuschneiden)
Farbe: # 999999; /*Textfarbe*/
Schriftfamilie: Song Dynasty, serifenlos; /*Textschrift*/
Schriftart: itelic; /*Text kursiv*/
font-variant ; /*Small font*/
letter-spacing : 1pt; /*Distanz zwischen Wörtern*/
line-height : 200% ; /*Zeilenhöhe festlegen*/
font-weight:bold; / *Bold text*/
vertical-align:sub; /*Subscript*/
vertical-align:super; /
text-decoration:line-through; / *Durchgestrichen hinzufügen*/
text-decoration: overline; /*Top line hinzufügen*/
text-decoration:none; /*Link löschen*/
text-transform : großgeschrieben; /*Erstes Wort großgeschrieben*/text-transform : großgeschrieben; /*Englisch großgeschrieben*/
text -transform : Kleinbuchstaben; /*Englischer Kleinbuchstabe*/
text-align:right; /*text-align:right*/
text-align:left; /*text-align the left*/
text-align:center; /*text in der Mitte ausgerichtet*/
text-align:justify; /*Textalignment*/
vertical-align attribute
vertikal-align:top; /*Vertikal ausrichten nach oben*/
vertikal-ausrichten:unten; /*Vertikal nach unten ausrichten*/
vertikal-ausrichten:mitte; /*Vertikale zentrierte Ausrichtung*/
vertikal-ausrichten:text-top; vertikal nach oben*/
vertikal-align:text-bottom; / *Text vertikal nach unten ausrichten*/
3
padding-top:10px; /*Lass den oberen Rand leer*/
padding-right:10px; /*Lass den rechten Rand leer*/
padding-bottom:10px; /*Lass den unteren Rand Rand leer* /
padding-left:10px; /*Den linken Rand leer lassen
4. CSS-Symbolattribute:
list-style-type:none; /*Keine Nummerierung */
list-style-type:decimal; /*Arabische Ziffern*/
list-style-type:lower-roman; /*Kleinbuchstaben 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; /*Volles Kreissymbol*/
list-style-type:circle; /*Hohles Kreissymbol*/
list-style-type:square; /*Volles Quadrat symbol* /
list-style-image:url(/dot.gif); /*Picture symbol*/
list-style-position: Outside; position :inside; /*indent*/
background-color:#F5E2EC; /*background color*/
Hintergrundbild: url(/image/bg.gif); /*Hintergrundbild*/
Hintergrundanhang: behoben; /*Wasserzeichen fester Hintergrund*/
Hintergrund - wiederholen: wiederholen; /*Wiederholungsanordnung – Webseitenstandard*/
Hintergrundwiederholung: keine Wiederholung; /*Keine Wiederholungsanordnung*/
Hintergrundwiederholung: Wiederholung-x; /*Wiederholungsanordnung auf dem x -axis /* Die Position der x- und y-Achse des Hintergrundbildes*/
background-position : top; /*Align up*/
background-position: buttom; /*Align down*/
Hintergrundposition: links; /*Links ausrichten*/
a /*Alle Hyperlinks*/
a:link /*Hyperlink-Textformat*/
a:visited /*Visited-Link-Textformat*/
a: aktiv /*Format des gedrückten Links*/
a:hover /*Maus zum Verknüpfen*/
Link Finger CURSOR: Hand
Kreuzkörpercursor:FadenkreuzPfeil nach unten Cursor:s-resize
Kreuzpfeil, Cursor:bewegen
Pfeil nach rechts, Cursor:bewegen
Ein Fragezeichen hinzufügen, Cursor:Hilfe
Pfeil nach links, Cursor:w-resize
Pfeil nach oben, Cursor:n- Größe ändern
Pfeil zeigt nach oben und nach rechts, Cursor:ne-resize
Pfeil zeigt nach oben und nach links, Cursor:nw-resize
Text, den ich eingebe, Cursor:text
Pfeil nach unten und nach rechts, Cursor:se- Größe ändern
Pfeil diagonal nach unten links Cursor:sw-resize
Trichtercursor:warten
Cursormuster (IE6) p {cursor:url("cursor file name.cur"),text;}
8. Liste der CSS-Ränder:
border-top: 1px solid #6699cc;
border-bottom: 1px solid #6699cc; /
border-left : 1px solid #6699cc; /*left border*/
border-right : 1px solid #6699cc; /*right border*/
Das Obige ist die empfohlene Schreibmethode, aber es Kann auch verwendet werden. Die herkömmliche Methode lautet wie folgt:
border-top-width: 1px /*Legen Sie die obere Breite fest des oberen Rahmens*/
border -top-style: solid/*Legen Sie den oberen Stil des oberen Rahmens fest*/
9. Andere Rahmenstile
solid / *Massiver Rahmen*/
gepunktet / *Gepunkteter Rahmen*/
doppelt /*Doppelter Rahmen*/
Nut /*Dreidimensionaler konvexer Rahmen*/
Einschub /*Konkaver Rahmen*/
Anfang /*Konvexer Rahmen*/
8. CSS-Formularanwendung:
Textfeld
Schaltfläche
Kontrollkästchen
Schaltfläche auswählen
Dropdown-Menü Option 1 Option 2
Rand oben :10px; /*oberer Rand*/
margin-right:10px; /*rechter Randwert*/
margin-bottom:10px; /*unterer Randwert*/
margin-left:10px; /*linker Randwert*/
10. CSS-Attribute: Schriftstil
1 Schriftstil {font:font-stylefont-variant Font-weight Schriftgröße Schriftfamilie}
2 Schriftart {Schriftfamilie:"Schriftart 1", "Schriftart 2", "Schriftart 3", ...}
3 Schriftgröße: numerisch|groß|kleiner Stil {font-style:inherit|italic|normal|oblique}
5 Schriftstärke {font-weight:100-900|bold|bolder|lighter|normal;}
6 Schriftfarbe {color: value;}
7 Schattenfarbe {text-shadow: 16-Bit-Farbwert}
8 Schriftzeilenhöhe {line-height: numerischer Wert |. inherit|normal;}
9 Buchstabenabstand {letter-spacing: numerischer Wert |. inherit|. normal}
10 Wortabstand {word-spacing:numeric|inherit|normal}
11 Schriftarttransformation {font-variant: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|halb-kondensiert|halb-expandiert|ultra-kondensiert|ultra-expandiert|breiter}
2 Textdekoration {text-decoration:inherit|none|underline|overline|line-through|blink}
3 Leerzeichen am Anfang von Absatz {text-indent :numeric|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}
2 Hintergrundbild {background-image:url(URL)|none}
3 Hintergrundwiederholung {background-repeat:inherit|no-repeat|repeat| wiederholen-x|. wiederholen-y}
4 Hintergrund behoben {background-attachment:fixed|scroll}
5 Hintergrundpositionierung {background-position:numeric|top|bottom|left|right|center}
6 Rückseitenstil {Hintergrund:Hintergrundfarbe|Hintergrundbild|Hintergrundwiederholung|Hintergrundanhang|Hintergrundposition}
2 padding {padding:padding-toppadding-right padding-bottom padding-left}
3 Rahmenbreite
{border-width:border-top -widthborder -right-width border-bottom-width border-left-width}
Breitenwert: dünn|mittel|dick|Wert
4 Rahmenfarbe {Rahmenfarbe: Wert Wert Wert Wert} Werte: repräsentieren jeweils oben, Farbwerte rechts, unten, links
5 Rahmenstil
{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 border{border :border-widthborder-style color}
Oberer Rand{border-top:border-top-width border-style color}
Rechter Rand{border-right:border-right-width border-stylecolor}
Unterer Rand{border-bottom:border-bottom-width border-stylecolor}
Linker Rand{border-left:border-left-width border-style color}
7 Breite{width:length|percent|auto}
8 Height{height:numeric|auto}
9 Float{float:left|right|none}
10 Clear{clear:none|left|right|both}
2 Kontrollleerzeichen {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:directory style type|directory style position|url}
7 Mausform
{ Cursor :hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
Dreamweaver-Webseitenproduktion verwendet die Verschachtelungsmethode im CSS-Stil
Beispielcode zum Anzeigen von CSS-Stilen in Angular4
Einstellungstabelle CSS Was sollte auf den man beim Stil achtet
Das obige ist der detaillierte Inhalt vonDie umfassendste Zusammenfassung von CSS-Stilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
