Wie implementiere ich verschiedene Grenzen in CSS?

Rahmen werden in HTML-Seiten verwendet, um Inhalte abzugrenzen und hervorzuheben. Wenn eine Seite viele Informationen enthält und Sie den Benutzer auf bestimmte Teile aufmerksam machen möchten, verwenden Sie Rahmen um diesen Inhalt. In diesem Artikel zu Rahmen in CSS werde ich die folgenden Themen behandeln:

• Wann werden Rahmen verwendet?
• Grenzen in CSS
• Attribute von CSS Border
• Standardwerte für Rahmenattribute
• Grenzen in Kurzschrift definieren
• Punkte, die beim Entwerfen von Rahmen in CSS beachtet werden müssen

Wann werden Rahmen verwendet?

Die Standardpraxis besteht darin, CSS-Rahmen-Tags zu verwenden, um Rahmen in HTML-Seiten zu definieren für:

• Um wichtige Überschriften
• Nachschrift oder wichtige Hinweise hervorheben
• Um Bilder, Illustrationen, Zitate von Menschen, Videos einzuschließen
• Um auf Preise, Zeitpläne oder solche wichtigen Informationen aufmerksam zu machen

Vielleicht möchten Sie sich über die informieren bevor Sie sich mit CSS-Grenzen vertraut machen.

Ein umfassendes CSS-Tutorial finden Sie unter Edureka CSS Tutorial für Anfänger . Sie erhalten ein hervorragendes Heads-up darüber, wie CSS zur Erweiterung des HTML-Webdesigns verwendet werden soll.

Grenzen in CSS

CSS-Rahmen können verschiedenen Abschnitten der HTML-Seite zugewiesen werden, unabhängig davon, ob Überschriften oder Absätze eingeschlossen werden sollen. Beginnen wir mit einem Beispiel. Hier definieren wir einen Rand um die Überschrift und einen weiteren Rand um den Absatztext.

body {Hintergrundfarbe: hellblau} h1 {Textausrichtung: Mitte Randstil: fest} p {Schriftfamilie: verdana Schriftgröße: 20px Randstil: gepunktet}
Rahmen auch um den Absatz!
 

Attribute von CSS Border

CSS-Rahmen haben drei Hauptattribute

• Stil:DasStilAttribut definiert das Muster des Rahmens.
• Farbe: Die Farbe kann eine beliebige aus dem durch CSS-Farben definierten Satz sein.
• Breite: Die Breite wird verwendet, um die Dicke des Randes zu variieren und ihn hervorzuheben.

Im obigen Beispiel haben wir gesehen, dass nur ein Rahmenattribut definiert ist, nämlich sein Stil. Die anderen Attribute nehmen, wenn sie nicht definiert sind, Standardwerte an. Es gibt ein anderes Attribut namens Radius, das weniger häufig verwendet wird. Es wird verwendet, um die Kanten des Randes abgerundet zu machen.

• Rand-Stil Attribut

Sie werden feststellen, dass es auch die Optionen 'Keine Grenze' und 'Versteckte Grenze' gibt. Ein Entwickler kann es einfach vermeiden, einen Rand zu definieren. Warum sollte er explizit als „versteckter Rand“ definiert werden? Dies erfolgt zur Speicherplatznutzung und zur Ausrichtung mit anderen Elementen auf der Seite.

Rahmenstile können auch innerhalb eines Elements gemischt werden. Zu diesem Zweck können die 4 einzelnen Rahmenseiten mit unterschiedlichen Stilen separat definiert werden. Dies kann auf zwei Arten erfolgen. Definieren Sie entweder alle 4 Seiten in einem einzigen Tag. In diesem Fall beginnt die Zählung in der obersten Zeile und bewegt sich dann im Uhrzeigersinn. Alternativ kann jede der 4 Grenzlinien auch in einzelnen Tags definiert werden. Beide Fälle werden im nächsten Beispiel gezeigt.

• Randfarbe Attribut

Das Farbattribut für einen Rahmen kann auf verschiedene Arten festgelegt werden. Dies ähnelt dem Festlegen der Farbe für andere Elemente. Die Farben können mit einer der folgenden Methoden eingestellt werden:

• Name - Geben Sie einen Farbnamen wie „Blau“ an. Sie können auch einige ausgefallene Farboptionen wie „BlanchedAlmond“ ausprobieren!
• Verhexen - Geben Sie einen Hex-Wert wie '# ff0000' an.
• RGB - Stellen Sie den RGB-Code ein. Zum Beispiel bedeutet rgb (255,255,0) Gelb.
• Rahmen - wie 'transparent' oder 'undurchsichtig'

• Rahmenbreite Attribut:

Die width-Eigenschaft definiert, wie der Name schon sagt, die Dicke der 4 Rahmenseiten. Wenn ein Wert definiert ist, gilt dies für alle Seiten, andernfalls können auch individuelle Breitenwerte festgelegt werden.

Die Breite kann in jeder Standardeinheit angegeben werden, z. B. Pixel ('px'), Punkte ('pt') oder in Zentimetern ('cm'). Sie können die Breite auch mit vordefinierten Werten für 'dick', 'dünn' und 'mittel' angeben.

• Randradius Attribut

Der Zweck des Definierens des Radius besteht darin, abgerundete Ecken für den Rand zu erhalten. Der Radiusfaktor definiert das Ausmaß der Rundung. Je größer der Wert, desto gebogener werden die Ecken. Standardmäßig werden Radiuswerte zwischen dem 1-3-fachen der Randbreite gehalten.

Der folgende Code wird generiert:

Randbreite: 10px
Randradius: 30px

Standardwerte für Rahmenattribute

• Das einzige obligatorische Attribut ist das Stil . Wenn der Stil fehlt, wird der Rahmen nicht angezeigt.

• Wenn die Farbe nicht angegeben wird, wird die Farbe des zugrunde liegenden Elements als Standardwert verwendet. Wenn beispielsweise die Textfarbe eines Absatzes als 'blau' definiert ist, ist die Standardrahmenfarbe ebenfalls blau. Falls selbst für das Element keine Farbdefinition vorhanden ist, lautet die Standardfarbe 'Schwarz'.

• Der Standardwert für die Breite ist 'mittel'.

Grenzen in Kurzschrift definieren

Einige Entwickler bevorzugen es, Rahmenattribute in einem kurzen einzeiligen Tag zu definieren. Dieses Kurzformat hilft bei der Minimierung der Codezeilen, und erfahrene Entwickler bevorzugen dieses Format. Die Verwendung des Kurzformats wird empfohlen, wenn die Rahmendefinition einfach und ziemlich standardisiert ist. Wenn Sie jedoch jede Seite des Rahmens in einem anderen Stil hervorheben müssen, müssen Sie sich an das Format zum Definieren einzelner Tags halten.

Der folgende Code wird verwendet:

Randstil: gestrichelt
Randfarbe: grün
Randbreite: 5px
Rand: gestrichelt grün 5px

Punkte, die beim Entwerfen von Rahmen in CSS beachtet werden müssen

• Verwenden Sie nicht zu viele Ränder auf einer Seite. Dies kann ablenken und den Benutzer beim Fokussieren erschweren.

  Beenden Sie ein Programm in Java

• Es ist wichtig, die Konsistenz des Rahmenstils und der Farben beizubehalten. Elemente auf derselben Hierarchieebene auf einer Seite müssen aus Gründen der Einheitlichkeit einen ähnlichen Rahmenstil und eine ähnliche Breite aufweisen. Zum Beispiel, wenn Absatz ist mit festem Rand und 5px Breite definiert, behalten Sie dieses Format in allen anderen bei Absatz Elemente während des Website-Designs.

• Halten Sie sich an einen Stil von Tag-Definitionen. Einige Entwickler sind mit Verknüpfungsdefinitionen vertraut, bei denen alle Werte einer einzelnen zugewiesen sind Rand Etikett. Einige andere bevorzugen eine explizite Auflistung aller Tags für Breite, Farbe und Stil. Die Konvention ist, dass, wenn auf einer Seite aufwändige Randdekorationen erforderlich sind, die einzelnen Tags separat aufgelistet werden. Dies hilft beim Debuggen solcher benutzerdefinierten Rahmendefinitionen. In normalen Fällen würde nur eine Verknüpfungsdefinition ausreichen.

Ich hoffe, Sie haben die gesuchten Informationen an den CSS-Grenzen gefunden und wDamit sind wir im CSS-Artikel zu Ende.

Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.

Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „Border in CSS“ und wir werden uns bei Ihnen melden.