ディレクトリ
CSSとは何ですか
CSSはカスケーディングスタイルシート、カスケーディングスタイルシートの略です。HTML要素がより美しく見えるように、CSSは、主に、HTMLの表示スタイルを変更するために使用されます。HTMLは、コンテンツページに焦点を当て、およびCSSスタイルの要素に焦点を当てます。
CSSタイプ
CSSの範囲によると、CSSを分けることができます：
- インラインスタイル
- 内部様式
- 外部スタイル
3つのスタイルがこの記事を見ることができ、ルールの具体的な使用：
三つの方法HTMLリンクCSSスタイルに[パス]フロントエンドの学習を
、彼らはHTML要素の優先順位に影響を与えるには、次のとおりです。インラインスタイル>内部スタイル>外部スタイル
CSSの構文
セレクタ（セレクタ）、プロパティ（プロパティ）と値（値）：パターンは、3つの部分から構成されています。
セレクタ（セレクタ）：スタイル定義を選択HTML要素
属性（プロパティ）：所望の属性が変化する
値（値）：各属性の値を指定し、属性値が括弧に囲まれたコロンによって分離されます。
例：
body {
color: #000000;
background: #ffffff;
margin: 0;
padding: 0;
font-family: serif;
}
セレクタ
タグセレクタ
ラベルを選択するタグセレクタ、定義されたスタイルは、同じHTML文書のタグのすべてに影響を与えます。
構文構造：タグ{}
例：H1すべてのタグが赤になっています。
<!--样式定义-->
<style type="text/css">
h1{
color:red
}
</style>
<!--在HTML中使用-->
<h1>h1标题</h1>
クラスセレクタ
クラスセレクタは、スタイル土類元素を定義するために使用されるポイントの数を表示します。
構文構造：{} class属性値の要素は
、例えば：セレクタ要素および編集テキスト整列要素によって選択されたクラスを使用します
<!--样式定义-->
<style type="text/css">
.center {text-align: center}
</style>
<!--在HTML中使用-->
<h1 class="center">
This heading will be center-aligned.
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
IDセレクタ
IDセレクタは、一意のIDの水のHTML要素のための特定のスタイルを指定することができます。
構文構造：特定のID値＃{}の要素
例：ID選択された要素を使用して、その色を変えます
<!--样式定义-->
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
<!--在HTML中使用-->
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
派生セレクタ
マーキング要素によって定義されたスタイルコンテキストは、セレクタとの間の空間で、よりコンパクトです。
構文構造は：セレクタセレクタ1 2 3 {...}セレクタの
例：表要素に必要ではなく、通常のボールド、イタリック体で強くなり、誘導されたセレクタを定義することができます。
<style type="text/css">
table strong {
font-style: italic;
font-weight: normal;
}
</style>
パケットセレクタ
セレクタのグループでは、セレクタは、カンマで区切られたセレクタをグループ化する必要があります同じ文を共有するためにグループ化することができます。
構文構造：セレクタ[セレクタ] {}
例：
h1,.green,#green{
color:green;
}
ここではh1、.green、#green3つのセレクタは、スタイルの文を共有しています。
CSSボックスモデル
CSSのコンセプトでは、すべてのものは、箱（ボックス）です。
ボックスモデル（ボックスモデル）要素指定されたフレームの処理要素内容、パディング、ボーダー、および方法のパディング。
- 要素：要素。
- ボーダー：ボーダー
- パディング：パディング、または充填。
- マージン：余白、または空白マージン。
例：
各ブロックとパディング5つの画素10個の画素の外縁と仮定する。
所望のフレーム要素100は、ピクセル場合は、コンテンツの幅を設定する必要が70個の画素です。
#mybox {
width: 70px;
padding: 5px;
margin: 10px;
}
HTML要素を表示します
フレームの表示要素に分けることができます
- ブロック要素：ボックスまで行ずつ上のボックス
- インライン要素：一つの列を共有することができる要素の複数の列
- 可変要素：要素の親によって決定されたブロック要素または列要素であります
ブロック要素
块级元素生成一个元素框，(默认地)会填充其父级元素的内容，旁边不能有其他元素，在元素框之前和之后生成“分隔”符。一般是其他元素的容器元素，例如div。
块元素特点：
- 总是在新行上开始
- 高度，行高以及顶和底边距都可控制；
- 缺省宽度是它的容器(上级元素)的100%，除非设定一个宽度。
常见块元素：
<h1>：标题
<p>：段落
<div>：层
<form>：表单
行内元素
也叫内联元素，内联元素在当前行内生成元素框，而不会打断这行，行内元素不会在它本身之前或之后生成“分隔符”，行内元素只能容纳文本或者其他行内元素。
行内元素特点：
- 和其他行内元素都在一行上
- 高，行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变。
常见行内元素：
<a>：超链接；
<font>：字体
<image>：图片
<textarea>：多行文本输入框
<input>：输入框
<select>：选择输入框
<br>：换行
可变元素
可变元素：为根据上下文语境决定该元素为块元素或者内联元素。
常见的可变元素：
<applet>：Java Applet
<button>：按钮
使用display属性改变元素的框模型
display 属性设置为 inline：行内元素
display 属性设置为 block：块元素
display属性设置为 none ：让生成的元素根本没有框，这样的话，该框及其所有内容就不再显示。
例子：修改Display
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript">
</script>
<script type="text/javascript" >
function changeDisplay() {
//1-获得用户新的显示选择
var newDisplay = $("#selectDisplay").val();
//2-设置元素样式的display属性
$("#head1").css({"display" : newDisplay});
$("#head2").css({"display" : newDisplay});
}
</script>
</head>
<body>
<h1 id="head1">我是标题1</h1>
<h1 id="head2">我是标题2</h1>
<select id="selectDisplay" onchange="changeDisplay();">
<option selected>block</option>
<option>inline</option>
<option>none</option>
</select>
</body>
</html>
选择不同的display属性，动态改变h1标签的display状态。
HTML元素定位
坐标系统：可以将任何元素(框模型)放置在坐标系统(浏览器)的任何位置上。
距离：使用像素(px)或者百分比(%)
CSS定位方式
位置決め通常の流れ
絶対位置決め
要素が既に含有する第一ブロックに対する位置、祖先に配置されていない場合、最も近い位置する祖先要素に対する絶対位置の要素の位置を
絶対位置に文書要素の位置は、流れがない、何の関係もありませんスペースを占めます。
絶対配置の要素であることが、絶対に位置プロパティの値すべきです。その後、あなたは、左、右、上、下で財産場所に置かボックスを設定することができます。
相対的な位置決め
要素の相対的な位置決めは、位置計算から文書内の元の位置（位置モデルの流れ）に対するものです。、右に元の位置からの要素の相対的な位置によって上下、左この手段が検索します。
対応するスペースを得るために用いられる要素の相対的な位置決めは、実際には、ストリーム中のその通常の位置に対して要素の位置が、通常のストリームのローカリゼーションモデルの相対的な位置決めの一部とみなされます。
要素の配置プロパティ
Z-index属性の含有量が異なる層に表示することができ、積層順序が形成されています。
