ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML 境界線のスタイル
HTML 境界線のスタイル
- PHPzオリジナル
- 2024-09-04 16:50:291036ブラウズ
パディングとマージンの周囲のスペースはボーダーと呼ばれます。境界線スタイルのプロパティは、要件に応じて 1 ～ 4 つの値を取ることができます。クライアントがすべての面を同じ境界線スタイルにしたい場合は、border-style プロパティを使用して 1 つの値で実現できます。クライアントが上下左右で同じ境界線スタイルの異なる境界線デザインを希望する場合は、border-style プロパティを使用して 3 つの値でそれを行うことができます。クライアントが上辺と下辺に同じ境界線スタイルを希望し、左側と右側も同じ境界線タイプを持つ場合は、2 つの境界線スタイルの値を使用できます。クライアントが異なる境界線の 4 つの側面すべてを必要とする場合は、border-style プロパティを使用して 4 つの値によって実現できます。また、border-left、border-right、border-top、border-bottom プロパティを使用して、一度に 1 つの境界線スタイルのみを適用することもできます。
パディング、マージン、ボーダーの違い。
すべてのページに共通のスタイルがあることがわかっているため、私たちは常に HTML よりも CSS を優先しました。
枠線スタイルは HTML でどのように機能しますか?
- border-style プロパティを使用してコンテンツまたは画像の周囲の境界線を取得します.
- デモ用に構文の下のリファラーを使用できます。
構文 1:
div
{
border-style: value1, value2, value3, value4; //border style values
}
構文 1 説明:
4 つの値を持つボーダー スタイルを適用する場合、最初の値は上に、2 番目の値は右に、3 番目の値は下に、4 番目の値は左にそれぞれ適用されます。
構文 2:
div
{
border-style: value1, value2, value3; //border style values
}
構文の説明:
3 つの値を持つボーダースタイルを適用すると、最初の値は上に、2 番目の値は左と右に、3 番目の値は下にそれぞれ適用されます。
構文 3:
div
{
border-style: value1, value2; //border style values
}
構文の説明:
2 つの値で境界線スタイルを適用する場合、最初の値は上と下に適用され、2 番目の値は左と右にそれぞれ適用されます。
構文 4:
div
{
border-style: value//border style value
}
構文の説明:
- 値を 1 つだけ指定してボーダー スタイルを適用する場合は、4 辺すべてに均等に適用します。
冒頭で述べたように、上、右、下、左などの片側にのみボーダー スタイルを追加したい場合。以下の構文を使用できます。
構文 1:
div
{
border-top-style: value//border top side value
}
構文 2:
div
{
border-right-style: value//border right side value
}
構文 3:
div
{
border-bottom-style: value//border bottom side value
}
構文 4:
div
{
border-left-style: value//border left side value
}
HTML 枠線スタイルの例
以下は HTML 境界線スタイルの例です:
例 #1
4 つの値を持つボーダー スタイル プロパティとボーダートップ スタイル プロパティ。
コード:
<!DOCTYPE html>
<html>
<head>
<title>border style</title>
</head>
<style>
.style1
{
border-style:solid dotted dashed double;
border-color:brown;
border-width:10px;
font-size: 20px;
}
.style2
{
border-top-style:solid;
border-color:blue;
border-width:10px;
font-size:20px;
}
</style>
<body>
<font color="green"><h2>Border style property with 4 values and border
top style property</h2></font>
<p class="style1">Hi, I am designed with border style property by 4
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border top style property.</p>
</body>
</html>
出力:
説明:
- 上記の CSS コードでわかるように、style1 クラスはボーダー スタイル プロパティ用で、上が実線、右が点線、下が点線のように、境界線の 4 つのボーダー スタイルすべてに適用されます。破線と左は二重線です。
- style2 クラスはボーダートップスタイルプロパティ用で、トップボーダースタイルの値をソリッドに適用します。
例 #2
3 つの値を持つ境界線スタイル プロパティと境界線右スタイル プロパティ。
コード:
<!DOCTYPE html>
<html>
<head>
<style>
.style1
{
border-style:solid double dashed;
border-color:aqua;
border-width:10px;
font-size: 20px;
width: 800px;
}
.style2
{
border-right-style:solid;
border-color:brown;
font-size: 20px;
border-width:10px;
width: 800px;
}
</style>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderStyle3ValuesAndRight.css">
<title>border style</title>
</head>
<body>
<font color="green"><h2>Border style property with 3 values and border
right style property</h2></font>
<p class="style1">Hi, I am designed with border style property by 3
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border right style property.</p>
</body>
</html>
出力:
説明:
- 上記の CSS コードでわかるように、style1 クラスはボーダー スタイル プロパティ用で、上は実線、左右は二重線、下は 3 つのボーダー スタイルすべてに適用されます。それぞれ破線で示します。
- style2 クラスは右ボーダー スタイル プロパティ用で、右ボーダー スタイルの値がソリッドに適用されます。
例 #3
2 つの値を持つボーダー スタイル プロパティとボーダーボトム スタイル プロパティ。
コード:
<!DOCTYPE html>
<html>
<head>
<title>border style</title>
</head>
<style>
.style1
{
border-style:groove ridge;
border-color:teal;
border-width:10px;
font-size: 20px;
width: 800px;
}
.style2
{
border-bottom-style:double;
border-color:red;
font-size: 20px;
border-width:10px;
width: 800px;
}
</style>
<body>
<font color="green"><h2>Border style property with 2
values and border bottom style property</h2></font>
<p class="style1">Hi, I am designed with border style property by 2
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border bottom style
property.</p>
</body>
</html>
出力:
説明:
- 上記の CSS コードでわかるように、style1 クラスは境界線スタイル プロパティ用であり、境界線の 2 つの境界線スタイルすべてに適用されます。たとえば、上と下は溝線として、右と左はそれぞれ稜線として適用されます。
- style2 クラスは border-bottom スタイル プロパティ用で、下側のボーダー スタイルの値を double に適用します。
例 #4
単一の値を持つ境界線スタイル プロパティと境界線左スタイル プロパティ。
コード:
<!DOCTYPE html>
<html>
<head>
<title>border style</title>
</head>
<style>
.style1
{
border-style:double;
border-color:maroon;
border-width:10px;
font-size: 20px;
width: 800px;
}
.style2
{
border-left-style:double;
border-color:purple;
font-size: 20px;
border-width:10px;
width: 800px;
}
</style>
<body>
<font color="green"><h2>Border style property with Single
value and border left style property</h2></font>
<p class="style1">Hi, I am designed with border style property by single
value (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border left style
property.</p>
</body>
</html>
出力:
説明:
- 위 CSS 코드에서 볼 수 있듯이 style1 클래스는 border-style 속성에 대한 것으로, 위쪽, 오른쪽, 아래쪽, 왼쪽과 같은 단일 테두리 스타일을 각각 이중선, 오른쪽으로 적용했습니다.
- style2 클래스는 border-left 스타일 속성으로 left border-style 값을 double로 적용했습니다.
결론
테두리 스타일 속성은 1, 2, 3, 4개의 값을 적용할 수 있으며 border-top-style, border-right-style, border-bottom-style 및 border-left-style을 한 번에 하나씩 적용할 수 있습니다. .
以上がHTML 境界線のスタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。