ホームページ > 記事 > ウェブフロントエンド > CSS の一般的なスタイル

CSS の一般的なスタイル

php中世界最好的语言オリジナル: 2018-03-08 15:40:531959ブラウズ

今回は一般的な CSS スタイルを紹介します。一般的な CSS スタイルを使用する際の注意点は何ですか? 実際のケースを見てみましょう。

CSS スプライトとは何ですか? その機能は何ですか?

CSS スプライトは、CSS スプライトとも呼ばれます。これは、小さなアイコンと背景画像を結合する技術です。画像を選択し、CSS の背景の配置を使用して画像の表示する必要がある部分を表示します。

imgタグとCSS背景画像の使用シナリオの違いは何ですか?

imgはHTMLタグとして使用され、imgで使用される画像は一般にコンテンツとして使用されます。
CSS 背景での画像の使用は、通常、装飾のために使用されます。
さらに詳しく説明すると、Web ページの読み込みプロセス中に、CSS 背景画像として存在する画像は、構造が読み込まれるまで (Web ページのすべてのコンテンツが表示された後) 読み込みを開始しませんが、img タグはhtml は Web ページ構造 (content ) であり、構造の読み込みプロセス中に読み込まれます。画像が背景として使用されている場合、画像が読み込まれていないか、読み込みに失敗すると、画像のプレースホルダーマークは表示されず、赤い十字も表示されません。

title 属性と alt 属性の機能はそれぞれ何ですか?

title 属性は要素に関する追加情報を指定します。この情報は通常、要素上にマウスを移動するとツールヒントテキストが表示されます。 alt属性は画像が表示できない場合の代替テキストを指定します。

background:url(abc.png) 0 0 no-repeat; この文は何を意味しますか?

この文はbackgroundの略で、urlはbackground-image背景画像を挿入するアドレスを表します。 background-positionの値を表し、前後の2つはそれぞれ水平方向の配置と垂直方向の配置を示します。左上隅は 0 0、no-repeat は background-repeat の値を表します。使用可能な値は、repeat、no-repeat、repeat-x、repeat-y、および継承です。それぞれ水平方向と垂直方向の繰り返し、繰り返しなし、水平方向の繰り返しのみ、垂直方向の繰り返しのみ、および親要素からの継承を示します。

背景サイズ何をするのですか?互換性はどうですか?一般的に使用される値は何ですか?

背景サイズの互換性

1つのCenter divを水平方向に作成するにはどうすればよいですか?画像を水平方向に中央揃えにする方法

div を水平方向に中央揃えにする:
1. Margin メソッド: div にマージンを設定することで、margin: 0 auto; 2. display: inline-block メソッド: set text-align: center を設定します。親要素。プレイ内のdivにdisplay:inline-blockを設定する必要があります。
3. Floating メソッド: div とその親要素の場合、float:left、相対位置、親要素 left50%、div right 50%。
画像を水平方向に中央揃えにする: 上記の方法を使用して、画像をブロックレベルの要素に配置します。

要素の透明性を設定するには?

IE8 以降のブラウザでは、rgba と opcity を使用して音声速度の透明度を設定できます。filter:alpha(opacity=x) を追加する必要があります。

不透明度とrgbaの両方を透明に設定できますが、違いは何ですか?

opacityは親要素の不透明度属性を継承しますが、RGBAで設定された要素の子孫要素は不透明度属性を継承しません。

<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
           .rgba,.opacity{                 margin:0 auto;                 width:200px;                 height: 200px;                 text-align: center;                 line-height: 200px;                 font-size: 20px;                 border:1px solid black;             }             .rgba{                 background: rgba(255,0,0,0.5);             }             .opacity{                 background: red;                 opacity: 0.5;             }         </style>     </head>     <body>         <div class="rgba">             这是RGBA不透明度         </div>         <div class="opacity">             这是opacity不透明度         </div>     </body>     </html>

、不透明度が親要素のプロパティを継承できることが証明できました。さらに、不透明度で画像の透明度を設定することもできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。