CSSソリッドってどういう意味ですか？-CSSチュートリアル-php.cn

CSSソリッドってどういう意味ですか？

anonymity

リリース： 2019-05-28 11:06:03

オリジナル

19804 人が閲覧しました

Border は CSS のプロパティです。これを使用して、範囲を決定できる HTML タグ (TD、DIV など) の境界線を描画できます。テキストに境界線を追加したり、ナビゲーションメニューに区切り線を追加したりできます。共有しましょう例を挙げてみましょう。興味のある友達はそれについて学ぶことができます。

Web ページを作成したことがある人なら、線引きに悩んだ経験があると思います。まずは CSS の属性である「Border」について知ってみましょう, 範囲を決定できる HTML タグ (TD、DIV など) の境界線を描画するために使用できます。境界線の種類、幅、色を定義できます。この機能を使用すると、特別な境界線を作成できます。効果。

CSSソリッドってどういう意味ですか？

style="border:thin solid red"

ログイン後にコピー

「border」の後の 3 つのパラメータの意味は次のとおりです: 境界線の幅: 細い (細い線); 境界線の種類: 実線 (実線) ;境界線の色: 赤。

枠線の幅は、細(細い線)、中(中くらいの太い線)、太い(太い線)の3つの標準値があり、

1.枠線を追加します。テキストへ

上記の例では、境界線の色と太さが可変であることを示すために、テキストにさまざまな境界線が追加されています。

最初の境界線の CSS コードは次のとおりです: style="border:thin Solid red";

「border」の後の 3 つのパラメーターの意味は次のとおりです: 境界線の幅は次のとおりです。：細（細線）、枠線の種類：実線（実線）、枠線の色：赤（赤）。

枠線の幅は、細(細い線)、中(中くらいの太い線)、太い(太い線)の3つの標準値があります。カスタマイズ可能、1pt、5px、2cmなど。

境界線の種類には、次の 9 つの明確な値があります: none (境界線なし)、dotted (点で構成される破線)、dased (短い線で構成される破線)、solid (実線)、double ( double) line、二重線の幅とその間の空白部分の幅を合わせた幅がborder-width)、groove（3D溝状ボーダー）、ridge（3Dリッジ状ボーダー）、insetで定義される幅に等しい(3D インライン境界線、濃い色)、アウトセット (3D 外部境界線、明るい色)、

注: システムがこれらの境界線の属性値をサポートしていない場合は、「点線」、「「破線」、「二重」、「溝」、「尾根」、「インセット」、「アウトセット」はすべて「実線」に置き換えられます。

境界線の色: #00ffcc などの 16 進数の色コードを使用できます。

上記の例からわかるように、テキストに枠線を追加するのは非常に簡単です。上記の例では、次の枠線の設定は説明しなくても理解できます。ちょっとしたコツです。テキストに枠線を追加するには、

タグに CSS を追加します。複数のテキストに枠線を追加するには、まずそれらのテキストを DIV タグで囲み、

タグ、DIV> タグに CSS を追加します。テキスト行に複数の異なる境界線を追加する場合は、テキストを表に配置してから、CSS をタグにそれぞれ追加する必要があります。

2. ナビゲーションメニューに分割線を追加します

上の例の小さな白い線は、もちろん画像でもできますが、ここではCSSの拡張子「border」を使用しています。 " 属性は境界線の片側を描画するため、コードははるかに少なくなります。単一辺の境界線は、上記の例の境界線の 4 辺と同様であり、境界線の 4 辺の属性は次のとおりです:

境界線名: border-top (上部境界線) )、border-right (右の境界線)、border-bottom (下の境界線)、border-left (左の境界線) の各境界線の種類、幅、色は「boder」属性と同じです。たとえば、この例では、各セルの左境界線を白線、線の幅を「1px」の実線として定義したい場合のCSSコードは次のとおりです。 : 1px ソリッド #ffffff」。

境界線を個別に定義する場合、特定の値が指定されていない場合は、デフォルトの初期値が使用されます。コードを書かずに Dreamweaver で CSS を定義できるのは非常に便利です。よく使用する境界線を一度定義して、外部 CSS ファイルに配置しておくと、必要なときに呼び出すことができ、非常に便利です。

3. 境界線に異なる幅と色の境界線を使用する

この例の効果は、上記の例の方法を使用して実現できますが、それには非常に多くのコードが必要になります。別のマージ方法を使用して、4 つの辺の属性値をまとめて分類することもできます。たとえば、この例のコードは次のとおりです。境界線の種類と幅を分類します色の分類とともに定義されますここでいくつかの点に注意してください:

1. 4 つの境界線の位置の順序は、上境界線、右境界線です。 , 下の境界線, 左の境界線;

2. この例では、境界線の種類として 1 つの実線のみを選択しました。実際には、4 つの辺をそれぞれ異なる種類で定義することもできます。 ##

三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：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>

ログイン後にコピー

以上がCSSソリッドってどういう意味ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。