基本的な導入.CSS
すでにHTMLを学んだように、HTMLを学んでHTML、それは使用してマークアップタグを Webページを記述するために、しかし、あなたはそれに素敵なスタイルを提供するテキストを設定したい場合は、通常の状況HTML入力テキストの下で、我々は今日の助けが必要ブラウザがCSSスタイルに読み込むときに達成されるCSS（カスケーディングスタイルシート）を学んで、あなたは、私たちが達成したいテキスト効果をテキストをレンダリングするために、そのスタイルを使用します。
参照の二つ.CSS
方法の一つ：インラインスタイル（インラインスタイル最高の優先度は、後述する一方で）
<div style="color: red;">今天天气真好</div>
方法2：内部スタイル（スタイルタグは、headタグに追加する必要があります）
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
#d1{
border: 1px solid black;
}
.c1{
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid red;
float: left;
}
.c2{
height:20px;
background-color: darkgray;
}
</style>
方法3：外部スタイルシート（CSSが別のファイルを確立し、その後、htmlファイルで導入）
<link rel="stylesheet" href="此处写CSS的文件名">
三の.CSSセレクタ
1.基本ソーター
- タグセレクタ
p {color: "red";}
- IDセレクタ
#i1 {
background-color: red;
}
- クラスセレクタ
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
- ユニバーサルセレクタ
* {
color: yellow;
}
注意：タグのclass属性をより、スペースで区切る必要があります。
2.コンビネーションセレクタ
- 子孫セレクタ
li a {
color: green;
}
注：黄色のラベルliの内部を示す、スペースで区切られたとLi Aを使用します。
- 息子セレクタ
div>a {
font-size:20px;
}
すべての親divタグを選択すると、ラベルで、フォントサイズを20ピクセルになります。
- 近所のセレクタ
div+p {
margin: 5px;
}
すべてのdivタグの直後にpタグを選択
- ブラザーセレクタ
#i1~p {
border: 2px solid royalblue;
}
IDは、p i1のタグのすべての背後にある（同じ関係に代わって両方）
3.属性セレクタ
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
4.ネストされたパケット
- グループ：Nがある場合の要素は、以下のようなスタイルをn回記述することなく、我々は唯一の、カンマで区切られたその要素に名前を付ける必要がある、同じスタイルを持っています：
div, p，a {
color: red;
font-size:30px;
}
- ネスティング：赤にp型ラベルフォントカラーの内部に選択組み合わせて使用することができる、例えば:( C1）
.c1 p {
color: red;
}
優先度セレクタ
- 優先順位の近いタグ（近接の原則）が高いです
- 重みの算出
インラインスタイル（タグのスタイルに直接書かれた）1000年1。
2. 100 IDセレクタ
3セレクタ10クラス
4のセレクタ要素1
div#d1(101) div.c1(11)
有効にするスタイルを強制的に重要な方法を追加することにより:!ますが、お勧めできません。あまりにも多くの使用であればあるので！スタイルファイルを維持することは困難で重要な原因の混乱。
前記擬似クラスセレクタ
/* 未访问的链接 */
a:link {
color: white；
}
/* 已访问的链接 */
a:visited {
color: yelow；
}
/* 鼠标移动到链接上 */（非常重要，划重点划重点）
a:hover {
color: #FF00FF
}
/* 选定的链接 */ （不常用）
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
7.擬似要素セレクタ
/*在p元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
/*在p元素之前插入内容*/
p:before {
content:"*";
color:red;
}
フローティング除去するための二つ以上の疑似多素子セレクタは、フローティングは、後に述べます。
/*给首字母设置样式*/(不常用)
p:first-letter {
font-size: 48px;
color: red;
}
CSSのIV。共通の財産
1.フォントのプロパティ
/*family为设置字体，size为字体大小，weight为字体粗细，color为字体颜色*/
div{
font-family:"Microsoft JhengHei Light",serif;
font-size: 20px;
font-weight: bold;
color:red;
}
2.テキストのプロパティ
- テキスト整列アライメント（重要）
- 装飾的なテキスト装飾（：なし）ラベルを削除する（テキストの装飾を下線）
- 最初の行のインデントテキストのインデント
div{
text-align: center;
text-decoration: none;
text-indent: 10px;
}
3.colorプロパティ
- 赤（直接名前を書きます）
- ＃FF0000
- RGB（255、0、0） - > RGBA（255,0,0,0.5）（透明度を表します）
div{
color:red;
}
div{
color:#ffff;
}
div{
color:rgb(255,255,255);
}
div{
color:rgba(255,21,21,3);
}
4. border属性
- ボーダー幅（フレーム幅）
- ボーダースタイル（境界線のスタイル）
- ボーダーカラー（境界色）
- 境界半径フィレットにボーダー
div{
border-width: 20px;
border-style: solid;
border-color: #ffff;
}
简写：
div{
border:2px solid red;
border-radius: 50%;
}
5.背景のプロパティ
- 背景色背景色
- 背景画像、背景画像
div{
background-color: #204982;
background-image: url();
}
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
简写为：background:rede url('图片名') no-repeat right top;
/*页面滚动，背景图片不动*/
div{
background-attachment: fixed;
}
（次の4つの要素に分割）6.CSSボックスモデル
- 内容（コンテンツ）
- パディング（内側の塗りつぶし）が境界とコンテンツとの間の距離を調整する場合、このプロパティを使用して
- 国境（ボーダー）
- 調整複数のラベルとの間の距離を調整するためのマージン（余白）（2つのラベルの横最大マージンを取ることに注意します）
/*margin外边距*/
body{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
简写：
div{
margin:20px 10px 30px 50px;（上右下左）
}
margin也常用来居中盒子
div{
margin: 0 auto;
}
/*padding内填充*/
body{
padding-bottom: 20px;
padding-top: 20px;
padding-left:20px;
padding-right:20px;
}
简写：
div{
padding:20px 30px 10px 5px;（上右下左）
}
、四辺のため、
2つの最初のための1つを提供する-次、左のための第二-右、
第二左のために、最初のための3つ、いずれかを提供されている場合-右、第三のために、
4つのパラメーターの値を提供することになります-右-低級-四辺に作用する左ため。
7.displayプロパティ
- インライン（特性は、インラインタグを許可しています）
- ブロックタグ内のメニューブロックに配置することができる（ブロックレベルの特性は、タグが許可されています）
- インラインブロック（専用線、高さと幅が設けられていてもよいです）
- なし（占有ない、ラベルを表示しません）
8.float（フロート）特性
- 達成するために、レイアウトの効果のために使用する
ナビゲーションバー1にの上部
左右の列2ページ - フロート
1.任意のラベルが浮くことができた後で、フロートがブロックレベルのタグを高く設定することができになると幅をフロートします - float値：
1。左は：フローティングのまま
2.右：浮動右
3.なし：デフォルト値は、フロートしません
ブロック浮動は、外枠の縁は、フローティングボックスまでのフレームまたは他を含むヒットするまで左または右に移動させてもよいです。
文書の一般的な流れは浮動ボックス内にないので、ブロックボックス内の文書の通常の流れが存在していない浮動ボックスのように振る舞います。
9.clearプロパティ
アクション：
クリアをクリアフロート- >クリア浮動側（ハエの内容は、親タグを保持していない）
をクリア値：
左側に浮動要素を許さ1.left。
右側の要素を浮動ことはできませ2.right。
3.both左右両側にはフロートすることはできません。
4.noneデフォルト。浮動要素を許可すると、両側に表示されます。
5.inherit明確な規定は親要素からプロパティ値を継承する必要があります。
.clearfix:after {
content: ""；
display: "block"；
clear: both；
}
注意：唯一の自分の仕事のための明確なプロパティを、他の要素に影響を与えず。
10.overflow overflowプロパティ
| 値 | 説明 |
|---|---|
| 目に見えます | デフォルト値。コンテンツはボックスの外側の要素があるだろう、剪定されることはありません。 |
| 隠されました | コンテンツは削除されます、そして残りのコンテンツは表示されません。 |
| スクロール | コンテンツは削除されますが、ブラウザは、コンテンツの残りの部分を表示するには、スクロールバーが表示されます。 |
| オート | コンテンツが剪定された場合、ブラウザは、コンテンツの残りの部分を表示するには、スクロールバーが表示されます。 |
| 受け継ぎます | 提供は親要素からoverflowプロパティの値を継承する必要があります。 |
11.zインデックス
オブジェクトの積層順が設けられています。
- z屈折率の値は、押圧誰小さな圧力値を覆うように大きな値を示し、
- 要素の唯一の位置は、Zインデックスを持つために、それは関係なく、相対的な位置、絶対位置、固定位置の、あなたはZインデックスを使用することができますが、浮動要素のzインデックスを使用することはできません、と言うことです
- z-index値が、何の単位を持っていない正の整数であり、我々は、z-index値、またはz-index値を持っていない場合は、ゼロのデフォルトのz-index値が同じ、それに押しているの背後にあるHTML、誰かを書いた人、要素を配置し、要素は常にポジショニングを抑制することはありません。
- 親現象から：父親は息子を弁護して、無用に退縮
#i2 {
z-index: 1000;
}
12.opacityプロパティ
透明度を定義するために使用します。それは完全に透明であり、0から1.0の範囲で、1は完全に不透明です。
13.ロケーション（位置）
- 静的
静的デフォルトフリーポジショニング、絶対ではない位置決め基準、及び左ラベルオブジェクトを設定し、同値のトップは動作しません。
- 相対的（相対位置）
これは、参照としてそれらの元の位置に、すなわち、ドキュメントの流れに対する要素の元の位置の反対側に配置されています。興味深いことに、オフセット値の要素との相対的な位置のセットは、要素がまだ元の位置、すなわち、ドキュメントフローによって占められるスペースがあっても。文書は、通常のストリーム・オブジェクトに従ったが、上部に基づくであろう、通常の右、下、左、および他の特性は、ドキュメントフローの位置をオフセット。Z-index属性の定義によってラミネート。
注：位置：主要な使用の相対的：絶対配置要素は便利参照を発見しました。
- アブソリュート（絶対位置）
定義：要素の絶対位置を設定する要素が既に初期包含ブロック（すなわち、body要素）に祖先、その位置を位置決めされていない場合、完全に文書フローから除去し、最も近い位置付け祖先要素の位置に対するボックス。要素がもともと存在しなかったかのように占有ドキュメント空間の通常の流れでオリジナルの要素は、閉じられます。かかわらず、それはノーマルストリームで発生したフレームのどのようなタイプの、フレームの後に位置するブロックレベル要素を生成します。
重要：親がこのような位置などの位置属性、設定した場合：相対;、その後、子要素は、原点を位置決めするための親の左上隅になります。親要素の設定位置;絶対：：相対;、その後、上、右、下が、割合として残っこれはうまく適応、私の子要素が設定されている位置している親から逸脱適応ウェブサイトのラベルの問題を解決することができます幅が表しています。
また、文書の通常の流れのうちの目的は、上、右、下、左、絶対位置の他の属性を使用します。Z-index属性の定義によってラミネート。