Vollständige Sammlung von CSS-Stilen (organisierte Version)

Dieses Kapitel stellt Ihnen die vollständige Sammlung von CSS-Stilen (organisierte Version) vor, die einen gewissen Referenzwert haben. Ich hoffe, es wird Ihnen hilfreich sein.

Schriftarteigenschaften: (Schriftart)

Größe{Schriftgröße: x- groß;}(extra groß) xx-klein;(extrem klein) Im Allgemeinen nicht im Chinesischen verwendet, verwenden Sie einfach numerische Werte, Einheit: PX, PD

Stil {Schriftstil: oblique;}(kursiv) kursiv ;(kursiv) normal;(normal)

line-height {line-height: normal;}(normal) Einheit: PX, PD, EM

thickness {font-weight: fett; } (fett) normal; (normal)

Variante {Schriftart: Kapitälchen;} (Kleinbuchstaben) normal (normal)

{text- transform: großschreiben;}(erster Buchstabe großgeschrieben) Großbuchstabe;(Großbuchstabe) Kleinbuchstabe;(Kleinbuchstabe) keine;(keine)

Änderung {text-decoration: underline;}(underline) overline; (overline) line- durch; (durchgestrichen) blinken; (blinken)

Häufig verwendete Schriftarten: (Schriftfamilie)

„Courier New“, Courier, Monospace, „Times New Roman“, Times, Serif, Arial, Helvetica, Sans-Serif, Verdana

Hintergrundattribut: (Hintergrund)

Color{background-color: #FFFFFF;}

Image{background-image: url();}

Repeat{background-repeat: no-repeat ;}

scroll {background-attachment: fixiert;}(fixed) scroll;(scroll)

position {background-position: left;}(horizontal) top(vertikal);

Abkürzungsmethode { Hintergrund:#000 url(..) Wiederholung oben links fixiert;} /*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, also muss ich mehr lernen*/

Letter-spacing {letter-spacing: normal;} Wert/*Dieses Attribut Es scheint nützlich, mit mehr Übung */

Ausrichten {text-align: justify;} (beide Enden ausrichten) links; (ausrichten nach rechts) zentriert; Einzug{text-indent: value px;}

Vertikale Ausrichtung{vertikal-align: baseline;}(baseline) sub;(subscript) top; -bottom;

word-spacing: normal; value

white-space: pre;(reserviert) nowrap;(kein Zeilenumbruch)

Display {display:block;}(block) inline;(embedded) list-item;(list item) run-in;(append part) compact;(compact) marker;(marker) table; table-raw-group; table-column-group; table-column; (table-column) /*display-Attribut */

Box-Eigenschaften: (Box)

width:; float:; ; Reihenfolge: oben rechts, unten links

Randattribut: (Border)

border-style: dotted;(dotted line ) dashed; (gestrichelte Linie) durchgehend; (doppelte Linie) Grat (Rillen) Einschub;

Randbreite:; Randbreite -color:#;

Abkürzungsmethode border: width style color; /*abbreviation*/

Listenattribut: (List-style) Typ list-style-type: (Punkt) Kreis (Quadrat) Groß-Römisch (Dezimalzahl); Groß-Alpha; -alpha;

Position List-Style-Position: Outside;(Outside) Inside;

Image List-Style-Image: URL(..);

Positionierungsattribute: (Position)Position: relativ;

Sichtbarkeit: erben; sichtbar; Überlauf: sichtbar; ausgeblendet; automatisch;

Clip: rect(12px,auto,12px,auto) (Zuschneiden)

Vollständige Liste der CSS-Attributcodes

Ein CSS-Textattribut:

Farbe: #999999; /*Textfarbe*/Schriftfamilie: 宋体,sans-serif; /*Textschriftart*/

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

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

Schriftartvariante: Kapitälchen*/ *Zeilenhöhe festlegen*/

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

vertikal-align:sub; /*Subscript*/

vertikal-align :super; /*superscript*/

text-decoration:line-through; /*strikethrough*/

텍스트 장식: 윗줄 추가*/

텍스트 장식:밑줄 추가*/

텍스트 장식:없음; 밑줄*/

text-transform : 대문자로 표시; /*첫 번째 단어를 대문자로 표시*/

text-transform : /*영어 대문자로 표시*/

text-transform; : 소문자; /*영어 소문자*/

text-align:right; /*텍스트 정렬 오른쪽*/

text-align:left; 🎜>

text-align:center; /*텍스트 정렬*/

text-align:justify /*텍스트 정렬*/

세로; -align 속성

vertical-align:top; /*수직 위쪽 정렬*/

vertical-align:bottom; /*수직 아래쪽 정렬*/

Vertical-align:middle ; /*세로 가운데 정렬*/

vertical-align:text-top; /*텍스트를 위쪽으로 정렬*/

vertical-align:text-bottom; *텍스트 수직 아래쪽 정렬*/

2. CSS 테두리 공백

padding-top:10px; /*상단 테두리 비워두기*/

padding-right: 10px; /*오른쪽 테두리를 비워 둡니다*/

padding-bottom:10px; /*아래 테두리를 비워 둡니다*/

padding-left:10px; 왼쪽 테두리는 비워두세요

3. CSS 기호 속성:

list-style-type:none; /*번호 없음*/

list -style-type:decimal; /*아라비아 숫자*/

list-style-type:lower-roman; /*소문자 로마 숫자*/

list-style-type:upper- roman; /*대문자 로마 숫자 */

list-style-type:lower-alpha; /*영문 소문자*/

list-style-type:upper-alpha; 영문 대문자*/

list-style-type:disc; /*채워진 원형 기호*/

list-style-type:circle;

list- style-type:square; /*단색 사각형 기호*/

list-style-image:url(/dot.gif) /*그림 스타일 기호*/

list-style- 위치: 외부; /*볼록한 행*/

list-style-position:inside;

4. CSS-Hintergrundstil:

Hintergrundfarbe: #F5E2EC; /*Hintergrundfarbe*/

Hintergrund:transparent*;

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

Hintergrundanhang: behoben; /*Wasserzeichen fester Hintergrund*/

background-repeat: wiederholen; /*Wiederholungsanordnung – Webseitenstandard*/

background-repeat: no-repeat; /*Keine Wiederholungsanordnung*/

background-repeat: wiederholen- x; /*Wiederholen Sie die Anordnung auf der die Hintergrundposition

Hintergrundposition: 90 % 90 %; /*Die Position der x- und y-Achse des Hintergrundbilds*/

Hintergrundposition: oben / *Nach oben ausrichten*/

Hintergrundposition: unten; /*Nach unten ausrichten*/

Hintergrundposition: links; /*Nach links ausrichten*/

Hintergrundposition : rechts; /*Rechts ausrichten* /

Hintergrundposition : Mitte; /*Mittelausrichtung*/

5. CSS-Verbindungseigenschaften:

a /*alle Hyperlinks* /

a:link /*Hyperlink-Textformat*/

a:besucht /*Angesehenes Linktextformat*/

a:aktiv /*Link-Format drücken*/

a:hover /*Maus zum Verknüpfen*/

Mauszeigerstil:

Finger-CURSOR verbinden: Hand

Kreuzkörper-Cursor: Fadenkreuz

Pfeil nach unten zeigender Cursor:s-resize

Kreuzpfeil-Cursor:bewegen

Pfeil nach rechts zeigender Cursor:bewegen

Fügen Sie ein Fragezeichen hinzu. Cursor:Hilfe

Pfeil zeigt nach links Cursor:w-resize

Pfeil zeigt nach oben Cursor:n-resize

Pfeil zeigt nach oben und nach rechts Cursor:ne- resize

Pfeil nach oben und nach links Cursor:nw-resize

Text Ich tippe Cursor:text

Pfeil nach unten und rechts Cursor:se-resize

Pfeil diagonal nach unten links Cursor:sw-resize

Trichtercursor:wait

Cursormuster (IE6) p {cursor:url("cursor file name.cur"),text; }

6. Liste der CSS-Ränder:

border-top : 1px solid #6699cc; /*top border*/

border-bottom : 1px durchgezogen #6699cc; /*Unterer Rand*/

Rand-links: 1px durchgezogen #6699cc; Rechte Randlinie*/

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 fest der oberen Randlinie */

border-top-width: 1px /*Legen Sie die obere Breite des oberen Randes fest*/

border-top-style: solid/*Legen Sie die Oberseite fest Stil des oberen Rahmens*/

Andere Rahmenstile

durchgehend /*durchgehender Rahmen*/

gepunktet /*gepunkteter Rahmen*/

doppelt /* Doppelter Drahtrahmen*/

Nut /*dreidimensional eingesetzter konvexer Rahmen*/

Rippe /*dreidimensionaler Reliefrahmen*/

Einschub /*konkaver Rahmen*/

Anfang /*Konvexrahmen*/

7. CSS-Formularanwendung:

Textfeld

Schaltfläche

Komplexes Auswahlfeld

Auswahlschaltfläche

Mehrzeiliges Textfeld

Dropdown-Menü Option 1 Option 2

8. CSS-Randstil:

margin-top:10px; /*upper margin*/

margin-right:10px /*right margin value*; /

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

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

CSS-Attribut: Schriftart (Font Style)

Seriennummer Chinesische Beschreibungszeichensyntax

1 Schriftart {font:font-style-Schriftart -Variante Schriftstärke Schriftgröße Schriftfamilie🎜 >

2 Schriftart{Schriftfamilie:"Font1","Font2", "Font3",...🎜>

3 Schriftgröße{Schriftgröße:Number|inherit|. groß| |. x-groß|. xx-groß|. 🎜>5 Schriftart ;}

7 Schattenfarbe {text-shadow: 16-Bit-Farbwert}

8 Schriftzeilenhöhe {line-height: numerischer Wert|inherit|normal;}

9 Zeichenabstand {letter-spacing: numerischer Wert|inherit|normal}

10 Wortabstand {word-spacing:numeric|inherit|normal}

11 Schriftverformung {font-variant: inherit|normal|small-cps}

12 Englische Konvertierung {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 Schriftarttransformation {font-size-adjust:inherit| keine🎜>

14 Schriftart {font-stretch:confided|extra-expanded|inherit|narrower|normal| }

Textstil (Textstil)

Seriennummer Chinesische Beschreibungszeichensyntax

1 Zeilenabstand {line-height: value|inherit|normal;}2 Textdekoration {text-decoration:inherit|none|underline|overline|line-through|blink}

3 Leerzeichen am Anfang des Absatzes {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

Syntax der chinesischen Beschreibungsmarke der Seriennummer

1 Hintergrundfarbe {background-color: value}2 Hintergrundbild {background-image: url(URL)|none}

3 Hintergrundwiederholung {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 Hintergrund behoben {background-attachment:fixed|scroll}

5 Hintergrundpositionierung {background-position: value|top|bottom|left|right|center}

6 Rückenstil {Hintergrund: Hintergrundfarbe|Hintergrundbild|Hintergrundwiederholung|Hintergrundanhang|Hintergrundposition} 🎜>

Boxstil

일련번호 중국어 설명 표시 구문

1 여백 {margin:margin-top margin-right margin-bottom margin-left}

2 padding {padding : padding-top padding-right padding-bottom padding-left}

3 테두리 너비{border-width:border-top-width border-right-width border-bottom-width border-left-width}　

폭 값: 얇은|중간|두꺼운|값

4 테두리 색상 {border-color: 값 값 값 값} 값 값: 위쪽, 오른쪽, 아래쪽, 왼쪽 색상 값을 각각 나타냅니다

5 테두리 스타일 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 테두리 {border:border-width border-style color}

상단 테두리 {border-top:border-top-width border-style color}

오른쪽 테두리 {border-right:border-right-width border-style color}

하단 테두리{border-bottom:border-bottom-width 테두리 스타일 색상}

왼쪽 테두리{border-left:border-left-width 테두리 스타일 색상}

7 너비 {너비:길이|퍼센트|자동}

8 높이 {높이: 값|자동}

9 부동 소수점 {float:왼쪽|오른쪽|없음}

10 clear{clear:none|left|right|both}

카테고리 목록

일련번호 중국어 설명 표시 구문

1 제어 표시 {display:none|block|inline|list-item}

2 제어 공백 {white-space:normal|pre|nowarp}

3 기호 목록 {list -style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 그래픽 목록 {list-style-image: URL}

5 위치 목록 {list-style-position:inside|outside}

6 디렉터리 목록 {list-style: 디렉터리 스타일 유형|디렉터리 스타일 위치|url}

7 마우스 모양 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}