先端学習ノート2-1 CSS

参考個人記事：http://www.zhuzhuman.com/nav-1/type-5/article/5.html
CSSフルネーム：「積層様式表」（Cascading Steyle Sheets）

CSS    HTML            ，     ，  ，  ，  ，  ，    。
CSS3        ，      。

1-1 CSSコード文法

 ：p{color:red;}
css        ：      。
p：   。
	     p  ，            ，        id  ：#id ；class  ：.class ；  
{color:red;} 
	{}     。     ，         ，       “:”  ，
	         “;”  ，
	         “;”，           。
	      ，           。
	color  (    )。red    。

1-2 CSSはどこに書いてもいいですか？

css     ：   ，   ，   。

1-2-1埋め込み式

<p style="color:red;font-size:12px;">   p>

cssコードを直接html元素のスタートラベルのスタイルに書いて、ルールを同じに書きます。
1-2埋め込み

<style type="text/css">
	#myp{
		color:red;
		font-size: 12px;
	}
style>

cssコードをstyleラベルの中に書いて、styleタグは主にheadタグの中に入れています。その中で葃mypはid名によって取得したラベルで、あるラベルにid名mypが付けられていますので、直接にmypで取得できます。
1-2-3外部チェーン式
スタイルを一つの.cssタイプのファイルに書いて、linkタグを使ってファイルをページに紹介します。

/*  .css     ，  mycss.css */
#myspan{
	font-weight: bold;  /*      */
	font-family: "  "; /*       */
}

もう一つのhtmlファイルの名前はtest.

<link rel="stylesheet" type="text/css" href="../css/mycss.css" />

linkラベルは主にheadタグの中にあります。

rel=「styless heet」type=「text/css」は、どのようなファイルが導入されたかを宣言するための固定された書き方です。

href=「.../css/mys.css」はcssファイルのパスで、絶対パスと相対パスを放すことができます。絶対パスとは「…」です。http://www.forexample.com/css/mycss.cssこのタイプの絶対パスは「/css/mys.css」というのが既存ファイルのドメイン名を省略しています。もう一つの絶対パス「//www.forexample.com/css/mys.css」は、プロトコルヘッダを省略したもので、パスのプロトコルヘッダはページプロトコルヘッダと同じで、つまり、ページはhttpであり、ページはhttpsであり、このパスもhttpsであり、この例では相対パスを使用しています。または書かないということは現在のレベルのフォルダです。

1-2-4 3パターンの書き方の優先度
この3つの方法で要素が異なるフォントの色を定義すると、このフォントはどの色を表示しますか？本質的には、要素スタイルはその権能によって評価され、高い優先表示がされる。（ウェイトの後に説明があります。）クォータを考慮しないと、3つのスタイルの優先度：埋め込み式>埋め込み型>外部式は埋め込み式で定義されたその色を表示します。（近くの原則として理解できます。埋め込みはこのラベルに一番近いので、優先的に表示します。）
1-3セレクタ
1-3ラベル選択器
直接に署名を選択子として使用します。例:

div{
	width:100px;
	height:100px;
}

1-3-2 IDセレクタ
タグにid名を付けてください。cssは「啱」＋「id名前」の例を書きます。

<div id="mydiv">    div>

該当するcssで書く:

#mydiv{
	width:100px;
	height:100px;
}

1-3クラス選択器
ラベルにclass名を付けます。cssは「.」+「クラス名」を使います。クラス選択器はこのクラス名と呼ばれるラベルのスタイルを全部修正できます。例:

<div class="example mydiv">    div>
<p class="example">    p>

該当するcssで書く:

.example{ /* div p           */
	color:red;
}
.mydiv{ /* div      */
	background:#000000;
}

1-3-4サブセレクタ
ラベル要素を指定するための第一世代サブ要素（息子）、書き方：父要素+“>”＋第一世代サブ要素。例

<style>
	#box>ul{ /* div  ul     0 */
		margin:0;
	}
	#box>.myp{ /* #box   .myp        */
		color:red;
	}
style>
<div id="box">
	<ul id="list">
		<li>li>
	ul>
	<p class="myp">   p>
	<p class="myp">   p>
div>

1-3-5は選択器を含みます。
ラベルのすべての後裔を指定します。書き方：父元素+“”+子元素

<style>
	.box span{ /* .box    span            (        )。 */
		color:red;
	}
style>
<div id="box">
	<span>   span>
	<p class="myp">
		<span>   span>
	p>
	<p class="myp">
		<span>   span>
	p>
div>

1-3-6汎用セレクタ
の中のすべてのラベルに作用します。書き方:「*」

*{ /*          0，    0 */
	margin:0;
	padding:0;
}

1-3-7ダミーセレクタ
書き方：元素+「:」+疑似類名。よく使うaタグ:

a:hover{/*   a              */
	color:red;
}

aラベルには他の偽類があります。順番はa:link>a:visited>a:hover>a:active他のラベルもあります。（IE 6はa以外のダミー類をサポートしない；IE 6以上はすべてのラベルのhoverダミー類をサポートしている）菘𞈼ӗ{〹ӗ咻咻咻ŋœėœœœœœœÛœÛœœ剛œ表記方法：元素+「，」+元素+「，」+元素+「，」+元素など

h1,span,p,#mydiv,.box{
	color:red;  /*               */
}

1-3-8
書き方：元素＋条件要素

<style>
	div#mydiv{ /*   id  mydiv div 1px      */
		width:100px;
		height:100px;
		border:1px solid #000;
	}
style>
<div>div>
<div id="mydiv">div>

1-4スタイルに影響する要因
元素のスタイルはどのような要素によって影響されますか？
1-4-1継承
cssのいくつかのスタイルは継承性があり、これらのスタイルの要素を持つサブ要素もこのスタイルを持っています。

<style>
div{ /* div     ，   p        ，    a        ，    a    */
	color:red;
}
style>
<div>
	1
	<p>2p>
	<a href="http://baidu.com">3a>
div>

1-4-2ウェイト
前に述べたように、スタイル表示の本質は、高い値を示すスタイルです。異なる選択符の権利値は異なります。1.継承：権利値は0.1 2です。ラベル、疑似類、疑似オブジェクト：権利値は1 3です。クラス選択子、属性選択子：権利値10 4.id選択子：額面100 5.インラインスタイル：トレード1000 6.impotant：権利は無限です。mydiv.box p{}→権利は100+10+1=111です。
1-4-3積層
同じ元素で、cssスタイルが違っています。権利も同じです。先着順によって最後の様式を適用します。近い原則に似ています。前のスタイルを後ろに覆っていると理解できます。

p{
	color:blue;
}
p{ /*        */
	color:red;
}

1-4-4重要性impotant
！impotant設定の最高値

p{	/* !important  ;   */
	color:red!important;
}

1-5 CSSでよく使われるスタイル
1-5-1最も一般的なスタイル

幅：width：300 px；最小幅：min-width：100 px；

高：height：200 px；最小高さ：min-height：100 px；

背景：background：荁000000；写真：background：url(')2 px 3 px repeat-xともできます。（背景図x方向オフセット量y方向オフセット反復方式）

フレーム：border：1 px sonid膌ccc；(外枠線の大きさの外枠スタイルの実線の外枠の色)

外距離：magin：10 px；

内充填：padding：5 px；

字体の色：_；

フォントサイズ：font-size：12 px；

行の間隔：line-height:20 px；

フロート：float：left；

位置決め：position：relative；left:10 px;ナイト：5 px

オーバーフロースタイル：overflow：hidden；33751;33751;33751;1-5-2で使うことができる様式の〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

字体：{font-family:宋体}

粗体：{font-weight:bold}

斜体：{font-style:italic}

上線:{text-decoration:overline}

削除ライン（中線）:{text-decoration:line-through}

アンダーライン：{text-decoration:underse;}

段落インデント:{text-indent:2 em;}

中国語/アルファベットの間隔：{letter-spacing:5 px;}

英語の単語の間隔：{word-spacing:3 px;}

ブロック要素内のテキスト、画像の配置：{text-align:left;}

垂直配置方式：{vertical-align:top}

テキスト改行：{word-wrap:break-word}

オブジェクト中のブランク処理：{white-space:nowrap}強制的に一行に

を表示します。

テキストサイズ書き込み：{text-transform:capitalize}頭文字大文字

カーソルスタイル：{cursor:pointer}

カーソルの色:{caret-カラー:red}

フードフィルタ：{opacity:0.8;f i l t e r:alpha(opacity=80)}透明度を制御するために使用され、f ilterはIEプライベートフィルタ

である。