記事ディレクトリ
1.CSS3
- CSSとは
- CSS (Cascading Style Sheets) は、ドキュメント (マークアップ言語 HTML、XML、SVN など) を変更するために使用される言語であり、ドキュメントをより洗練された形式でユーザーに表示できます。
- HTMLとCSSの関係は？
HTML は Web コンテンツのキャリアです。コンテンツとは、Web ページ作成者がユーザーが閲覧できるようにページに配置する情報であり、テキスト、写真、ビデオなどが含まれます。
CSS スタイルはパフォーマンスです。ウェブページのコートのようなものです。たとえば、タイトルのフォントや色を変更したり、タイトルに背景画像や枠線を追加したりできます。コンテンツの外観を変更するために使用されるこれらすべてのものは、プレゼンテーションと呼ばれます。
HTML は人間のようなもので、CSS は HTML を装飾するための服や化粧品のようなものです。
- タグを使用してスタイルを変更する場合の欠点:
どのタグにどの属性があるかを覚えておく必要があります。タグにこの属性がない場合、設定しても効果がありません。
要件が変わると、既存の要件を満たすために多くのコードを変更する必要があります。
HTML の唯一の役割は、セマンティクスを追加することです。
- CSS を通じてスタイルを変更する利点は何ですか?
どの属性がどのタグに属するかを覚えておく必要はありません。
要件が変わった場合でも、要件を満たすために多くのコードを変更する必要はありません。
フロントエンド開発では、CSS の機能は 1 つだけで、それはスタイルを変更することです。
2. 文法
2.1. CSS宣言（CSS宣言）
CSS 言語の中心的な機能は、特定のプロパティに特定の値を設定することであり、CSS エンジンは宣言された各プロパティを計算して要素を表示します。CSS のプロパティと値は大文字と小文字が区別されます。属性と値は「:」で区切られます。すべての値が同じプロパティに適用されるわけではなく、異なるプロパティには異なる値の範囲があります。
2.2. CSS宣言ブロック（CSS宣言ブロック）
複数の CSS 宣言をまとめて記述します。各 CSS 宣言は「;」で区切られ、最後の CSS 宣言は「;」で区切る必要はありません。「{」「}」を使用して複数の CSS 宣言を囲み、CSS 宣言ブロックを形成します。
2.3. CSS ルールセット
**セレクター** ルール セットの先頭にある HTML 要素の名前。スタイルを設定する必要がある 1 つ以上の要素 (この場合は p 要素) を選択します。さまざまな要素にスタイルを追加するには、セレクターを変更するだけです。
**宣言** color: red; などの別のルールを使用して、追加されたスタイル要素の属性を指定します。
**プロパティ** HTML 要素のスタイルを変更する方法。(この場合の色は
要素の属性。) CSS では、ルールを変更するためにどのプロパティを変更するかを決定するのは作成者の責任です。
**属性値 (プロパティ値)** は属性の右側にあり、コロンの後には属性の値があり、指定された属性の多くの出現から値を選択します (多数の属性値があります)色に使用できる赤以外）。
**その他の重要な構文に注意してください:** 各ルール セット (セレクター部分を除く) は、ペアの中括弧 ({}) で囲む必要があります。各宣言では、属性と属性値を区切るためにコロン (:) が使用されます。各ルールセット内では、宣言をセミコロン (;) で区切ります。
2.4. CSS の可読性
- 空白（ White space）
ホワイトスペースとは実際のスペース、タブ、改行を意味し、スタイルシートを読みやすくするためにホワイトスペースを追加できます。
- コメント
/* ここに CSS コメントが入ります */
- 速記 (速記)
フォント、背景、パディング、ボーダー、マージンと同様に、これらは短縮プロパティと呼ばれます。
これらの属性を使用すると、複数の属性値を 1 行に記述することができます。短縮プロパティは時間を節約し、コードを整理します。
例えば：
ボーダー: 1 ピクセル赤一色;
背景色:赤;
パディング: 10px 15px 15px 5px;等价からpadding-top: 10px; パディング右: 15px; パディングボトム: 15px; パディング左: 5px;
3. CSSのインポート方法
- インライン スタイル (インライン スタイル)
欠点: 冗長なスタイルと構造
長所: 優先度が高い
インラインスタイルシートは既存のHTMLタグ内に直接CSSコードを記述するもので、具体的な使用方法は以下の通りです。
<div style="color:red">设置文字的颜色为红色</div>
ここで注意してください: スタイルの内容は要素の開始タグに記述され、CSS スタイル コードは style="" 二重引用符内に記述される必要があります。複数の CSS スタイル コード設定がある場合は、それらをまとめて記述することができます。セミコロンで区切ります。複数の CSS スタイルを一緒に記述することの効果は次のとおりです。
<div style="color:red;font-size:14px">
设置字体颜色为红色，并且字体大小为14px
</div>
このスタイルは現在のラベルでのみ機能します。テスト中に使用できますが、スタイルを再利用することはできません。後のメンテナンスに不便なので、お勧めできません。
- 内部スタイルシート
短所:スタイルの再利用率が低い
長所:スタイルと構造の分離
head内のstyleタグにスタイルシートを記述する
<style type="text/css">
p{
color:red;
background-color:yellow;
}
</style>
内部スタイル シートを使用すると、パフォーマンスと構造をさらに分離できます。また、複数の要素のスタイルを同時に設定できるため、後のメンテナンスに便利です。 注: -style タグは、開始タグと終了タグの間に記述する必要があり
ます
。 head タグ (つまり、title タグが付いているのは兄弟関係です)
-style タグの type 属性は実際には省略可能で、デフォルトは type="text/css" です
・スタイルを設定する場合は、key:value; where:は省略不可、セミコロンは省略できない場合が多い、固定形式で設定する必要があります。
- 外部スタイルシート
利点: スタイルと構造の分離と分離、スタイル (フレームワーク: ブートストラップなど) の再利用率が高く、共有され、定義された CSS ファイルを複数のページに適用できます。
1. スタイルシートを外部CSSファイルに記述し、リンクタグを介して外部ファイルをインポートします。
<link rel="stylesheet" type="text/css" href="文件的路径"/>
スタイルを外部スタイル シートに書き込みます。同じスタイル シートを異なるページで使用でき、パフォーマンスと構造を完全に分離し、後のメンテナンスを容易にする、推奨される方法です。
2. @import url()、インポートを通じて CSS ファイルをインポートすることもできます
@import インポート方法は、最初に html を読み込み、次に css を読み込みますが、ネットワーク環境が悪い場合、ページの効果が低下するため、この方法はお勧めできません。
<style>
/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
@import url('./style.css');
</style>
- インポート方法の優先順位
インライン スタイル > 内部スタイル/外部インポート
近接原則: どの設定方法が要素に最も近く、どの設定方法の優先度が高いか。
- CSSを学ぶにはどうすればよいですか?
CSS の学習は 2 つの部分に分かれており、1 つは CSS のセレクター、もう 1 つは CSS のプロパティです。
4. CSSセレクター
- タブセレクター
機能: 指定されたタグ名に従って、現在のインターフェース内でその名前を持つすべてのタグを検索し、属性を設定します。 形式
:
タグ名 { 属性: 値; }注意点: 1. 選択されたタグセレクター単一のタグを選択するのではなく、現在のインターフェース内のすべてのタグです2. タグがどれほど深く隠されているかに関係なく、タグセレクターを選択できます3. HTML 内のタグである限り、次のように使用できますタグセレクター (h/a/img /ul/ol/dl/input...)
- IDセレクター
機能: 指定された ID 名に従って対応するタグを検索し、属性を設定します。 形式
:
#id name{ 属性: 値; }注意点: 1. すべての HTML タグには id という属性があります。各タグは ID を設定できます2. ID の名前は同じインターフェース内で繰り返すことはできません3. ID セレクターを記述するときは、必ず ID 名の前に # を追加してください4. ID の名前は特定のものです仕様4.1 ID の名前は、文字/数字/アンダースコア (az 0-9 _) のみで構成できます。4.2 ID の名前を数字で始めることはできません。4.3 ID の名前を HTML タグの名前にすることはできません。 、h1 img 入力にすることはできません… 5. 一般に、エンタープライズ開発では、スタイルの設定のみを目的とする場合、id は js 用に予約されているため、id は使用しません。
- クラスセレクター
機能: 指定されたクラス名に従って対応するラベルを検索し、属性を設定します。 形式
:
.class name{ 属性: value; }
注意点:
1. 各 HTML タグには class という属性があり、各タグでクラス名を設定できることを意味します
2. クラス名は同じインターフェイス内で繰り返すことができます
3. クラス選択を記述するとき
4. 命名クラス名の規則は ID 名の規則と同じです5.
クラス名は CSS のスタイルを設定するために特別に使用されます
6. HTML 内の各タグは同時に使用できます 複数のクラス名をバインドします
形式:
<ラベル名 class="クラス名 1 クラス名 2 ...">
間違った書き方:
<p class="para1" class="para2">
7. id と class の違いは何ですか?
7.1 id は個人の ID カードに相当し、繰り返しはできません、
class は人の名前に相当し、繰り返し可能です。
7.2 HTML タグは 1 つの ID 名にのみバインドできます。
HTML タグは複数のクラス名にバインドできます。
8. ID セレクターとクラス セレクターの違いは何ですか?
ID セレクターは # で始まり、
クラス セレクターは で始まります。
9. エンタープライズ開発では id セレクターとクラス セレクターを使用しますか?
id は一般に js で使用されるため、特別な事情がない限り、スタイルの設定に id を使用しないでください
10. エンタープライズ開発では、開発者のクラスの使用は、開発者の技術レベルを示すことができます。
一般に、エンタープライズ開発では、冗長コードの抽出に注意を払う必要があります。一部の共通コードはクラス選択に抽出できます。デバイスでは、その後、ラベルをこのクラスセレクターにバインドします
- 子孫セレクター
機能: 指定されたタグの特定の子孫タグをすべて検索し、属性を設定します。
形式:
タグ名 1 タグ名 2{ 属性: 値; }まず、「タグ名 1」という名前のタグをすべて検索し、次にこのタグの下で、「タグ名 2」という名前のタグをすべて検索し、属性を設定します。例: div p{}
注意点: 1.
セレクターはスペースで区切る必要があります
子孫4. 子孫セレクターはスペースを介して継続できます
- 子要素セレクター
機能: 指定されたタグ内のすべての特定の直接のサブ要素を検索し、属性を設定します。
形式:
タグ名 1> タグ名 2 { 属性: 値; }
注意すべき点:
1. サブ要素セレクターは息子のみを検索し、他のネストされたタグは検索しません
2. サブ要素セレクターは > 記号で接続する必要があり、スペースがあってはなりません
3. サブ要素の選択 セレクターラベル名を使用できるだけでなく、他のセレクターも使用できます。
4. サブ要素セレクターは > 記号を使用して続行できます。
5. 子孫セレクターと子要素セレクターの違いは何ですか?
-子孫セレクターは接続記号としてスペースを使用します
子要素セレクターは接続記号として > を使用します
-子孫セレクターは、すべての特定の子孫を選択します指定されたタグ ラベル、つまり息子/孫が選択されます...、特定のラベルが指定されたラベルに配置されている限り、それが選択されます。 サブ要素セレクターは、指定されたラベルのみを選択します
。特定の直接ラベル。つまり、ラベルの息子として特定のラベルのみが選択されます。
6. 子孫セレクターとサブ要素セレクターの共通点
- 子孫セレクターとサブ要素セレクターはどちらもタグ名/ID 名/クラス名をセレクターとして使用できます
- 子孫セレクターとサブ要素セレクターは両方ともそれぞれの接続
記号セレクター 1> セレクター 2> セレクター 3> セレクター 4{}
7. エンタープライズ開発での選択方法 指定
したタグ内の特定のタグをすべて選択したい場合は、子孫セレクターを使用します
特定の子タグをすべて選択したい場合は、子孫セレクターを使用します指定されたタグ内で、子要素セレクターを使用します
- 交差点セレクター
機能: すべてのセレクターで選択されたタグの交差部分の属性を設定します。
形式:
セレクター 1 セレクター 2{ 属性: 値; }注: 1. セレクターとセレクターの間に接続記号はありません。 2. セレクターは、ラベル名/ID名/クラス名を使用します。3. 交差セレクターは理解のみを目的としており、エンタープライズ開発ではあまり使用されません。
- ユニオンセレクター
役割: セレクタで選択されたすべてのタグの属性を設定します
形式:
セレクタ 1, セレクタ 2{ 属性: 値; }注意点: 1. ユニオン セレクタは必ず接続されている必要があります2. セレクタはタグ名/ID 名/クラス名を使用できます
- 兄弟セレクター
1. 隣接兄弟セレクター CSS2
機能: 指定したセレクターの直後のセレクターで選択したラベルに属性を設定
形式:
セレクター 1+セレクター 2{ 属性: 値; }注意点: 1. 隣接する兄弟セレクターは接続されている必要がありますby + 2。隣接する兄弟セレクターはその直後のタグのみを選択でき、分離されたタグは選択できません。
2. ユニバーサル兄弟セレクター CSS3
機能: 指定されたセレクターの背後にあるすべてのセレクターによって選択されたすべてのタグの属性を設定します 形式
:
セレクター 1~セレクター 2{ 属性: 値; }注: 1 .ユニバーサル兄弟セレクターは、 ~ 2. ユニバーサル兄弟セレクターは、分離されているかどうかに関係なく、指定されたセレクターの後ろにあるセレクターによって選択されたすべてのタグを選択します。
- 疑似クラスセレクター
疑似クラスは「:」で始まり、要素が特別な状態でのみ選択できることを示すためにセレクターの後に使用されます。
- 序数セレクター (構造体擬似クラス セレクター)
CSS3 の新しいセレクターの最も代表的なものは、順序セレクター
1 です。 同じレベルの番号
:first-child は同じレベルの最初のラベルを選択します
:last-child は同じレベルを選択します :
nth-child( n) 同じレベルの n 番目のラベルを選択します
:nth-child(odd) 同じレベルのすべての奇数を選択します
:nth-child(even) 同じレベルのすべてを選択します 偶数
:nth-child(xn+y) xと y はユーザー定義で、n は 0 から増加するカウンターです。
たとえば、(3n+1) は 1、4、7... に対応します。
:nth-last-child(n) 同じレベルの最後の n 番目のラベルを選択します
。 :only-child ラベルの唯一の子要素 E を選択します。親要素 。子要素が 1 つだけの場合に有効になります
注: タイプの区別はありません
2.
同じレベルの同じタイプの数
:first-of-type 同じレベルの同じタイプの最初のタグを選択します
:last -of -type 同じレベル内の同じタイプの最後のタグを選択します
:nth-of-type(n) 同じレベル内の同じタイプの n 番目のタグを選択します
:nth-last-of-type(n)同じレベルの同じタグを選択します。タイプの最後から 2 番目の n 番目のラベル
:only-of-type は、親要素の特定のタイプの唯一の子要素を選択します。
- 動的擬似クラスセレクター
E:link (リンク擬似クラスセレクター): 一致する E 要素を選択すると、一致する要素はハイパーリンクとして定義され、アクセスされていません。リンク記述ポイントで一般的に使用されます。
E:visited (リンク疑似クラス セレクター): 一致する E 要素を選択すると、一致する要素はハイパーリンクで定義され、訪問済みになります。リンクの説明ポイントでよく使用されます
E: アクティブ (ユーザー動作セレクター): 一致する E 要素を選択すると、一致する要素がアクティブになります。リンク ポイントやボタンでよく使用されます
E:hover (ユーザー動作セレクター): 一致する E 要素を選択すると、ユーザーのマウスは要素 E 上に留まります。IE6 以下のブラウザは a:hover のみをサポートします
- タグの疑似クラスセレクター
1.観察を通じて、ラベルには特定の状態があることがわかりました。
1.1 デフォルトの状態、訪問され
ていない状態 1.2 訪問中の状態
1.3 マウスの長押しの状態
1.4 マウスの状態ラベル上にホバリング
2 . 形式
:link 訪問したことのない状態でスタイルを変更する
:visited 訪問した状態でスタイルを変更する
:hover マウスがホバリングしている状態でスタイルを変更するaタグ上で
:active マウスを長押しした状態で状態を変更します 3. 注意点3.1タグの疑似クラスセレクタは単体でも複数でも出現可能3.2 タグの疑似クラスセレクタが出現した場合両方とも、厳密な順序要件があります。デフォルトの状態: リンク -> 訪問済みの状態: 訪問済み -> マウスのホバー状態: ホバー -> マウスの長押しの状態: アクティブ書き込みの順序は愛憎の原則に従う必要があります。デフォルトの状態のスタイルは、訪問した状態のスタイルと同じである場合、省略できます。
/* 简写格式 */
a{
color: green;
}
/* link:和 :visited样式一样，可以写成以上的简写格式，代码量减少，开发效率提高*/
/*a:link{*/
/*color: green;*/
/*}*/
/*a:visited{*/
/*color: green;*/
/*}*/
- 否定された疑似クラス
役割: 選択した要素から一部の要素を削除できます
構文:
:not(selector)
例:
p:not(.hello){ background-color: yellow; }
- 疑似要素セレクター
要素内の特別な位置を表すために疑似要素を使用します。
::after
要素の最後の部分を示します。
通常、コンテンツのスタイルと組み合わせて使用する必要があります。
コンテンツを通じて、コンテンツを追加することができます。 after
::
beforeの位置 要素の先頭部分を表します。
通常、コンテンツ スタイルと組み合わせて使用する必要があります。
コンテンツを通じて、一部のコンテンツを before 位置に追加できます。
::first-letter
スタイルを設定します
::first-
line最初の行のスタイルを設定します。
- 属性セレクター
機能: 指定された属性名に従って対応するラベルを検索し、属性を設定します
形式:
[属性]
[attribute=value]
機能: 指定された属性を持つタグを検索し、その属性の値が value に等しい場合、その属性を設定します。
最も一般的なアプリケーション シナリオは、入力属性を区別することです。
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
- 属性の値は何で始まりますか?
[属性|=値] CSS2
[属性^=値] CSS3
<input type="text" name="user-name" id="">
<input type="password" name="username" id="">
両者の違い:
CSS2では、値の先頭のみが検索でき、値は他のコンテンツと-で区切られています。
CSS3では、値で始まっていれば、で区切られているかどうかに関係なく検索できます。 - か否か
-属性の値は何で終わりますか?
[attribute$=value] CSS3
-属性の値に特定の値が含まれているかどうか
[attribute~=value] CSS2
[attribute*=value] CSS3
2つの違い:
CSS2では独立した単語のみが見つかります。つまり、Contains value、値はスペースで区切られています
CSS3 は、値が含まれている限り検索できます
- ワイルドカードセレクター
関数: 現在のインターフェイス上のすべてのラベルのプロパティを設定します。
形式:
*{ 属性: 値; }注:ワイルドカード セレクターはインターフェイス上のすべてのラベルを設定するプロパティであるため、すべてのタグに対して設定する前に走査されます。現在のインターフェースにタグが多いとパフォーマンスが低下するため、通常、エンタープライズ開発ではワイルドカード セレクターは使用されません。
- コンボセレクター
複数のセレクターを組み合わせて使用します。たとえば、「div.one」はクラス 1 の div 要素を意味します。
5. CSSの3大特徴
- 継承
役割: 親要素にいくつかの属性を設定すると、子要素もそれを使用できるようになります。これを継承と呼びます。
注:
1. すべての属性が継承できるわけではなく、先頭の color/font-/text-/ 属性のみが継承されますline-継承可能
2. CSS継承では息子だけでなく子孫もすべて継承可能
3. 継承の特殊性
3.1 タグの文字色や下線は継承できない 子要素としてはい、
3.2 hタグの文字サイズは継承できず、子要素として使用されます。
<div>
<a href="https://www.baidu.com">百度一下</a>
<p>我是p标签</p>
<h1>我是h1标签</h1>
</div>
アプリケーションシナリオ:
通常、テキストの色、フォント、テキストサイズなど、Web ページ上のいくつかの共通情報を設定するために使用されます。
- カスケード
機能: カスケードは、競合に対処する CSS の機能の一種です。
注:
カスケードは、複数のセレクターが「同じラベル」を選択し、「同じ属性」を設定した場合にのみ発生します。
- 優先順位
役割: 複数のセレクターが同じラベルを選択し、同じラベルに同じ属性を設定した場合、優先度によってスタック方法が決定されます
- 3つの優先度判定方法
-間接選択は継承を指します
間接選択であれば対象レーベルに近い人が聴くことになります
-同じセレクター (直接選択)
それらがすべて直接選択され、すべて同じタイプのセレクターである場合、後で作成した人が誰の意見を聞くことになります。
-異なるセレクター (直接選択)
それらがすべて直接選択されており、同じ種類のセレクターではない場合、セレクターの優先順位に従ってスタックされます。
id>class>label>wildcard>inheritance>browserdefault
-優先!重要
機能: 直接選択したラベルのセレクター内の特定の属性の優先度を上げるために使用され、指定された属性の優先度を最高に上げることができます
注意すべき点:
1. ! important は直接選択にのみ使用でき、間接選択には使用できません。
2. ワイルドカード セレクターによって選択されたタグも直接選択されます。
3. ! important は、指定された属性の優先度のみを上げることができます。他の属性は発生しません。
4.! important は、属性値の後ろ、セミコロンの前に記述する必要があります。
5. ! important の前の感嘆符は省略できません。
6. ただし、一般的には、「! important」を使用しないことをお勧めします。これはカスケードの動作方法を変更し、デバッグを困難にするためです。
- 優先順位の重み付け
役割: 複数のセレクターが混在している場合、重みを計算することで誰が最も優先度が高いかを決定できます。
-ウェイトの計算ルール
style="..." などのインライン スタイルの場合、ウェイトは 1000 です。
ID セレクター (例: #content、重みは 0100)。
クラス、疑似クラス、および .content などの属性セレクターの重みは 0010 です。
ラベル セレクター、div p などの疑似要素セレクターの重みは 0001 です。
ワイルドカード、複合セレクター (+、>、~ など)、負の疑似クラス (:not) は効果がなく、重みは 0000 です。
継承されたスタイルには重みがありません
- まずセレクター内にある ID の数を計算します。ID が多いセレクターが最も優先されます。
- ID の数が同じ場合は、クラス名の数を調べ、クラス名がより多いセレクター
が最も優先されます。-クラス名の数が同じ場合はタグ名の数を見て、タグ名が多い方が優先 -ID
の数が同じ場合はクラス名の数も同じ、タグ名の数も同じ場合は計算が続行されないので、この時点で後ろに書いた人が誰の言うことを聞くか
つまり、優先順位が同じであれば、後で書いた人が誰の言うことを聞くことになります。
注意点:
1. ラベルを直接選択するセレクターのみが重みを計算する必要があります。そうでない場合は、直接選択されたセレクターを確実にリッスンします。