cssプロパティ

Sep 21, 2016 pm 01:56 PM
cssプロパティ

単語 性別

フォントのプロパティ

説明

フォントファミリー

指定したフォント名またはフォントファミリーの種類を使用します

フォントサイズ

フォント表示のサイズ

フォントスタイル

3 つの方法のいずれかを使用して、表示フォントを定義します: 標準 (通常)、イタリック (斜体)、またはオブリーク (斜体)

フォントの太さ

フォントを太字にするには、値として太字を使用します

フォントバリアント

英語の大文字と小文字の変換を設定する

フォントファミリー: "フォントサイズ: 12 ピクセル; フォントの太さ: 太字; 666666; テキスト装飾: 下線;}

テキスト属性

説明

文字間隔

文字間に追加されるスペースの量を定義します

単語の間隔

単語間に追加されるスペースの量を定義します

テキスト装飾

テキスト変更属性を使用すると、5 つの属性のいずれかでテキストを変更できます

text-align

左揃え、右揃え、中央揃え、揃えなど、テキストの水平方向の配置を設定します

テキストインデント

テキストの最初の行がインデントされています

行の高さ

line-height プロパティは、テキストのベースライン間の間隔を制御する値を受け入れます

テキスト変換

英語テキストの大文字と小文字を制御する

フォント{文字間隔: 2em; テキスト整列: 10px; 単語間隔: 5em; }

サイドフレーム属性

边边 ボーダーカラー枠線の色ボーダースタイルボーダースタイル境界線の幅枠線の幅ボーダートップカラー上の境界線の色ボーダー左の色左枠の色 境界線の右の色右枠の色ボーダーボトムカラー 下の境界線の色 ボーダートップスタイルトップボーダースタイルボーダー左スタイル 下枠スタイル ボーダー右スタイル右ボーダースタイル ボーダーボトムスタイル 下枠スタイル ボーダー上部の幅 上枠の幅ボーダー左幅 下の境界線の幅 ボーダー右幅右枠線の幅 ボーダー下幅 下の境界線の幅 border{ border-top-width: 1px; border-top-style: dotted; border-top-color: #FF0000;}

Border Frameプロパティ

説明

ボーダー

ボーダー

ボーダートップ

国境左

左枠

国境右

右枠

ボーダーボトム

の下枠

🎜 🎜

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

属性の配置

説明

ポジション

Absolute (絶対位置決め)、Relative (相対位置決め)

トップ

レイヤーと頂点の垂直座標の間の距離

レイヤーと頂点の横座標の間の距離

レイヤーの幅

身長

レイヤーの高さ

Zインデックス

レイヤーの順序と適用範囲の関係を決定します。より高い値を持つ要素は、より低い値を持つ要素をカバーします

クリップ

表示をトリミングされた領域のみに制限します。切り取られた領域は長方形になります。 2つのポイントを設定するだけです。 1つは長方形の左上隅の頂点で、topとrightの設定で完成します。もう一つは右下足の頂点で、下と右の設定で完成です

オーバーフロー

レイヤー内のコンテンツがレイヤーの収容可能な範囲を超える場合、表示: レイヤーのサイズに関係なくコンテンツが表示されます。非表示: レイヤーのサイズを超えるコンテンツは非表示になります。コンテンツがレイヤーの範囲を超えるかどうか、この項目を選択すると、レイヤーにスクロール バーが追加されます。自動: コンテンツがレイヤーの範囲を超える場合にのみスクロール バーを表示します

可視性

ネストレイヤーを設定する項目です。ネストレイヤーは他のレイヤーに挿入され、ネストレイヤー(子レイヤー)とネストレイヤー(親レイヤー)に分かれます。継承: 子レイヤーは親レイヤーの表示設定を継承します。親レイヤーが表示されない場合は、子レイヤーも表示されます。表示: 親レイヤーが表示されているかどうかに関係なく、子レイヤーが表示されます。非表示: 親レイヤーが表示されているかどうかに関係なく、子レイヤーは非表示になります。 css

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

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

動的な背景効果の作成: CSS プロパティの柔軟な使用 動的な背景効果の作成: CSS プロパティの柔軟な使用 Nov 18, 2023 pm 03:56 PM

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

CSS での溝は何を意味しますか CSS での溝は何を意味しますか Apr 28, 2024 pm 04:12 PM

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

HTMLの点線枠を設定する方法 HTMLの点線枠を設定する方法 Apr 05, 2024 am 09:36 AM

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

Lauiuiで背景画像を設定する方法 Lauiuiで背景画像を設定する方法 Apr 26, 2024 am 02:45 AM

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 ページのテキストの折り返し効果を実現するにはどうすればよいですか? CSS3 プロパティを使用して Web ページのテキストの折り返し効果を実現するにはどうすればよいですか? Sep 08, 2023 am 10:30 AM

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

WordPress Webサイトのヘッダーがずれている問題を解決するにはどうすればよいですか? WordPress Webサイトのヘッダーがずれている問題を解決するにはどうすればよいですか? Mar 01, 2024 am 09:54 AM

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

クールなスクロール効果を実現するための CSS プロパティ テクニック クールなスクロール効果を実現するための CSS プロパティ テクニック Nov 18, 2023 am 09:08 AM

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

See all articles