CSS - Kurzanleitung
Superior styles to HTML - CSS verfügt über eine viel größere Auswahl an Attributen als HTML, sodass Sie Ihrer HTML-Seite im Vergleich zu HTML-Attributen ein weitaus besseres Aussehen verleihen können.
Multiple Device Compatibility- Mit Stylesheets können Inhalte für mehr als einen Gerätetyp optimiert werden. Durch die Verwendung desselben HTML-Dokuments können verschiedene Versionen einer Website für Handheld-Geräte wie PDAs und Mobiltelefone oder zum Drucken angezeigt werden.
Global web standards- Jetzt werden HTML-Attribute nicht mehr unterstützt und es wird empfohlen, CSS zu verwenden. Es ist daher eine gute Idee, CSS in allen HTML-Seiten zu verwenden, um sie mit zukünftigen Browsern kompatibel zu machen.
Wer erstellt und pflegt CSS?
CSS wird von einer Gruppe von Personen innerhalb des W3C erstellt und verwaltet, die als CSS-Arbeitsgruppe bezeichnet wird. Die CSS-Arbeitsgruppe erstellt Dokumente, die als Spezifikationen bezeichnet werden. Wenn eine Spezifikation von den W3C-Mitgliedern diskutiert und offiziell ratifiziert wurde, wird sie zu einer Empfehlung.
Diese ratifizierten Spezifikationen werden als Empfehlungen bezeichnet, da das W3C keine Kontrolle über die tatsächliche Implementierung der Sprache hat. Unabhängige Unternehmen und Organisationen erstellen diese Software.
NOTE - Das World Wide Web Consortium (W3C) ist eine Gruppe, die Empfehlungen dazu abgibt, wie das Internet funktioniert und wie es sich entwickeln sollte.
CSS-Versionen
Cascading Style Sheets Level 1 (CSS1) wurde im Dezember 1996 als Empfehlung von W3C veröffentlicht. Diese Version beschreibt die CSS-Sprache sowie ein einfaches visuelles Formatierungsmodell für alle HTML-Tags.
CSS2 wurde im Mai 1998 zu einer W3C-Empfehlung und baut auf CSS1 auf. Diese Version bietet Unterstützung für medienspezifische Stylesheets, z. B. Drucker und Hörgeräte, herunterladbare Schriftarten, Elementpositionierung und Tabellen.
selector { property: value }
Example - Sie können einen Tabellenrand wie folgt definieren: -
table{ border :1px solid #C00; }Hier ist die Tabelle ein Selektor und der Rand eine Eigenschaft, und der angegebene Wert 1px solid # C00 ist der Wert dieser Eigenschaft.
Sie können Selektoren auf verschiedene einfache Arten definieren, je nach Ihrem Komfort. Lassen Sie mich diese Selektoren einzeln setzen.
Die Typauswahl
Dies ist derselbe Selektor, den wir oben gesehen haben. Noch ein Beispiel, um allen Überschriften der Ebene 1 eine Farbe zu geben -
h1 {
color: #36CFFF;
}Die universellen Selektoren
Anstatt Elemente eines bestimmten Typs auszuwählen, entspricht der universelle Selektor ganz einfach dem Namen eines beliebigen Elementtyps -
* {
color: #000000;
}Diese Regel macht den Inhalt jedes Elements in unserem Dokument schwarz.
Die Nachkommen Selektoren
Angenommen, Sie möchten eine Stilregel nur dann auf ein bestimmtes Element anwenden, wenn sie sich in einem bestimmten Element befindet. Wie im folgenden Beispiel angegeben, gilt die Stilregel nur dann für das <em> -Element, wenn sie sich innerhalb des <ul> -Tags befindet.
ul em {
color: #000000;
}Die Klassenselektoren
Sie können Stilregeln basierend auf dem Klassenattribut der Elemente definieren. Alle Elemente mit dieser Klasse werden gemäß der definierten Regel formatiert.
.black {
color: #000000;
}Diese Regel rendert den Inhalt für jedes Element in Schwarz, wobei das Klassenattribut in unserem Dokument auf Schwarz gesetzt ist . Sie können es etwas genauer machen. Zum Beispiel -
h1.black {
color: #000000;
}Diese Regel rendert den Inhalt nur für <h1> -Elemente in Schwarz, wobei das Klassenattribut auf Schwarz gesetzt ist .
Sie können mehr als eine Klassenselektion auf ein bestimmtes Element anwenden. Betrachten Sie das folgende Beispiel -
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>Die ID-Selektoren
Sie können Stilregeln basierend auf dem ID- Attribut der Elemente definieren. Alle Elemente mit dieser ID werden gemäß der definierten Regel formatiert.
#black {
color: #000000;
}Diese Regel rendert den Inhalt für jedes Element in Schwarz, wobei das ID- Attribut in unserem Dokument auf Schwarz gesetzt ist . Sie können es etwas genauer machen. Zum Beispiel -
h1#black {
color: #000000;
}Diese Regel rendert den Inhalt nur für <h1> -Elemente in Schwarz, wobei das ID- Attribut auf Schwarz gesetzt ist .
Die wahre Stärke von ID- Selektoren liegt darin, dass sie als Grundlage für Nachkommen-Selektoren verwendet werden. Beispiel:
#black h2 {
color: #000000;
}In diesem Beispiel werden alle Überschriften der Ebene 2 in schwarzer Farbe angezeigt, wenn diese Überschriften in Tags liegen, deren ID- Attribut auf Schwarz gesetzt ist .
Die untergeordneten Selektoren
Sie haben die Nachkommen-Selektoren gesehen. Es gibt noch einen Selektortyp, der Nachkommen sehr ähnlich ist, aber unterschiedliche Funktionen hat. Betrachten Sie das folgende Beispiel -
body > p {
color: #000000;
}Diese Regel rendert alle Absätze in Schwarz, wenn sie direkt dem <body> -Element untergeordnet sind. Andere Absätze, die in andere Elemente wie <div> oder <td> eingefügt werden, haben keine Auswirkung auf diese Regel.
Die Attributselektoren
Sie können Stile auch auf HTML-Elemente mit bestimmten Attributen anwenden. Der Stil der Regel unten passt auf alle Elemente Eingang ein type - Attribut mit einem Wert von Text -
input[type = "text"] {
color: #000000;
}Der Vorteil dieser Methode besteht darin, dass das Element <input type = "submit" /> nicht betroffen ist und die Farbe nur auf die gewünschten Textfelder angewendet wird.
Für die Attributauswahl gelten die folgenden Regeln.
p[lang]- Wählt alle Absatzelemente mit einem lang- Attribut aus.
p[lang="fr"]- Wählt alle Absatzelemente aus, deren lang- Attribut den Wert genau "fr" hat.
p[lang~="fr"]- Wählt alle Absatzelemente aus, deren lang- Attribut das Wort "fr" enthält.
p[lang|="en"]- Wählt alle Absatzelemente aus, deren lang- Attribut Werte enthält, die genau "en" sind oder mit "en-" beginnen.
Mehrere Stilregeln
Möglicherweise müssen Sie mehrere Stilregeln für ein einzelnes Element definieren. Sie können diese Regeln definieren, um mehrere Eigenschaften und entsprechende Werte in einem einzigen Block zu kombinieren, wie im folgenden Beispiel definiert:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Hier werden alle Eigenschafts- und Wertepaare durch a getrennt semicolon (;). Sie können sie in einer oder mehreren Zeilen halten. Zur besseren Lesbarkeit halten wir sie in getrennten Zeilen.
Machen Sie sich eine Weile keine Gedanken über die im obigen Block genannten Eigenschaften. Diese Eigenschaften werden in den kommenden Kapiteln erläutert. Ausführliche Informationen zu den Eigenschaften finden Sie in den CSS-Referenzen
Gruppieren von Selektoren
Sie können einen Stil auf viele Selektoren anwenden, wenn Sie möchten. Trennen Sie die Selektoren einfach durch ein Komma, wie im folgenden Beispiel angegeben -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Diese Regel zum Definieren des Stils gilt auch für die Elemente h1, h2 und h3. Die Reihenfolge der Liste ist irrelevant. Auf alle Elemente im Selektor werden die entsprechenden Deklarationen angewendet.
Sie können die verschiedenen ID- Selektoren wie unten gezeigt miteinander kombinieren.
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}Es wird das folgende Ergebnis erzeugt -
Attribute
Mit <style> -Elementen verknüpfte Attribute sind -
| Attribut | Wert | Beschreibung |
|---|---|---|
| Art | Text / CSS | Gibt die Stylesheet-Sprache als Inhaltstyp (MIME-Typ) an. Dies ist ein erforderliches Attribut. |
| Medien | Bildschirm tty Fernseher Projektion Handheld Blindenschrift aural alle |
Gibt das Gerät an, auf dem das Dokument angezeigt wird. Der Standardwert ist all . Dies ist ein optionales Attribut. |
Inline CSS - Der Stil Attribut
Sie können mit Stil - Attribute eines HTML - Elements Stilregeln definieren. Diese Regeln werden nur auf dieses Element angewendet. Hier ist die generische Syntax -
<element style = "...style rules....">Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| Stil | Stilregeln | Der Wert von style - Attribute ist eine Kombination der Art Erklärungen Semikolon (;) getrennt. |
Beispiel
Das folgende Beispiel zeigt Inline-CSS basierend auf der obigen Syntax:
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Externes CSS - Das <link> -Element
Das <link> -Element kann verwendet werden, um eine externe Stylesheet-Datei in Ihr HTML-Dokument aufzunehmen.
Ein externes Stylesheet ist eine separate Textdatei mit .cssErweiterung. Sie definieren alle Stilregeln in dieser Textdatei und können diese Datei dann mit dem Element <link> in jedes HTML-Dokument aufnehmen.
Hier ist die generische Syntax zum Einfügen einer externen CSS-Datei:
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Attribute
Mit <style> -Elementen verknüpfte Attribute sind -
| Attribut | Wert | Beschreibung |
|---|---|---|
| Art | Text CSS | Gibt die Stylesheet-Sprache als Inhaltstyp (MIME-Typ) an. Dieses Attribut ist erforderlich. |
| href | URL | Gibt die Stylesheet-Datei mit Stilregeln an. Dieses Attribut ist erforderlich. |
| Medien | Bildschirm tty Fernseher Projektion Handheld Blindenschrift aural alle |
Gibt das Gerät an, auf dem das Dokument angezeigt wird. Der Standardwert ist all . Dies ist ein optionales Attribut. |
Beispiel
Stellen Sie sich eine einfache Stylesheet- Datei mit dem Namen mystyle.css vor , die die folgenden Regeln enthält:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Jetzt können Sie diese Datei mystyle.css wie folgt in jedes HTML-Dokument aufnehmen:
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>Importiertes CSS - @ Importregel
@import wird verwendet, um ein externes Stylesheet auf ähnliche Weise wie das <link> -Element zu importieren. Hier ist die generische Syntax der @ import-Regel.
<head>
@import "URL";
</head>Hier ist URL die URL der Stylesheet-Datei mit Stilregeln. Sie können auch eine andere Syntax verwenden -
<head>
@import url("URL");
</head>Beispiel
Das folgende Beispiel zeigt Ihnen, wie Sie eine Stylesheet-Datei in ein HTML-Dokument importieren.
<head>
@import "mystyle.css";
</head>Überschreiben von CSS-Regeln
Wir haben vier Möglichkeiten besprochen, Stylesheet-Regeln in ein HTML-Dokument aufzunehmen. Hier ist die Regel zum Überschreiben einer Stylesheet-Regel.
Jedes Inline-Stylesheet hat höchste Priorität. Daher werden alle Regeln überschrieben, die in <style> ... </ style> -Tags definiert sind, oder Regeln, die in einer externen Stylesheet-Datei definiert sind.
Jede in <style> ... </ style> -Tags definierte Regel überschreibt Regeln, die in einer externen Stylesheet-Datei definiert sind.
Jede in einer externen Stylesheet-Datei definierte Regel hat die niedrigste Priorität. Die in dieser Datei definierten Regeln werden nur angewendet, wenn die beiden oben genannten Regeln nicht anwendbar sind.
Umgang mit alten Browsern
Es gibt immer noch viele alte Browser, die CSS nicht unterstützen. Daher sollten wir beim Schreiben unseres eingebetteten CSS in ein HTML-Dokument vorsichtig sein. Das folgende Snippet zeigt, wie Sie Kommentar-Tags verwenden können, um CSS vor älteren Browsern auszublenden.
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>CSS-Kommentare
Oft müssen Sie zusätzliche Kommentare in Ihre Stylesheet-Blöcke einfügen. Es ist also sehr einfach, einen Teil im Stylesheet zu kommentieren. Sie können Ihre Kommentare einfach in /*.... einfügen. Dies ist ein Kommentar im Stylesheet ..... * /.
Mit / * .... * / können Sie mehrzeilige Blöcke ähnlich wie in den Programmiersprachen C und C ++ kommentieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| %. | Definiert eine Messung als Prozentsatz relativ zu einem anderen Wert, normalerweise einem umschließenden Element. | p {Schriftgröße: 16pt; Zeilenhöhe: 125%;} |
| cm | Definiert eine Messung in Zentimetern. | div {Rand unten: 2 cm;} |
| em | Ein relatives Maß für die Höhe einer Schriftart in Leerzeichen. Da eine em-Einheit der Größe einer bestimmten Schriftart entspricht, wäre jede "em" -Einheit 12pt, wenn Sie 12pt eine Schriftart zuweisen. somit wäre 2em 24pt. | p {Buchstabenabstand: 7em;} |
| Ex | Dieser Wert definiert eine Messung relativ zur x-Höhe einer Schriftart. Die x-Höhe wird durch die Höhe des Kleinbuchstaben x der Schrift bestimmt. | p {Schriftgröße: 24pt; Zeilenhöhe: 3ex;} |
| im | Definiert eine Messung in Zoll. | p {Wortabstand: .15in;} |
| mm | Definiert eine Messung in Millimetern. | p {Wortabstand: 15 mm;} |
| pc | Definiert eine Messung in Picas. Ein Pica entspricht 12 Punkten; Somit gibt es 6 Picas pro Zoll. | p {Schriftgröße: 20pc;} |
| pt | Definiert eine Messung in Punkten. Ein Punkt ist als 1/72 Zoll definiert. | body {Schriftgröße: 18pt;} |
| px | Definiert eine Messung in Bildschirmpixeln. | p {padding: 25px;} |
| Hex-Code | #RRGGBB | p {Farbe: # FF0000;} |
| Kurzer Hex-Code | #RGB | p {Farbe: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {Farbe: rgb (50%, 50%, 50%);} |
| RGB Absolut | rgb (rrr, ggg, bbb) | p {Farbe: rgb (0,0,255);} |
| Stichwort | Aqua, Schwarz usw. | p {Farbe: blaugrün;} |
Diese Formate werden in den folgenden Abschnitten näher erläutert -
CSS-Farben - Hex-Codes
Eine Hexadezimalzahl ist eine 6-stellige Darstellung einer Farbe. Die ersten beiden Ziffern (RR) stehen für einen roten Wert, die nächsten beiden für einen grünen Wert (GG) und die letzten für den blauen Wert (BB).
Eine Hexadezimalzahl ist eine 6-stellige Darstellung einer Farbe. Die ersten beiden Ziffern (RR) stehen für einen roten Wert, die nächsten beiden für einen grünen Wert (GG) und die letzten für den blauen Wert (BB).
Ein hexadezimaler Wert kann von jeder Grafiksoftware wie Adobe Photoshop, Jasc Paintshop Pro oder sogar mit Advanced Paint Brush übernommen werden.
Vor jedem Hexadezimalcode steht ein Pfund- oder Hash-Zeichen '#'. Im Folgenden finden Sie Beispiele für die Verwendung der hexadezimalen Notation.
| Farbe | Farbe HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
CSS-Farben - Short Hex Codes
Dies ist eine kürzere Form der sechsstelligen Notation. In diesem Format wird jede Ziffer repliziert, um einen entsprechenden sechsstelligen Wert zu erhalten. Zum Beispiel: # 6A7 wird zu # 66AA77.
Ein hexadezimaler Wert kann von jeder Grafiksoftware wie Adobe Photoshop, Jasc Paintshop Pro oder sogar mit Advanced Paint Brush übernommen werden.
Vor jedem Hexadezimalcode steht ein Pfund- oder Hash-Zeichen '#'. Im Folgenden finden Sie Beispiele für die Verwendung der hexadezimalen Notation.
| Farbe | Farbe HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #F F F |
CSS-Farben - RGB-Werte
Dieser Farbwert wird mit dem angegeben rgb( )Eigentum. Diese Eigenschaft akzeptiert drei Werte, jeweils einen für Rot, Grün und Blau. Der Wert kann eine Ganzzahl zwischen 0 und 255 oder ein Prozentsatz sein.
NOTE - Alle Browser unterstützen die Eigenschaft rgb () von color nicht, daher wird empfohlen, sie nicht zu verwenden.
Das folgende Beispiel zeigt einige Farben mit RGB-Werten.
| Farbe | Farbe RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192, 192, 192) | |
| rgb (255,255,255) |
Erstellen von Farbcodes
Mit unserem Color Code Builder können Sie Millionen von Farbcodes erstellen. Überprüfen Sie unsereHTML Color Code Builder. Um dieses Tool verwenden zu können, benötigen Sie einen Java-fähigen Browser.
Browser sichere Farben
Hier ist die Liste von 216 Farben, die als sicherste und computerunabhängigste Farben gelten sollen. Diese Farben variieren von Hexa-Code 000000 bis FFFFFF. Diese Farben sind sicher zu verwenden, da sie sicherstellen, dass alle Computer die Farben korrekt anzeigen, wenn eine 256-Farben-Palette ausgeführt wird.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Stellen Sie die Hintergrundfarbe ein
Das folgende Beispiel zeigt, wie die Hintergrundfarbe für ein Element festgelegt wird.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie das Hintergrundbild ein
Wir können das Hintergrundbild einstellen, indem wir lokal gespeicherte Bilder wie unten gezeigt aufrufen -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>Es wird das folgende Ergebnis erzeugt -
Wiederholen Sie das Hintergrundbild
Das folgende Beispiel zeigt, wie das Hintergrundbild wiederholt wird, wenn ein Bild klein ist. Sie können den Wert " Keine Wiederholung" für die Eigenschaft " Hintergrundwiederholung" verwenden, wenn Sie ein Bild nicht wiederholen möchten. In diesem Fall wird das Bild nur einmal angezeigt.
Standardmäßig hat die Eigenschaft background-repeat den Wiederholungswert .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie das Hintergrundbild vertikal wiederholt wird.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie das Hintergrundbild horizontal wiederholt wird.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie die Position des Hintergrundbilds ein
Das folgende Beispiel zeigt, wie Sie die Position des Hintergrundbilds 100 Pixel von der linken Seite entfernt einstellen.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie Sie die Position des Hintergrundbilds 100 Pixel von der linken Seite und 200 Pixel von oben nach unten einstellen.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie den Hintergrundanhang ein
Der Hintergrundanhang bestimmt, ob ein Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt.
Das folgende Beispiel zeigt, wie Sie das feste Hintergrundbild festlegen.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie Sie das Hintergrundbild für den Bildlauf festlegen.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Kurzschrift Eigentum
Mit der Hintergrundeigenschaft können Sie alle Hintergrundeigenschaften gleichzeitig festlegen. Zum Beispiel -
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>Stellen Sie die Schriftfamilie ein
Das folgende Beispiel zeigt, wie die Schriftfamilie eines Elements festgelegt wird. Möglicher Wert kann ein beliebiger Name der Schriftfamilie sein.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie den Schriftstil ein
Das folgende Beispiel zeigt, wie der Schriftstil eines Elements festgelegt wird. Mögliche Werte sind normal, kursiv und schräg .
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Schriftvariante ein
Das folgende Beispiel zeigt, wie Sie die Schriftvariante eines Elements festlegen. Mögliche Werte sind Normal und Small Caps .
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie das Schriftgewicht ein
Das folgende Beispiel zeigt, wie Sie die Schriftstärke eines Elements festlegen. Die Eigenschaft font-weight bietet die Funktionalität, um anzugeben, wie fett eine Schriftart ist. Mögliche Werte können normal, fett, mutiger, leichter, 100, 200, 300, 400, 500, 600, 700, 800, 900 sein .
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Schriftgröße ein
Das folgende Beispiel zeigt, wie Sie die Schriftgröße eines Elements festlegen. Die Eigenschaft Schriftgröße wird verwendet, um die Größe von Schriftarten zu steuern. Mögliche Werte können xx-klein, x-klein, klein, mittel, groß, x-groß, xx-groß, kleiner, größer, Größe in Pixel oder in% sein .
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Schriftgröße ein
Das folgende Beispiel zeigt, wie Sie die Schriftgröße eines Elements anpassen. Mit dieser Eigenschaft können Sie die x-Höhe anpassen, um Schriftarten besser lesbar zu machen. Möglicher Wert kann eine beliebige Zahl sein.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Schriftdehnung ein
Das folgende Beispiel zeigt, wie Sie die Schriftdehnung eines Elements festlegen. Diese Eigenschaft setzt voraus, dass der Computer des Benutzers über eine erweiterte oder komprimierte Version der verwendeten Schriftart verfügt.
Mögliche Werte können normal, breiter, schmaler, ultrakondensiert, extrakondensiert, kondensiert, halbkondensiert, halbkompensiert, expandiert, extraexpandiert, ultraexpandiert sein .
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kurzschrift Eigentum
Mit der Schriftart- Eigenschaft können Sie alle Schriftart-Eigenschaften gleichzeitig festlegen. Zum Beispiel -
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das text-decoration Die Eigenschaft wird verwendet, um Text zu unterstreichen, zu überstreichen und durchzustreichen.
Das text-transform Die Eigenschaft wird verwendet, um Text groß zu schreiben oder Text in Groß- oder Kleinbuchstaben umzuwandeln.
Das white-space Die Eigenschaft wird verwendet, um den Fluss und die Formatierung von Text zu steuern.
Das text-shadow Mit dieser Eigenschaft wird der Textschatten um einen Text festgelegt.
Stellen Sie die Textfarbe ein
Das folgende Beispiel zeigt, wie Sie die Textfarbe festlegen. Ein möglicher Wert kann ein beliebiger Farbname in einem gültigen Format sein.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie die Textrichtung ein
Das folgende Beispiel zeigt, wie Sie die Richtung eines Textes festlegen. Mögliche Werte sind ltr oder rtl .
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie den Abstand zwischen den Zeichen ein
Das folgende Beispiel zeigt, wie der Abstand zwischen Zeichen festgelegt wird. Mögliche Werte sind normal oder eine Zahl, die ein Leerzeichen angibt. .
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie den Abstand zwischen Wörtern ein
Das folgende Beispiel zeigt, wie der Abstand zwischen Wörtern festgelegt wird. Mögliche Werte sind normal oder eine Zahl, die ein Leerzeichen angibt .
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie den Texteinzug ein
Das folgende Beispiel zeigt, wie die erste Zeile eines Absatzes eingerückt wird. Mögliche Werte sind % oder eine Zahl, die den Einrückungsbereich angibt .
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie die Textausrichtung ein
Das folgende Beispiel zeigt, wie ein Text ausgerichtet wird. Mögliche Werte sind links, rechts, zentriert, begründen .
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Den Text dekorieren
Das folgende Beispiel zeigt, wie ein Text dekoriert wird. Mögliche Werte sind none, underline, overline, line-through, blink .
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Legen Sie die Textfälle fest
Das folgende Beispiel zeigt, wie Sie die Fälle für einen Text festlegen. Mögliche Werte sind none, großschreiben, Großbuchstaben, Kleinbuchstaben .
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie den Leerraum zwischen Text ein
Das folgende Beispiel zeigt, wie Leerzeichen in einem Element behandelt werden. Mögliche Werte sind normal, pre, nowrap .
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie den Textschatten ein
Das folgende Beispiel zeigt, wie Sie den Schatten um einen Text legen. Dies wird möglicherweise nicht von allen Browsern unterstützt.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Bildrand-Eigenschaft
Die Grenz Eigenschaft eines Bildes wird verwendet , um die Breite eines Bildrand zu setzen. Diese Eigenschaft kann einen Wert in Länge oder in% haben.
Eine Breite von null Pixel bedeutet keinen Rand.
Hier ist das Beispiel -
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft Bildhöhe
Die height- Eigenschaft eines Bildes wird verwendet, um die Höhe eines Bildes festzulegen. Diese Eigenschaft kann einen Wert in Länge oder in% haben. Während der Wert in% angegeben wird, wird er in Bezug auf das Feld angewendet, in dem ein Bild verfügbar ist.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Bildbreiteneigenschaft
Die width- Eigenschaft eines Bildes wird verwendet, um die Breite eines Bildes festzulegen. Diese Eigenschaft kann einen Wert in Länge oder in% haben. Während der Wert in% angegeben wird, wird er in Bezug auf das Feld angewendet, in dem ein Bild verfügbar ist.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft -moz-opacity
Mit der Eigenschaft -moz-opacity eines Bildes wird die Deckkraft eines Bildes festgelegt. Diese Eigenschaft wird verwendet, um ein transparentes Bild in Mozilla zu erstellen. IE verwendetfilter:alpha(opacity=x) transparente Bilder erstellen.
In Mozilla (-moz-opacity: x) kann x ein Wert zwischen 0,0 und 1,0 sein. Ein niedrigerer Wert macht das Element transparenter (das Gleiche gilt für die CSS3-gültige Syntaxopazität: x).
Im IE (Filter: Alpha (Deckkraft = x)) kann x ein Wert zwischen 0 und 100 sein. Ein niedrigerer Wert macht das Element transparenter.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Normalerweise werden alle diese Eigenschaften im Header-Teil des HTML-Dokuments gespeichert.
Denken Sie daran, dass ein: Hover nach einem: Link und einem: Besuch in der CSS-Definition kommen muss, um effektiv zu sein. Außerdem MUSS a: active nach a: hover in der CSS-Definition wie folgt kommen:
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>Nun werden wir sehen, wie diese Eigenschaften verwendet werden, um Hyperlinks unterschiedliche Effekte zu verleihen.
Legen Sie die Farbe der Links fest
Das folgende Beispiel zeigt, wie Sie die Linkfarbe festlegen. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>Es wird der folgende schwarze Link erzeugt -
Legen Sie die Farbe der besuchten Links fest
Das folgende Beispiel zeigt, wie Sie die Farbe der besuchten Links festlegen. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>Es wird der folgende Link erzeugt. Sobald Sie auf diesen Link klicken, ändert sich seine Farbe in Grün.
Ändern Sie die Farbe der Links, wenn die Maus vorbei ist
Das folgende Beispiel zeigt, wie Sie die Farbe von Links ändern, wenn Sie einen Mauszeiger über diesen Link bewegen. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. It will change its color to pink when the user clicks it.
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>Lassen Sie uns nun das vorherige Beispiel ändern und den Effekt sehen -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die beschriftungsseitige Eigenschaft
Mit der beschriftungsseitigen Eigenschaft können Sie angeben, wo der Inhalt eines <caption> -Elements in Beziehung zur Tabelle gesetzt werden soll. In der folgenden Tabelle sind die möglichen Werte aufgeführt.
Diese Eigenschaft kann einen der vier Werte oben, unten, links oder rechts haben . Im folgenden Beispiel wird jeder Wert verwendet.
NOTE - Diese Eigenschaften funktionieren möglicherweise nicht mit Ihrem IE-Browser.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft für leere Zellen
Die Eigenschaft "Leere Zellen" gibt an, ob für eine Zelle ohne Inhalt ein Rahmen angezeigt werden soll.
Diese Eigenschaft kann einen der drei Werte haben - anzeigen, ausblenden oder erben .
Hier ist die Eigenschaft "Leere Zellen", mit der die Ränder leerer Zellen im Element <table> ausgeblendet werden.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Tabellenlayout-Eigenschaft
Mit der Tabellenlayout-Eigenschaft können Sie steuern, wie ein Browser eine Tabelle rendern oder anordnen soll.
Diese Eigenschaft kann einen der drei Werte haben: fest, automatisch oder erben .
Das folgende Beispiel zeigt den Unterschied zwischen diesen Eigenschaften.
NOTE - Diese Eigenschaft wird von vielen Browsern nicht unterstützt. Verlassen Sie sich daher nicht auf diese Eigenschaft.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Mit der Eigenschaft border-color können Sie die Farbe des Rahmens ändern, der ein Element umgibt. Sie können die Farbe der unteren, linken, oberen und rechten Seite des Randes eines Elements mithilfe der Eigenschaften individuell ändern.
border-bottom-color ändert die Farbe des unteren Randes.
border-top-color ändert die Farbe des oberen Randes.
border-left-color ändert die Farbe des linken Randes.
border-right-color ändert die Farbe des rechten Randes.
Das folgende Beispiel zeigt die Wirkung all dieser Eigenschaften -
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft im Rahmenstil
Mit der Eigenschaft border-style können Sie einen der folgenden Rahmenstile auswählen:
none- Keine Grenze. (Äquivalent der Randbreite: 0;)
solid - Rand ist eine einzelne durchgezogene Linie.
dotted - Rand ist eine Reihe von Punkten.
dashed - Grenze ist eine Reihe von kurzen Linien.
double - Rand ist zwei durchgezogene Linien.
groove - Der Rand sieht aus, als wäre er in die Seite eingraviert.
ridge - Rand sieht das Gegenteil von Rille aus.
inset - Mit dem Rand sieht das Feld so aus, als wäre es in die Seite eingebettet.
outset - Mit dem Rand sieht die Box so aus, als würde sie aus der Leinwand kommen.
hidden - Wie keine, außer in Bezug auf die Lösung von Grenzkonflikten für Tabellenelemente.
Sie können den Stil der unteren, linken, oberen und rechten Ränder eines Elements mithilfe der folgenden Eigenschaften individuell ändern:
border-bottom-style Ändert den Stil des unteren Randes.
border-top-style Ändert den Stil des oberen Randes.
border-left-style ändert den Stil des linken Randes.
border-right-style Ändert den Stil des rechten Rahmens.
Das folgende Beispiel zeigt alle diese Rahmenstile -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft für die Rahmenbreite
Mit der Eigenschaft border-width können Sie die Breite eines Elementrahmens festlegen. Der Wert dieser Eigenschaft kann entweder eine Länge in px, pt oder cm sein oder auf dünn, mittel oder dick eingestellt werden.
Sie können die Breite des unteren, oberen, linken und rechten Randes eines Elements mithilfe der folgenden Eigenschaften individuell ändern:
border-bottom-width Ändert die Breite des unteren Randes.
border-top-width Ändert die Breite des oberen Randes.
border-left-width Ändert die Breite des linken Randes.
border-right-width Ändert die Breite des rechten Randes.
Das folgende Beispiel zeigt alle diese Randbreiten -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Rahmeneigenschaften mit Kurzschrift
Mit der Eigenschaft border können Sie Farbe, Stil und Breite von Linien in einer Eigenschaft angeben.
Das folgende Beispiel zeigt, wie alle drei Eigenschaften in einer einzigen Eigenschaft verwendet werden. Dies ist die am häufigsten verwendete Eigenschaft, um einen Rahmen um ein Element festzulegen.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das margin-right Gibt den rechten Rand eines Elements an.
Nun werden wir anhand von Beispielen sehen, wie diese Eigenschaften verwendet werden.
Die Margin-Eigenschaft
Mit der Eigenschaft margin können Sie alle Eigenschaften für die vier Ränder in einer Deklaration festlegen. Hier ist die Syntax zum Festlegen des Randes um einen Absatz -
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft am unteren Rand
Mit der Eigenschaft margin-bottom können Sie den unteren Rand eines Elements festlegen. Es kann einen Wert in Länge,% oder Auto haben.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft am oberen Rand
Mit der Eigenschaft margin-top können Sie den oberen Rand eines Elements festlegen. Es kann einen Wert in Länge,% oder Auto haben.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft am linken Rand
Mit der Eigenschaft margin-left können Sie den linken Rand eines Elements festlegen. Es kann einen Wert in Länge,% oder Auto haben.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die randrechtliche Eigenschaft
Mit der Eigenschaft margin-right können Sie den rechten Rand eines Elements festlegen. Es kann einen Wert in Länge,% oder Auto haben.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Nun werden wir anhand von Beispielen sehen, wie diese Eigenschaften verwendet werden.
Die Eigenschaft vom Typ Listenstil
Mit der Eigenschaft list-style-type können Sie die Form oder den Stil des Aufzählungspunkts (auch als Markierung bezeichnet) bei ungeordneten Listen und den Stil der Nummerierung von Zeichen in geordneten Listen steuern.
Hier sind die Werte, die für eine ungeordnete Liste verwendet werden können -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | none N / A |
| 2 | disc (default) Ein ausgefüllter Kreis |
| 3 | circle Ein leerer Kreis |
| 4 | square Ein ausgefülltes Quadrat |
Hier sind die Werte, die für eine geordnete Liste verwendet werden können -
| Wert | Beschreibung | Beispiel |
|---|---|---|
| Dezimal | Nummer | 1,2,3,4,5 |
| Dezimal-führende-Null | 0 vor der Nummer | 01, 02, 03, 04, 05 |
| niedrigeres Alpha | Alphanumerische Kleinbuchstaben | a, b, c, d, e |
| oberes Alpha | Alphanumerische Großbuchstaben | A, B, C, D, E. |
| niederrömisch | Römische Kleinbuchstaben | i, ii, iii, iv, v |
| Oberrömisch | Römische Großbuchstaben | I, II, III, IV, V. |
| Untergriechisch | Der Marker ist untergriechisch | Alpha, Beta, Gamma |
| Niederlatein | Der Marker ist niederlateinisch | a, b, c, d, e |
| Oberlatein | Der Marker ist oberlateinisch | A, B, C, D, E. |
| hebräisch | Der Marker ist eine traditionelle hebräische Nummerierung | |
| Armenisch | Der Marker ist eine traditionelle armenische Nummerierung | |
| georgisch | Der Marker ist eine traditionelle georgische Nummerierung | |
| cjk-ideographisch | Der Marker sind einfache ideografische Zahlen | |
| Hiragana | Der Marker ist Hiragana | a, i, u, e, o, ka, ki |
| Katakana | Der Marker ist Katakana | A, I, U, E, O, KA, KI |
| Hiragana-Iroha | Der Marker ist Hiragana-Iroha | ich, ro, ha, ni, ho, er, zu |
| Katakana-Iroha | Der Marker ist Katakana-Iroha | Ich, RO, HA, NI, HO, HE, TO |
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft list-style-position
Die Eigenschaft list-style-position gibt an, ob die Markierung innerhalb oder außerhalb des Felds mit den Aufzählungspunkten angezeigt werden soll. Es kann einen der beiden Werte haben -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | none N / A |
| 2 | inside Wenn der Text in eine zweite Zeile eingefügt wird, wird der Text unter der Markierung umbrochen. Es wird auch eingerückt angezeigt, wo der Text begonnen hätte, wenn die Liste den Wert außerhalb gehabt hätte. |
| 3 | outside Wenn der Text in eine zweite Zeile eingefügt wird, wird der Text am Anfang der ersten Zeile (rechts vom Aufzählungszeichen) ausgerichtet. |
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft list-style-image
Mit dem Listenstil-Bild können Sie ein Bild angeben, damit Sie Ihren eigenen Aufzählungsstil verwenden können. Die Syntax ähnelt der Hintergrundbildeigenschaft, wobei die Buchstaben-URL den Wert der Eigenschaft gefolgt von der URL in Klammern beginnt. Wenn das angegebene Bild nicht gefunden wird, werden Standardaufzählungszeichen verwendet.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft im Listenstil
Mit dem Listenstil können Sie alle Listeneigenschaften in einem einzigen Ausdruck angeben. Diese Eigenschaften können in beliebiger Reihenfolge angezeigt werden.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Marker-Offset-Eigenschaft
Mit der Eigenschaft " Marker-Offset" können Sie den Abstand zwischen dem Marker und dem Text für diesen Marker festlegen. Sein Wert sollte eine Länge sein, wie im folgenden Beispiel gezeigt -
Leider wird diese Eigenschaft in IE 6 oder Netscape 7 nicht unterstützt.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das padding dient als Abkürzung für die vorhergehenden Eigenschaften.
Nun werden wir anhand von Beispielen sehen, wie diese Eigenschaften verwendet werden.
Die Eigenschaft padding-bottom
Die Eigenschaft padding-bottom legt die untere Auffüllung (Leerzeichen) eines Elements fest. Dies kann einen Wert in Bezug auf die Länge von% annehmen.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Padding-Top-Eigenschaft
Die Eigenschaft padding-top legt die obere Auffüllung (Leerzeichen) eines Elements fest. Dies kann einen Wert in Bezug auf die Länge von% annehmen.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft padding-left
Die Eigenschaft padding-left legt die linke Auffüllung (Leerzeichen) eines Elements fest. Dies kann einen Wert in Bezug auf die Länge von% annehmen.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft padding-right
Die Eigenschaft padding-right legt die richtige Auffüllung (Leerzeichen) eines Elements fest. Dies kann einen Wert in Bezug auf die Länge von% annehmen.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Padding-Eigenschaft
Die Auffüllungseigenschaft legt die linke, rechte, obere und untere Auffüllung (Leerzeichen) eines Elements fest. Dies kann einen Wert in Bezug auf die Länge von% annehmen.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| 1 | auto Die Form des Cursors hängt vom Kontextbereich ab, über dem er sich befindet. Zum Beispiel ein I über Text, eine Hand über einen Link und so weiter ... |
| 2 | crosshair Ein Fadenkreuz oder Pluszeichen |
| 3 | default Ein Pfeil |
| 4 | pointer Eine zeigende Hand (in IE 4 ist dieser Wert Hand) |
| 5 | move Die I-Bar |
| 6 | e-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach rechts (Osten) verschoben werden soll. |
| 7 | ne-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach oben und rechts (Nord / Ost) bewegt werden soll. |
| 8 | nw-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach oben und links verschoben werden soll (Nord / West). |
| 9 | n-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach oben (Norden) verschoben werden soll. |
| 10 | se-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach unten und rechts (Süd / Ost) bewegt werden soll. |
| 11 | sw-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach unten und links verschoben werden soll (Süd / West). |
| 12 | s-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach unten (Süden) verschoben werden soll. |
| 13 | w-resize Der Cursor zeigt an, dass eine Kante eines Feldes nach links (Westen) verschoben werden soll. |
| 14 | text Die I-Bar |
| 15 | wait Eine Sanduhr |
| 16 | help Ein Fragezeichen oder eine Sprechblase, ideal für die Verwendung über Hilfetasten |
| 17 | <url> Die Quelle einer Cursorbilddatei |
NOTE- Sie sollten versuchen, nur diese Werte zu verwenden, um hilfreiche Informationen für Benutzer hinzuzufügen. An manchen Stellen erwarten sie, dass dieser Cursor angezeigt wird. Die Verwendung des Fadenkreuzes, wenn jemand über einem Link schwebt, kann Besucher verwirren.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das outline-width Mit der Eigenschaft wird die Breite des Umrisses festgelegt.
Das outline-style Mit der Eigenschaft wird der Linienstil für die Gliederung festgelegt.
Das outline-color Mit der Eigenschaft wird die Farbe des Umrisses festgelegt.
Das outline Mit property werden alle drei oben genannten Eigenschaften in einer einzigen Anweisung festgelegt.
Die Gliederungsbreiteneigenschaft
Die outline-Breite - Eigenschaft gibt die Breite der Kontur an die Box hinzugefügt werden. Sein Wert sollte eine Länge oder einer der Werte dünn, mittel oder dick sein, genau wie das Attribut für die Rahmenbreite.
Eine Breite von null Pixel bedeutet keine Kontur.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft im Gliederungsstil
Die Eigenschaft " Gliederungsstil" gibt den Stil für die Linie (durchgehend, gepunktet oder gestrichelt) an, die um ein Element verläuft. Es kann einen der folgenden Werte annehmen -
none- Keine Grenze. (Äquivalent der Umrissbreite: 0;)
solid - Umriss ist eine einzelne durchgezogene Linie.
dotted - Umriss ist eine Reihe von Punkten.
dashed - Umriss ist eine Reihe von kurzen Zeilen.
double - Umriss ist zwei durchgezogene Linien.
groove - Die Gliederung sieht aus, als wäre sie in die Seite eingraviert.
ridge - Outline sieht das Gegenteil von Groove aus.
inset - Durch die Gliederung sieht das Feld so aus, als wäre es in die Seite eingebettet.
outset - Umriss lässt die Box so aussehen, als würde sie aus der Leinwand kommen.
hidden - Wie keine.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Umrissfarben-Eigenschaft
Mit der Eigenschaft Konturfarbe können Sie die Farbe der Kontur angeben. Sein Wert sollte entweder ein Farbname, eine Hex-Farbe oder ein RGB-Wert sein, wie bei den Eigenschaften Farbe und Rahmenfarbe.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Gliederungseigenschaft
Die Gliederungseigenschaft ist eine Kurzform-Eigenschaft, mit der Sie Werte für eine der drei zuvor beschriebenen Eigenschaften in beliebiger Reihenfolge, jedoch in einer einzigen Anweisung angeben können.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das max-width Mit der Eigenschaft wird die maximale Breite festgelegt, die eine Box haben kann.
Das min-width Mit der Eigenschaft wird die Mindestbreite festgelegt, die eine Box haben kann.
Die Eigenschaften für Höhe und Breite
Mit den Eigenschaften für Höhe und Breite können Sie die Höhe und Breite für Felder festlegen. Sie können Werte einer Länge, eines Prozentsatzes oder des Schlüsselworts auto annehmen.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft für die Zeilenhöhe
Mit der Eigenschaft Zeilenhöhe können Sie den Abstand zwischen Textzeilen vergrößern. Der Wert der Eigenschaft Zeilenhöhe kann eine Zahl, eine Länge oder ein Prozentsatz sein.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft für die maximale Höhe
Mit der Eigenschaft max-height können Sie die maximale Höhe eines Felds angeben. Der Wert der Eigenschaft max-height kann eine Zahl, eine Länge oder ein Prozentsatz sein.
NOTE - Diese Eigenschaft funktioniert weder in Netscape 7 noch in IE 6.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die min-height-Eigenschaft
Mit der Eigenschaft min-height können Sie die Mindesthöhe eines Felds angeben. Der Wert der Eigenschaft min-height kann eine Zahl, eine Länge oder ein Prozentsatz sein.
NOTE - Diese Eigenschaft funktioniert weder in Netscape 7 noch in IE 6.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft max-width
Mit der Eigenschaft max-width können Sie die maximale Breite eines Felds angeben. Der Wert der Eigenschaft max-width kann eine Zahl, eine Länge oder ein Prozentsatz sein.
NOTE - Diese Eigenschaft funktioniert weder in Netscape 7 noch in IE 6.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>Dies führt zu folgendem Ergebnis:
Die min-width-Eigenschaft
Mit der Eigenschaft min-width können Sie die Mindestbreite eines Felds angeben. Der Wert der Eigenschaft min-width kann eine Zahl, eine Länge oder ein Prozentsatz sein.
NOTE - Diese Eigenschaft funktioniert weder in Netscape 7 noch in IE 6.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| 1 | visible Ermöglicht dem Inhalt, die Ränder des enthaltenen Elements zu überschreiten. |
| 2 | hidden Der Inhalt des verschachtelten Elements wird einfach am Rand des enthaltenen Elements abgeschnitten und es sind keine Bildlaufleisten sichtbar. |
| 3 | scroll Die Größe des enthaltenen Elements ändert sich nicht, aber die Bildlaufleisten werden hinzugefügt, damit der Benutzer einen Bildlauf durchführen kann, um den Inhalt anzuzeigen. |
| 4 | auto Der Zweck ist der gleiche wie beim Scrollen, aber die Bildlaufleiste wird nur angezeigt, wenn der Inhalt überläuft. |
Hier ist ein Beispiel -
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| 1 | visible Die Box und ihr Inhalt werden dem Benutzer angezeigt. |
| 2 | hidden Das Feld und sein Inhalt werden unsichtbar gemacht, obwohl sie sich immer noch auf das Layout der Seite auswirken. |
| 3 | collapse Dies ist nur für dynamische Tabellenspalten und Zeileneffekte vorgesehen. |
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
- Nach oben - Verwenden Sie einen negativen Wert für oben .
- Nach unten bewegen - Verwenden Sie einen positiven Wert für oben .
NOTE- Sie können die unteren oder rechten Werte genauso wie die oberen und linken verwenden .
Hier ist das Beispiel -
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Absolute Positionierung
Ein Element mit position: absolute wird an den angegebenen Koordinaten relativ zu Ihrer oberen linken Ecke des Bildschirms positioniert.
Sie können zwei Werte oben und links zusammen mit der position- Eigenschaft verwenden, um ein HTML-Element an eine beliebige Stelle im HTML-Dokument zu verschieben.
- Nach links bewegen - Verwenden Sie einen negativen Wert für links .
- Nach rechts bewegen - Verwenden Sie einen positiven Wert für links .
- Nach oben - Verwenden Sie einen negativen Wert für oben .
- Nach unten bewegen - Verwenden Sie einen positiven Wert für oben .
NOTE- Sie können die unteren oder rechten Werte genauso wie die oberen und linken verwenden.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>Feste Positionierung
Mit der festen Positionierung können Sie die Position eines Elements an einer bestimmten Stelle auf der Seite festlegen, unabhängig vom Bildlauf. Die angegebenen Koordinaten beziehen sich auf das Browserfenster.
Sie können zwei Werte oben und links zusammen mit der position- Eigenschaft verwenden, um ein HTML-Element an eine beliebige Stelle im HTML-Dokument zu verschieben.
- Nach links bewegen - Verwenden Sie einen negativen Wert für links .
- Nach rechts bewegen - Verwenden Sie einen positiven Wert für links .
- Nach oben - Verwenden Sie einen negativen Wert für oben .
- Nach unten bewegen - Verwenden Sie einen positiven Wert für oben .
NOTE- Sie können die unteren oder rechten Werte genauso wie die oberen und linken verwenden .
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html><body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>Es wird das folgende Ergebnis erzeugt -
Die am häufigsten verwendeten Pseudoklassen sind wie folgt:
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | :link Verwenden Sie diese Klasse, um einem nicht besuchten Link einen besonderen Stil hinzuzufügen. |
| 2 | :visited Verwenden Sie diese Klasse, um einem besuchten Link einen besonderen Stil hinzuzufügen. |
| 3 | :hover Verwenden Sie diese Klasse, um einem Element einen besonderen Stil hinzuzufügen, wenn Sie mit der Maus darüber fahren. |
| 4 | :active Verwenden Sie diese Klasse, um einem aktiven Element einen besonderen Stil hinzuzufügen. |
| 5 | :focus Verwenden Sie diese Klasse, um einem Element einen besonderen Stil hinzuzufügen, während das Element den Fokus hat. |
| 6 | :first-child Verwenden Sie diese Klasse, um einem Element, das das erste untergeordnete Element eines anderen Elements ist, einen besonderen Stil hinzuzufügen. |
| 7 | :lang Verwenden Sie diese Klasse, um eine Sprache anzugeben, die in einem angegebenen Element verwendet werden soll. |
Beim Definieren von Pseudoklassen in einem <style> ... </ style> -Block sollten folgende Punkte beachtet werden:
a: hover MUSS nach a: link und a: in der CSS-Definition stehen, um effektiv zu sein.
a: active MUSS nach a: hover in der CSS-Definition kommen, um effektiv zu sein.
Pseudoklassennamen unterscheiden nicht zwischen Groß- und Kleinschreibung.
Pseudoklassen unterscheiden sich von CSS-Klassen, können jedoch kombiniert werden.
Die: Link Pseudoklasse
Das folgende Beispiel zeigt, wie Sie mit der Link- Klasse die Link-Farbe festlegen. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Es wird der folgende schwarze Link erzeugt -
Die: besuchte Pseudoklasse
Das folgende Beispiel zeigt, wie Sie mit der besuchten Klasse die Farbe der besuchten Links festlegen. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Dies erzeugt folgenden Link. Sobald Sie auf diesen Link klicken, ändert sich seine Farbe in Grün.
Die: Hover-Pseudoklasse
Das folgende Beispiel zeigt, wie Sie mit der Klasse : hover die Farbe von Links ändern, wenn Sie einen Mauszeiger über diesen Link bewegen. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Es wird der folgende Link erzeugt. Jetzt bewegen Sie Ihre Maus über diesen Link und Sie werden sehen, dass er seine Farbe in Gelb ändert.
Die: aktive Pseudoklasse
Das folgende Beispiel zeigt, wie Sie mit der Klasse : active die Farbe aktiver Links ändern. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Es wird der folgende Link erzeugt. Wenn ein Benutzer darauf klickt, ändert sich die Farbe in Pink.
Die: Fokus-Pseudoklasse
Das folgende Beispiel zeigt, wie Sie mit der Klasse : focus die Farbe fokussierter Links ändern. Mögliche Werte können beliebige Farbnamen in jedem gültigen Format sein.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Es wird der folgende Link erzeugt. Wenn dieser Link fokussiert wird, ändert sich seine Farbe in Orange. Die Farbe ändert sich zurück, wenn der Fokus verloren geht.
Die: Pseudoklasse des ersten Kindes
Die Pseudoklasse : first-child entspricht einem angegebenen Element, das das erste untergeordnete Element eines anderen Elements ist, und fügt dem Element, das das erste untergeordnete Element eines anderen Elements ist, einen besonderen Stil hinzu.
Um dies zu erreichen, muss die Arbeit des ersten Kindes im IE <! DOCTYPE> oben im Dokument deklariert werden.
Um beispielsweise den ersten Absatz aller <div> -Elemente einzurücken, können Sie diese Definition verwenden:
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die: lang Pseudoklasse
Die Sprachpseudoklasse : lang ermöglicht das Erstellen von Selektoren basierend auf der Spracheinstellung für bestimmte Tags.
Diese Klasse ist nützlich in Dokumenten, die mehrere Sprachen ansprechen müssen, die für bestimmte Sprachkonstrukte unterschiedliche Konventionen haben. Beispielsweise verwendet die französische Sprache normalerweise spitze Klammern (<und>) für Anführungszwecke, während die englische Sprache Anführungszeichen ('und') verwendet.
In einem Dokument, das diesen Unterschied beheben muss, können Sie die Pseudoklasse: lang verwenden, um die Anführungszeichen entsprechend zu ändern. Der folgende Code ändert das <blockquote> -Tag entsprechend der verwendeten Sprache -
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>Die Selektoren: lang gelten für alle Elemente im Dokument. Da jedoch nicht alle Elemente die Anführungszeichen-Eigenschaft verwenden, ist der Effekt für die meisten Elemente transparent.
Es wird das folgende Ergebnis erzeugt -
Die am häufigsten verwendeten Pseudoelemente sind wie folgt:
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | :first-line Verwenden Sie dieses Element, um der ersten Textzeile in einem Selektor spezielle Stile hinzuzufügen. |
| 2 | :first-letter Verwenden Sie dieses Element, um dem ersten Buchstaben des Textes in einer Auswahl einen besonderen Stil hinzuzufügen. |
| 3 | :before Verwenden Sie dieses Element, um Inhalte vor einem Element einzufügen. |
| 4 | :after Verwenden Sie dieses Element, um Inhalte nach einem Element einzufügen. |
Das: Pseudoelement der ersten Zeile
Das folgende Beispiel zeigt, wie Sie das Element : first-line verwenden, um der ersten Elementzeile im Dokument Spezialeffekte hinzuzufügen.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>Es wird der folgende Link erzeugt -
Das: Pseudoelement aus dem ersten Buchstaben
Das folgende Beispiel zeigt, wie Sie das Element : first-letter verwenden, um dem ersten Buchstaben von Elementen im Dokument Spezialeffekte hinzuzufügen.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>Es wird der folgende schwarze Link erzeugt -
Das: vor Pseudoelement
Das folgende Beispiel zeigt, wie Sie das Element : before verwenden, um vor einem Element Inhalte hinzuzufügen.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>Es wird der folgende schwarze Link erzeugt -
Das: nach Pseudoelement
Das folgende Beispiel zeigt, wie Sie das Element : after verwenden, um nach einem Element Inhalt hinzuzufügen.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>Es wird der folgende schwarze Link erzeugt -
Die @ import-Regel
Mit der @ import-Regel können Sie Stile aus einem anderen Stylesheet importieren. Es sollte direkt am Anfang des Stylesheets vor einer der Regeln angezeigt werden und sein Wert ist eine URL.
Es kann auf eine der beiden folgenden Arten geschrieben werden:
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>Die Bedeutung der @ import-Regel besteht darin, dass Sie Ihre Stylesheets modular entwickeln können. Sie können verschiedene Stylesheets erstellen und diese dann überall dort einfügen, wo Sie sie benötigen.
Die @ charset-Regel
Wenn Sie Ihr Dokument mit einem anderen Zeichensatz als ASCII oder ISO-8859-1 schreiben, möchten Sie möglicherweise die @ charset-Regel oben in Ihrem Stylesheet festlegen, um anzugeben, in welchen Zeichensatz das Stylesheet geschrieben ist.
Die @ charset-Regel muss direkt am Anfang des Stylesheets ohne Leerzeichen geschrieben werden. Der Wert wird in Anführungszeichen gesetzt und sollte einer der Standardzeichensätze sein. Zum Beispiel -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>Die @ font-face-Regel
Die @ font-face-Regel wird verwendet, um eine Schriftart zur Verwendung in einem Dokument ausführlich zu beschreiben. @ font-face kann auch verwendet werden, um den Speicherort einer Schriftart zum Herunterladen zu definieren, obwohl dies möglicherweise auf implementierungsspezifische Grenzen stößt.
Im Allgemeinen ist @ font-face äußerst kompliziert und seine Verwendung wird nur für diejenigen empfohlen, die sich mit Schriftmetriken auskennen.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>Die! Wichtige Regel
Cascading Style Sheets Kaskade. Dies bedeutet, dass die Stile in derselben Reihenfolge angewendet werden, in der sie vom Browser gelesen werden. Der erste Stil wird angewendet und dann der zweite und so weiter.
Die! Wichtige Regel bietet eine Möglichkeit, Ihre CSS-Kaskade zu erstellen. Es enthält auch die Regeln, die immer anzuwenden sind. Eine Regel mit einer! Wichtigen Eigenschaft wird immer angewendet, unabhängig davon, wo diese Regel im CSS-Dokument angezeigt wird.
Im folgenden Stylesheet ist der Absatztext beispielsweise schwarz, obwohl die erste angewendete Stileigenschaft rot ist:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Wenn Sie also sicherstellen möchten, dass eine Eigenschaft immer angewendet wird, fügen Sie dem Tag die Eigenschaft! Important hinzu. Um den Absatztext immer rot zu machen, sollten Sie ihn wie folgt schreiben:
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Hier haben Sie p {color: # ff0000! Wichtig gemacht; } obligatorisch, jetzt gilt diese Regel immer, auch wenn Sie eine andere Regel definiert haben. p {color: # 000000; }}
Es wird das folgende Ergebnis erzeugt -
| 1 | opacity Stufe der Deckkraft. 0 ist vollständig transparent, 100 ist vollständig undurchsichtig. |
| 2 | finishopacity Stufe der Deckkraft am anderen Ende des Objekts. |
| 3 | style Die Form des Opazitätsgradienten. 0 = einheitlich 1 = linear 2 = radial 3 = rechteckig |
| 4 | startX X-Koordinate für den Beginn des Opazitätsgradienten. |
| 5 | startY Y-Koordinate für den Beginn des Opazitätsgradienten. |
| 6 | finishX X-Koordinate für das Ende des Opazitätsgradienten. |
| 7 | finishY Y-Koordinate für das Ende des Opazitätsgradienten. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Bewegungsunschärfe
Bewegungsunschärfe wird verwendet, um unscharfe Bilder oder Texte mit der Richtung und Stärke zu erstellen. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | add Richtig oder falsch. Wenn true, wird das Bild dem unscharfen Bild hinzugefügt. und wenn false, wird das Bild nicht zum unscharfen Bild hinzugefügt. |
| 2 | direction Die Richtung der Unschärfe im Uhrzeigersinn ist auf 45-Grad-Schritte gerundet. Der Standardwert ist 270 (links). 0 = Oben 45 = Oben rechts 90 = Richtig 135 = Unten rechts 180 = unten 225 = unten links 270 = Links 315 = Oben links |
| 3 | strength Die Anzahl der Pixel, die die Unschärfe vergrößert. Der Standardwert beträgt 5 Pixel. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Chroma Filter
Der Chroma-Filter wird verwendet, um eine bestimmte Farbe transparent zu machen, und normalerweise wird er für Bilder verwendet. Sie können es auch mit Bildlaufleisten verwenden. Der folgende Parameter kann in diesem Filter verwendet werden -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, die Sie transparent sein möchten. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Schlagschatteneffekt
Schlagschatten wird verwendet, um einen Schatten Ihres Objekts mit dem angegebenen Versatz und der angegebenen Farbe X (horizontal) und Y (vertikal) zu erstellen.
Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe des Dropshadows im Format #RRGGBB. |
| 2 | offX Anzahl der Pixel, um die der Schlagschatten entlang der x-Achse vom visuellen Objekt versetzt ist. Positive Ganzzahlen verschieben den Schlagschatten nach rechts, negative Ganzzahlen verschieben den Schlagschatten nach links. |
| 3 | offY Anzahl der Pixel, um die der Schlagschatten entlang der y-Achse vom visuellen Objekt versetzt ist. Positive Ganzzahlen verschieben den Schlagschatten nach unten, negative Ganzzahlen verschieben den Schlagschatten nach oben. |
| 4 | positive Wenn true, haben alle undurchsichtigen Pixel des Objekts einen Dropshadow. Wenn false, haben alle transparenten Pixel einen Dropshadow. Der Standardwert ist true. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Flip-Effekt
Der Flip-Effekt wird verwendet, um ein Spiegelbild des Objekts zu erstellen. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | FlipH Erstellt ein horizontales Spiegelbild |
| 2 | FlipV Erstellt ein vertikales Spiegelbild |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Glow-Effekt
Der Glow-Effekt wird verwendet, um ein Glühen um das Objekt herum zu erzeugen. Wenn es sich um ein transparentes Bild handelt, wird um die undurchsichtigen Pixel herum ein Glühen erzeugt. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, die das Leuchten haben soll. |
| 2 | strength Die Intensität des Glühens (von 1 bis 255). |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Graustufeneffekt
Der Graustufeneffekt wird verwendet, um die Farben des Objekts in 256 Graustufen umzuwandeln. Der folgende Parameter wird in diesem Filter verwendet -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | grayscale Konvertiert die Farben des Objekts in 256 Graustufen. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Effekt umkehren
Der Invertierungseffekt wird verwendet, um die Farben des Objekts auf ihre entgegengesetzten Werte im Farbspektrum abzubilden, dh um ein negatives Bild zu erstellen. Der folgende Parameter wird in diesem Filter verwendet -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | Invert Ordnet die Farben des Objekts ihrem entgegengesetzten Wert im Farbspektrum zu. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Maskeneffekt
Der Maskeneffekt wird verwendet, um transparente Pixel in eine bestimmte Farbe zu bringen und undurchsichtige Pixel transparent zu machen. Der folgende Parameter wird in diesem Filter verwendet -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, zu der die transparenten Bereiche werden. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Schattenfilter
Der Schattenfilter wird verwendet, um einen gedämpften Schatten in der angegebenen Richtung und Farbe zu erzeugen. Dies ist ein Filter, der zwischen Dropshadow und Glow liegt. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, die der Schatten haben soll. |
| 2 | direction Die Richtung der Unschärfe im Uhrzeigersinn ist auf 45-Grad-Schritte gerundet. Der Standardwert ist 270 (links). 0 = Oben 45 = Oben rechts 90 = Richtig 135 = Unten rechts 180 = unten 225 = unten links 270 = Links 315 = Oben links |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Welleneffekt
Der Welleneffekt wird verwendet, um dem Objekt eine Sinuswellenverzerrung zu verleihen, damit es wellig aussieht. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | add Bei einem Wert von 1 wird das Originalbild zum Wellenbild hinzugefügt, bei 0 nicht. |
| 2 | freq Die Anzahl der Wellen. |
| 3 | light Die Stärke des Lichts auf der Welle (von 0 bis 100). |
| 4 | phase Ab welchem Grad sollte die Sinuswelle beginnen (von 0 bis 100). |
| 5 | strength Die Intensität des Welleneffekts. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Röntgeneffekt
Röntgeneffekt Graustufen und glättet die Farbtiefe. Der folgende Parameter wird in diesem Filter verwendet:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | xray Graustufen und glättet die Farbtiefe. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Unten ist ein Beispiel angegeben -
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>Die Dokumentensprache
In HTML 4.0, die Medien gibt Attribut auf dem LINK - Elemente die Zielmedium von einem externen Stylesheet -
Das Folgende ist ein Beispiel -
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>Erkannte Medientypen
Die für CSS-Medientypen ausgewählten Namen spiegeln Zielgeräte wider, für die die relevanten Eigenschaften sinnvoll sind. Sie geben einen Eindruck davon, auf welches Gerät sich der Medientyp beziehen soll. Unten finden Sie eine Liste verschiedener Medientypen -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | all Geeignet für alle Geräte. |
| 2 | aural Bestimmt für Sprachsynthesizer. |
| 3 | braille Bestimmt für taktile Braille-Feedback-Geräte. |
| 4 | embossed Bestimmt für Seiten-Braille-Drucker. |
| 5 | handheld Bestimmt für Handheld-Geräte (normalerweise kleiner Bildschirm, Schwarzweiß, begrenzte Bandbreite). |
| 6 | Bestimmt für ausgelagertes, undurchsichtiges Material und für Dokumente, die im Druckvorschau-Modus auf dem Bildschirm angezeigt werden. Bitte konsultieren Sie den Abschnitt über ausgelagerte Medien. |
| 7 | projection Bestimmt für projizierte Präsentationen, zum Beispiel Projektoren oder zum Drucken auf Transparentfolien. Bitte konsultieren Sie den Abschnitt über ausgelagerte Medien. |
| 8 | screen Vor allem für farbige Computerbildschirme gedacht. |
| 9 | tty Bestimmt für Medien, die ein Zeichenraster mit fester Tonhöhe verwenden, z. B. Teletypen, Terminals oder tragbare Geräte mit eingeschränkten Anzeigefunktionen. |
| 10 | tv Bestimmt für Fernsehgeräte. |
NOTE - Bei Namen von Medientypen wird die Groß- und Kleinschreibung nicht berücksichtigt.
Das CSS2 definiert eine "Seitenbox", eine Box mit endlichen Dimensionen, in der Inhalte gerendert werden. Das Seitenfeld ist ein rechteckiger Bereich, der zwei Bereiche enthält:
The page area- Der Seitenbereich enthält die auf dieser Seite angeordneten Felder. Die Kanten des Seitenbereichs dienen als anfänglicher Block für das Layout, das zwischen Seitenumbrüchen auftritt.
The margin area - Es umgibt den Seitenbereich.
Sie können die Abmessungen, Ausrichtung, Ränder usw. eines Seitenfelds innerhalb einer @ page-Regel angeben. Die Abmessungen des Seitenfelds werden mit der Eigenschaft 'size' festgelegt. Die Abmessungen des Seitenbereichs sind die Abmessungen des Seitenfelds abzüglich des Randbereichs.
Mit der folgenden @ page-Regel wird beispielsweise die Seitenfeldgröße auf 8,5 × 11 Zoll festgelegt und ein allseitiger Rand von 2 cm zwischen dem Rand des Seitenfelds und dem Seitenbereich erstellt.
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>Sie können die Eigenschaften Rand, Rand oben, Rand unten, Rand links und Rand rechts innerhalb der @ page-Regel verwenden, um Ränder für Ihre Seite festzulegen.
Schließlich wird die Marks- Eigenschaft innerhalb der @ page-Regel verwendet, um Zuschneide- und Registrierungsmarken außerhalb des Seitenfelds auf dem Zielblatt zu erstellen. Standardmäßig werden keine Markierungen gedruckt. Sie können eines oder beide der Schlüsselwörter " Zuschneiden" und " Kreuz" verwenden , um Schnittmarken bzw. Registrierungsmarken auf der Zieldruckseite zu erstellen.
Seitengröße einstellen
Die size- Eigenschaft gibt die Größe und Ausrichtung eines Seitenfelds an. Es gibt vier Werte, die für die Seitengröße verwendet werden können:
auto - Das Seitenfeld wird auf die Größe und Ausrichtung des Zielblatts eingestellt.
landscape- Überschreibt die Ausrichtung des Ziels. Das Seitenfeld hat dieselbe Größe wie das Ziel und die längeren Seiten sind horizontal.
portrait- Überschreibt die Ausrichtung des Ziels. Das Seitenfeld hat dieselbe Größe wie das Ziel und die kürzeren Seiten sind horizontal.
length- Längenwerte für die Eigenschaft 'size' erstellen ein absolutes Seitenfeld. Wenn nur ein Längenwert angegeben wird, werden sowohl die Breite als auch die Höhe des Seitenfelds festgelegt. Prozentwerte sind für die Eigenschaft 'size' nicht zulässig.
Im folgenden Beispiel werden die Außenkanten des Seitenfelds am Ziel ausgerichtet. Der prozentuale Wert für die Eigenschaft "Rand" ist relativ zur Zielgröße. Wenn also die Abmessungen des Zielblatts 21,0 cm × 29,7 cm (dh A4) betragen, betragen die Ränder 2,10 cm und 2,97 cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>Im folgenden Beispiel wird die Breite des Seitenfelds auf 8,5 Zoll und die Höhe auf 11 Zoll festgelegt. Das Seitenfeld in diesem Beispiel erfordert eine Zielblattgröße von 8,5 "× 11" oder mehr.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>Sobald Sie ein benanntes Seitenlayout erstellt haben, können Sie es in Ihrem Dokument verwenden, indem Sie die Seiteneigenschaft einem Stil hinzufügen, der später auf ein Element in Ihrem Dokument angewendet wird. Mit diesem Stil werden beispielsweise alle Tabellen in Ihrem Dokument auf Querformatsseiten gerendert.
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>Aufgrund der obigen Regel startet der Browser beim Drucken eine neue Seite und druckt die Tabelle auf einer Querformat-Seite, wenn er in Ihrem Dokument auf ein <table> -Element stößt und das aktuelle Seitenlayout das Standard-Hochformat ist.
Linke, rechte und erste Seite
Beim Drucken von doppelseitigen Dokumenten sollten die Seitenfelder auf der linken und rechten Seite unterschiedlich sein. Es kann durch zwei CSS-Pseudoklassen wie folgt ausgedrückt werden:
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>Sie können den Stil für die erste Seite eines Dokuments mit folgender Adresse angeben: first pseudo-class -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Paginierung steuern
Sofern Sie nichts anderes angeben, treten Seitenumbrüche nur auf, wenn sich das Seitenformat ändert oder wenn der Inhalt das aktuelle Seitenfeld überschreitet. Verwenden Sie die Eigenschaften Seitenumbruch vor, Seitenumbruch nach und Seitenumbruch innerhalb , um Seitenumbrüche anderweitig zu erzwingen oder zu unterdrücken .
Sowohl der Seitenumbruch vor als auch der Seitenumbruch nachher akzeptieren die automatischen Schlüsselwörter " Immer vermeiden", "Links" und " Rechts" .
Das Schlüsselwort auto ist die Standardeinstellung. Mit diesem Schlüssel kann der Browser bei Bedarf Seitenumbrüche generieren. Das Schlüsselwort erzwingt immer einen Seitenumbruch vor oder nach dem Element, während vermieden wird , dass ein Seitenumbruch unmittelbar vor oder nach dem Element unterdrückt wird. Die linken und rechten Schlüsselwörter erzwingen einen oder zwei Seitenumbrüche, sodass das Element auf einer linken oder rechten Seite gerendert wird.
Die Verwendung von Paginierungseigenschaften ist recht einfach. Angenommen, Ihr Dokument verfügt über Überschriften der Ebene 1. Beginnen Sie neue Kapitel mit Überschriften der Ebene 2, um Abschnitte zu kennzeichnen. Sie möchten, dass jedes Kapitel auf einer neuen Seite auf der rechten Seite beginnt, möchten jedoch nicht, dass die Abschnittsüberschriften über einen Seitenumbruch des nachfolgenden Inhalts aufgeteilt werden. Sie können dies mit der folgenden Regel erreichen:
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>Verwenden Sie nur das Auto und vermeiden Sie Werte mit der Eigenschaft " Seitenumbruch" . Wenn Sie es vorziehen, dass Ihre Tabellen möglichst nicht seitenübergreifend aufgeteilt werden, schreiben Sie die Regel:
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Witwen und Waisen kontrollieren
Im typografischen Jargon sind Waisen die Zeilen eines Absatzes, die aufgrund eines Seitenumbruchs am unteren Rand einer Seite gestrandet sind, während Witwen die Zeilen sind, die nach einem Seitenumbruch am oberen Rand einer Seite verbleiben. Im Allgemeinen sehen gedruckte Seiten nicht attraktiv aus, wenn einzelne Textzeilen oben oder unten gestrandet sind. Die meisten Drucker versuchen, mindestens zwei oder mehr Textzeilen oben oder unten auf jeder Seite zu belassen.
Das orphans Die Eigenschaft gibt die Mindestanzahl von Zeilen eines Absatzes an, die am Ende einer Seite verbleiben müssen.
Das widows Die Eigenschaft gibt die Mindestanzahl von Zeilen eines Absatzes an, die oben auf einer Seite verbleiben müssen.
Hier ist das Beispiel, um 4 Zeilen unten und 3 Zeilen oben auf jeder Seite zu erstellen -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>- Medizinische Dokumentation
Bei Verwendung von akustischen Eigenschaften besteht die Leinwand aus einem dreidimensionalen physischen Raum (Klangumrandung) und einem zeitlichen Raum (man kann Töne vor, während und nach anderen Tönen angeben).
Mit den CSS-Eigenschaften können Sie auch die Qualität der synthetisierten Sprache (Sprachtyp, Frequenz, Beugung usw.) variieren.
Hier ist ein Beispiel -
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Der Sprachsynthesizer wird angewiesen, Header mit einer Stimme (einer Art Audio-Schriftart) namens "paul" in einem flachen Ton, aber mit einer sehr satten Stimme zu sprechen. Vor dem Sprechen der Header wird ein Soundbeispiel von der angegebenen URL abgespielt.
Absätze mit der Klasse 'heidi' scheinen von vorne links zu kommen (wenn das Soundsystem räumliches Audio unterstützt) und Absätze der Klasse 'peter' von rechts.
Jetzt werden wir die verschiedenen Eigenschaften sehen, die sich auf akustische Medien beziehen.
Das azimuth Eigenschaftssätze, von denen der Ton horizontal kommen soll.
Das elevation Eigenschaftssätze, von denen der Ton vertikal kommen soll.
Das cue-after Gibt einen Sound an, der abgespielt werden soll, nachdem der Inhalt eines Elements gesprochen wurde, um ihn von anderen zu trennen.
Das cue-before Gibt einen Sound an, der abgespielt werden soll, bevor der Inhalt eines Elements gesprochen wird, um ihn von anderen zu trennen.
Das cue ist eine Abkürzung zum Einstellen von Cue-Before und Cue-After.
Das pause-after Gibt eine Pause an, die nach dem Sprechen des Inhalts eines Elements eingehalten werden soll.
Das pause-before Gibt eine Pause an, die eingehalten werden soll, bevor der Inhalt eines Elements gesprochen wird.
Das pause ist eine Abkürzung zum Einstellen von Pause vor und Pause nach.
Das pitch Gibt die durchschnittliche Tonhöhe (eine Frequenz) der sprechenden Stimme an.
Das pitch-range Gibt die Variation der durchschnittlichen Tonhöhe an.
Das play-during Gibt einen Sound an, der als Hintergrund abgespielt werden soll, während der Inhalt eines Elements gesprochen wird.
Das richness Gibt den Reichtum oder die Helligkeit der sprechenden Stimme an.
Das speak Gibt an, ob und auf welche Weise Text akustisch gerendert wird.
Das speak-numeral steuert, wie Ziffern gesprochen werden.
Das speak-punctuation Gibt an, wie Interpunktion gesprochen wird.
Das speech-rate Gibt die Sprechgeschwindigkeit an.
Das stress Gibt die Höhe von "lokalen Spitzen" in der Intonationskontur einer Stimme an.
Das voice-family Gibt die priorisierte Liste der Sprachfamiliennamen an.
Das volume bezieht sich auf die mittlere Lautstärke der Stimme.
Die Azimut-Eigenschaft
Die Azimut-Eigenschaft legt fest, woher der Ton horizontal kommen soll. Die möglichen Werte sind unten aufgeführt -
angle- Die Position wird als Winkel im Bereich von -360 ° bis 360 ° beschrieben . Der Wert 0deg bedeutet direkt vor Ihnen in der Mitte der Klangbühne. 90 Grad sind rechts, 180 Grad hinten und 270 Grad (oder äquivalent und bequemer -90 Grad ) links.
left-side- Wie '270deg'. Mit 'hinten', '270deg'.
far-left- Wie '300deg'. Mit 'hinten', '240 Grad'.
left- Wie '320deg'. Mit 'hinten', '220 Grad'.
center-left- Wie '340deg'. Mit 'hinten', '200deg'.
center- Wie '0deg'. Mit 'hinten', '180 Grad'.
center-right- Wie '20deg'. Mit 'hinten', '160deg'.
right- Wie '40deg'. Mit 'hinten', '140deg'.
far-right- Wie '60deg'. Mit "hinten", "120 Grad".
right-side- Wie '90deg'. Mit 'hinten', '90deg'.
leftwards- Bewegt den Ton nach links und relativ zum aktuellen Winkel. Genauer gesagt, subtrahiert 20 Grad.
rightwards- Bewegt den Ton relativ zum aktuellen Winkel nach rechts. Genauer gesagt, fügt 20 Grad hinzu.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>Die Elevationseigenschaft
Die Elevation-Eigenschaft legt fest, woher der Sound vertikal kommen soll. Die möglichen Werte sind wie folgt:
angle- Gibt die Höhe als Winkel zwischen -90 Grad und 90 Grad an . 0deg bedeutet am Vorwärtshorizont, was locker bedeutet, mit dem Hörer gleich zu sein. 90 Grad bedeutet direkt über Kopf und -90 Grad bedeutet direkt unter.
below - Wie '-90deg'.
level - Wie '0deg'.
above - Wie '90deg'.
higher - Fügt der aktuellen Höhe 10 Grad hinzu.
lower - Subtrahiert 10 Grad von der aktuellen Höhe.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>Die Cue-After-Eigenschaft
Die Cue-After-Eigenschaft gibt einen Sound an, der abgespielt werden soll, nachdem der Inhalt eines Elements gesprochen wurde, um ihn von anderen zu trennen. Die möglichen Werte umfassen -
url - Die URL einer abzuspielenden Audiodatei.
none - Es muss nichts gespielt werden.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>Die Cue-Before-Eigenschaft
Diese Eigenschaft gibt einen Sound an, der abgespielt werden soll, bevor der Inhalt eines Elements gesprochen wird, um ihn von anderen zu trennen. Die möglichen Werte sind -
url - Die URL einer abzuspielenden Audiodatei.
none - Es muss nichts gespielt werden.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>Die Cue-Eigenschaft
Die Cue-Eigenschaft ist eine Abkürzung zum Festlegen von Cue-Before und Cue-After . Wenn zwei Werte angegeben werden, ist der erste Wert Cue-Before und der zweite Cue-After . Wenn nur ein Wert angegeben wird, gilt dies für beide Eigenschaften.
Zum Beispiel sind die folgenden zwei Regeln äquivalent -
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>Die Pause-After-Eigenschaft
Diese Eigenschaft gibt eine Pause an, die nach dem Sprechen des Inhalts eines Elements eingehalten werden soll. Die möglichen Werte sind -
time - Drückt die Pause in absoluten Zeiteinheiten (Sekunden und Millisekunden) aus.
percentage- Bezieht sich auf die Umkehrung des Werts der Sprachrateneigenschaft . Wenn die Sprachrate beträgt 120 Worte pro Minute (dh ein Wort , einen halbe Sekunde dauert, oder 500 ms), dann wird eine zum Beispiel Pause-nach von 100% bedeutet eine Pause von 500 ms und eine Pause-nach von 20% mittels 100ms .
Die Pause-vor-Eigenschaft
Diese Eigenschaft gibt eine Pause an, die eingehalten werden muss, bevor der Inhalt eines Elements gesprochen wird. Die möglichen Werte sind -
time - Drückt die Pause in absoluten Zeiteinheiten (Sekunden und Millisekunden) aus.
percentage- Bezieht sich auf die Umkehrung des Werts der Sprachrateneigenschaft . Wenn die Sprachrate beispielsweise 120 Wörter pro Minute beträgt (dh ein Wort dauert eine halbe Sekunde oder 500 ms ), bedeutet eine Pause vor 100% eine Pause von 500 ms und eine Pause vor 20% 100 ms .
Die Pause-Eigenschaft
Diese Eigenschaft ist eine Abkürzung zum Festlegen von Pause vor und Pause nach . Wenn zwei Werte angegeben werden, ist der erste Wert eine Pause vor und der zweite eine Pause nach.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>Die Pitch-Eigenschaft
Diese Eigenschaft gibt die durchschnittliche Tonhöhe (eine Frequenz) der sprechenden Stimme an. Die durchschnittliche Tonhöhe einer Stimme hängt von der Stimmfamilie ab. Beispielsweise liegt die durchschnittliche Tonhöhe für eine Standard-Männerstimme bei etwa 120 Hz, für eine Frauenstimme bei etwa 210 Hz. Die möglichen Werte sind -
frequency - Gibt die durchschnittliche Tonhöhe der sprechenden Stimme in Hertz (Hz) an.
x-low, low, medium, high, x-high - Diese Werte werden nicht absoluten Frequenzen zugeordnet, da diese Werte von der Sprachfamilie abhängen.
Die Pitch-Range-Eigenschaft
Diese Eigenschaft gibt die Variation der durchschnittlichen Tonhöhe an. Die möglichen Werte sind -
number- Ein Wert zwischen '0' und '100'. Ein Tonhöhenbereich von '0' erzeugt eine flache, monotone Stimme. Ein Tonhöhenbereich von 50 erzeugt eine normale Beugung. Tonhöhenbereiche über 50 erzeugen animierte Stimmen.
Das Spiel während der Eigenschaft
Diese Eigenschaft gibt einen Sound an, der als Hintergrund abgespielt werden soll, während der Inhalt eines Elements gesprochen wird. Mögliche Werte können folgende sein:
URI - Der mit diesem <uri> bezeichnete Sound wird als Hintergrund abgespielt, während der Inhalt des Elements gesprochen wird.
mix- Wenn vorhanden, bedeutet dieses Schlüsselwort, dass der von der Play-While- Eigenschaft des übergeordneten Elements geerbte Sound weiterhin abgespielt wird und der vom Uri festgelegte Sound damit gemischt wird. Wenn keine Mischung angegeben ist, ersetzt der Hintergrundklang des Elements den des übergeordneten Elements.
repeat- Wenn vorhanden, bedeutet dieses Schlüsselwort, dass der Ton wiederholt wird, wenn er zu kurz ist, um die gesamte Dauer des Elements auszufüllen. Andernfalls wird der Ton einmal abgespielt und stoppt dann.
auto - Der Sound des übergeordneten Elements wird weiterhin abgespielt.
none - Dieses Schlüsselwort bedeutet, dass es Stille gibt.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>Die Reichtumseigenschaft
Diese Eigenschaft gibt den Reichtum oder die Helligkeit der sprechenden Stimme an. Die möglichen Werte sind -
number- Ein Wert zwischen '0' und '100'. Je höher der Wert, desto mehr wird die Stimme tragen. Ein niedrigerer Wert erzeugt eine weiche, wohlriechende Stimme.
Das sprechen Eigentum
Diese Eigenschaft gibt an, ob und auf welche Weise Text akustisch gerendert wird. Die möglichen Werte sind -
none - Unterdrückt das akustische Rendern, sodass das Element keine Zeit zum Rendern benötigt.
normal - Verwendet sprachabhängige Ausspracheregeln zum Rendern eines Elements und seiner untergeordneten Elemente.
spell-out - Buchstabiert den Text buchstabenweise.
Beachten Sie den Unterschied zwischen einem Element, dessen Eigenschaft 'volume' den Wert 'quiet' hat, und einem Element, dessen Eigenschaft 'speak' den Wert 'none' hat. Ersteres nimmt dieselbe Zeit in Anspruch, als wäre es gesprochen worden, einschließlich einer Pause vor und nach dem Element, aber es wird kein Ton erzeugt. Letzteres benötigt keine Zeit und wird nicht gerendert.
Die Speak-Number-Eigenschaft
Diese Eigenschaft steuert, wie Ziffern gesprochen werden. Die möglichen Werte sind -
digits- Sprechen Sie die Ziffer als einzelne Ziffern. Somit wird "237" "Zwei Drei Sieben" gesprochen.
continuous- Sprechen Sie die Ziffer als vollständige Zahl. So wird "237" "zweihundertsiebenunddreißig" gesprochen. Wortdarstellungen sind sprachabhängig.
Die Speak-Interpunktion-Eigenschaft
Diese Eigenschaft gibt an, wie Interpunktion gesprochen wird. Die möglichen Werte sind -
code - Satzzeichen wie Semikolons, geschweifte Klammern usw. sind wörtlich zu sprechen.
none - Interpunktion ist nicht zu sprechen, sondern wird natürlich als verschiedene Pausen wiedergegeben.
Die Sprachrateneigenschaft
Diese Eigenschaft gibt die Sprechgeschwindigkeit an. Beachten Sie, dass sowohl absolute als auch relative Schlüsselwortwerte zulässig sind. Die möglichen Werte sind -
number - Gibt die Sprechgeschwindigkeit in Worten pro Minute an.
x-slow - Wie 80 Wörter pro Minute.
slow - Wie 120 Wörter pro Minute.
medium - Wie 180 - 200 Wörter pro Minute.
fast - Wie 300 Wörter pro Minute.
x-fast - Wie 500 Wörter pro Minute.
faster - Fügt der aktuellen Sprachrate 40 Wörter pro Minute hinzu.
slower - Subtrahiert 40 Wörter pro Minute von der aktuellen Sprachrate.
Die Stress-Eigenschaft
Diese Eigenschaft gibt die Höhe von "lokalen Spitzen" in der Intonationskontur einer Stimme an. Englisch ist eine gestresste Sprache, und verschiedenen Teilen eines Satzes wird primärer, sekundärer oder tertiärer Stress zugewiesen. Die möglichen Werte sind -
number- Ein Wert zwischen '0' und '100'. Die Bedeutung von Werten hängt von der gesprochenen Sprache ab. Zum Beispiel hätte eine Stufe von '50' für eine normale englischsprachige Männerstimme (durchschnittliche Tonhöhe = 122 Hz), die mit normaler Intonation und Betonung spricht, eine andere Bedeutung als '50' für eine italienische Stimme.
Das Eigentum der Stimmfamilie
Der Wert ist eine durch Kommas getrennte, priorisierte Liste von Sprachfamiliennamen. Es kann folgende Werte haben -
generic-voice- Werte sind Stimmfamilien. Mögliche Werte sind "männlich", "weiblich" und "Kind".
specific-voice - Werte sind bestimmte Fälle (z. B. Comedian, Trinoide, Carlos, Lani).
Hier ist ein Beispiel -
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>Die Volume-Eigenschaft
Lautstärke bezieht sich auf die mittlere Lautstärke der Stimme. Es kann folgende Werte haben -
numbers- Beliebige Zahl zwischen '0' und '100'. '0' steht für den minimalen hörbaren Lautstärkepegel und 100 für den maximalen Komfortpegel.
percentage - Diese Werte werden relativ zum geerbten Wert berechnet und dann auf den Bereich '0' bis '100' begrenzt.
silent- Überhaupt kein Ton. Der Wert '0' bedeutet nicht dasselbe wie 'still'.
x-soft - Wie '0'.
soft - Wie '25'.
medium - Wie '50'.
loud - Wie '75'.
x-loud - Wie '100'.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>Absätze mit Klasse goat wird sehr weich sein.
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}Wenn Sie Ihr Stylesheet in einer separaten Datei definieren, können Sie das Medienattribut auch beim Verknüpfen mit einem externen Stylesheet verwenden.
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">CSS ist für die Zukunft von Webdokumenten von zentraler Bedeutung und wird von den meisten Browsern unterstützt.
CSS ist genauer als Tabellen, sodass Ihr Dokument unabhängig vom Browserfenster wie gewünscht angezeigt werden kann.
Das Verfolgen verschachtelter Tabellen kann sehr schmerzhaft sein. CSS-Regeln sind in der Regel gut organisiert, leicht zu lesen und leicht zu ändern.
Schließlich empfehlen wir Ihnen, die für Sie sinnvolle Technologie zu verwenden und das zu verwenden, was Sie wissen oder was Ihre Dokumente am besten präsentiert.
CSS bietet auch Tabellenlayout- Eigenschaften, mit denen Ihre Tabellen viel schneller geladen werden können. Das Folgende ist ein Beispiel -
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>Sie werden die Vorteile bei großen Tischen mehr bemerken. Bei herkömmlichem HTML musste der Browser jede Zelle berechnen, bevor die Tabelle endgültig gerendert werden konnte. Wenn Sie den Tabellenlayout-Algorithmus auf fest setzen , muss er jedoch nur die erste Zeile betrachten, bevor die gesamte Tabelle gerendert wird. Dies bedeutet, dass Ihre Tabelle feste Spaltenbreiten und Zeilenhöhen haben muss.
Beispielspaltenlayout
Hier sind die Schritte zum Erstellen eines einfachen Spaltenlayouts mit CSS:
Stellen Sie den Rand und den Abstand des gesamten Dokuments wie folgt ein:
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>Jetzt definieren wir eine Spalte mit gelber Farbe und später fügen wir diese Regel einem <div> - hinzu.
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>Bis zu diesem Punkt haben wir ein Dokument mit gelbem Körper, also definieren wir jetzt eine andere Unterteilung innerhalb von level0 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>Jetzt werden wir eine weitere Abteilung in Level1 verschachteln und nur die Hintergrundfarbe ändern -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>Schließlich werden wir dieselbe Technik verwenden und eine Level3-Unterteilung in Level2 verschachteln, um das visuelle Layout für die rechte Spalte zu erhalten -
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>Vervollständigen Sie den Quellcode wie folgt:
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>Ebenso können Sie oben auf der Seite eine obere Navigationsleiste oder eine Anzeigenleiste hinzufügen.
Es wird das folgende Ergebnis erzeugt -
W3C CSS Validator (World Wide Web Consortium), Dieser Validator überprüft Ihr CSS entweder durch Hochladen von Dateien, direkte Eingabe oder mithilfe von URI - eine Seite nach der anderen. Dieser Validator hilft Ihnen, alle Fehler in Ihrem CSS zu finden. Mit dem WDG CSS Check Validator können Sie Ihr CSS durch direkte Eingabe, Hochladen von Dateien und Verwendung von URI validieren. Fehler werden nach Zeilen- und Spaltennummern aufgelistet, falls vorhanden. Fehler werden normalerweise mit Links geliefert, um den Grund des Fehlers zu erklären.Ein CSS-Validator überprüft Ihre Cascading Style Sheets, um sicherzustellen, dass sie den vom W3-Konsortium festgelegten CSS-Standards entsprechen. Es gibt einige Validatoren, die Ihnen auch mitteilen, welche CSS-Funktionen von welchen Browsern unterstützt werden (da nicht alle Browser in ihrer CSS-Implementierung gleich sind).
Warum sollten Sie Ihren HTML-Code validieren?
Es gibt eine Reihe von Gründen, warum Sie Ihren Code validieren sollten. Aber die wichtigsten sind -
Es hilft bei der browserübergreifenden, plattformübergreifenden und zukünftigen Kompatibilität.
Eine qualitativ hochwertige Website erhöht die Sichtbarkeit von Suchmaschinen.
Professionalität: Als Webentwickler sollte Ihr Code keine Fehler verursachen, wenn er von den Besuchern gesehen wird.
CSS3 ist die Zusammenarbeit von CSS2-Spezifikationen und neuen Spezifikationen, die wir als Zusammenarbeit bezeichnen können module. Einige der Module sind unten gezeigt -
- Selectors
- Box Modell
- Backgrounds
- Bildwerte und ersetzter Inhalt
- Texteffekte
- 2D-Transformationen
- 3D-Transformationen
- Animations
- Mehrspaltiges Layout
- Benutzeroberfläche
Die folgende Tabelle zeigt die möglichen Werte für abgerundete Ecken wie folgt:
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | border-radius Verwenden Sie dieses Element, um die Eigenschaft mit vier Grenzradien festzulegen |
| 2 | border-top-left-radius Verwenden Sie dieses Element, um die Grenze der oberen linken Ecke festzulegen |
| 3 | border-top-right-radius Verwenden Sie dieses Element, um die Grenze der oberen rechten Ecke festzulegen |
| 4 | border-bottom-right-radius Verwenden Sie dieses Element, um die Grenze der unteren rechten Ecke festzulegen |
| 5 | border-bottom-left-radius Verwenden Sie dieses Element, um die Grenze der unteren linken Ecke festzulegen |
Beispiel
Diese Eigenschaft kann drei Werte haben. Im folgenden Beispiel werden beide Werte verwendet -
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Jede Ecke Eigenschaft
Wir können die Eigenschaften jeder Ecke wie im folgenden Beispiel angegeben angeben.
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>Es wird das folgende Ergebnis erzeugt -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | border-image-source Dient zum Festlegen des Bildpfads |
| 2 | border-image-slice Wird verwendet, um das Grenzbild zu schneiden |
| 3 | border-image-width Dient zum Einstellen der Boarder-Bildbreite |
| 4 | border-image-repeat Wird verwendet, um das Boarder-Bild als gerundet, wiederholt und gedehnt festzulegen |
Beispiel
Das folgende Beispiel zeigt, wie Sie ein Bild als Rahmen für Elemente festlegen.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die am häufigsten verwendeten Werte sind unten aufgeführt -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | background Wird verwendet, um alle Eigenschaften des Hintergrundbilds in einem Abschnitt festzulegen |
| 2 | background-clip Wird verwendet, um den Malbereich des Hintergrunds zu deklarieren |
| 3 | background-image Wird verwendet, um das Hintergrundbild anzugeben |
| 4 | background-origin Wird verwendet, um die Position der Hintergrundbilder anzugeben |
| 5 | background-size Wird verwendet, um die Größe der Hintergrundbilder festzulegen |
Beispiel
Das folgende Beispiel zeigt die Multi-Hintergrundbilder.
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Größe des Multi-Hintergrunds
Es wird eine Eigenschaft mit mehreren Hintergründen akzeptiert, um unterschiedliche Größen für unterschiedliche Bilder hinzuzufügen. Eine Beispielsyntax ist wie folgt:
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}Wie oben in einem Beispiel gezeigt, hat jedes Bild bestimmte Größen wie 50px, 130px und automatische Größe.
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}HSL steht für hue, saturation, lightnessHier ist ein Grad im Farbkreis groß, Sättigung und Helligkeit sind Prozentwerte zwischen 0 und 100%. Eine Beispielsyntax von HSL wie unten gezeigt -
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}HSLA steht für hue, saturation, lightness and alpha. Der Alpha-Wert gibt die Deckkraft wie in der RGBA angegeben an. Eine Beispielsyntax von HSLA wie unten gezeigt -
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}opacityBei dünneren Farben muss Schwarz hinzugefügt werden, um die Deckkraft zu erhöhen. Eine Beispielsyntax für die Deckkraft lautet wie folgt:
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}Das folgende Beispiel zeigt die Farbeigenschaft rgba.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt die HSL-Farbeigenschaft.
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt die HSLA-Farbeigenschaft.
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt die Opazitätseigenschaft.
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Lineare Gradienten
Lineare Verläufe werden verwendet, um zwei oder mehr Farben in linearen Formaten wie von oben nach unten anzuordnen.
Oben nach unten
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Links nach rechts
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Diagonale
Die Diagonale beginnt oben links und rechts.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Mehrfarbig
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
CSS3-Radialverläufe
Radiale Gradienten erscheinen in der Mitte.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
CSS3 Radiale Farbverläufe wiederholen
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Box Schatten
Wird verwendet, um Elemente mit Schatteneffekten zu versehen. Im Folgenden finden Sie ein Beispiel zum Hinzufügen von Schatteneffekten zu Elementen.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | text-align-last Dient zum Ausrichten der letzten Textzeile |
| 2 | text-emphasis Wird verwendet, um Text und Farbe hervorzuheben |
| 3 | text-overflow Wird verwendet, um zu bestimmen, wie übergelaufene Inhalte, die nicht angezeigt werden, den Benutzern signalisiert werden |
| 4 | word-break Wird verwendet, um die Linie basierend auf dem Wort zu unterbrechen |
| 5 | word-wrap Wird verwendet, um die Linie zu brechen und in die nächste Linie einzubinden |
Textüberlauf
Die Eigenschaft "Textüberlauf" bestimmt, wie übergelaufene Inhalte, die nicht angezeigt werden, den Benutzern signalisiert werden. Das Beispielbeispiel für einen Textüberlauf wird wie folgt angezeigt:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
CSS3 Word Breaking
Der folgende Code wird zum Unterbrechen der Zeile verwendet und zeigt den Beispielcode für das Unterbrechen von Wörtern.
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
CSS-Zeilenumbruch
Der Zeilenumbruch wird verwendet, um die Zeile zu unterbrechen und in die nächste Zeile umzubrechen. Der folgende Code hat eine Beispielsyntax:
p {
word-wrap: break-word;
}| 1 | TrueType Fonts (TTF) TrueType ist ein Standard-Schriftartstandard, der Ende der 1980er Jahre von Apple und Microsoft entwickelt wurde. Er wurde sowohl für Windows- als auch für MAC-Betriebssysteme am häufigsten verwendet. |
| 2 | OpenType Fonts (OTF) OpenType ist ein Format für skalierbare Computerschriftarten, das von Microsoft entwickelt wurde |
| 3 | The Web Open Font Format (WOFF) WOFF wird für die Entwicklung von Webseiten verwendet und im Jahr 2009 entwickelt. Jetzt wird es gemäß der W3C-Empfehlung verwendet. |
| 4 | SVG Fonts/Shapes SVG erlaubt SVG-Schriftarten in der SVG-Dokumentation. Wir können CSS auch auf SVG mit der Eigenschaft font face anwenden. |
| 5 | Embedded OpenType Fonts (EOT) EOT wird zum Entwickeln der Webseiten verwendet und in Webseiten eingebettet, sodass keine Schriftarten von Drittanbietern zugelassen werden müssen |
Der folgende Code zeigt den Beispielcode der Schriftart -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Beschreibung der Schriftarten
Die folgende Liste enthielt alle Schriftartenbeschreibungen, die in der @ font-face-Regel enthalten sind -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | font-family Wird verwendet, um den Namen der Schriftart zu definieren |
| 2 | src Wird verwendet, um die URL zu definieren |
| 3 | font-stretch Wird verwendet, um herauszufinden, wie die Schrift gedehnt werden soll |
| 4 | font-style Wird verwendet, um den Schriftstil zu definieren |
| 5 | font-weight Wird verwendet, um die Schriftstärke (Fettdruck) zu definieren. |
| 1 | matrix(n,n,n,n,n,n) Wird verwendet, um Matrixtransformationen mit sechs Werten zu definieren |
| 2 | translate(x,y) Wird verwendet, um das Element zusammen mit der x-Achse und der y-Achse zu transformieren |
| 3 | translateX(n) Wird verwendet, um das Element zusammen mit der x-Achse zu transformieren |
| 4 | translateY(n) Wird verwendet, um das Element zusammen mit der y-Achse zu transformieren |
| 5 | scale(x,y) Dient zum Ändern der Breite und Höhe des Elements |
| 6 | scaleX(n) Wird verwendet, um die Breite des Elements zu ändern |
| 7 | scaleY(n) Wird verwendet, um die Höhe des Elements zu ändern |
| 8 | rotate(angle) Wird verwendet, um das Element basierend auf einem Winkel zu drehen |
| 9 | skewX(angle) Wird verwendet, um Skew-Transformationen zusammen mit der x-Achse zu definieren |
| 10 | skewY(angle) Wird verwendet, um Skew-Transformationen zusammen mit der y-Achse zu definieren |
Die folgenden Beispiele zeigen das Beispiel aller oben genannten Eigenschaften.
20 Grad drehen
Boxdrehung mit 20 Grad Winkel wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
-20 Grad drehen
Boxdrehung mit -20 Grad Winkel wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
X-Achse neigen
Boxdrehung mit Schräg-x-Achse wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Schräge Y-Achse
Boxrotation mit Schrägstrich-y-Achse wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Matrixtransformation
Boxrotation mit Matrixtransformationen wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Matrix transformiert sich in eine andere Richtung.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Wird verwendet, um das Element mithilfe von 16 Matrixwerten zu transformieren |
| 2 | translate3d(x,y,z) Wird verwendet, um das Element mithilfe der x-Achse, der y-Achse und der z-Achse zu transformieren |
| 3 | translateX(x) Wird verwendet, um das Element mithilfe der x-Achse zu transformieren |
| 4 | translateY(y) Wird verwendet, um das Element mithilfe der y-Achse zu transformieren |
| 5 | translateZ(z) Wird verwendet, um das Element mithilfe der y-Achse zu transformieren |
| 6 | scaleX(x) Wird zum Skalieren verwendet, um das Element mithilfe der x-Achse zu transformieren |
| 7 | scaleY(y) Wird zum Skalieren verwendet, um das Element mithilfe der y-Achse zu transformieren |
| 8 | scaleY(y) Wird verwendet, um das Element mithilfe der Z-Achse zu transformieren |
| 9 | rotateX(angle) Wird zum Drehen verwendet, um das Element mithilfe der x-Achse zu transformieren |
| 10 | rotateY(angle) Wird zum Drehen verwendet, um das Element mithilfe der y-Achse zu transformieren |
| 11 | rotateZ(angle) Wird zum Drehen verwendet, um das Element mithilfe der Z-Achse zu transformieren |
X-Achsen-3D-Transformationen
Das folgende Beispiel zeigt die 3D-Transformationen der x-Achse.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
3D-Transformationen der Y-Achse
Das folgende Beispiel zeigt die 3D-Transformationen der y-Achse -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
3D-Transformationen auf der Z-Achse
Das folgende Beispiel zeigt die 3D-Transformationen der Z-Achse -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das obige Beispiel zeigt Höhe, Breite, Farbe, Namen und Dauer der Animation mit Keyframesyntax.
Animation nach links verschieben
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>this is an example of moving left animation .</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Verschieben der linken Animation mit Keyframes
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
| 1 | column-count Wird verwendet, um die Anzahl der Spalten zu zählen, in die das Element unterteilt werden soll. |
| 2 | column-fill Wird verwendet, um zu entscheiden, wie die Spalten gefüllt werden sollen. |
| 3 | column-gap Wird verwendet, um die Lücke zwischen den Spalten zu bestimmen. |
| 4 | column-rule Wird verwendet, um die Anzahl der Regeln anzugeben. |
| 5 | rule-color Wird verwendet, um die Farbe der Spaltenregel anzugeben. |
| 6 | rule-style Wird verwendet, um die Stilregel für die Spalte anzugeben. |
| 7 | rule-width Wird verwendet, um die Breite anzugeben. |
| 8 | column-span Wird verwendet, um die Spanne zwischen Spalten anzugeben. |
Beispiel
Das folgende Beispiel zeigt die Anordnung von Text als neue Papierstruktur.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Angenommen, wenn der Benutzer Text als neues Papier ohne Linie erstellen möchte, können Sie dies tun, indem Sie die Stilsyntax wie unten gezeigt entfernen.
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}Es wird das folgende Ergebnis erzeugt -
| 1 | appearance Wird verwendet, um dem Benutzer das Erstellen von Elementen als Benutzeroberflächenelemente zu ermöglichen. |
| 2 | box-sizing Ermöglicht Benutzern das eindeutige Fixieren von Elementen im Bereich. |
| 3 | icon Wird verwendet, um das Symbol im Bereich bereitzustellen. |
| 4 | resize Wird verwendet, um die Größe von Elementen zu ändern, die sich im Bereich befinden. |
| 5 | outline-offset Wird verwendet, um die Umrisse zu zeichnen. |
| 6 | nav-down Wird verwendet, um nach unten zu fahren, wenn Sie die Abwärtspfeiltaste auf der Tastatur gedrückt haben. |
| 7 | nav-left Wird verwendet, um sich nach links zu bewegen, wenn Sie die linke Pfeiltaste auf der Tastatur gedrückt haben. |
| 8 | nav-right Wird verwendet, um sich nach rechts zu bewegen, wenn Sie die rechte Pfeiltaste auf der Tastatur gedrückt haben. |
| 9 | nav-up Wird verwendet, um nach oben zu gelangen, wenn Sie die Aufwärtspfeiltaste auf der Tastatur gedrückt haben. |
Beispiel für eine Größenänderungseigenschaft
Die Eigenschaft "Größe ändern" hat drei gemeinsame Werte (siehe unten).
- horizontal
- vertical
- both
Verwendung von both Wert in Resize-Eigenschaft in CSS3-Benutzeroberfläche -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
CSS3 Konturversatz
Out line bedeutet, eine Linie um das Element außerhalb des Rahmens zu ziehen.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das obige Bild hat die gleiche Breite und Höhe von zwei Elementen, aber das Ergebnis ist unterschiedlich, da das zweite Element die Auffüllungseigenschaft enthält.
CSS3-Box-Dimensionierungseigenschaft
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Die obige Probe hat die gleiche Höhe und Breite mit box-sizing:border-box. Hier ist das Ergebnis unten gezeigt.
Es wird das folgende Ergebnis erzeugt -
Die oben genannten Elemente haben dieselbe Höhe und Breite wie bei der Boxgröße: Rahmen-Box, sodass das Ergebnis für beide Elemente wie oben gezeigt immer gleich ist.
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<div class = "container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Medien-Anfragen
Medienabfragen gelten für unterschiedliche Stilregeln für Geräte unterschiedlicher Größe wie Handys, Desktops usw.
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Bootstrap-responsives Webdesign
Bootstrap ist das beliebteste Webdesign-Framework, das auf HTML-, CSS- und Java-Skripten basiert. Es hilft Ihnen dabei, Webseiten für alle Geräte reaktionsschnell zu gestalten.
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>
<div class = "row">
<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>
<div class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>
<div class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -