Zusammenfassung der allgemeinen CSS-Eigenschaften Vier

******* Allgemeine CSS-Eigenschaften *********

[Schriftart]

Schriftart Legt Texteigenschaften in einem Objekt fest oder ruft sie ab. Bei dieser Eigenschaft handelt es sich um eine zusammengesetzte Eigenschaft.

Parameter, die die erste Deklarationsmethode verwenden, müssen in der oben angegebenen Reihenfolge angeordnet werden, und Schriftgröße und Schriftfamilie können nicht ignoriert werden. Pro Parameter ist nur ein Wert zulässig. Wenn es weggelassen wird, wird der Standardwert der unabhängigen Eigenschaft verwendet, die seinem Parameter entspricht.

: Geben Sie den Textschriftstil an.

: Geben Sie an, ob der Text aus kleinen Großbuchstaben besteht.

: Geben Sie die Stärke der Textschriftart an.

: Geben Sie die Textschriftgröße an.

: Geben Sie die Zeilenhöhe der Textschriftart an.

: Geben Sie an, dass der Text eine bestimmte Schriftart oder Schriftartenfolge verwenden soll.

Beschriftung: Verwenden Sie den Text einer betitelten Systemsteuerung. Schriftart (z. B. Schaltflächen, Menüs usw.) (CSS2)

Symbol: Verwenden Sie die Schriftart der Symbolbeschriftung (CSS2)

Menü: Verwenden Sie die Schriftart des Menüs (CSS2)

message-box: Verwenden Sie die Textschriftart des Informationsdialogfelds (CSS2)

small-caption: Verwenden Sie die Schriftart des kleinen Steuerelements (CSS2)

Statusleiste: Verwenden Sie die Schriftart der Fensterstatusleiste (CSS2)

------------------ ------------------------- -----------

font-family: Festlegen oder Abrufen für Eine Folge von Schriftartnamen für den Text im Objekt.

Standardwert: bestimmt durch Benutzeragent

Die

-Sequenz kann eingebettete Schriftarten enthalten.

Allgemeine Schriftartreferenzen können ohne Anführungszeichen zitiert werden. Wenn der Schriftartname Leerzeichen, Zahlen oder Symbole (z. B. Konnektoren) enthält, sind Anführungszeichen erforderlich, um Fehler zu vermeiden.

Der Benutzeragent durchläuft die definierte Schriftartensequenz, bis eine bestimmte Schriftart übereinstimmt.

body{font-family:helvetica,verdana,sans-serif;}

Wie die obige Schriftartdefinition, vorausgesetzt, Sie haben nicht die Helvetica-Schriftart auf Ihrem Maschine, aber Sie haben Verdana, Ihr Text wird in Verdana angezeigt.

: Schriftartname. In der Reihenfolge ihrer Priorität. Mit Kommas trennen. Wenn der Schriftartname Leerzeichen oder chinesische Zeichen enthält, sollte er in Anführungszeichen

eingeschlossen werden: Name der Schriftartsequenz.

-------------------------------------- --- -------------------------------- --- -------

font-size: Legen Sie die Schriftgröße im Objekt fest oder rufen Sie sie ab.

: Entsprechend der Objektschriftart anpassen. Optionale Parameterwerte: xx-klein | ), x-large: 3/2 (h2), xx-large: 2 /1 (h1),

: Relativ zur Schriftgröße im übergeordneten Objekt anpassen. Berechnet mit proportionalen EM-Einheiten. Optionale Parameterwerte: kleiner | größer

: Verwenden Sie den Längenwert, um die Textgröße anzugeben. Negative Werte sind nicht zulässig.

: Geben Sie die Textgröße in Prozent an. Der Prozentwert basiert auf der Größe der Schriftart im übergeordneten Objekt. Negative Werte sind nicht zulässig.

-------------------------------------- --- -------------------------------- --- ------------

font-stretch: Festlegen oder Abrufen, ob der Text im Objekt horizontal gestreckt wird.

Der Text wird relativ zur normalen Breite der vom Browser angezeigten Schriftart gestreckt.

ultrakomprimiert: 4 Basen schmaler als normale Textbreite.

extra verdichtet: 3 Basen schmaler als normale Textbreite.

komprimiert: 2 Basen schmaler als die normale Textbreite.

Halbkomprimiert: 1 Basis schmaler als normale Textbreite.

normal: Normale Textbreite

halberweitert: 1 Basis breiter als die normale Textbreite.

erweitert: 2 Basen breiter als die normale Textbreite.

extra erweitert: 3 Basen breiter als die normale Textbreite.

Ultra-erweitert: 4 Basen breiter als die normale Textbreite.

-------------------------------------- --- ----------------

font-style: Legen Sie den Textschriftstil im Objekt fest oder rufen Sie ihn ab.

normal: Geben Sie den Textschriftstil als normale Schriftart an.

Kursiv: Geben Sie den Textschriftstil als kursiv an. Bei speziellen Schriftarten, die nicht kursiv gestaltet sind, wird Oblique angewendet, wenn Sie eine kursive Darstellung verwenden möchten.

oblique: Legt den Textschriftstil als kursive Schriftart fest. Schrägen Sie den Text künstlich, anstatt die Kursivschrift in der Schriftart auszuwählen

----------------------- --- ----------------------------------------------- --- -----------------

font-variant: Legt fest oder ruft ab, ob der Text im Objekt aus kleinen Großbuchstaben besteht.

normal: normale Schriftart

Kapitälchen: kleine Großbuchstabenschrift

------ --- -------------------------------------------------

font-weight: Legen Sie die Stärke der Textschriftart im Objekt fest oder rufen Sie sie ab.

Die Wirkung von

wird durch die spezifische Schriftartvariablenzuordnung der auf dem Clientsystem installierten Schriftarten bestimmt. Das System wählt das nächstgelegene

aus

Übereinstimmung. Das heißt, dass Benutzer den Unterschied zwischen verschiedenen Werten möglicherweise nicht erkennen.

normal: Normale Schriftart. Entspricht der Zahl 400

fett: Fett. Entspricht der Nummer 700.

fetter: Extra fett. Es entspricht auch der Rolle von starken und b-Objekten

leichter: dünn

: Verwenden Sie Zahlen, um die Schriftstärke des Textes darzustellen. Wertebereich: 100 |. 400 |. 600 |. ------------------------------------------------ -- ---------------------------------

***** * ************************************************** ************************************************** * ***********

display:inline Lassen Sie die inline als Blöcke angezeigten Elemente inline anzeigen

Die Die Funktion von display:inline besteht darin, das als Inline-Element anzuzeigende Objekt festzulegen. Inline ist der Standardwert für Inline-Objekte

DIV1

DIV2

Hier belegen DIV1 und DIV2 jeweils eine Zeile, aber nachdem Sie ihnen Attribute hinzugefügt haben, ändern sie sich

DIV1

DIV2

DIV1 und DIV2 werden jetzt in derselben Zeile angezeigt line

display:block dient dazu, das Element als Element auf Blockebene anzuzeigen.

display:inline-block rendert das Objekt als Inline-Objekt, aber der Inhalt des Objekts ist als Blockobjekt-Rendering. Benachbarte Inline-Objekte werden in derselben Zeile gerendert, sodass Leerzeichen möglich sind.

-------------------------------------- --- -------------------------------- --- ----------------------------------

******* ***** ********************************************* ****** ********************************************** ******* ****

【border】 Zusammengesetztes Attribut. Legt die Eigenschaften des Objektrahmens fest.

Wenn Sie dieses zusammengesetzte Attribut verwenden, um einen einzelnen Parameter zu definieren, überschreiben die Standardwerte anderer Parameter bedingungslos die entsprechenden Einstellungen des einzelnen Attributs.

border-color: Legen Sie die Rahmenfarbe des Objekts fest oder rufen Sie sie ab.

Wenn alle vier Parameterwerte angegeben sind, werden sie auf die vier Seiten in der Reihenfolge oben, rechts, unten und links angewendet.

Wenn nur einer angegeben ist, wird dieser für alle vier Seiten verwendet.

Wenn zwei vorhanden sind, ist das erste für oben und unten und das zweite für links und rechts.

Wenn drei vorhanden sind, ist das erste für oben, das zweite für links und rechts und das dritte für unten.

Wenn border-width gleich 0 ist oder border-style auf none gesetzt ist, wird dieses Attribut ignoriert.

-------------------------------------- --- -------------------------------- -

Randbild-Zusammensetzungsattribut. Legt den Rahmenstil des Objekts fest oder ruft ihn ab, um es mit einem Bild zu füllen.

Verwenden Sie ein Bild anstelle von border-style, um den Rahmenstil zu definieren. Wenn „border-image“ „none“ ist oder das Bild unsichtbar ist, wird der durch „border-style“ definierte Rahmenstileffekt angezeigt.

[ border-image-source ]: Legen Sie fest oder rufen Sie ab, ob der Rahmen des Objekts einen Bilddefinitionsstil oder einen Bildquellenpfad verwendet.

[ border-image-slice ]: Legen Sie die Segmentierungsmethode des Randhintergrundbilds des Objekts fest oder rufen Sie sie ab.

[ border-image-width ]: Legen Sie die Randstärke des Objekts fest oder rufen Sie sie ab.

[ border-image-outset ]: Legen Sie die Erweiterung des Randhintergrundbilds des Objekts fest oder rufen Sie sie ab.

[ border-image-repeat ]: Legen Sie die Kachelmethode des Randbilds des Objekts fest oder rufen Sie sie ab.

-------------------------------------- --- ---------------------------

border-radius Objekte festlegen oder abrufen Verwendung eines Rahmens mit abgerundeten Ecken. Geben Sie 2 Parameter an, getrennt durch „/“. Jeder Parameter ermöglicht die Einstellung von 1 bis 4 Parameterwerten. Der erste Parameter stellt den horizontalen Radius dar, und der zweite Parameter stellt den vertikalen Radius dar Der Standardwert entspricht dem ersten Parameter

Horizontaler Radius: Wenn alle vier Parameterwerte angegeben sind, oben links, oben rechts und unten rechts ( Die Reihenfolge von unten -rechts) und unten-links (bottom-left) wirkt auf die vier Ecken.

Wenn nur eine vorhanden ist, wird diese für alle vier Ecken verwendet.

Wenn zwei angegeben sind, wird das erste für oben links und unten rechts und das zweite für oben rechts und unten links verwendet.

Wenn drei angegeben sind, ist das erste für oben links, das zweite für oben rechts, unten links und das dritte für unten rechts.

Der vertikale Radius folgt ebenfalls den oben genannten 4 Punkten.

: Verwenden Sie den Längenwert, um die Verrundungsradiuslänge des Objekts festzulegen. Negative Werte sind nicht zulässig

: Legt die Eckenradiuslänge des Objekts als Prozentsatz fest. Negative Werte sind nicht erlaubt

------------------------------- --- ------------------------------------

border-width legt die Rahmenbreite des Objekts fest oder ruft sie ab.

Wenn alle vier Parameterwerte angegeben sind, werden sie auf die vier Seiten in der Reihenfolge oben, rechts, unten und links angewendet.

Wenn nur einer angegeben ist, wird dieser für alle vier Seiten verwendet.

Wenn zwei vorhanden sind, ist das erste für oben und unten und das zweite für links und rechts.

Wenn drei vorhanden sind, ist das erste für oben, das zweite für links und rechts und das dritte für unten.

Wenn border-style auf none gesetzt ist, hat dieses Attribut keine Auswirkung.

: Verwenden Sie den Längenwert, um die Dicke des Randes zu definieren. Negative Werte sind nicht zulässig

mittel: Definiert die Standardstärke des Rahmens.

dünn: Definieren Sie einen Rahmen, der dünner als die Standardstärke ist.

dick: Definiert einen Rahmen, der dicker als die Standardstärke ist.

-------------------------------------- --- ---

border-left-style Legt den linken Randstil des Objekts fest oder ruft ihn ab.

Wenn border-width gleich 0 ist, hat dieses Attribut keine Auswirkung.

keine: Keine Gliederung. border-color und border-width werden ignoriert

hidden: Blende den Rand aus. IE7 und niedriger unterstützen

dotted: dotted Outline noch nicht. Wird unter IE6 als gestrichelter Effekt angezeigt

gestrichelt: gepunkteter Umriss.

durchgezogen: Umriss mit durchgezogener Linie

doppelt: Umriss mit doppelter Linie. Die Summe zweier Einzellinien und deren Abstand entspricht dem angegebenen Randbreitenwert

Groove: 3D-Groove-Umriss.

Grat: 3D-konvexes Rillenprofil.

Einschub: konkave 3D-Kantenkontur.

Anfang: Konvexer 3D-Kantenumriss.

-------------------------------------- --- -------------------

zusammengesetztes Attribut „Rand oben“. Legt die Eigenschaften des oberen Rands des Objekts fest.

Wenn Sie dieses zusammengesetzte Attribut verwenden, um einen einzelnen Parameter zu definieren, überschreiben die Standardwerte anderer Parameter bedingungslos die entsprechenden Einstellungen des einzelnen Attributs.

[ border-top-width ]: Legen Sie die obere Randbreite des Objekts fest oder rufen Sie sie ab.

[ border-top-style ]: Legen Sie den oberen Rahmenstil des Objekts fest oder rufen Sie ihn ab.

[ border-top-color ]: Legen Sie die obere Randfarbe des Objekts fest oder rufen Sie sie ab.

-------------------------------------- --- -------------------------

box-shadow Legt den Objektschatten fest oder ruft ihn ab .

Sie können mehrere Sätze von Effekten festlegen, wobei jeder Satz von Parameterwerten durch Kommas getrennt ist.

none: Kein Schatten

①: Der erste Längenwert wird verwendet, um den horizontalen Schattenversatzwert des Objekts festzulegen. Kann ein negativer Wert sein

②: Der zweite Längenwert wird verwendet, um den vertikalen Versatzwert des Objektschattens festzulegen. Kann negativ sein

③: Wenn der dritte Längenwert angegeben wird, wird er zum Festlegen des Schattenunschärfewerts des Objekts verwendet. Negative Werte sind nicht zulässig

④: Wenn der vierte Längenwert angegeben wird, wird er zum Festlegen des Schattenerweiterungswerts des Objekts verwendet. Kann negativ sein

: Legt die Farbe des Objektschattens fest.

Einschub: Stellen Sie den Schattentyp des Objekts auf inneren Schatten ein. Wenn der Wert leer ist, ist der Schattentyp des Objekts äußerer Schatten

----------------------- - ------------------------------------------------- - ------

Transparenz

wird geschrieben als:

{
filter: alpha(opacity=10);  //针对ie
 
}

Auf diese Weise können Sie grundsätzlich Alles anzeigen Transparenz im Browser erreichen

Das Obige ist die Zusammenfassung der vierten gemeinsamen Attribute von CSS. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!