Was bedeutet CSS Solid?

Rand (Zeichnungsrahmen) ist eine Eigenschaft von CSS. Sie können damit Rahmen für HTML-Tags zeichnen, die den Bereich bestimmen können (z. B. TD, DIV usw.). Navigationsmenüs. Lassen Sie mich ein Beispiel mit Ihnen teilen.

Menschen, die Webseiten erstellt haben, machen sich zunächst Gedanken über das Zeichnen von Linien. Das ist ein CSS-Attribut, mit dem Sie Rahmen für HTML-Tags zeichnen können, die den Bereich bestimmen können (z. B. TD, DIV usw.). Mit dieser Funktion können Sie den Typ, die Breite und die Farbe der Rahmenlinie definieren können Sie einige Spezialeffekte erstellen.

style="border:thin solid red"

Die Bedeutung der drei Parameter nach „Grenze“ ist: Die Breite der Grenzlinie ist: dünn (dünne Linie); die Art der Grenzlinie: durchgezogen ( durchgezogene Linie) ;Farbe der Randlinie: rot.

Die Breite der Randlinie hat drei Standardwerte: dünn (dünne Linie), mittel (mitteldicke Linie) und dick (dicke Linie),

1. Fügen Sie einen Rand hinzu zum Text

Im obigen Beispiel werden einem Textstück unterschiedliche Ränder hinzugefügt, nur um zu veranschaulichen, dass die Farbe und die Dicke der Randlinie variabel sind.

Der CSS-Code des ersten Rahmens lautet: style="border:thin solid red"

Die Bedeutung der drei Parameter nach „border“ ist: Die Breite der Randlinie ist : dünn (dünne Linie); Randlinientyp: durchgezogen (durchgezogene Linie); Randlinienfarbe: rot (rot).

Die Breite der Randlinie hat drei Standardwerte: dünn (dünne Linie), mittel (mitteldicke Linie) und dick (dicke Linie).

Darüber hinaus kann die Breite auch sein angepasst, wie zum Beispiel: 1pt, 5px, 2cm usw.

Der Typ der Grenzlinie hat neun eindeutige Werte: keine (keine Grenzlinie), gepunktet (gestrichelte Linie aus Punkten), gestrichelt (gestrichelte Linie aus kurzen Linien), durchgezogen (durchgezogene Linie), doppelt ( Doppellinie, die Breite der Doppellinie plus die Breite des leeren Teils dazwischen entspricht der Breite, die durch „Rahmenbreite“, „Rillen“ (3D-Rillenformrand), „Rillen“ (3D-Rillenformrand) und „Einsatz“ definiert wird (3D-Inline-Rand, dunklere Farbe), Anfang (3D-Außenrand, hellere Farbe),

Hinweis: Wenn das System die Attributwerte dieser Ränder nicht unterstützt, dann „gepunktet“, „ „gestrichelt“, „doppelt“, „Rille“, „Rippe“, „Einsatz“ und „Anfang“ werden alle durch „durchgezogen“ ersetzt.

Farbe der Randlinie: Sie können einen hexadezimalen Farbcode verwenden, z. B. #00ffcc.

Wie Sie oben sehen können, ist es tatsächlich sehr einfach, Rahmen zu Text hinzuzufügen. Sie werden die Einstellungen der folgenden Rahmen im obigen Beispiel verstehen, ohne sie überhaupt zu erklären! Hier ist ein kleiner Trick für Sie: Um einem Textabschnitt einen Rahmen hinzuzufügen, können Sie CSS zum

-Tag hinzufügen. Um einen Rahmen zu mehreren Textabschnitten hinzuzufügen, schließen Sie diese Textabschnitte zunächst mit DIV-Tags ein Fügen Sie dann CSS zum

-Tag hinzu. Wenn Sie einer Textzeile mehrere verschiedene Ränder hinzufügen möchten, müssen Sie den Text in einer Tabelle platzieren und dann CSS zum

-Tag hinzufügen.

2. Fügen Sie dem Navigationsmenü eine Trennlinie hinzu

Die kleine weiße Linie im obigen Beispiel kann natürlich mit einem Bild gemacht werden, aber hier verwende ich die CSS-Erweiterung „border“ Das Attribut zeichnet eine Seite des Rahmens, sodass der Code viel kleiner ist. Die einzelne Seite der Grenze ähnelt den vier Seiten der Grenze im obigen Beispiel. Die Attribute der vier Seiten einer Grenze sind wie folgt:

Name der Grenzlinie: border-top (obere Grenzlinie). ), border-right (rechte Randlinie), border-bottom (untere Randlinie) und border-left (linke Randlinie); Typ, Breite und Farbe jeder Randlinie sind die gleichen wie beim Attribut „boder“. In diesem Beispiel möchten Sie beispielsweise die linke Randlinie jeder Zelle als weiße Linie und die Breite der Linie als durchgezogene Linie von „1px“ definieren. Der CSS-Code lautet wie folgt: style="border-left : 1px solide #ffffff".

Wenn bei der individuellen Definition der Grenzlinie ein bestimmter Wert nicht angegeben wird, wird der Standardanfangswert verwendet. Es ist sehr praktisch, CSS in Dreamweaver zu definieren, ohne Code zu schreiben; es ist sehr praktisch, häufig verwendete Grenzlinien einmal zu definieren und sie in eine externe CSS-Datei einzufügen. Sie können sie einfach aufrufen, wenn Sie sie benötigen.

3. Verwenden Sie Rahmenlinien unterschiedlicher Breite und Farbe in einem Rahmen

Der Effekt in diesem Beispiel kann natürlich mit der Methode im obigen Beispiel erreicht werden, aber das würde zu viel Code erfordern . Eine andere Zusammenführungsmethode kann verwendet werden, um die Attributwerte der vier Seiten zusammenzufassen. Der Code in diesem Beispiel lautet beispielsweise wie folgt:

style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

Wie aus dem Obigen ersichtlich ist, I Typ und Breite der Randlinie werden zusammen mit der Farbklassifizierung definiert. Bitte beachten Sie hier einige Punkte:

1 Die Positionsreihenfolge der vier Randlinien ist: obere Randlinie, rechte Randlinie , untere Randlinie, linke Randlinie;

2 In diesem Beispiel habe ich nur einen durchgezogenen Linientyp als Grenzlinientyp gewählt. Tatsächlich können die vier Seiten auch mit unterschiedlichen Typen definiert werden 🎜>

三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。 

Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。 

例子： 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</title> 
<style type="text/css"> 
<!-- 
#layout { 
border: 2px solid #A9C9E2; 
background-color: #E8F5FE; 
height: 200px; 
width: 300px; 
} 
--> 
</style> 
</head> 
<body> 
<div id="layout">hfhfg</div> 
</body> 
</html>

Das obige ist der detaillierte Inhalt vonWas bedeutet CSS Solid?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!