CSS(2)-HTML-Tutorial-php.cn

Dieser Artikel ist eine Zusammenfassung gängiger CSS-Abfragen, die einige Autoren in Langzeitcodierung zusammengefasst haben. Sie wurden in diesem Blog geschrieben, um zukünftige Abfragen zu erleichtern.

1. Farbattribut:

Farbe

HEX (hexadezimale Farbe: Farbe: #FFFF00 --> Abkürzung: #FF0)
RGB (Rot, Grün und Blau, Verwendung: Farbe:rgb(255,255,0) oder Farbe:rgb(100%,100%,0%))
RGBA (rote, grüne und blaue Transparenz, A ist der Transparenzwert zwischen 0 und 1. Verwendungsmethode: color:rgba(255,255,0,0.5))
HSL (CSS3 ist gültig, H steht für Farbton, S steht für Sättigung, L steht für Helligkeit, Verwendungsmethode: color:hsl(360,100%,50%))
HSLA (Ähnlich wie HSL steht A für Alpha-Transparenz im Bereich von 0 bis 1.)

transparent

Vollständig transparent, Verwendung: Farbe: transparent;

Deckkraft

Die Transparenz des Elements, Syntax: Deckkraft: 0,5;
Der Attributwert reicht von 0,0 bis 1,0, 0 bedeutet transparent und 1 bedeutet undurchsichtig.
filter-Filterattribut (gilt nur für frühe IE-Browser, Syntax: filter:alpha(opacity:20);).

2. Schriftattribute:

Schriftart: Wird zur Angabe von kursivem Text verwendet

Normaler Text wird normal angezeigt
kursiver Text wird kursiv angezeigt
Schrägtext-Schräganzeige

Schriftstärke: Legen Sie die Dicke des Textes fest

normal (Standard)
fett
fetter (entspricht den Tags und )

leichter (normal)

100 ~ 900 Hundert (400=normal, 700=fett)

Schriftgröße: Legen Sie die Schriftgröße fest

Standardwert: mittel

Optionale Parameterwerte: xx-small, x-small, small, medium, large, x-large, xx-large

Passt sich relativ zur Größe der Schriftart im übergeordneten Tag an. Optionale Parameterwerte: kleiner, größer

Percentage gibt die Textgröße an.

Geben Sie die Textgröße mit einem Längenwert an, negative Werte sind nicht zulässig.

Schriftfamilie: Schriftartname

Verwenden Sie Kommas, um mehrere Schriftarten zu trennen (die Priorität ist von vorne nach hinten; wenn die aktuelle Schriftart nicht im System gefunden wird, wird rückwärts gesucht)

Schriftart: Abkürzungsattribut

Syntax: Schriftart: Schriftgröße/Zeilenhöhe; (Schriftart sollte am Ende stehen)

3. Textattribute:

white-space: Legt fest, wie mit Leerraum in Elementen umgegangen wird

normal: Standardverarbeitungsmethode.

Vorher: Leerzeichen beibehalten und nicht umbrechen, wenn der Text die Grenze überschreitet

nowrap: Behalten Sie keine Leerzeichen bei, erzwingen Sie, dass der gesamte Text in derselben Zeile angezeigt wird, bis das Ende des Textes oder das br-Tag erreicht wird

Vorumbruch: Leerzeichen beibehalten und Text umbrechen, wenn er die Grenze erreicht

Vorzeile: Behalten Sie keine Leerzeichen bei, behalten Sie den Textumbruch bei und brechen Sie um, wenn der Text die Grenze erreicht

Richtung: Gibt die Richtung des Textes an

ltr Standardmäßig ist die Textrichtung von links nach rechts.

RTL-Textrichtung ist von rechts nach links.

text-align: Horizontale Ausrichtung des Textes

links

Mitte

richtig

Zeilenhöhe: Textzeilenhöhe

normale Standardeinstellung

vertikal ausrichten: Die vertikale Ausrichtung der Zeilenhöhe des Textes

Grundvorgabe

sub richtet den Index des Textes vertikal aus, der gleiche Effekt wie das _-Tag

richtet den hochgestellten Text super vertikal aus, der gleiche Effekt wie das ^-Tag

Die Oberseite des obersten Objekts ist an der Oberseite des Behälters ausgerichtet

Der obere Rand des obersten Textobjekts wird am oberen Rand des Textes in der Zeile ausgerichtet

Objekte des mittleren Elements werden basierend auf der Grundlinie vertikal ausgerichtet

Der untere Rand des unteren Objekts wird am unteren Rand des Textes in der Zeile ausgerichtet

Der untere Rand des Textobjekts wird am unteren Rand der Textzeile ausgerichtet

Texteinzug: Texteinzug

Buchstabenabstand: Leerraum zwischen Buchstaben hinzufügen

Wortabstand: Fügen Sie zwischen jedem Wort einen Abstand ein

text-transform: Attribut steuert die Groß-/Kleinschreibung von Text

Großschreibung Jedes Wort im Text beginnt mit einem Großbuchstaben.

uppercase definiert nur Großbuchstaben.

lowercase definiert nur Kleinbuchstaben.

Textüberlauf: Textüberlaufstil

Clip schneidet Text ab.

Ellipse zeigt Ellipsen an, um zugeschnittenen Text darzustellen.

string Verwenden Sie die angegebene Zeichenfolge, um den zugeschnittenen Text darzustellen.

Textdekoration: Textdekoration

keine Standardeinstellung.

unterstreichen unterstreichen.

Überstreichen Überstreichen.

Linie durch die Mittellinie.

text-shadow: Textschatten

Der erste Parameter ist die linke und rechte Position

Der zweite Parameter ist die Auf- und Ab-Position

Der dritte Parameter ist der Unschärfeeffekt

Der vierte Parameter ist die Farbe

Textschatten: 5px 5px 5px #888;

Wortumbruch: automatischer Zeilenumbruch

Zeilenumbruch: Wortumbruch;

4. Hintergrundattribute

Hintergrundfarbe

background-image legt das Bild als Hintergrund fest

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); Bildadresse

Hintergrundbild:linearer Farbverlauf (grün,blau,gelb,rot,schwarz);Farbverlaufseffekt

background-position legt die Positionskoordinaten des Hintergrundbildes fest

Hintergrundposition: Mitte Mitte; Das Bild ist zentriert, x-Achsenmitte, y-Achsenmitte

1px -195px fangen einen bestimmten Teil des Bildes ab und repräsentieren die Koordinaten der x- bzw. y-Achse

background-repeat Stellen Sie das Hintergrundbild so ein, dass die Kacheln nicht wiederholt werden

No-Repeat legt fest, dass das Bild nicht wiederholt wird, häufig verwendet

rund skaliert automatisch, bis es passt und den gesamten Behälter ausfüllt

Raum wird im gleichen Abstand gekachelt und füllt den gesamten Container aus

background-attachment Ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt

Hintergrundabkürzung

Hintergrund: url("o_ns.png") no-repeat 0 -196px;

Hintergrund: URL("o_ns.png"), keine Wiederholung, Mitte unten, 15 Pixel;

Hintergrund: URL("o_ns.png") no-repeat links 30px unten 15px;

5. Attribute auflisten

list-style-type: Der Typ des Listenelement-Flags

keine Markierung entfernen

Dezimal-führende Null; 02.

quadratisch; Kasten

Kreis; Hohlkreis

oberer Alpha; & Scheibe

list-style-image: Legen Sie das Bild als Logo für das Listenelement fest

list-style-position: Die Position der Listenelementmarkierung

innen

draußen

Listenstil: Abkürzung

1. Rand

border-style: Rahmenstil

durchgezogene Standardeinstellung, durchgezogene Linie

doppelte Doppellinie

gepunktete gepunktete Linien

gestrichelte gestrichelte Linie

Rahmenfarbe: Rahmenfarbe

Rahmenbreite: Rahmenbreite

Rahmenradius: abgerundete Ecken

1 Parameter: auf alle vier Ecken angewendet

2 Parameter: Der erste Parameter wird oben links und unten rechts angewendet; der zweite Parameter wird unten links und oben rechts angewendet

3 Parameter: Der erste Parameter wird oben links angewendet; der zweite Parameter wird unten links angewendet und der dritte Parameter wird unten rechts angewendet

4 Parameter: oben links, oben rechts, unten rechts, unten links (im Uhrzeigersinn)

Rand: Abkürzung

Rand: 2 Pixel gelber Vollton;

box-shadow: Randschatten

Der erste Parameter ist die linke und rechte Position

Der zweite Parameter ist die Auf- und Ab-Position

Der dritte Parameter ist der Unschärfeeffekt

Der vierte Parameter ist die Farbe

box-shadow: 10px 10px 5px #888;

Einige Beispiele für Grenzimplementierungen:

Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .radius1 { display: inline-block; width: 100px; height: 100px; background-color: yellow; border-radius: 20px; } .radius2 { display: inline-block; width: 100px; height: 100px; background-color: red; border-radius: 20px 35px; } .radius3 { display: inline-block; width: 100px; height: 100px; background-color: blue; border-radius: 20px 35px 50px; } .radius4 { display: inline-block; width: 100px; height: 100px; background-color: green; border-radius: 20px 35px 50px 60px; } </style> </head> <body> <div> <span class="radius1"></span> <span class="radius2"></span> <span class="radius3"></span> <span class="radius4"></span> </div> </body> </html>
Nach dem Login kopieren

Code anzeigen

Grenze implementiert verschiedene Dreieckssymbole:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .triangle-one { display: inline-block; border-top: 50px red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-two { display: inline-block; border-top: 0 red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-stree { display: inline-block; border-top: 50px red solid; border-right: 0 green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-four { display: inline-block; border-top: 50px red solid; border-right: 0 green solid; border-bottom: 0 yellow solid; border-left: 50px blue solid; } .triangle-five { display: inline-block; border: 50px transparent solid; border-top: 50px red solid; } .triangle-six { display: inline-block; border: 50px transparent solid; border-bottom: 50px yellow solid; } .triangle-seven { display: inline-block; border: 50px transparent solid; border-top: 60px red solid; border-right: 0; } .triangle-eight { display: inline-block; border: 50px transparent solid; border-left: 30px yellow solid; border-bottom: 0; } </style> </head> <body> <div class="triangle-one"></div> <div class="triangle-two"></div> <div class="triangle-stree"></div> <div class="triangle-four"></div> <div class="triangle-five"></div> <div class="triangle-six"></div> <div class="triangle-seven"></div> <div class="triangle-eight"></div> </body> </html>
Nach dem Login kopieren

Code anzeigen

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back { width: 1000px; height: 1000px; margin: 0 auto; background-color: #ddd; position: relative; } .back-in { position: absolute; width: 1020px; height: 45px; left: -20px; top: 50px; background-color: #2F4F4F; } .back-img { border: 20px solid transparent; border-top: 10px solid dimgrey; border-right: 0; display: inline-block; position: absolute; top: 95px; left: -20px; } .back-font { line-height: 9px; margin-left: 30px; color: white; } </style> </head> <body> <div class="back"> <div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div> <div class="back-img"></div> </div> </body> </html>
Nach dem Login kopieren

Code anzeigen

z-index Elementstapelreihenfolge

Z-Index ist nur für positionierte Elemente gültig (Beispiel: position:absolute;)

Sie können negative Attributwerte angeben (Beispiel: -1;)

Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .z-index1 { width: 100px; height: 100px; background-color: yellow; position: absolute; z-index: -1; } .z-index2 { width: 100px; height: 100px; background-color: red; position: absolute; top: 20px; left: 20px; z-index: 5; } </style> </head> <body> <div class="z-index1"></div> <div class="z-index2"></div> </body> </html>
Nach dem Login kopieren

Code anzeigen

Umriss Umriss des Randes

Umrissbreite Umrissbreite

Umrissfarbe Umrissfarbe

Umrissstil im Umrissstil

Zoom-Zoomverhältnis

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .zoom1 { zoom: 100%; } .zoom2 { zoom: 150%; } .zoom3 { zoom: 200%; } </style> </head> <body> <div class="zoom1">Nick 100%</div> <div class="zoom2">Nick 200%</div> <div class="zoom3">Nick 300%</div> </body> </html>
Nach dem Login kopieren

Code anzeigen

cursor 鼠标的类型形状

鼠标放在以下单词上，There will be a miracle：

url: 自定义光标

Auto: 默认
 Default: 默认
 e-resize
 ne-resize
 nw-resize
 n-resize
 se-resize
 sw-resize
 s-resize
 w-resize
 Crosshair
 Pointer
 Move
 text
 wait
 help

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <style> body { cursor: url("mouse.png"), auto; /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/ } </style> </head> <body> <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div> </body> </html> 自定义光标实例
Nach dem Login kopieren

自定义光标实例

transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。