[TOC]
CSS（上）
CSSとは何ですか？
CSS：カスケーディングスタイルシート、スタイルシートをカスケード。CSSの役割は、スタイルのHTMLページのタグの様々なを追加することであるウェブページの定義を表示します。簡単に言えば：CSS Webページのコンテンツの表示スタイルと分離、改善されたディスプレイを。
CSSのメリット
- そして、データが別々に表示することを
- ネットワークトラフィックを削減
- 視覚効果は、サイト全体で一貫しています
- 開発効率向上（低下結合、HTMLを書き込むための責任者、書き込みCSSの責任者）
例えば、それだけで再びそれを書き、今のCSSを持って、百倍を書くためにそれを実現することを目的とする場合は百ページ、HTMLに表示するパターンがあります。さて、HTMLだけで完全に多種多様なスタイルを提供するために、CSSをデータといくつかのコントロールを提供します。
導入のCSSの仕方
インラインスタイル
<p style="color: red">您好</p>
内部様式
<style>
div{
color:red;
}
</style>
<!--我们的<style>标签要写在<body>的外面-->
<div>我就是这么强大</div>
例えば：これはpycharmの一例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
<style>
div{
color:red;
}
</style>
<!--我们的<style>标签要写在<body>的外面-->
</head>
<body>
<div>我就是这么强大</div>
</body>
</html>
外部スタイル
外部CSSスタイルは、別のファイルに記述することですし、ページに導入します。この方法をお勧めします
<link rel="stylesheet" href="01.css">
例えば：
01.css
div {
color: aqua;
}
導入のCSSの仕方.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
</head>
<body>
<link rel="stylesheet" href="01.css">
<div>我就是这么强大</div>
</body>
</html
CSSの二つの特徴
承継
親へのいくつかのプロパティを設定し、子供は私たちのCSSに継承され、親の財産を継承します。
ラミネートプロパティ
メジャーレーベルが右重量も大きい小さなラベルの重量オフカバーし、ブラウザは誰の属性を表示します
CSSセレクタ
基本的なセレクタ
要素セレクタ
あなたはにいる、スタイルとそのラベルのトップを与える <style>ラベルがようだったが、限り、このラベルを取り除くと同じページになり、統一されたスタイルは、バッチに適用されます。
<style>
div{
color: blue;
}
</style>
<div>基本选择器</div>
IDセレクタ
特定のタグに適用される特定のスタイルを設定します。
<style>
#d2{
color: red;
}
/* # 代表的就是一个标签的ID*/
</style>
<div id="d2">ID选择器</div>
クラスセレクタ
あなたはより多くを持っている場合は、タグのclass属性、スペースで区切られた使用は、タブの設定は、特定のスタイルに適用されます
<style>
/*这个 . 就代表类*/
.c2{
color: red;
}
.c3{
color: blue;
}
.c4{
color: yellow;
}
/*我们可以对不同的类的属性的标签设置不同的颜色*/
</style>
<div class="c2">ID选择器2</div>
<div class="c3">ID选择器3</div>
<div class="c4">ID选择器4</div>
コンビネーションセレクタ
コンビネーションセレクタ
複数のセレクタとの間で使用されるカンマ分離。複数のラベルで選択したページを表示します。いくつかの共通要素
<style>
.d2,p{
/* class="d2"的div标签和p标签都会变为红色*/
color: red;
}
</style>
<div class="d2">哈哈哈</div>
<p>p标签</p>
<div class="c">9098</div>
子孫セレクタ
使用スペースは、子孫のセレクターを示しています。名前が示すように、（息子、孫、ひ孫を含む）親要素の子孫
<style>
div div{
color: red;
}
/*div标签里面的所有div后代都会变为红色*/
</style>
<div>我是你爸爸我真伟大
<div>我是儿子1</div>
<div>我是儿子2
<div>我是孙子</div>
</div>
</div>
息子セレクタ
使用>子孫セレクタを表します。例えばDIV> pについて、単に子孫要素Pを選択し、現在のdiv要素を表します。
<style>
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p{
color: red;
}
</style>
<div>我是你爸爸我真伟大
<div>我是儿子
<p>我是孙子</p>
</div>
</div>
近所のセレクタ
間で使用される複数のセレクタ+離間。
<style>
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p{
color: blueviolet;
}
</style>
<p>我是个p</p>
<div>我是你爸爸我真伟大</div>
<p>我也是个p</p>
兄弟セレクタ
複数のセレクタ間で使用される〜離れて。
<style>
/*span后面所有的兄弟class="a"的标签*/
/*我也是个p这个标签不是span的兄弟，他就不会显示*/
span~.a{
color: blueviolet;
}
</style>
<div>
<span>哈哈哈</span>
<h1 class="a">标题1</h1>
<h2 class="a">标题2</h2>
<p>我是个p</p>
<h4 class="a">标题4</h4>
</div>
<p class="a">我也是个p</p>
その他のセレクタ
属性セレクタ
** [プロパティ] *指定された属性を持つ要素を表すとともにタグが選択されます。
<style>
/*选取带有name属性的元素。*/
div[name]{
color: pink;
}
</style>
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
<style>
/*选取带有name="456"属性的元素。*/
div[name="456"]{
color: pink;
}
</style>
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
ユニバーサルセレクタ
*****ユニバーサルセレクタを使用して表現。
<style>
/*所有标签的颜色都会变为红色*/
*{
color:red;
}
</style>
<div>标签1</div>
<span>标签2</span>
<p>标签3</p>
疑似クラスセレクタ
<style>
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
</style>
<a href="form表单.html">点我</a>
擬似希土類元素セレクタ
最初の文字
一般的に特別なスタイルを設定するために使用されるイニシャル：
p:first-letter {
font-size: 48px;
color: red;
}
前
/*在每个<p>元素之前插入内容*/
p:before {
content:"哈哈哈";
color:red;
}
後に
/*在每个<p>元素之后插入内容*/
p:after {
content:"哈哈哈";
color:blue;
}
前と浮動を削除するために使用されるよりも多くの後。
プライオリティセレクタ
私たちは一つに耳を傾けなければならない、我々はラベルで複数のスタイルを設定している可能性がございます、アイテムの重複セットに会いましたか？ここでは、優先順位セレクタを使用する必要があります。
インラインスタイル1000年> IDセレクタ100>クラスセレクタ10>タグセレクタ1> 0継承スタイル
CSSプロパティ関連（知っています）
幅と高さ
幅プロパティは、要素を設けてもよい幅度。
高さ属性要素は次のように設定することができ、高い程度。
ラベル幅を設定するブロックレベル、インラインタグの幅は、内容によって決定されます
フォント
テキストのフォント
フォントファミリは、システムを保存するために「フォールバック」など、いくつかのフォントの名前を取ることができます。お使いのブラウザが最初のフォントをサポートしていない場合、それは次のものをしようとします。ブラウザは、それが認識する最初の値を使用しています。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
フォントサイズ
p {
font-size: 14px;
}
継承するように設定した場合、親要素のフォントサイズの値を継承表します。
単語量（厚さ）
フォント重量はワード量（厚さ）のフォントを設定するために使用されています。
| 値 | 説明 |
|---|---|
| ノーマル | デフォルト値は、標準厚さ |
| 大胆な | 太字 |
| 大胆な | より厚いです |
| ライター | より細かいです |
| 100〜900 | 特定の厚さを設定し、400は正常に相当し、太字及び700と等価です |
| 受け継ぎます | 親要素のフォントの太さの値を継承 |
テキストの色
色属性は、テキストの色を設定するために使用されます。
色は、ほとんどの場合、CSSで指定されています。
- 進値 - など：**＃** FF0000
- RGB値 - 例えば：RGB（255,0,0）
- 色の名称 - など：赤
そこRGBA（255,0,0,0.3）、アルファの第4の値は、指定された色の透明度/不透明度は、それは0.0〜1.0の範囲です。
テキストの配置
テキスト整列属性は、テキスト要素の水平方向の配置を指定します。
| 値 | 説明 |
|---|---|
| 左 | デフォルト値は左揃えです |
| 右 | 右揃え |
| センター | 揃え |
| 正当化 | 両端揃え |
テキストの装飾
テキストの装飾の属性は、テキストに特殊効果を追加するために使用します。
| 値 | 説明 |
|---|---|
| 無し | デフォルト。テキスト定義された基準。 |
| アンダーライン | 次の行のテキストが定義されています。 |
| 上線 | テキスト行の定義。 |
| ラインスルー | テキストを通る線を定義します。 |
| 受け継ぎます | テキストの装飾のプロパティは、親要素の値を継承しています。 |
一般的に、デフォルトのスクライブからラベルを削除するために使用：
a {
text-decoration: none;
}
最初の行のインデント
テキストインデント：32PX;
段落インデント32個の画素の最初の行：
p {
text-indent: 32px;