CSSセレクタスタイルのフロントエンド

記事のディレクトリ

CSS入門

CSSとは何ですか
CSSの使用状況

インターライン
インライン
アウトリーチ式

セレクタ

基本的なセレクタ

タグセレクタ
クラスセレクタ
IDセレクタ
ワイルドセレクタ
セレクタ優先的

コンビネーションセレクタ

グループ（パケットおよびネストされた）セレクタ
後代（子孫）セレクタ
隣接（弟）セレクタ
組成優先セレクタ

属性セレクタ
疑似クラスセレクタ
擬似要素セレクタ
セレクタの優先順位

ラベルスタイル

基本的なスタイル
一般的なスタイル

フォントのスタイル
テキストスタイル
背景スタイル
フレーム
新しい境界線のプロパティ

dispalyプロパティ

CSS入門

CSSとは何ですか

カスケーディングスタイルシート（英語名：カスケーディングスタイルシート）は、HTMLやXMLドキュメント・スタイルのコンピュータ言語などの方法を使用パフォーマンスです。CSSは、静的スクリプト言語の様々なページは、動的ページの各要素のためにフォーマットすることができます修正することはできません。

CSSの使用状況

文法構造：

セレクタ{プロパティ：プロパティ値、プロパティ：プロパティ値、プロパティ：プロパティ値;}

方法の3種類の導入：

インターライン

<div style="width: 100px; height: 100px; background-color: red">CSS的第一种装饰方式</div>

インライン

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>CSS的第二种装饰方式</div>
</body>

アウトリーチ式

file: my.css
div {
	width: 100px;
    height: 100px;
    background-color: red;
}

file: my.html
<head>
    <link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div> CSS的第三种装饰方式</div>
</body>

注ページのCSSスタイルは、通常、個別のCSSファイルに記述する必要があります

セレクタ

基本的なセレクタ

タグセレクタ

名前タグやラベルに一致するすべての一致するドキュメント：div要素は{}すべての文書のdiv要素にマッチしますなど、スパンが{}すべての文書スパンと一致します

div {
    background-color: yellow;
}

クラスセレクタ

すべてが一致するドキュメントクラス属性を持っていると赤タグの属性値：<SUPクラス=「赤」> </ SUP> <サブクラス=「赤」> </サブ>が照合されます

.red {
    color: red;
}

注意：
スタイルのクラス名は（一部のブラウザが認識しない）数字で始めることはありません。
タグのclass属性は、複数持っている場合は、スペースを使用。

IDセレクタ

すべてのタグはdivのid属性と属性値文書持つ一致：などの<div idは= "DIV">としての</ DIV> <セクションID = "DIV"> </ section>の照合されます、IDセレクタを確認する必要があります唯一のシングルドキュメント

#div {
    text-align: center;
}

ワイルドセレクタ

一致するすべての文書のタグ：ディスプレイのhtml、ボディとbodyタグの通常、あらゆる種類

* {
    border: solid;
}

セレクタ優先的

小さいベースセレクタ優先順位の範囲は、実質的に逆セレクタ、マッチング範囲、高い優先度を一致さ
優先度は、一般に、選択精度に基づいて選択される優先マッチング精度が高い、高い、試合に比例します
セレクタ優先的：IDセレクタ>クラスセレクタ>タグセレクタ>野生セレクタ

コンビネーションセレクタ

グループ（パケットおよびネストされた）セレクタ

分组，不同的选择器可以共用一个样式
div, p, span{
    color: red;
}
嵌套，后代选择器与标签组合使用
div  p,span{
    color: red;
}

使い捨てパケット複数のセレクタを制御する、ワンタイム制御は、セレクタのネストされた複数のネスト
離間セレクタとの間において、各セレクタビットを組み合わせて任意の有効な選択又は選択することができます

後代（子孫）セレクタ

子代选择器用>连接
div > span {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

セレクタ（最後セレクタ論理）を制御使い捨て、プリセレクタは、ビットセレクタを変更しています
各セレクタ・ビットは、任意の正当セレクタまたはセレクタの組み合わせであることができます
子孫セレクタは、ネストされたマルチレベルの親子関係することができるように子孫セレクタは、親子関係のネストでなければなりません

隣接（弟）セレクタ

相邻选择器用+连接 对下不对上
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接 对下不对上
.d1 ~ .d3 {
    color: red;
}

セレクタ（最後セレクタ論理）を制御使い捨て、プリセレクタは、ビットセレクタを変更しています
各セレクタ・ビットは、任意の正当セレクタまたはセレクタの組み合わせであることができます
隣接セレクタは、セレクタかもしれ直接的または間接的に隣接する隣接関係を兄弟、直接隣接関係でなければなりません

組成優先セレクタ

優先度の組み合わせと関連する重みセレクタ、及び重量の
重みの対応

セレクタ	重量
ワイルドカード	1
タグ	10
クラス、プロパティ	100
ID	1000年
！重要	10000

更新されていないセレクタ位置についてのセレクタの重み、重みだけのケアを比較
n個のセレクタの任意の組み合わせのタグよりもクラスセレクターの優先度：セレクタの異なるレベルの間で比較することはできません

属性セレクタ

セレクタ	機能説明
[ATTR]	マッチタグは、attrを属性を持っています
【たAttr =選択]	ATTR、タグのvalの属性値に一致する属性を持ちます
[Attrの〜=の選択]	マッチは、属性値が指定された単語のラベルを含む、ATTR属性を持っています。
[Attrの\| =セレクション]	マッチは全体の単語でなければならない値の先頭にタグを付けるために指定された属性値と、プロパティ値をATTR性質を持っています。
【たAttr =選択]	マッチがATTR属性を持つ、属性値は、タグのvalで始まります
[$ = Attrの選択]	マッチがATTR属性を持つ、属性値は、タグのvalで終わります
[* =たAttrの選択]	Attrが、属性、ラベルにヴァルを備えた属性値に一致しています

<head>
    <style>
		只要有xxx属性名的标签都找到
        [xxx] {
            color: red;
        }
        只要标签有属性名为xxx并且值为
        [xxx='1'] {
            color: blue;
        }
        规定p标签内部必须有属性名为xxx并且值为2的标签
        p[xxx='2'] {
          color: green;
        }
    </style>
</head>
<body>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>

疑似クラスセレクタ

セレクタ	タイプ	機能説明
リンク	リンク擬似クラスセレクタ	一致する要素を選択し、マッチング要素は、ハイパーリンクが訪問されていない定義されています。一般的にリンクポイントを記述するために使用
：ホバー	ユーザーの行動セレクタ	マッチング要素、および要素aを介してユーザにマウスを選択します。
A：アクティブ	ユーザーの行動セレクタ	選択された要素と一致する、一致する要素が活性化されます。一般的にリンクやボタンのポイントを記述するために使用
A：訪問	リンク擬似クラスセレクタ	一致する要素を選択し、整合素子は、ハイパーリンクを定義され、訪問されました。一般的にリンクポイントを記述するために使用
焦点	ユーザーの行動セレクタ	焦点整合素子を整合素子を選択し、取得します

<head>
    <style>
        未访问的链接
        a:link {
            color: red;
        }
        鼠标移动到链接上
        a:hover {
            color: yellow;
        }
        选定的连接
        a:active {
            color: black;
        }
        已访问的链接
        a:visited {
            color: green;
        }
        input输入框获取焦点时样式
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">sogo网</a>
<input type="text">
</body>

擬似要素セレクタ

最初の一文字

常用的给首字母设置特殊样式
p:first-letter {
  font-size: 48px;
  color: red;
}

前

在每个<p>元素之前插入内容
p:before {
  content:"*";
  color:red;
}

後に

在每个<p>元素之后插入内容
p:after {
  content:"[?]";
  color:blue;
}

セレクタの優先順位

同じセレクタは、さまざまな方法の導入は：原則、に近い担当しているラベル進み、
クラスセレクタ>タグセレクタインラインスタイル>のidセレクタ>：異なるセレクタ、導入のと同じ方法を

ラベルスタイル

基本的なスタイル

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

長さ

PX：画素（ピクセル）、ウェブデザインのために画面上に表示する最小単位、簡単で直感的
MM：MM
CM：CM
中：インチ
PT：ポイント（ポイント）、長さの単位、1PT = 1 / 72in、印刷業界のために、使用することは非常にシンプル。
EM：かなりの長さ、通常1EM = 16pxには、流れの分配に適用されます

カラー

赤、直接書き込み英単語
（）は、RGB：三つの値があってもよい[0-255]の値またはパーセント、離れて（R：赤、G：緑、B：青）
RGBA（）：最初の3つの画素値またはパーセント、最後透明[0、1]の値に離れて（R：赤、G：緑、B：青：アルファ）
HSL（）：最初の値が[0360]の値であり、二つの値が離れ、（明度：色相、S：彩度L、H）の割合であってもよいです
HSLA（）は：最初の値は[0360]の値は、中間値は、2つのパーセンテージ、の最後のものであってもよい[0、1]の値に離れ（H：色相、S：彩度L：明度：アルファ）
#AABBCC：6桁の16進数、各2つの全体、赤、緑、青、省略することができ#abcを表します

一般的なスタイル

フォントのスタイル

フォントファミリ：フォントファミリ、スタンバイ用のマルチ値、間隔を置きました

font-family: "STSong", "Arial";

フォントサイズ：フォントサイズ
フォントスタイル：フォントスタイル、通常のイタリック、斜め
フォント重量：フォント重量は通常、太字、軽量化、100〜900
行の高さ：行の高さ
フォント：単語サイズスタイル重量/高ワード線群

テキストスタイル

色：テキストの色
テキスト整列：横方向に整列

left 居左 、center 居中 、right 居右、justify 两端对齐

垂直整列：長手方向に整列

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象底端对齐

テキストインデント：フォントを減らします

p{
    text-indent: 48px;
}

テキスト装飾：ワードスクライビング

underline：下划线、overline：上划线、line-through：中划线、none：没有划线、inherit：承父元素的text-decoration属性的值

文字間隔：単語の間隔
単語間隔：単語の間隔
ワードブレイク：ラップ

normal：默认换行规则
break-all：允许在单词内换行

背景スタイル

背景色：色

background-color: green;

背景画像：不透明度によって、写真：（0-1）透明度を制御するために、

background-image: url("bg.png");

背景リピート：リピート

background-repeat: no-repeat;
repeat(重复)、 no-repeat(不重复) 、repeat-x(X轴重复) 、repeat-y(Y轴重复)

背景位置：ポジショニング

background-position: center;
top、bottom、left、right 、center

背景アタッチメント：スクロールモード

scroll、fixed

それは一緒に書くことができます。

background: no-repeat center url("bg.png") blue ;

フレーム

ボーダー幅：ボーダー幅

border-width: 3px;

ボーダースタイル：境界線の種類

none: 默认无边框、dotted: 点线框、dashed: 虚线框、solid: 实线边界、double: 两个边界、groove: 3D沟槽边界、ridge: 3D脊边界

ボーダーカラー：ボーダー色

border-color:
transparent：透明

ボーダーのための単一のスタイルを設定します。

{
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

ボーダースタイル：;異なる境界線を設定するには、右下の左側に

属性可以有1-4个值
border-style:dotted solid double dashed;

それは一緒に書くことができます。

border: 3px solid red;

ボーダー半径円弧角ボーダー

div {
    width: 400px;
    height: 400px;
    background-color: red;
    border: 3px solid black;
    border-radius: 50%;
        }

新しい境界線のプロパティ

プロパティ	説明
ボーダー-画像	画像のすべてのプロパティの境界線を設定します。
ボーダー半径	* - - 半径のプロパティすべての4つの境界線を設定するための
ボックスシャドウ	一つ以上のドロップダウンボックスシャドウの追加

dispalyプロパティ

ディスプレイを制御するためのHTML要素。

値	意味
表示：「なし」	HTML文書の要素が存在しますが、ブラウザに表示されません。通常、交配のために使用されるJavaScriptコード。
表示ブロック"	あなたが一部を、残りのマージンが満たされると、セットの幅を指定した場合、デフォルトでは、ページの幅全体を占めています。
表示：「インライン」	押して表示インライン要素は、その要素の幅、高さ、マージントップ、余白下を再設定し、フロート特性が影響されることはありません。
表示：「インラインブロック」	要素はインライン要素とブロックレベル要素の特性を有すると同時に。

表示：「なし」と可視性：隠された違い：

可視性：隠された：要素を非表示にしますが、隠し要素がまだ隠されていない以前に同じ空間を占めます。言い換えれば、要素が隠されているが、それでもレイアウトに影響を与えるものの。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。