Allgemeine Attribute in CSS-Stilen (Zusammenfassung)

In diesem Kapitel werden allgemeine Attribute in CSS-Stilen (Zusammenfassung) vorgestellt und einige Attribute zusammengefasst, die häufig zum Definieren von CSS-Stilen im üblichen Front-End-Entwicklungsprozess verwendet werden können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. CSS-Textattribute:

color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-indent：30px；/*段落首行缩进*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/ 
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性    vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

2. CSS-Randattribute---lassen Sie den Rand leer

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

3. CSS-Symbolattribute

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-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/

4. CSS-Hintergrundstil

background-color:#F5E2EC; /*背景颜色*/ 
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

5. CSS-Verbindungseigenschaften

a /*所有超链接*/ a:link /*超链接文字格式*/ 
a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/ 鼠标光标样式：
链接手指 cursor: hand;（十字体） cursor:crosshair;（箭头朝下） cursor:s-resize;(十字箭头) cursor:move;(箭头朝右) cursor:move;(加一问号) cursor:help;(箭头朝左) cursor:w-resize;(箭头朝上) cursor:n-resize;(箭头朝右上) cursor:ne-resize;(箭头朝左上) cursor:nw-resize;(文字I型) cursor:text;(箭头斜右下) cursor:se-resize;(箭头斜左下) cursor:sw-resize;(漏斗) cursor:wait;(光标图案(IE6))  
p {cursor:url(“光标文件名.cur”),text;}

6. CSS-Frame-Liste

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/

Oben ist die empfohlene Schreibmethode, Sie können aber auch die herkömmliche Methode wie folgt verwenden:

border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/

Andere Rahmenstile: durchgezogen /*durchgehender Rahmen*/, gepunktet /*gestrichelt Rahmen* / , doppelt /*Doppellinienrahmen*/, Nut /*dreidimensionaler innerer konvexer Rahmen*/, Grat /*dreidimensionaler Reliefrahmen*/, Einschub /*Konkavrahmen*/, Anfang /*Konvexrahmen* /.

7. CSS-Formularanwendung

Textfeld-Schaltfläche, Kontrollkästchen, Auswahltaste, mehrzeiliges Textfeld, Dropdown-Menü, Option 1, Option 2

8. CSS-Rahmenstil

margin-top:10px; /*上边界*/ 
margin-right:10px; /*右边界值*/ 
margin-bottom:10px; /*下边界值*/ 
margin-left:10px; /*左边界值*/

9. CSS-Filterattribut Filter: Filtereffekte zum Stil hinzufügen. Da dieses Attribut viel Inhalt hat, werden wir Filter im nächsten Kapitel separat vorstellen.

1. Transparenz

Alpha: Transparenz festlegen Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY =?, FinishX=?, FinishY=?)
Deckkraft: Transparenzstufe, Bereich 0-100, 0 steht für völlige Transparenz, 100 steht für völlige Undurchsichtigkeit.
FinishOpacity: Beim Festlegen des Transparenzeffekts des Farbverlaufs wird damit die Transparenz am Ende angegeben. Der Bereich liegt ebenfalls zwischen 0 und 100.
Stil: Legen Sie den transparenten Verlaufsstil fest. Der Wert 0 steht für eine einheitliche Form, 1 für eine lineare Form, 2 für eine radiale Form und 3 für ein Rechteck.
StartX und StartY: stellen die anfänglichen X- und Y-Koordinaten des Verlaufstransparenzeffekts dar. FinishX und FinishY: stellen die X- und Y-Koordinaten des Endes des Verlaufstransparenzeffekts dar.

2.BlendTrans: Ein- und Ausblendeffekt zwischen Bildern

BlendTrans(Dauer=?)

Dauer: Ein- bzw. Ausblendung Ausblendzeit.

Hinweis: Dieser Filter muss mit JS verwendet werden, um eine Bildsequenz zu erstellen, um Effekte zwischen Bildern zu erzeugen.

3. Stellen Sie den Unschärfeeffekt ein

Unschärfe: Erstellen Sie einen Unschärfeeffekt. Unschärfe (Hinzufügen=?, Richtung=?, Stärke=?) Hinzufügen: Ob ein Unschärfeeffekt erzielt werden soll Eine Richtung, dieser Parameter ist ein boolescher Wert, wahr (nicht 0) oder falsch (0).
Richtung: Legen Sie die Richtung der Unschärfe fest, wobei 0 Grad vertikal nach oben steht und alle 45 Grad eine Einheit darstellen. Stärke: Stellt den unscharfen Pixelwert dar.

4.Chroma: Setzt die angegebene Farbe auf transparent

Chroma(Color=?)

Farbe: bezieht sich auf die Farbe, die festgelegt werden soll transparente Farbe.

5. Erstellen Sie einen Schatteneffekt

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Farbe: Geben Sie die Farbe des Schattens an.
OffX: Gibt den horizontalen Versatz des Schattens relativ zum Element an, eine Ganzzahl.
OffY: Gibt den vertikalen Versatz des Schattens relativ zum Element an, eine Ganzzahl.
Positiv: Es handelt sich um einen booleschen Wert. Wenn der Wert wahr (nicht 0) ist, bedeutet dies, dass er einen äußeren Schatten erzeugt. Wenn er falsch (0) ist, bedeutet er, dass er einen inneren Schatten erzeugt.

6.FlipH: Element horizontal spiegeln

7.FlipV: Element vertikal spiegeln

8 . Erzeugen Sie einen äußeren Leuchteffekt

Glow(Color=?, Strength=?)

Farbe: Gibt die Farbe des Lichts an.
Stärke: Die Intensität des Lichts, die eine beliebige ganze Zahl zwischen 1 und 255 sein kann. Je größer die Zahl, desto größer die Reichweite des Lichts.

9.Grau: Die Farbe des Bildes entfernen und als Schwarzweißbild anzeigen

10.Invertieren: Die Farbe des Bildes umkehren , wodurch ein filmähnliches Bild erzeugt wird. Effekt

11.Licht: Der Effekt der Platzierung einer Lichtquelle , der verwendet werden kann, um den Projektionseffekt der Lichtquelle auf die zu simulieren Hinweis: Für diesen Effekt muss JS die Position und Intensität des Lichts festlegen.

12.Maske: Erstellen Sie eine transparente Maske

Maske (Farbe=?)

Farbe: Stellen Sie die Hintergrundfarbe so ein, dass das Objekt die abdeckt Hintergrundfarbe Teilweise transparent

13.RevealTrans: Schalteffekt erzeugen

RevealTrans(Duration=?, Transition=?)

Dauer: ist die Schaltzeit in Sekunden. Übergang: Dies ist die Umschaltmethode und kann von 0 bis 23 eingestellt werden.

Hinweis: Wenn Sie zwischen Seiten wechseln möchten, können Sie im Bereich eine Codezeile hinzufügen: . Wenn die Elemente auf der Seite verwendet werden, müssen sie mit JS verwendet werden.

14.Schatten: Einen weiteren Schatteneffekt erstellen

Shadow(Color=?, Direction=?)

Farbe: bezieht sich auf die Farbe des Schattens.

Richtung: Legt die Richtung der Projektion fest. 0 Grad bedeutet vertikal nach oben, und alle 45 Grad sind eine Einheit.

15.Wave：波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。

Freq：设置波动的个数。LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。 

Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。） 

Strength：设置波浪摇摆的幅度。

16.Xray：显现图片的轮廓，X光片效果 注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"

Das obige ist der detaillierte Inhalt vonAllgemeine Attribute in CSS-Stilen (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!