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> ログイン後にコピー
|

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネント スタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。

動的な背景効果を作成する: Web デザインにおける CSS 属性の柔軟な使用、背景効果は非常に重要な部分であり、Web サイトに鮮やかな雰囲気を追加し、ユーザー エクスペリエンスを向上させることができます。 Web ページのスタイル デザインの主要な言語として、CSS は柔軟性と多様性を最大限に発揮し、さまざまな動的な背景効果を作成するための豊富な属性とテクニックを提供します。この記事では、特定のコード例を使用して、いくつかの一般的な CSS プロパティを柔軟に使用して、素晴らしい動的な背景効果を実現する方法を紹介します。 1. グラデーション背景 グラデーション背景は Web ページに魅力を加え、Web ページをより魅力的にします。

CSS では、groove は溝のような効果を生み出す境界線のスタイルを表します。具体的なアプリケーションは次のとおりです。 CSS プロパティの border-style:groove を使用します。溝の形をした境界線には、凹状の内側のエッジ、盛り上がった外側のエッジ、および影の効果があります。

HTML では、CSS border-style 属性を使用して境界線を点線に設定できます。点線の境界線を設定する要素を決定します。たとえば、段落を表すには p 要素を使用します。点線のスタイルを設定するには、border-style 属性を使用します。たとえば、dotted は点線を表し、dashed は短い破線を表します。 border-width、border-color、border-position などの他の境界プロパティを設定して、境界の幅、色、位置を制御します。

layui で背景画像を設定するには 2 つの方法があります。CSS スタイルを使用する: body {background-image: url("path/to/image.jpg") }layui API を使用する:layui.use('element', function() ) { element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}') });

CSS3 プロパティを使用して Web ページのテキストの折り返し効果を実現するにはどうすればよいですか?最新の Web デザインでは、テキストの折り返し効果は一般的で興味深いプレゼンテーション方法です。 CSS3 プロパティを使用すると、Web テキストの折り返し効果を簡単に実現できます。この記事では、一般的に使用されるいくつかの CSS3 プロパティと、テキストの折り返し効果を実現する際のそのアプリケーションを紹介します。 1. Float 属性 float 属性は、CSS で要素の float を設定するために使用される属性です。クリア属性と組み合わせると、画像の周囲にテキストが回り込むような効果を得ることができます。以下に例を示します:&

WordPress Webサイトのヘッダーがずれている問題を解決するにはどうすればよいですか? WordPress サイトでヘッドの位置がずれている問題が発生すると、混乱してイライラすることがあります。この問題は、CSS スタイルのエラー、JavaScript の競合、プラグインの問題など、さまざまな理由によって発生する可能性があります。この記事では、WordPress のヘッダーのずれの問題を解決する方法について説明し、具体的なコード例を示します。 1. CSS スタイルを確認する まず、テーマの CSS スタイル シートにエラーや競合がないか確認します。

クールなスクロール効果を実現する CSS プロパティ テクニックには、特定のコード サンプルが必要です。CSS は Web デザインに不可欠な部分です。CSS を通じてさまざまな効果を実現し、Web ページのインタラクティブなエクスペリエンスを向上させることができます。その中でも、スクロール効果は非常に一般的で非常にクールな効果であり、滑らかなアニメーション効果で Web ページ要素を指定した位置までスクロールさせることができます。この記事では、クールなスクロール効果を実現するための CSS プロパティ テクニックをいくつか紹介し、具体的なコード例を示します。 1. CSS プロパティのscroll-behaviorを使用してスムーズなスクロールを実現します。
