Web-Design

Was ist CSS und welche Funktionen hat es?

Was ist CSS?

HTML bietet uns eine Vielzahl von Möglichkeiten zur Textformatierung. CSS, Cascading Style Sheets mit langer Schreibweise oder Style-Vorlagen mit Türkisch gehen noch einen Schritt weiter und bieten uns die Möglichkeit, globale Vorlagen für unsere Seiten sowie den Stil eines einzelnen Buchstabens vorzubereiten. Es kann auch verwendet werden, um Eigenschaften wie Farbe, Schriftart und Größe zu ändern. Das wichtigste Merkmal dieser Technik ist ihre Flexibilität bei der Verwendung.
Aufgrund der ästhetischen Regeln verwenden wir auf einer Webseite nicht Hunderte von Farben und Schriftarten. Im Allgemeinen verwenden wir mehrere Farben und Schriftarten, die miteinander kompatibel sind. Anstatt sie auf jeder Seite einzeln anzugeben, können wir sie mithilfe von CSS einmal definieren und auf unserer gesamten Website verwenden.
CSS-Codes werden in HTML-Codes geschrieben. Sie können sich je nach Typ in Körper- oder Kopfabschnitten befinden. Außerdem können externe CSS-Dateien erstellt und bei Bedarf im HTML-Dokument aufgerufen werden.
Wie bei fast jedem Thema präsentieren Microsoft Internet Explorer und Firefox unterschiedliche Kommentare zu CSS. An dieser Stelle ist es am besten, die Codes zu schreiben, die beide Browser gleich / ähnlich interpretieren.

LINK-FUNKTIONEN

a: Der Link ist der Status, bevor die Seite geöffnet oder auf den Cursor geklickt wird.
a:hover : Dies ist der Status des Links, wenn er über dem Cursor platziert wird.
a:active : Der Status des Links, wenn darauf geklickt wird.
a:visited : Dies ist der Status des Links, nachdem er angeklickt wurde.
color: Bestimmt die Farbe des Links.
background-color: Bestimmt die Hintergrundfarbe des Links.
background-image: Fügt dem Hintergrund des Links ein Bild hinzu
text-decoration: Links, Golds usw. bestimmt, ob es gestreift ist oder nicht.
font-weight: Bestimmt die Dicke oder Feinheit des Textes.
border: Fügt dem Link einen Rahmen hinzu.
display: Zelle, Zeile usw. mit dem Link. Es ermöglicht die Auswahl des gewünschten Bereichs.

LISTENMERKMALE

disk: Stellt sicher, dass das Listenformat disk (durchgezogener Kreis) ist.
circle : Ermöglicht, dass das Listenformat kreisförmig ist.
square : Lässt das Listenformat quadratisch werden.
decimal : Ermöglicht, dass das Listenformat aus Zahlen besteht.
lower-roman : Ermöglicht, dass das Listenformat aus kleinen römischen Ziffern wie i, ii, iii besteht.
upper-roman : Ermöglicht dem Listenformat, große römische Ziffern wie I, II, II zu enthalten.
lower-alpha : Aktiviert das Listenformat als Kleinbuchstaben a, b, c.
upper-alpha : Aktiviert das Listenformat als Großbuchstaben A, B, C.
none : Macht die Liste ohne Vorzeichen.
inside : Legt fest, dass die zweite Zeile der Liste ganz links beginnt.
Outside : Lässt die zweite Zeile der Liste an derselben Stelle beginnen wie die erste Zeile.
list-style-image : Macht das Listenformat zu einem Bild.

SCHICHTFUNKTIONEN

position: Ermöglicht die Bestimmung der Position der Ebene.
absolute: Ermöglicht die Bestimmung der Position der Ebene anhand des Fensters.
relative: Ermöglicht die Bestimmung der Position der Ebene basierend auf der vorherigen Ebene.
static: Ermöglicht die Festlegung der Position der Ebene (obere linke Ecke, Standardeinstellung).
top: Legt fest, wie weit die Ebene von oben entfernt sein soll.
left: Legt fest, wie weit die Ebene von links entfernt sein soll.
width: Legt fest, wie breit die Ebene sein soll.
height: Legt fest, wie hoch die Ebene sein wird.
overflow: Legt fest, was mit dem Teil der Ebene geschieht, der nicht in die angegebene Höhe und Breite passt.
auto: Automatisch ermittelt.
scroll: Lässt es durch Hinzufügen einer Bildlaufleiste angezeigt werden.
visible : Verschiebt die Ebene aus den angegebenen Bemaßungen heraus und lässt Stellen zu, die nicht passen.
hidden: Blendet Orte aus, die nicht passen.
visibility: Passt die Sichtbarkeit der Ebene an.
visible : Macht die Ebene sichtbar.
hidden: Blendet die Ebene aus.
z-index : Bestimmt die Reihenfolge, in der Ebenen von unten nach oben angezeigt werden. Der Wert 1 gibt an, dass sich die Ebene unten befindet.

FONT FEATURES

font-family: Bestimmt den Schrifttyp (Arial, Verdana usw.)
font-style: Macht die Schrift normal oder nach rechts geneigt.
font-variant: Lässt die Schrift normal oder in Großbuchstaben aussehen.
font-weight: Bestimmt die Dicke des Textes.
font-size: Bestimmt die Größe des Beitrags.

TEXTFUNKTIONEN

word-spacing : Bestimmt den Abstand zwischen den Wörtern.
letter-spacing : Bestimmt den Abstand zwischen den Buchstaben.
text-decoration : Unter, über usw. des Wortes bestimmt, ob es gezeichnet wird oder nicht.
underline : Ermöglicht das Unterstreichen des Wortes (unter der Zeile).
overline : Ermöglicht das Zeichnen des Wortes (über der Linie).
line-through : Lässt das Wort in der Mitte zeichnen.
blink : Lässt das Wort blinken (für Netscape)
vertical-align : Legt fest, wie Text horizontal ausgerichtet wird.
text-transform: Ermöglicht es Wörtern, aus Groß- oder Kleinbuchstaben zu bestehen.
capitalize : Lässt die ersten Buchstaben von Wörtern groß schreiben.
uppercase : Setzt alle Buchstaben der Wörter in Großbuchstaben.
lowercase : Stellt sicher, dass alle Buchstaben der Wörter in Kleinbuchstaben geschrieben sind.
none : Lässt Wörter wie den Originaltext aussehen.
text-align: Legt fest, wie Text vertikal ausgerichtet wird.
left : Richtet den Text links aus.
right : Begründet den Text rechts.
center : Zentrieren Sie den Text.
justify :Begründet Text.
text-indent : Legt fest, wie weit die erste Textzeile von links beginnt.
line-height : Passt die Höhe der Linie an. (Bei höherem Wert vergrößert sich der Abstand zwischen den Linien.)
first-line : Stellt die Formatierung der ersten Textzeile bereit.
first-letter : Bietet die Formatierung des ersten Buchstabens des Textes.

CURSOREIGENSCHAFTEN

crosshair: Macht den Cursor in Form eines Kreuzes.
auto: Stellt sicher, dass der Cursor die Form einer vertikalen Linie im Text und eines normalen Pfeils im leeren Bereich hat.
default: Aktiviert den Cursor als normalen Pfeil sowohl im Text als auch im freien Bereich.
hand: Stellt fest, dass der Cursor wie im Link handgeformt ist.
move: Stellt den Cursor als Bewegungszeichen bereit.
ne-resize: Macht den Cursor rechtsseitig zum normalen Pfeil.
nw-resize: Bewegt den Cursor nach links, normaler Pfeil.
se-resize: Bewegt den normalen Cursorpfeil von oben nach unten und nach rechts.
sw-resize: Bewegt den normalen Cursorpfeil von oben nach unten und nach links.
n-resize: Macht den Cursor in Form eines dünnen Pfeils von unten nach oben.
s-resize: Ermöglicht, dass der Cursor ein dünner Pfeil von oben nach unten ist.
w-resize: Stellt den Cursor in Form eines dünnen Pfeils nach links.
e-resize: Stellt den Cursor in Form eines dünnen Pfeils nach rechts.
text: Lässt den Cursor sowohl als Text als auch als Leerzeichen erscheinen.
wait: Der Cursor wird zu einer geschäftigen Animation.
help: Setzt den Cursor auf das Hilfe-Fragezeichen.

BODENMERKMALE

background-color: Bestimmt die Farbe des Bodens.
#color : Farbname.
transparent: Macht den Boden transparent.
background-image: Ermöglicht das Platzieren von Bildern auf dem Boden.
url : Die Adresse des Bildes auf dem Boden.
background-repeat: Legt fest, wie sich das auf dem Boden platzierte Bild ausbreitet.
repeat : Ermöglicht die Verteilung des Bildes über den gesamten Boden.
repeat-x : Ermöglicht die Ausbreitung des Bildes von links oben nach rechts oben.
repeat-y : Verbreitet das Bild von links oben nach links unten.
no-repeat: Lässt das Bild in seiner Originalgröße erscheinen, ohne es zu verbreiten.
background-attachment: Bestimmt den Status des Bildes auf dem Boden, wenn es mit dem Seitenschieberegler verschoben wird.
scroll : Legt fest, dass der Boden verschoben wird, wenn die Seite verschoben wird.V
fixed: Hält den Boden stabil, auch wenn die Seite verschoben wird.
background-position: Ermöglicht das Platzieren des Bildes auf dem Boden wie gewünscht.
top : Platziert das Bild nach oben.
center : Bild zentrieren.
bottom : Platziert das Bild nach unten.
left : Platziert das Bild links.
right: Platziert das Bild rechts.
…px : Macht das Bild von links in der gewünschten Größe.

TABELLENMERKMALE

margin : Gibt den Abstand zwischen der Tabelle und den Fensterkanten an.
margin-top : Bestimmt den Abstand zwischen der Tabelle und der Oberkante des Fensters.
margin-right : Bestimmt den Abstand zwischen der Tabelle und dem rechten Fensterrand.
margin-bottom : Bestimmt den Abstand zwischen der Tabelle und dem unteren Rand des Fensters.
margin-left : Bestimmt den Abstand zwischen der Tabelle und dem linken Rand des Fensters.

padding : Bestimmt den Abstand zwischen den Tabellenkanten und dem Inhalt der Tabelle (Text usw.).
padding-top: Bestimmt den Abstand zwischen der Oberkante der Tabelle und dem Tabelleninhalt.
padding-right: Bestimmt den Abstand zwischen dem rechten Rand der Tabelle und dem Tabelleninhalt.
padding-bottom: Bestimmt den Abstand zwischen dem unteren Rand der Tabelle und dem Tabelleninhalt.
padding-left: Bestimmt den Abstand zwischen dem linken Rand der Tabelle und dem Tabelleninhalt.

border :Legt fest, dass die Kanten des Tisches geformt werden.

border-top-width: Bestimmt die Dicke der Oberkante der Tabelle.
border-right-width: Bestimmt die Dicke der rechten Tischkante.
border-bottom-width: Bestimmt die Dicke der unteren Kante der Tabelle.
border-left-width: Bestimmt die Dicke des linken Randes der Tabelle.
border-width : Bestimmt die Dicke der Kanten der Tabelle.

border-style : Bestimmt den Randtyp der Tabelle.
border-top-style : Bestimmt den oberen Randtyp der Tabelle.
border-right-style : Bestimmt den rechten Randtyp der Tabelle.
border-bottom-style : Bestimmt den unteren Randtyp der Tabelle.
border-left-style : Bestimmt den linken Randtyp der Tabelle.

border-color : Bestimmt die Farbe der Kanten der Tabelle.
border-top-color: Bestimmt die Farbe der Oberkante der Tabelle.
border-right-color: Bestimmt die Farbe des rechten Tabellenrandes.
border-bottom-color: Bestimmt die Farbe der unteren Kante der Tabelle.
border-left-color: Bestimmt die Farbe des linken Tabellenrandes.

color : Bestimmt die Farbe des Textes in der Tabelle.

width :Legt die Breite der Tabelle fest.

height : Bestimmt die Höhe der Tabelle.

HINWEIS: Der Titel wird als „TABLE“ angegeben. Diese Eigenschaften sind jedoch hauptsächlich TD, TR, TH usw. Dies ist das Besondere an CSS.

SCROLLING BAR-FUNKTIONEN

scrollbar-face-color : Die Oberflächenfarbe der Bildlaufleiste wirkt sich auch auf den Boden aus.
scrollbar-base-color : Deckt den linken und oberen Rand der Bildlaufleiste in Linien ab.
scrollbar-shadow-color : Die Schattenfarbe des rechten und unteren Randes.
scrollbar-highlight-color : Die Schattenfarbe des linken und oberen Randes wirkt sich auch auf den Boden aus.
scrollbar-arrow-color : Farbe der Richtungspfeile

Die Bildlaufleiste ist nur in Internet Explorer verfügbar.