記事のディレクトリ
CSSは 、略して カスケードスタイルシート （カスケードスタイルシート）です 。CSSスタイルシートまたはカスケードスタイルシート
と呼ばれることもあり ます。 CSSはマークアップ言語でもあります はじめに CSSは、主にテキストセットのHTMLページ（フォント、サイズ、配置など）、形状の画像（幅と高さ、境界線のスタイル、余白など）、およびレイアウトに使用されます。表示スタイルのレイアウトと外観の。
CSSスタイルのルールは、セレクターと1つ以上の宣言の2つの主要部分で構成されます。
- セレクターはCSSスタイルを指定するために使用されるHTMLタグであり、オブジェクトに設定された特定のスタイルは中括弧で囲まれています
- 属性と属性値は「キーと値のペア」の形式で表示されます
セレクターは、基本セレクターと複合セレクターの2つのカテゴリーに分けられます。最初に、ここで基本セレクターについて説明しましょう。
- 基本的なセレクターは、単一のセレクターで構成されています
- 財団セレクタも
标签选择器含まれています类选择器、id 选择器和通配符选择器
1.タグセレクター
タグセレクター（要素セレクター）は、セレクターと呼ばれるHTMLタグ名の使用を指し、タグ名で分類され、ある種のラベルでページの統一されたCSSスタイルを指定します。
文法：
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
アクション
タグは、すべての<div>タグやすべての<span>タグなど、すべての選択された特定のクラスラベルを選択できます。
利点
ページ上の同じタイプのラベルのスタイルをすばやく均一に設定できます。
短所
差別化されたスタイルをデザインすることはできません。現在のすべてのタグのみを選択してください。
2.クラスセレクター
2.1はじめに
異なるタグを異なる方法で選択する場合は、1つまたは複数のタグを個別に選択し、クラスセレクターを使用できます。
文法：
<!--要利用到class属性-->
.类名 {
属性1: 属性值1;
...
}
2.2クラス属性の命名規則
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
、
2.3クラスセレクターを使用してボックスを実装する
目標：
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>略略略</title>
<style>
.red {
background-color: red;
width: 100px;
height: 100px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
2.3クラスセレクターの複数のクラス名
複数のクラス名をラベルに割り当てることができ
ます。複数のクラス名を開発するシナリオ。
（1）いくつかのラベル要素の同じスタイル（共通部分）を1つのクラスに入れることができます。
（2）これらのラベルはすべてこのパブリッククラスを呼び出すことができます。その後、独自のユニークなクラスを呼び出します。
（3）だから、CSSコードを保存するよう、統一された変更は、非常に便利でもあります。
たとえば、上記の赤と緑のボックスのサンプルコードは、次のように書き直すことができます。
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>略略略</title>
<style>
.box {
background-color: red;
width: 100px;
}
.red {
height: 100px;
}
.green {
height: 100px;
}
</style>
</head>
<body>
<div class="red box"></div>
<div class="green box"></div>
<div class="red box"></div>
</body>
</html>
3.IDセレクター
HTML要素をid属性に設定し、idセレクターを設定し、CSSセレクターを#定義されたidに設定します。
文法：
#id名 {
属性1: 属性值1;
...
}
IDセレクターとクラスセレクターの違い
①クラスセレクター（クラス）は、人の名前のようなものです。人は複数の名前を持つことができ、同時に複数の人が名前を使用することができます。
②IDセレクターは個人のID番号のようなもので、中国独自のものであり、繰り返さないでください。
③IDセレクターとクラスセレクターの最大の違いは、使用回数です。
④クラスセレクターは、スタイルを変更するために最もよく使用されます。IDセレクターは、通常、ページの一意の要素に使用され、JavaScriptと組み合わせて使用されることがよくあります。
4.ワイルドカードセレクター
文法：
* {
属性1: 属性值1;
... }
5.まとめ
スタイルを変更する場合は、クラスセレクターが最もよく使用されます