CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSでの表示ブロックの操作

    値ブロックを含むCSSDisplayプロパティは、親の全幅を使用できる要素をレンダリングします。また、改行を強制します。ブロックとして表示される要素は、または要素としてレンダリングされます。 構文 CSS表示ブロックの構文は次のとおりです- Selector {    display: block; } 例 CSS表示ブロックの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Display Block</title> <style> form

  2. CSSで使用して表示なし

    CSS Display Noneは、開発者がdisplayプロパティがnoneに設定されている要素を非表示にするのに役立ちます。表示がnoneに設定されている要素の場合、ボックスは生成されません。また、displayがnone以外の値に設定されている可能性のある子要素も生成されません。 構文 CSS表示なしの構文は次のとおりです- Selector {    display: none; } 例 CSS表示なしの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Disp

  3. CSS表示と可視性の違い

    CSSVisibilityプロパティとCSSDisplayプロパティをそれぞれ使用して、HTMLドキュメント内の要素を非表示または削除できます。ユーザーには、2つのプロパティのいずれを使用しても違いはないように見えるかもしれませんが、違いはあります。 CSSディスプレイ − noneはドキュメント上の要素をレンダリングしないため、スペースを割り当てません。 CSSの可視性 − hiddenはドキュメント上の要素をレンダリングし、スペースも割り当てられますが、ユーザーには表示されません。 例 CSS表示の例を見てみましょうなし- <!DOCTYPE html> <html

  4. 要素の可視性の制御CSSの操作

    CSS Visibilityプロパティは、要素がドキュメントに表示されるかどうかに対応する値を指定するために使用されます。要素はレンダリングされますが、CSS Visibilityが非表示に設定されている場合、表示されません。 以下は、要素の可視性を制御するために使用されるCSS可視性の値です- Sr.No 値と説明 1 表示 これはデフォルトであり、要素とその子が表示されます 2 非表示 要素を非表示にし、その子は非表示にしますが、要素は引き続きレンダリングされ、ページ上に適切なスペースが与えられます 3 折りたたみ これは、テーブルの行

  5. CSSを使用した静的ポジショニング

    CSSでの要素の配置は、要素を特別な方法ではなく通常の方法でレンダリングする静的なものとして定義できます。静的に配置されている要素は、CSSの配置プロパティ（左、右、上、下）の影響を受けません。 例 CSS静的測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0; } div:first-child {    position: static;    background-color: orange

  6. CSSのoutline-colorプロパティ

    アウトラインカラープロパティは、要素の境界線の周りに特定の色の線を描画するように定義できますが、アウトラインは、境界線プロパティとは異なり、要素の寸法の一部ではありません。 構文 CSSのoutline-colorプロパティの構文は次のとおりです- Selector {    outline-color: /*value*/ } 注 −outline-colorを宣言する前にoutline-styleプロパティを定義する必要があります。 例 アウトラインカラーの例を見てみましょう プロパティ- <!DOCTYPE html> <html> &l

  7. CSSの疑似クラスとは何ですか

    CSS疑似クラスは、さまざまな要素の特殊な状態を表します。これらのクラスは、ドキュメント内の基本要素だけでなく、ステータス、位置、履歴などの外部要因も表します。これらの疑似クラスを使用すると、開発者は、を介して直接選択できない要素のスタイルを設定することもできます。 CSSセレクター。 構文 以下は、要素でCSSPseudoクラスを使用する構文です- Selector:pseudo-class {    css-property: /*value*/; } 例 CSS疑似クラスを使用する例を見てみましょう- <!DOCTYPE html> <html&

  8. CSSのpositionプロパティを使用して要素を整列する

    CSSポジショニングスキーマメソッド（固定、相対、絶対、静的）とプロパティ（左、右、上、下）を使用して要素を整列できます。 例 ポジショニングスキーマを使用して要素を整列させる例を見てみましょう- <!DOCTYPE html> <html> <head> <title>Alignment using CSS Position</title> <style> .screen {    padding: 10px;    width: 70%;    margin

  9. CSSのfloatプロパティを使用した左右の配置

    ボックスまたはコンテンツの配置またはフォーマットに使用されるCSSFloatプロパティを使用して、htmlの要素を整列させることができます。開発者は、CSSフロートを使用して要素を左また​​は右に配置できます。 例 要素を整列させるためのCSSfloatプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>Alignment using CSS Float</title> <style> .screen {    padding: 10px; &n

  10. CSSを使用して折りたたまれた親を修正する

    CSSのfloatプロパティを使用しているときに開発者が直面する多くの問題の1つは、すべての子要素がfloatされると、親コンテナが折りたたまれるということです。親コンテナの崩壊を回避するために、次のいずれかのソリューションを使用できます。 問題 すべてのコンテンツがその中に浮かんでいるため、親コンテナは折りたたまれています。 CSSのbackground-colorプロパティにより、コンテナのパディングのみが表示されます。 例 以下は修正が必要な問題コードです- <!DOCTYPE html> <html> <head> <title>

  11. CSS疑似クラスの操作

    （ホバー、訪問済み、無効など）などの特定の状態の要素を選択するCSS疑似クラスを使用して、HTMLの既存の要素に特定のスタイルを追加できます。 注 − CSS疑似クラスを疑似要素から分離するために、CSS3では、疑似クラスは単一コロン表記を使用します。 構文 以下は、要素でCSSPseudoクラスを使用するための構文です- Selector:pseudo-class {    css-property: /*value*/; } 以下は、利用可能なすべてのCSS疑似クラスです- Sr.No 疑似クラスと説明 1 アクティブ アクティブな言及され

  12. CSSビジュアルフォーマットモデル

    CSS Visual Formattingは、ドキュメントの各要素を処理および変換して、CSSボックスモデルに準拠する1つ以上のボックスを生成するアルゴリズムに対応するモデルです。 生成されたボックスのレイアウトは、-などのいくつかのプロパティによって異なります。 寸法 タイプ-アトミックインラインレベル、ブロック、インライン、またはインラインブロック ポジショニング-絶対、フロート、または通常 ドキュメントの子要素と隣接要素との関係 外部情報-ビューポートと画像の幅-高さなど 処理された要素のCSSボックス生成- ブロックレベル これらの要素は、コンテンツがそれを必要としない場合

  13. CSSで生成されるボックスのタイプ

    ビジュアルフォーマットモデルで処理した後、ドキュメントツリーの要素ごとに1つ以上のボックスが生成されます。生成されたボックスには特定のCSSプロパティが関連付けられているため、HTMLでレンダリングされます。 次のボックスがCSSで生成されます- ブロックレベルの要素とブロックボックス 匿名のブロックボックス インラインレベルの要素とインラインボックス 匿名のインラインボックス 例 ブロックレベルの要素とブロックボックスの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Blo

  14. CSSのブロックレベルの要素とブロックボックス

    ブロックレベルの要素にはCSS表示があります プロパティが「block」、「list-item」、または「table」のいずれかに設定され、これらの要素が上下に改行を強制します。ブロックレベルのボックスは、配置スキームの一部であり、子ボックスを含む各ブロックレベルの要素によって生成されます。 ブロックコンテナボックスには、ブロックレベルのボックスが含まれ、ブロックの書式設定コンテキストに従うか、インラインレベルのボックスが含まれ、インラインの書式設定コンテキストに従います。ブロックボックスは、ブロックレベルのボックスがブロックコンテナでもある場合に使用される用語です。 匿名ブロックボックス

  15. CSSの::beforeおよび::after疑似要素

    CSS::beforeとCSS::after Pseudo-elementは、要素の前後にそれぞれコンテンツを挿入するために使用されます。 例 CSS::beforeとCSS::after疑似要素の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after {    content: " BUZZINGA!";    background: orange;  

  16. 疑似要素とCSSクラス

    CSS疑似要素は、要素だけでなくCSSクラスにも適用できます。 例 CSSクラスでCSSPseudo要素を使用する例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Pseudo Elements and CSS Classes</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {  

  17. CSSの疑似クラスをアンカーする

    CSS疑似クラスセレクター、つまり：active、：hover、：link、および：visitedを使用して、リンク/アンカーのさまざまな状態のスタイルを設定できます。適切に機能させるには、これらのセレクターの順序は-である必要があります。 ：リンク ：訪問済み ：ホバー ：アクティブ CSS疑似クラスプロパティの構文は次のとおりです- a:(pseudo-selector) {    /*declarations*/ } 例 CSSアンカー疑似クラスを使用する例を見てみましょう- <!DOCTYPE html> <html> <hea

  18. CSSを使用したz-indexプロパティを使用したレイヤーでの要素のスタック

    CSS Z-Indexプロパティを使用すると、開発者は要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注- 重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 z-indexプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> p {    background: url("https://www.tutorialspoint.com/arang

  19. CSSの::最初の行の疑似要素

    このCSS疑似要素は、要素のコンテンツの最初の行を選択します。ただし、テキストを含む幅が固定されていない場合、ウィンドウサイズに応じて行の長さが変わる可能性があります。 CSSの例を見てみましょう::最初の行の疑似要素- 例 <!DOCTYPE html> <html> <head> <style> p::first-line {    background-color: lightgreen;    color: white; } </style> </head> <bod

  20. CSSの@importAt-rules

    CSS @importルールは、インポートされたスタイルシートのURLの後にメディアタイプを指定することにより、特定のターゲットメディアのスタイル情報を設定するために使用されます。 構文 以下は構文です- @import url（ /*ファイルパス*/）mediatypes {CSS-Code;} CSSの@importルールの例を見てみましょう： HTMLドキュメント 例 @import url（screen.css）screen; @import url（print.css）print; Vivamus commodo、dolor eu porttitor sag

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:21/79  20-コンピューター/Page Goto:1 15 16 17 18 19 20 21 22 23 24 25 26 27