CSS_html/css_WEB-ITnose に関するいくつかの概要

CSS の基本を 1 日勉強して練習した後、以前は CSS スタイルは他の人が書いたものであり、ガイド パッケージのように使用する必要があると常に考えていました。真剣に勉強して初めて、それがどのようなものか理解できました。コードを打ち込まないと新しい知識は学べない気がします。コードの結果がどうなるかを本で知ることはあっても、本で結果を知るのと実際に知るのでは感覚が全く違います。簡単に言えば、実践しなければ真実がどのようなものであるかは決してわかりません。以前は、知識が難しすぎて習得できないと感じることがよくありました。 、それで挑戦するのをやめました。いくつか試してみて、それは思ったほど難しくないことがわかりました。やりさえすれば、すべての問題は最終的には解決します。今日私が CSS について学んだ知識の一部を共有させてください。

CSS: Cascading Style Sheets (Cascading Style Sheets) は、HTML 要素の表示方法を定義するために使用され、コンテンツとプレゼンテーションの分離を実現し、作業効率を大幅に向上させることができます。
1.CSSスタイルシートの特徴:
①.継承: 多くのCSSスタイルルールは、セレクターによって定義された要素に影響を与えるだけでなく、これらの要素の子孫にも継承されます
②.カスケード: a Webページは複数のスタイルシートを使用しており、複数のスタイルシートのスタイルを1つにカスケードすることができます(競合がなければすべてのスタイルが表示されます)
2 CSSセレクター
①.要素セレクター
例: html {color: black;}
h1 {color:blue;}
h2 {color:silver;}
②. クラスセレクター: クラスセレクターは、クラス属性を持つ要素とスタイルルールを一致させるために使用されます。クラス属性の値は、はクラスの選択ですセレクターで指定した値です
.className{}
③ 要素セレクターとクラスセレクターを組み合わせて、ある要素内での異なるスタイルの細分化制御を実現します
￣￣￣￣Element selector.className{}
④.idセレクター: id 属性の値のみに作用します。id 値は一意であるため、1 つの要素のコンテンツにのみ適用されます。
例; #intro {font-weight:bold;}

これは導入の段落です。

⑤ セレクターのグループ化: セレクターはカンマ A で区切って宣言できます。同じルールを複数の要素に適用できるように要素のリストを作成します
例: h2, h1,p,.className {color:gray;}
⑥ 派生セレクター
例: h1 span {color:red ;} にのみ影響します。 h1 ;span>重要
⑦.疑似クラスセレクター

Ⅰ.
定義: 特定のセレクターに特殊効果を追加するために使用されます。 (例: ブラウザでリンクを表示する 、リンクのさまざまなステータスをさまざまな方法で表示できます。たとえば、訪問されていないリンクは青で表示され、訪問されたリンクは紫で表示されます)。左側のセレクターは要素セレクター、右側は疑似クラスです */ Ⅱ
リンク要素によく使用される疑似クラスは次のとおりです:

(1) :link:は特別なスタイルを追加するために使用されます未訪問のリンク。つまり、リンクが指す URI はユーザーのブラウザのアクセス履歴にまだ現れていません。
(2) :visited: 訪問済みリンクに特別なスタイルを追加するために使用されます。この状態は、:link 状態とは相互に排他的です。
(3) :hover: は、マウスがこの要素の上に移動したときに、この要素に特別なスタイルを追加するために使用されます。この疑似クラスは、「ホバー状態」にある要素に適用されます。
(4) :active: は、アクティブ状態（マウスのクリックとリリースの間に発生するイベント）にある要素に特別なスタイルを追加するために使用されます。
(5) :focus 擬似クラス：フォーカスされた要素に適用されます。たとえば、文書内のテキスト入力フォーカスのある入力ボックスには、テキスト入力カーソルが表示されます
つまり、ユーザーが入力を開始すると、この入力ボックスにテキストが入力されます。