ホームページ > 記事 > ウェブフロントエンド > CSSソリッドってどういう意味ですか？
CSSソリッドってどういう意味ですか？
- anonymityオリジナル
- 2019-05-28 11:06:0319776ブラウズ
Border は CSS のプロパティです。これを使用して、範囲を決定できる HTML タグ (TD、DIV など) の境界線を描画できます。テキストに境界線を追加したり、ナビゲーション メニューに区切り線を追加したりできます。共有しましょう例を挙げてみましょう。興味のある友達はそれについて学ぶことができます。
Web ページを作成したことがある人なら、線引きに悩んだ経験があると思います。まずは CSS の属性である「Border」について知ってみましょう, 範囲を決定できる HTML タグ (TD、DIV など) の境界線を描画するために使用できます。境界線の種類、幅、色を定義できます。この機能を使用すると、特別な境界線を作成できます。効果。
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 サイトの他の関連記事を参照してください。