CSS 스타일의 전체 컬렉션(정리된 버전)-CSS 튜토리얼-php.cn

이 장에서는 특정 참고 가치가 있는 CSS 스타일 전체 모음(정리 버전)을 공유합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

글꼴 속성: (글꼴)

크기{글꼴 크기: x- 대형;}(특대) xx-소형;(매우 작음) 일반적으로 중국어에서는 사용되지 않으며 숫자만 사용합니다. 단위: PX, PD

스타일 {font-style: oblique;}(기울임꼴) 기울임꼴 ;(기울임꼴) 보통;(보통)

line-height {line-height: 보통;}(normal) 단위: PX, PD, EM

두께 {font-weight: 굵은 글씨; } (굵게) 더 가볍게; (얇게) 보통 (보통)

변형 {font-variant: small-caps;} (소문자) 보통 (보통)

변환: 대문자;}(첫 글자 대문자) 대문자;(대문자) 소문자;(소문자) 없음;(없음)

수정 {텍스트 장식: 밑줄;}(밑줄) 윗줄(윗줄); through; (취소선) 깜박임(깜박임)

일반적으로 사용되는 글꼴: (font-family)

"Courier New", monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

배경 속성: (배경)

색상{배경 색상: #FFFFFF;}

이미지{배경 이미지: url();}

반복{배경 반복: 반복 없음 ;}

scroll {배경-첨부: 고정;}(고정) 스크롤;(스크롤)

위치 {배경-위치: 왼쪽;}(가로) 위쪽(세로);

약어 방식 { background:#000 url(..) 반복 고정 왼쪽 상단;} /*약어·코드를 읽을 때 자주 나오므로 주의 깊게 공부하세요*/

블록 속성: (Block) /*처음 아는 속성이라 더 공부해야겠어요*/

Letter-spacing {letter-spacing: Normal;} 값/*이 속성은 더 연습해 보세요. */

Align {text-align: justify;} (양쪽 끝 정렬) left (왼쪽 정렬) right (오른쪽 정렬) center (가운데); 들여쓰기{text-indent: 값 px;}

세로 정렬{vertical-align: 기준선;}(기준선) sub;(subscript) super;(subscript) top; -bottom;

단어 간격: 보통; 값

공백: pre;(예약됨) nowrap;(줄 바꿈 없음)

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-decoration: overline; /*Top line*/

text-decoration:underline; /*Add underline*/

text-decoration:none; /*Link löschen Unterstreichen*/

Texttransformation: Großschreibung; /*Das erste Wort großschreiben*/

Texttransformation: Großschreibung; /*Englische Großschreibung*/

Texttransformation : Kleinbuchstaben; /*Englischer Kleinbuchstabe*/

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

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

text-align:center; /*Text-aligned in the centre*/

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

vertikal -align-Attribut

vertikal-align:top; /*Vertikal nach oben ausrichten*/

vertical-align:bottom; /*Vertikal nach unten ausrichten*/

Vertical-align:middle ; /*Vertical-align:text-top; /*Vertical-align:text-top; *Text vertikal nach unten ausgerichtet*/

2. CSS-Rand leer

padding-top:10px; /*Oberen Rand leer lassen*/ padding-right: 10px; /*Lass den rechten Rand leer*/

padding-bottom:10px; /*Lass den unteren Rand leer*/

padding-left:10px /*; Lassen Sie den linken Rand leer

3. CSS-Symbolattribute:

list-style-type:none; /*Not numbered*/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; Englische Großbuchstaben*/

list-style-type:disc; /*Volles kreisförmiges Symbol*/

list-style-type:circle; /*Hohles kreisförmiges Symbol*/

list-style-type:square; /*Solid-square-symbol*/

list-style-image:url(/dot.gif); /*Picture-style-symbol*/

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

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

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

Flèche en diagonale en bas à gauche : sw-resize

Curseur en entonnoir :attendre

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

6. Liste des bordures CSS :

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

border-bottom; : 1px solide #6699cc; /*Bordure inférieure*/

bordure gauche : 1px solide #6699cc /*Bordure gauche*/

bordure droite : 1px solide #6699cc; Ligne de bordure droite*/

Ce qui précède est la méthode d'écriture recommandée, mais vous pouvez également utiliser la méthode conventionnelle comme suit :

border-top-color : #369 /*Définissez la couleur supérieure de la ligne de bordure supérieure */

border-top-width: 1px /*Définir la largeur supérieure de la bordure supérieure*/

border-top-style: solid/*Définir le haut style de la bordure supérieure*/

Autres styles de cadre

solide /*cadre plein*/

pointillé /*cadre pointillé*/

double /* Double fil de fer*/

rainure /*cadre convexe incrusté en trois dimensions*/

crête /*cadre en relief tridimensionnel*/

encart /*cadre concave*/

début /*cadre convexe*/

7. Application de formulaire CSS :

Zone de texte

Bouton

Boîte de sélection complexe

Bouton de sélection

Zone de texte multiligne

Menu déroulant option 1 option 2

8. Style de bordure CSS :

margin-top:10px; /*marge supérieure*/

margin-right:10px /*valeur de marge droite*; /

margin-bottom:10px; /*Valeur de marge inférieure*/

margin-left:10px /*Valeur de marge gauche*/

Attribut CSS : Style de police (Style de police)

Numéro de série Syntaxe de la marque de description chinoise

1 Style de police {font: font-style font -variante font-weight font-size font-family}

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

Numéro de série Syntaxe des marques de description chinoises

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

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

3 largeur de bordure{border-width:border-top-width border-right-width border-bottom-width border-left-width}　

Valeur de largeur : fine|moyenne|épais|valeur

4 Couleur de la bordure {border-color : valeur valeur valeur valeur} Valeurs de valeur : représentent respectivement les valeurs de couleur supérieure, droite, inférieure et gauche

5 styles de bordure {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove>

6 bordures {border:border-width border-style couleur}

Bordure supérieure {border-top:border-top-width border-style color>

Bordure droite {border-right:border-right-width border-style color>

Bordure inférieure{border-bottom:border-bottom-width border-style color>

Bordure gauche{border-left:border-left-width border-style color>

7 largeur {width:length|percent|auto}

8 hauteur {height: value|auto}

9 float {float:left|right|none}

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

Liste des catégories

Numéro de série Syntaxe des marques de description chinoises