記事のディレクトリ
CSS
- CSSの主要な使用シナリオは、ウェブページを美化ページレイアウトを使用することです
- CSS即ち、カスケーディングスタイルシート（カスケードスタイルシート）短いです
- CSSは、主に、並びにレイアウト表示スタイルのレイアウトおよび外観セットテキスト（フォント、サイズ、位置合わせ）HTMLページ、画像の形状（幅、高さ、境界線のスタイル、マージン、等）に使用されます。
- セレクタおよび1つ以上の文：CSSルールは、主に2つの部分から構成されています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-css体验语法</title>
<style>
/* 选择器 {样式} */
p {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<p>生活很美好</p>
</body>
</html>
CSSの方法の導入
（1）インラインスタイル：スタイル属性
（2）、ページレベルのスタイル：スタイルタグ（頭部上のタグ）を使用して
CSSファイルに（3）：ヘッド内に組み込まれたリンクタグを使用して
<link rel="stylesheet" href="css/index.css">
CSSコーディングスタイル
1.文体フォーマット
- 拡張フォーマット
p { color: red; font-size: 12px; }
2.スタイルに敏感なスタイル
- すべて小文字
3.スタイルスペーススタイル
- フロントの属性値が、コロンの後ろに、1つのスペース
- （タグ）を選択し、保持が中間空間をブレース
CSSセレクタ
CSSの基礎セレクタ
タグセレクタ（セレクタ要素）
- セレクタとして使用するHTMLタグ名
- 利点：迅速ラベルの同じタイプのページのための統一されたスタイルを設定することができます
- 短所：分化スタイルのデザインは、現在のタブのみのすべてを選択することはできません
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 选择器 {样式} */ p { color: green; } div { color: pink; } </style> </head> <body> <p>生活很美好</p> <div>life is shit</div> </body> </html>
クラスセレクタ（共通）
-
分化は、単一または少数のラベルから選択された異なるラベルを、選択することができます
-
ご注意ください
- ネーミングを選択するために使用される単一の行に長い名前やフレーズ
- 表現するために文字を使用しようと、デジタル純粋、および他の中国名を使用しないでください
- 名前意味のあるものにする、人々は（このクラス名の一目目的で知っていることを確認してくださいここに私のコードが仕様を満たしていません）
- 命名規則：Webフロントエンドの開発仕様書取扱説明書.DOC
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-类选择器</title> <style> /* 选择器 {样式} */ .ii { color: green; } .dd { color: pink; } </style> </head> <body> <ul> <li class="ii">おはよう</li> <li class="ii">こんにちは</li> <li>こんにちは</li> </ul> <div class="dd">今まで</div> </body> </html>
- 演習1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习1</title> <style> .pink { width: 100px; height: 100px; background-color: pink; } .yellow { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="pink">いち</div> <div class="yellow">に</div> <div class="pink">さん</div> </body> </html>
使用するマルチクラス名のクラスセレクタ
-
分割の間のスペースとクラス名
-
開発現場で使用されるマルチクラス名
- （1）ラベル要素のいくつかの内部クラスに同じ徳陽市であってもよいです
- （2）これらのラベルは、publicクラスを呼び出し、その後、独自のクラスを呼び出すことができます
- （3）CSSコードを保存するには、だけでなく、簡単な統一を変更します
-
演習1 - >コードの変更
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习1</title> <style> .box { width: 100px; height: 100px; } .pink { background-color: pink; } .yellow { background-color: yellow; } </style> </head> <body> <div class="box pink">いち</div> <div class="box yellow">に</div> <div class="box pink">さん</div> </body> </html>
IDセレクタ（および一般JS付き）
- HTML要素の特定のIDが設定され、特定のスタイルを指定します
- id属性は、各HTML文書に1度だけ表示することができます
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-id选择器</title> <style> #springgreen { color:springgreen; } </style> </head> <body> <div id="springgreen">よん/し</div> </body> </html>
ワイルドカードセレクタ
- すべての要素（タグ）を表しているページを選択
- 特別の事情が適用されます（クリアは、内側と外側の余白にラベルを付けます）
* { margin: 0; padding: 0; }
CSS化合物セレクタ（補充されます。）
派生セレクタ（子供や孫が含まれています）
.a p .span {}
子要素セレクタ
.a > span {}
属性セレクタ
[]
[class = a] {}
[class ^= a] {} //a开头
[class $= a] {} //a结尾
疑似クラスセレクタ
擬似要素セレクタ
重量
| ！重要 | 行内 | ID | クラス/属性/擬似要素 | タグ | ワイルドカード |
|---|---|---|---|---|---|
| ∞ | 1000年 | 100 | 10 | 1 | 0 |
色の設定
1. color:red;
2. color:#ff0000; //rgb饱和度
3. color:rgb(255,255,255）
フレーム
border： 1px solid #000;
==> border-width: 1px;
border-style: solid;
border-color: #000;
CSSのフォントプロパティ
- CSSフォント（字体）属性は、（イタリックなど）、フォントファミリ、サイズ、重量、種類のスタイルを定義するために使用されます。
- グラムGoogleのデフォルトのフォント - マイクロソフトエレガントな黒
P72<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-id选择器</title> <style> #first { font-family: '微软雅黑' } #second { font-family:'Courier New', Courier, monospace } #third { font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif } </style> </head> <body> <h3 id="first">微软雅黑</h3> <h3 id="second">第二种</h3> <h3 id="third">第三种</h3> </body> </html>
