HTML、CSS、およびJavaScriptの関係
HTMLはWebコンテンツのキャリアです
。CSSスタイルはパフォーマンスであり、外観制御
JavaScriptは動作であり、Webページの特殊効果を実現するために使用されます。
今日から、「憧れ/渇き/置き換えを切望する」という言葉は、
CSS
カスケードスタイルシートとは何ですか？
ブラウザでのhtmlコンテンツの表示スタイルを定義するために使用されます
開発履歴
1996W3C CSS1
1998 W3CCSS2
現在W3CCSS3
H5とCSS3は、モバイルページの開発でよく使用されます。
コンピュータ側では、ブラウザの互換性の問題により、CSS2が主に使用されます。
CSSを学ぶ理由：
cssはhtml関連のタグを簡素化し、Webページはサイズが小さく、すばやくダウンロードします。
コンテンツとパフォーマンスの分離の問題を解決します
。Webページをより適切に維持し、作業効率を向上させます。
内容：
css基本文法
css使用法
cssセレクター
css継承とカスケード
css優先度
css命名規則
1.
CSSの基本的な文法CSSルールは、セレクターと宣言
h1 {color：red; font-size：14px;}
セレクター宣言宣言の2つの部分
で構成されます。宣言は属性と値で構成されます。
cssリファレンス：
headタグのstyleタグに記述
<head>
<style type="text/css">
p,
h1,
span{
font-size:30px;
color:blue;}
/*css注释*/
</style>
<!--html注释-->
</head>
2.cssの使用方法
cssスタイルを参照する方法は？
インラインスタイル（インライン）は、頻繁に使用する場合はお勧めしません
<p style="color:red;" ></p>
内部スタイルシート（埋め込み）
<head>
<style type="text/css">
<!--
span{
font-size:30px;}
-->
/*css注释*/
</style>
<!--html注释-->
</head>
在css中加html注释的原因是在低版本浏览器中可能不支持css，这样就不会显示
外部スタイルシート 頻繁に使用
cssスタイルコードを拡張子index.cssの別のファイルに書き込んで、
外部ファイルをインポートします
<link href="xx.css" rel="stylesheet" type="text/css" />
.cssファイルに直接書き込みます。
span{
font-size:30px;}
インポートされた
@import「externalcssstyle」
はstyleタグに書き込む必要があります
<head>
<style type="text/css">
@import "index.css";
@import url(index.css);
/*css注释 两种方法均可*/
</style>
</head>
ネットワークの負荷が遅い場合、インポートタイプはブラウザ互換ですが、リンクに問題はありません
外部スタイルシートを使用する利点：
別々のcssとhtml
複数のファイルが同じスタイルファイルを使用できます
複数のファイルが同じcssファイルを参照します。cssは一度だけダウンロードする必要があります
メソッドの優先順位：
同じ要素に対して、これらのメソッドを使用してcssスタイルを同時に設定しますが、実際に機能するメソッドはどれですか？
インラインスタイル>内部スタイル>外部スタイル
注：外部スタイルシートと内部スタイルシートの間の優先度は場所の順序によって異なり、最後の定義が最も優先度が高くなります（近接の原則）
cssセレクター
ラベルセレクター
クラスセレクター
IDセレクター
グローバルセレクター
グループセレクター
子孫セレクター
タグセレクターは、htmlタグをセレクターとして使用し
て、タグセレクターを介してスタイルを設定し、タグのコンテンツがスタイルを参照します。
クラスセレクターは、クラス属性をhtmlタグに追加します。red
{color：red;}
クラスセレクターによって設定されたスタイルがクラス属性を介して参照されている限り、タグは対応するスタイルを参照します。
異なるタイプの要素の同じ名前のクラスセレクターに異なるスタイルルールを設定できます
。p.red{font-size：50px;}
参照できるのはクラスが特殊なpタグのみです。
スペースで区切って、同じ要素に複数のクラスを設定できます。
例如：
<p class="red one">content</p>
但不能这样写：
<p class="red" class="one">content</p>
因为相同的属性不能多次写
underline.one
{text-decoration：underline;}を設定します
htmlタグにID属性を追加するIDセレクター
例如：
<p id="one">content</p>
#one {text-decoration：underline;}
同じhtmlファイルの下で、idは一意です
クラスのように同じラベルで複数を使用することはできません
スタイルをまとめて設定するグループセレクター：
p,h1,h2{
font-size:30px;}
h1{
color:red;}
注意：クラスとIDの値は大文字と小文字が区別されます
グローバルセレクター/ワイルドカードセレクター
* {color：red;}
子孫セレクターは
、使用時にスペースで区切られ
ます。pem {font-size：40px;}
#up em {font-size：20px;}
疑似クラス
疑似クラスセレクターは、特別な状態でスタイルを定義し
ます。ラベル、ID、クラス、およびその他の属性では実現できません。
リンク疑似クラス：
4つの状態：アクティブ化、訪問済み、未訪問、マウスホバリング
a:link{
color:blue;}
a:visited{
color:grey;}
a:hover{
color:green;}
a:active{
color:orange;}
疑似クラス：ホバーとアクション
：ホバーは、マウスが要素の上を通過するときにアクセスするために使用されます
：アクティブは、要素がアクティブ化されるときに使用されます（つまり、マウスを押してからマウスが解放されるまでの時間）
p:hover{
color:green;}
p:active{
color:orange;}
IE6以前のバージョンの場合、要素をサポートする4つの状態
IE6ブラウザーは他の要素をサポートしません：ホバーおよび：アクティブ
リンク疑似クラスの順序：
link> visited> hover> actice
説明：
a：hoverはa：linkの後に配置する必要があり、a：visitedを有効に
するにはa：activeをa：hoverの後に配置して有効にする必要があります
疑似クラス名は大文字と小文字を区別しません
<a href="#" target="_blank" class="one">例如</a>
<p>
<a href="#" target="_blank" class="one">例如</a>
</p>
a.one:link{
color:blue;}
a.one:visited{
color:red;}
a.one:hover{
color:green;}
a.one:active{
color:grey;}
p a:link{
color:blue;}
p a:visited{
color:red;}
p a:hover{
color:green;}
p a:active{
color:grey;}
css継承とカスケード
は、親要素からいくつかのcss属性を継承します
利点：
親要素はスタイルを設定し、子要素は継承できますセクションプロパティ、cssコードの削減、すべてのプロパティを継承できるわけではありません
CSSオーバーラップ：競合がない場合は
複数のスタイルを定義でき
、複数のスタイルを1つにスタックできます。
競合する場合は、異なるスタイルルールの優先度に従ってスタイルが適用されます。
css優先度
cssセレクター優先度id>クラス>タグ
ルール：
異なるセレクターの数を数える
各タイプのセレクターの数に対応する重みを掛けます。
すべての値を加算してセレクターの重みを取得します。
もちろん、調整によって変更することもできます。 Priority
！important
は、CSSの使用率が高いことの優先順位を宣言します：インライン>内部>外部
リンクリンクの外部スタイルと内部スタイルの優先度は、順序によって異なります
スタイルシートの優先度：
id> class> tag> wildcard、
重みが同じ場合に使用近接の原理
cssスタイルの命名
規則：
英語の文字、数字、および-と_を
使用して小文字で名前を付け、他の先頭を使用することはできません
命名形式：単一の単語、ハイフン、下線、こぶ意味のある
命名
IDを乱用しないで、クラスを適切に使用してください
要約：
cssルール：セレクター{宣言;}ここで宣言==属性：値
cssスタイル
：インライン、埋め込み、リンク、@ import4種類
cssセレクター：
ラベル、クラス、ID、グローバル、グループ、子孫、疑似クラス
css優先度：
！important> id> class> tag> *
重みが同じ場合に使用されます近接の原理
cssの使用方法の優先順位：インライン>内部>外部
リンクリンクの外部スタイルと内部スタイルの優先度は、順序によって異なります
css命名規則
次へ：
CSS：フォントとテキストスタイル