1 CSS の概要

CSS (Cascading Style Sheets)、一般に CSS スタイルシートと呼ばれます

文法仕様:

すべてのスタイルは <style></style> タグに含まれます。<style> は通常、<head> </head> 内に記述されます。
コメント: /* ... */
キーと値のペアの形式で、複数の項目間で区切られています。
小文字

2 CSSインポート方法

スタイルシート	言葉遣い	アドバンテージ	制御範囲
インラインスタイルシート	<div style="color: red; font-size: 12px;"> </div>	書きやすい、重い	ラベル (未満)
内部スタイルシート	<スタイル> div { 色: 赤; フォントサイズ: 12px; } </スタイル>	部分構造とスタイルの分離	ページ（中）
外部スタイルシート	<link rel="stylesheet" href="css ファイルのパス">	構造とスタイルの分離を完全に実現	サイト全体（複数）

ノート：

rel は、現在のドキュメントとリンクされたドキュメントの間の関係を定義します。ここでは、リンクされたドキュメントがスタイルシートファイルであることを示す「stylesheet」として指定する必要があります。

3 CSS 基本セレクター

セレクターの分類: 基本、複合セレクター

ベースセレクター	効果	特徴	使用法	文法
ラベルセレクター	p など、すべて同じタグを選択できます。	違う選択はできない	多くの	p {色: 赤;}
クラスセレクター	1 つまたはクラス名と同じラベルを選択できます	ニーズに応じて選択可能	たくさんの	.nav {色: 赤;}
IDセレクター	一度に選択できるタブは 1 つだけです	1回しか使用できません	一般的	#nav {色: 赤;}
ワイルドカードセレクター	すべてのタブを選択	選択肢が多すぎる、必要のないものもある	少し	* {赤色;}

4 CSS フォントのプロパティ

属性	特急	属性値	説明する
フォントサイズ	フォントサイズ	10ピクセル	単位: px ピクセル (必須)
フォントファミリー	フォント	「マイクロソフト弥平」	チーム合意により
フォントの太さ	フォントの太さ	太字、普通、100-900	太字は700または太字です太字でないのは通常または 400、数字は単位に続きません
フォントスタイル	フォントスタイル	通常、斜体	傾斜している場合は斜体、傾斜していない場合は通常 (一般的に使用されます)
フォント	リテラル形式		規定の順序で書き込み、文字サイズのフォントは必須です

<style>
        /* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
        
        div {
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahe';
            /* 复合属性：简写的方式  节约代码*/
            /* 顺序：font-style font-weight  font-size/line-height  font-family */
            font: italic 700 16px 'Microsoft yahe';
        }
</style>

font-size および属性は保持する必要がありますfont-family。そうでない場合、フォント属性は効果がありません。

5 CSS テキストのプロパティ

CSS テキストプロパティでは、テキストの色、配置テキスト、装飾テキスト、テキストのインデント、行間隔などのテキストの外観を設定できます。

属性	特急	属性値	説明する
色	テキストの色	赤、#ccc、rgb(100%,0%,0%)	16 進数が最も一般的に使用されます
テキスト整列	テキストの配置	左、右、中央	テキストの水平方向の配置を設定します
テキストインデント	テキストのインデント	2em、em はワードサイズです	段落の最初の行のインデント
外部装飾	文字装飾	なし、下線、上線	下線を追加下線を解除下線なし
行の高さ	行高	30ピクセル	行間の距離を制御し、テキストを垂直方向の中央に配置します

6つのCSS複合セレクター

一般的に使用される複合セレクターには、子孫セレクター、子セレクター、共用体セレクター、疑似クラスセレクターが含まれます。

6.1 子孫セレクター

親要素内の子要素を選択できます

.class h3 {
	color:red;
	font-size:16px;
}

.class と h3 はスペースで区切られます
.class は親レベル、h2 は子レベル、最終的な選択はh3です。

6.2 サブセレクター

簡単に理解すると、親子要素を選択することになります。

.class>h3 {
	color:red;
	font-size:14px;
}

h3 は.class の息子である必要があり、彼の孫や曾孫は彼の制御下にはありません

6.3 共用体セレクター

複数のラベルのセットを選択し、同時に同じスタイルを定義することができます。

/*选择  ul  和  div 标签元素 */
ul,div {
    样式声明
}

共用体セレクターは集合宣言でよく使用されます。

6.4 疑似クラスセレクター

リンクに特殊効果を追加したり、最初と n 番目の要素を選択したりするなど、一部のセレクターに特殊効果を追加するために使用されます。
擬似クラスセレクターの書き方の最大の特徴は、のようにコロンで表現されることです :hover。:first-child
リンク疑似クラスや構造疑似クラスなど、多くの疑似クラスセレクターがあります。ここでは、最初に一般的に使用されるリンク疑似クラスセレクターを記録します。

a:link      /* 未访问的链接 */
a:visited   /* 已访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */
记忆法
love   hate     爱上了讨厌  

a :hover {
    /*鼠标经过的时候，变成了红色*/
   color:red; 
}

:focus疑似クラスセレクター

フォーカスされたフォーム要素を選択するために使用されます

input : focus {
    background-color:yellow;
}

6.5 複合セレクターの概要

セレクタ	効果	特徴	使用法	使用法
子孫セレクター	子孫要素を選択するために使用されます	将来の世代のためにもなる	多くの	記号はスペースです。nav a
子セレクター	最も近いレベル要素を選択します	自分の息子だけを選んでください	少し	記号は> .nav>pです
ユニオンセレクター	同じスタイルを持ついくつかの要素を選択します	一括申告に使用可能	多くの	記号はカンマ .nav、.header
リンク擬似クラスセレクター	異なるステータスのリンクを選択してください	リンク関連	少し	{} と:hover を覚えることに集中してください
:フォーカスセレクター	カーソルを取得するフォームを選択します	フォーム関連	少し	入力:フォーカス

6.6 重量の計算

ラベルセレクター	計算重み式
継承された、または *	0,0,0,0
要素ごと (ラベルセレクター)	0,0,0,1
クラスごと、疑似クラス	0,0,1,0
IDごとに	0,1,0,0
各インラインスタイル style=""	1,0,0,0
それぞれ !重要重要	∞ 无穷大

7 CSS要素の表示モード

要素パターン	共通の要素	要素の配置	幅と高さを設定する	デフォルトの幅	含む	知らせ
ブロックレベル要素	h タグ、div、p、ul、li	独占一行	できる	親コンテナの 100%	任意のタグを含めることができます	ブロックレベルの要素を p タグと h タグ内に配置することはできません
インライン要素	<a>、<em>、<i>、<スパン>	複数行	できない	コンテンツの幅	テキストまたはその他のインライン要素を保持します	タグはブロックレベルの要素を保持できます
インラインブロック要素	<img />、<input />、<td>	複数行	できる	コンテンツの幅

モード変換:

ブロック要素に変換: 表示: ブロック
インライン要素に変換: 表示: インライン
转换为行内块：display: inline-block

一个小技巧：单行文字垂直居中的代码

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

8 CSS背景

给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

属性	作用	属性值	说明
background-color	背景颜色	16进制	默认值 transparent
background-image	背景图片	none或url	url不需要加引号
background-repeat	是否平铺	repeat/ no-repeat /repeat-x/repeat-y	默认平铺repeat
background-position	背景位置	方位名词或者精确单位	全写，写一个值
background-attachment	背景附着	scroll(背景滚动) /fixed(背景固定)
背景色半透明	颜色透明	background : rgba(0,0,0,.3);后面必须是四个值

特别注意：background-position

参数都是方位名词，则两个值前后顺序无关，只指定一个方位名词，则第二个值默认居中对齐
参数是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标，只指定一个数值，是 x 坐标，另一个默认垂直居中
参数是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景简写：

background: transparent url(image.jpg) repeat-y scroll center top

body {
    height: 3000px;
    background-color: #ccc;
    background-image: url(images/sms.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background : rgba(0,0,0,0.3);
    /*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
    background: #ccc url(images/sms.jpg) no-repeat fixed center top;
		}

CSS ノート -- 非常に詳細 -- 基礎ゼロ -- 簡潔でわかりやすい (1)