ホームページ >ウェブフロントエンド >htmlチュートリアル >cssプロパティ
単語 体 属 性別
フォントのプロパティ |
説明 |
フォントファミリー |
指定したフォント名またはフォントファミリーの種類を使用します |
フォントサイズ |
フォント表示のサイズ |
フォントスタイル |
3 つの方法のいずれかを使用して、表示フォントを定義します: 標準 (通常)、イタリック (斜体)、またはオブリーク (斜体) |
フォントの太さ |
フォントを太字にするには、値として太字を使用します |
フォントバリアント |
英語の大文字と小文字の変換を設定する |
|
フォントファミリー: "フォントサイズ: 12 ピクセル; フォントの太さ: 太字; 666666; テキスト装飾: 下線;} |
文 本 属 性
テキスト属性 |
説明 |
文字間隔 |
文字間に追加されるスペースの量を定義します |
単語の間隔 |
単語間に追加されるスペースの量を定義します |
テキスト装飾 |
テキスト変更属性を使用すると、5 つの属性のいずれかでテキストを変更できます |
text-align |
左揃え、右揃え、中央揃え、揃えなど、テキストの水平方向の配置を設定します |
テキストインデント |
テキストの最初の行がインデントされています |
行の高さ |
line-height プロパティは、テキストのベースライン間の間隔を制御する値を受け入れます |
テキスト変換 |
英語テキストの大文字と小文字を制御する |
|
フォント{文字間隔: 2em; テキスト整列: 10px; 単語間隔: 5em; } |
サイドフレーム属性
Border Frameプロパティ |
説明 |
ボーダー |
ボーダー |
ボーダートップ |
|
国境左 |
左枠 |
国境右 |
右枠 |
ボーダーボトム |
の下枠 |
| ボーダーカラー
| 枠線の色
| ボーダースタイル
| ボーダースタイル
| 境界線の幅
| 枠線の幅
| ボーダートップカラー
| 上の境界線の色
| ボーダー左の色
| 左枠の色
| 境界線の右の色
| 右枠の色
| ボーダーボトムカラー
| 下の境界線の色
| ボーダートップスタイル
| トップボーダースタイル
| ボーダー左スタイル
| 下枠スタイル
| ボーダー右スタイル
| 右ボーダースタイル
| ボーダーボトムスタイル
| 下枠スタイル
| ボーダー上部の幅
| 上枠の幅
| ボーダー左幅
| 下の境界線の幅
| ボーダー右幅
| 右枠線の幅
| ボーダー下幅
| 下の境界線の幅
|
| border{ border-top-width: 1px; border-top-style: dotted; border-top-color: #FF0000;}
Border属性設定値
ボーダースタイルの属性値 |
説明 |
なし |
国境なし |
点線 |
境界線は点で構成されています |
ダッシュ |
枠線は短い線で構成されています |
しっかり |
境界線は実線です |
ダブル |
境界線は二重実線です |
グルーヴ |
フレームには立体的な溝が入っています |
尾根 |
境界線が尾根状になっています |
差し込み |
フレームには立体的なフレームが埋め込まれています |
はじめに |
フレームの外側には立体的なフレームが埋め込まれています |
ディン ビット 属 性別
属性の配置 |
説明 |
ポジション |
Absolute (絶対位置決め)、Relative (相対位置決め) |
トップ |
レイヤーと頂点の垂直座標の間の距離 |
左 |
レイヤーと頂点の横座標の間の距離 |
幅 |
レイヤーの幅 |
身長 |
レイヤーの高さ |
Zインデックス |
レイヤーの順序と適用範囲の関係を決定します。より高い値を持つ要素は、より低い値を持つ要素をカバーします |
クリップ |
表示をトリミングされた領域のみに制限します。切り取られた領域は長方形になります。 2つのポイントを設定するだけです。 1つは長方形の左上隅の頂点で、topとrightの設定で完成します。もう一つは右下足の頂点で、下と右の設定で完成です |
オーバーフロー |
レイヤー内のコンテンツがレイヤーの収容可能な範囲を超える場合、表示: レイヤーのサイズに関係なくコンテンツが表示されます。非表示: レイヤーのサイズを超えるコンテンツは非表示になります。コンテンツがレイヤーの範囲を超えるかどうか、この項目を選択すると、レイヤーにスクロール バーが追加されます。自動: コンテンツがレイヤーの範囲を超える場合にのみスクロール バーを表示します |
可視性 |
ネストレイヤーを設定する項目です。ネストレイヤーは他のレイヤーに挿入され、ネストレイヤー(子レイヤー)とネストレイヤー(親レイヤー)に分かれます。継承: 子レイヤーは親レイヤーの表示設定を継承します。親レイヤーが表示されない場合は、子レイヤーも表示されます。表示: 親レイヤーが表示されるかどうかに関係なく、子レイヤーは表示されます。非表示: 親レイヤーが表示されているかどうかに関係なく、子レイヤーは非表示になります。 |
地区ブロックプロパティ
ブロック属性 |
説明 |
幅 |
オブジェクトの幅を設定します |
身長 |
オブジェクトの高さを設定します |
フロート |
テキストを要素の周囲で折り返すようにします |
クリア |
要素の特定の側で周囲のテキストまたはオブジェクトを許可するかどうかを指定します |
パディング |
境界線とコンテンツの間に挿入するスペースの量を決定します。これには、top (上)、right (右)、bottom (下)、および left (左) という 4 つの属性があり、それぞれ上、下、左、および右のパディング距離を設定するために使用されます。 |
マージン |
コンテンツ ブロックと外部要素の間の空間距離を決定します。 それらは次のとおりです: top (上)、right (右)、bottom (下)、および left (左) は、それぞれ上、下、左、および右のパディング距離を設定するために使用されます。 |
|
#alignLeft{float:left;margin:0;padding:0;width:100px;height:100px;clear:both} |
列テーブル属性
プロパティをリストする |
説明 |
リストスタイルタイプ |
ブートリスト項目のシンボルタイプを設定します |
リストスタイル画像 |
プロジェクトのガイドシンボルとして画像を選択してください li{ list-style-image:url(14-25.gif)} |
リスト-スタイル-位置 |
リスト項目のインデントの程度を決定します |
シンボルタイプの属性値をリストする
シンボルタイプの属性値をリストする |
説明 |
ディスク |
テキスト行の前に「●」黒丸を追加します |
サークル |
テキスト行の前に「○」の白丸を追加します |
スプアレ |
テキスト行の前に「■」黒四角を追加します |
10進数 |
加 テキスト行の前に通常のアラビア数字を追加します
|
小ローマ字
|
加 テキスト行の前に小文字のローマ数字を追加します
|
加 テキスト行の前に Rome を追加しました |
|
テキスト行の前に小文字の英字を追加します |
|
テキスト行の前に大文字の英字を追加します |
|
| 黒丸や数字は表示されません
|
#alignLeft li { list-style-image: url(images/arrow1.gif); |
list-style-type: none;list-style-position: 外側;}
|
| 説明
外 |
||||||||||||||||||||
リストは左端の近くにあります
|
内部 |
||||||||||||||||||||
リストのインデント
|
/*コメントの書き方*/ ボディ{ /*テキスト属性*/ font-size:12px;/*テキストサイズ*/ color:#CCCCCC;/*テキストカラー*/ font-family:Arial、Helvetica、sans-serif;/*フォントを設定*/ font-weight:bold;/*太字のテキスト*/ text-align:center;/*DIVタグの内側の水平方向は中央または左、右*/ text-decoration:underline;/*下線下線なしはnone*/ line-height:150%;/*行の高さはピクセルpx*/ でも構いません/*背景属性*/ /*背景色*/ background-image:url(images/test.gif);/*背景画像*/ background-repeat:no-repeat;/*背景画像はタイル化されません*/ background-position:5px 10px;/*背景画像の位置、最初は横座標、2番目は縦座標*/ /*パディングとボーダーのプロパティ*/ 高さ: 100ピクセル; margin:10px 0 5px 0;/*コンテナの外部マージン順序はtop right bottom leftで、0の場合は単位は必要ありません*/ margin-top:10px; /*単一項目の書き方 */ padding:10px 0 5px 0;/*コンテナの内部マージン、順序は top right bottom left、0 の場合、単位は必要ありません*/ float:left; /*1。列構造を作成する場合は left right と */ のみを使用します。/*属性のリスト*/ list-style-type:none;/*ul 順序なしリスト li*/ の前にある小さな黒い点を削除します。display:block;/*ブロック形式で表示され、通常はリンク内でマウスオーバー効果を実現するために使用されます*/ display:inline;/*float使用時に横に移動したDIVの外側の余白が2倍になる場合のみ使用してください*/ /*境界線属性*/ border:1px Solid #ccc;/*テーブル、DIV、LI、A、およびその他のコンテナの境界線属性、点線は破線*/ overflow:hidden;/*オーバーフロー部分を非表示*/ overflow:auto;/*コンテナの高さを自動的に決定し、垂直スクロールバーを自動的に表示/非表示にすることを選択します*/ /*特別な属性、無理に習得する必要はありません*/ /*テキストの縦配置:*/writing-mode: tb-rl; /*所定の形式*/ <p>/*文字間隔*/ Letter-spacing:5px;</p> <p>/*単語間隔*/ word-spacing:5px;</p> <p>}</p>
|