自分で整理した DIV の一般的に使用される属性の包括的なリスト_HTML/Xhtml_Web ページ制作

1. 属性リスト

コードをコピーします

コードは次のとおりです:

color: #999999 文字色
font-family: 歌風フォント
font-size: 10pt 文字サイズ
font-style:itelic 斜体文字スタイル
font-variant:small- caps small フォント
letter-spacing: 1pt テキスト間隔
line-height: 200% 行の高さを設定
font-weight:bold テキスト太字
vertical-align:sub 下付き文字
vertical -align :super Superscript
text-decoration:line-through ?h を追加して line
text-decoration:overline 先頭行を追加
text-decoration:underline 下線を追加
text-decoration: none ?hExcept最後の行を接続するための
text-transform: Capitalize 最初の単語は大文字になります
text-transform: 英語の大文字化
text-transform: 英語の小文字表記
text-align:right Text * right- aligned
text-align:left text*leftalignment
text-align:center text centeralignment
これらは、CSS ページに適用できるいくつかの単純なテキスト効果です。
背景
background-color: black 背景色
background-image: url(image/bg.gif) 背景画像
background-attachment: 固定 固定背景
background-repeat: 繰り返し 繰り返し配置 - Web ページのデフォルト
background-repeat: no-repeat 非繰り返し配置
background-repeat:repeat-x は配置を x 軸で繰り返します
background-repeat:repeat-y は配置を繰り返しますy 軸
background-position: 90% 90% 背景画像の x 軸と y 軸の位置
Link
A すべてのハイパーリンク
A:link ハイパーリンクのテキスト形式
A :visited 閲覧したリンクのテキスト形式
A:active 接続形式を押します
A:hover マウスを接続に移動します
Border
border-top: 1px 塗りつぶした黒の上部フレーム
border-bottom : 1px 実線 #6699cc 下枠
border-left : 1px 実線 #6699cc 左枠
border-right : 1px 実線 #6699cc 右枠
border: 1px 実線 #6699cc 4 つの枠線
点線
<br>実線<br><TEXTAREA STYLE="border:1px 実線ピンク"><br />div の高さを次のように設定します。テキストの行の高さと同じ、つまり line-height と height の値が同じであれば十分です。 最後に、div に overflow:hidden を与えて余分な部分を非表示にします。 <br /></div><br /><strong> 2. 共通属性 </strong> <br /> <br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));"><u>コードをコピー</u></span></div>コードは次のとおりです:</div><div class="msgborder" id="phpcode95"> <br />1. 高さ: DIV の高さを設定します。 幅: DIV の幅を設定します。 <br />2. マージン: DIV の拡張マージン (親コンテナまでの距離) を設定するために使用されます。 margin: 親コンテナの上、右、下、左からそれぞれ 4 つの距離が続きます。 margin: [top][right][bottom][left] <br /> は個別に設定できます: margin-left: までの距離親コンテナの左境界までの距離 margin-right: 親コンテナの右境界までの距離 margin-bottom: 親コンテナの下境界までの距離親コンテナ。 <br />3. パディング: DIV の内側のマージン (内側の要素と DIV 境界の間の距離) を設定するために使用されます。パディング: 親コンテナの上、右、下、左からの距離である 4 つの距離が続きます。マージン: [上][右][下][左]: によって設定される距離に注意してください。パディングは、独自の幅と高さ内 (IE7 および FF) には含まれません。たとえば、DIV の幅が 100 ピクセルに設定され、padding-left が 50 ピクセルに設定されている場合、DIV の幅は 150 ピクセルになります。ページに表示されます。 <br />4. 境界線: DIV の境界線のスタイルを設定します。表示: 表示属性を設定します。その値には、ブロックとなしが含まれます。ページ上の DIV のフロー方向を設定します。その値には、左 (左側に表示)、右 (右側に表示)、およびなしが含まれます。 DIV の背景スタイルを設定します。背景の後に、背景色、背景画像、タイリング方法などのスタイルを直接指定できます。次のプロパティを使用して個別に設定することもできます。 <br />background-color: 背景色を設定します。background-attachment: 背景画像の添付方法、その値はスクロールおよび固定です。background-repeat: 既存の背景画像を指定します。背景画像のタイリング方法。その値には、 no-repeat (タイル化されない)、repeat (2 方向にタイル化される)、repeat-x (水平方向にタイル化される)、repeat-y (垂直方向にタイル化される) が含まれます。その値には、上、下、左、右のさまざまな組み合わせがあります。座標を使用して特定の場所を指定することもできます。 <br />5.位置：DIVの位置決め方法を設定します。位置には、静的、固定、相対、および絶対の 4 つの属性があります。一般的に使用されるのは相対的と絶対的です。静的として指定されている場合、DIV は HTML ルールに従います。相対として指定されている場合は、top、left、right、bottom を使用してページ内での DIV のオフセット (独自のオフセットを基準とした) を設定できます。現時点ではレイヤーは使用できません。固定として指定されている場合は、上、左、右、下を使用して DIV を絶対的に配置できます。 IE7 と FF の DIV は画面に対して固定されており、IE6 では影響がありません (理由はわかりません)。 <br />6. フォント: DIV でテキストのスタイルを指定します。その後にテキストの複数のスタイルを指定できます。 font-family: 使用するフォント名を設定します。 font-weight: テキストの太さを指定します。その値には、太字、太字、太字などの値が含まれます。テキストのスタイルを指定します。その値には斜体、通常の斜体などが含まれます。 color: テキストの色を指定します。 text-align: テキストの水平方向の配置を指定します。その値には、中央 (中央) のテキストが含まれます。 -decorator: テキストの装飾に使用されます。その値には、下線、上線、ブリンクの組み合わせが含まれます。text-indent: テキストのインデントを設定します。text-transform: テキストの大文字と小文字を設定します。その値には、小文字、大文字、大文字化 (最初の文字を大文字にする) が含まれます。 方向: コンテンツのフロー方向。その値には、ltr (左から右)、rtl (右から左) が含まれます。 line-height: テキストの行の高さを指定します。 Word-spacing: 単語の間隔。 <br />7. オーバーフロー: コンテンツのオーバーフロー制御。その値には、scroll (スクロール バーは常に表示されます)、visible (スクロール バーは表示されませんが、余分な部分は表示されます)、auto (コンテンツが表示されるときにスクロール バーが表示されます) が含まれます。を超えます）、および非表示（コンテンツがコンテンツを超えるとスクロールバーが表示されます）。 <br /><br /><br /><strong>3. いくつかの特殊効果: <br /><br /></strong>1. z-index: DIV のスタック順序を設定します。 z-index 属性を使用する場合は、位置を絶対として指定する必要があります。 <br /><br />2. カーソル: DIV 上のカーソルのスタイルを設定します。 <br /><br />3. クリップ: クリッピング長方形を設定します。 Clip:rect(top rightbottom left); 上下左右の距離を設定しますが、このとき位置は絶対指定する必要があります。 <br /><br />4. 不透明度透明度フィルター:alpha(opacity=value) 例: filter:alpha(opacity=50);opacity:0.5; <br /><br /><strong>4. </strong><br /><br />絶対位置と相対位置 (位置)<strong> </strong><br />絶対位置: <br /><br />位置属性はネチズンの幸福の鍵となります: <br /><br />H4 {position:Absolute; left: 100px; top: 43px } <br /><br />この CSS ルールにより、ブラウザーのピクセルの左側から正確に 100 個のアイコンの開始位置を設定できます。上から 43 ピクセルです。ここでの設定は左と上のみであることに注意してください。つまり、テキストはブラウザ ウィンドウに左から右、上から下に入力されます。 <br /><br />left 属性と top 属性は非常に直感的です。Left (左) はブラウザ ウィンドウの左側からの距離を設定し、top (上) はブラウザ ウィンドウの上部からの距離を設定します。これらの距離を設定するときは、学習したさまざまな度単位やスケール値を使用できます。スケール値を使用する場合、スケール値は親フィーチャの寸法を基準とします。 <br /><br />何をターゲットにできますか?何でも！段落、単語、GIF および JPEG 画像、QUICKTIME ムービーなど。 <br /><br />相対配置: <br /><br />絶対配置を使用すると、ページ上の他の要素の配置設定に関係なく、要素をページ上の独立した位置に正確に配置できます。相対配置とは、配置しているフィーチャの位置が、ファイル内で割り当てられた位置に対して相対的であることを意味します。例: <br /><br />I {position:relative; left: 40px; top: 10px } <br /><br />相対配置の重要な点は、配置された要素の位置が通常の位置を基準にしていることです。 。相対位置決めユニットは、通常の静止位置決めユニットの行間に出現し、静止位置決めユニットから完全に分離せずに位置決めされます。相対配置の使用を中止すると、テキストの表示位置は通常の位置に戻ります。相対位置を使用する場合は注意してください。そうしないと、ページが乱雑になりやすくなります。 <br /><br />相対位置決めと絶対位置決めに加えて、静的パラメーター値も使用できます。 static は、position 属性のデフォルト値です。使い方は通常のHTMLにおける配置方法と同じであり、特別な配置設定を付けることはできません。つまり、margin プロパティ、または float プロパティを使用してセルを浮動させること以外は、セルの位置に影響を与えることはできません。 <br /><br /><br />位置決めユニットの制御 (幅、高さ、可視性) <strong> </strong><br />位置決めユニットの左上隅の位置を制御することに加えて、幅と高さを制御することもできます。ユニットの高さ、およびページ上のユニットの可視性。 <br /><br />幅: 配置された要素は、ページ上に表示されるときにも左から右に表示されます。 width 属性を使用すると、右側の文字の流れに制限を設定する、つまり要素の幅を設定できます。 <br /><br />DIV { 位置: 絶対; 左: 200px; 上: 40px; 幅: 150px } <br /><br /> ブラウザは、このルールで指定された効果に従ってテキストを表示します。 、また、段落の最大水平サイズを 150 ピクセルに制限します。 <br /><br />幅属性は、絶対配置されたフィーチャにのみ適用されます。学習した長さの単位を使用することも、親フィーチャを基準としたスケール値を使用して幅を設定することもできます。 IE 4 では、この属性は画像にも使用できます。幅設定を使用して、画像を人為的に広げたり圧縮したりできます。 <br /><br />高さ: 理論的には、高さは幅と同様に設定する必要がありますが、垂直方向に設定する必要があります。 } <br /><br />一部のブラウザでは高さ属性がサポートされていないため、ここでは「理論的に」としています。 <br /><br />可視性: CSS を使用すると、要素がページ上に表示されないように非表示にすることができます。この属性は、位置が特定されたフィーチャと位置が特定されていないフィーチャの両方に適用されます。 <br /><br />H4 { Visibility: hidden } <br /><br />オプション: <br /><br />visible は機能を表示します<br /><br />hidden は機能を非表示にします<br /><br />inherit を示します親フィーチャの表示設定を継承することになります。 <br /><br />値継承はデフォルト値です。これにより、セルは親セルの表示設定を継承します。したがって、段落が非表示の場合、段落に含まれるインライン セルも非表示になります。この継承は、明示的に指定された可視性によってオーバーライドできます。たとえば、セクション内の EM セルが表示可能に指定され、そのセクションが非表示になっている場合、セクション内の他のコンテンツはすべて表示されなくなり、EM セル内のテキストのみが表示されます。 <br /><br />要素が非表示になっている場合でも、要素はブラウザ ウィンドウ内の元のスペースを占有します。したがって、非表示の画像の周りにテキストを折り返すと、テキストが空のスペースを囲んでいるかのように見えます。このニュース <br /><br />この属性は、言語を作成する場合や動的 HTML を使用する場合に便利です。たとえば、特定の段落や画像をマウスがロールオーバーしたときにのみ表示されるようにすることができます。 <br /><br /><br />ユニットレベル (z-index) <br /> <br /><strong>z-index 属性は、画面上にセルをスタックするために使用されます。デフォルトでは、ユニットは HTML タグに出現する順序で積み重ねられます。つまり、後に出現するユニットは、先に出現するユニットの上に積み重ねられます。 Z-index プロパティは、実際には兄弟ユニットの積み重ね順序と、親ユニットに対する相対的なユニットの積み重ねを定義します。ドラフト仕様によると、正の Z インデックス値を持つユニットのグループは親ユニットの上にスタックされ、独自のスタック順序は値の大きさによって決定されます (より大きな値を持つユニットが上に配置されます)トップ）。同様に、負の Z インデックス値を持つユニット グループは親ユニットの下にスタックされ、独自のスタック順序も値の大きさによって決まります (たとえば、より大きな値を持つユニットが上位層にあります) 、値が -1 のユニットは、ユニットの -2 上の上位層にあります。 <br /><br />このパラメータ値には純粋な整数を使用してください。 z-index は、絶対的に配置されたフィーチャまたは相対的に配置されたフィーチャに使用されます。画像の Z インデックスを設定することもできます。 (Communicator の場合、<IMG> タグを <SPAN> または <DIV> タグ内で囲んでから、z-index を <SPAN> または <DIV> に適用することが最善です。) <br><br> <strong>絶対位置のユニットをクリップ (クリップ) <br></strong><br>絶対位置のユニットをクリップできます。つまり、ユーザーに表示される領域をクリップし、ユニットの一部のみを表示し、残りを透明にします。 。これは、従来のテキストおよび画像ベースの Web ページにとってはあまり便利な機能ではありません。ただし、これはマルチメディア ページが必要な場合に便利です。たとえば、Netscape Communivator 4 と Internet Explorer 4 はどちらもマルチメディア ページをサポートしており、ドキュメントのスクリプト インターフェイスを通じてユニットの周囲のクリッピング領域を動的に調整するため、実線のテキストが「クロスイン」し、画像がフェードインし、その他の表示機能が表示されます。 <br><br>CSS では、クリップ機能によってこの機能を制御できます。この機能は絶対配置されたユニットにのみ使用できます。デフォルト値は auto で、ユニットの外側の端に従ってクリップされます (実際にはクリップなし)。 。さらに、クリップ ボックスは次の式で設定できます: <br><br>clip : rect(top,right.bottom,left); <br><br> ここで、top、right、bottom、left は長方形です。クリップ ボックスのそれぞれ、クリップされたユニットの左上隅を基準とした上端、右端、下端、左端の位置。 Top、right、bottom、left の値には、絶対長または相対長の値 (パーセンテージ値ではない)、またはキーワード auto を指定できます。 auto の値は、クリッピング領域のすべての辺が配置された後、クリッピングされたユニット内のコンテンツがこの領域を超えないことを意味します。 <br><br><strong>制御ユニットのオーバーフロー (オーバーフロー) </strong> <br><br>絶対位置決めユニットまたは相対位置決めユニットの幅と高さを固定します。指定された領域がニーズを満たさない可能性があります。これにより、ユニットのコンテンツがオーバーフローします。オーバーフローを使用して、ブラウザがオーバーフローを処理する方法を指定できます。値 none (デフォルト) を指定すると、ブラウザはオーバーフロー コンテンツを表示できるため、セルが指定された領域をオーバーフローする可能性があります。値クリップでは、指定された領域を超えるセルの内容が表示されないように、ブラウザーがセルの下部と右側でセルの内容をクリップする必要があります。値スクロールでは、ブラウザーがセルの下部と右側でセルの内容をクリップする必要もあります (クリップと同じ)。ただし、ユーザーがクリップされた内容をスクロールできるように、ブラウザーは (可能であれば) セルにスクロール バーを提供する必要があります。コンテンツ。</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="シンプルプログレスバーのHTML CSS制作_HTML/Xhtml_Webページ制作" href="http://m.php.cn/ja/faq/11566.html">シンプルプログレスバーのHTML CSS制作_HTML/Xhtml_Webページ制作</a></span><span>次の記事：<a class="dBlack" title="シンプルプログレスバーのHTML CSS制作_HTML/Xhtml_Webページ制作" href="http://m.php.cn/ja/faq/11570.html">シンプルプログレスバーのHTML CSS制作_HTML/Xhtml_Webページ制作</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>