WEB——CSS(1)

一、cssの基本知識
1.1初認識css

css(cascading style sheet)積層スタイルシート

主な目的は、ウェブページを飾るための

である.

バージョンには、主にcss 2またはcss 3

があります.
1.2 cssを使用する理由

その内容と表現が分離され、メンテナンスと改版が容易である

ページ閲覧速度を向上することができる

.

W 3 C規格

準拠
二、css使用
2.1使用方法
CSSスタイルシートの使用方法は主に以下の3種類があります.

タグスタイル:CSSスタイルシートをHTML対応タグ

に書く.

インラインラベル:CSSスタイルシートをドキュメントに

外注ラベル:CSSドキュメントを「.css」ファイルとして保存し、中

に定義します.
 
2.2 css構文
CSSの定義は、セレクタ、属性、属性値の3つの部分で構成されています.

body {
color:#006666;
font-size: 18px;
}

2.3 cssセレクタ分類
1.idセレクタ
定義:要素IDに基づいて要素を選択し、一意性を有します.前に「#」と表示されます.たとえば、次のようになります.

#demo{
color:#FF0000; 
} 

使用方法:HTMLでは、タグはidのプロパティを定義して呼び出すことができます.のように

 ....

2.ラベルセレクタ
定義:HTMLページは多くの異なるラベルで構成されており、ラベルセレクタは、対応するラベルに対応するCSSスタイルを採用することを決定します.
使用方法:

p{ 
font-size:12px; 
background:#900; 
color:090; 
} 

ページに対応するpタグはすべてこのスタイルを適用します.
3.クラスセレクタ
定義:クラスセレクタはクラス名に基づいて選択し、前に「.」名前を付けます.

.demo{
color:#FF0000;
}

使用方法:HTMLでは、タグはclassのプロパティを定義して呼び出すことができます.のように

 ....

4.子セレクタ
定義:指定したラベル要素の第1世代サブ要素を選択します.
使用方法:記号より大きい(>)、
4、子孫セレクタ
要素の位置のコンテキスト関係に基づいてスタイルを定義することで、タグをより簡潔にすることができます.

#demo p {
color:#ff0000; 
size:14px;
}

5、汎用セレクタ
汎用セレクタは*で表されます.例:

*{font-size: 12px;} 

すべての要素のフォントサイズが12 pxであることを示します.
7、カンマセレクタ
いくつかの要素スタイルのプロパティが同じ場合、要素間をカンマで区切る宣言を共通に呼び出すことができます.
例:

p, td, li {
line-height:20px;
  color:#ff0000;
} 

8.属性セレクタ[属性名][属性名=値][属性名^=値][属性名$=値][属性名*=値]
三、CSS共通属性
3.1フォント

Cssフォント属性定義テキストのフォントシリーズ、サイズ、太字、スタイル(斜体など)および変形(スモール大文字など)

共通属性:

font:フォントに対するすべての属性を宣言に設定する役割を果たす略記属性.【style size family】

font-family:フォントシリーズを定義する

font-size:フォントのサイズを定義する

font-style:フォントスタイルの定義

3.2テキスト

CSSテキスト属性は、テキストの外観を定義します.テキストのプロパティを使用すると、テキストの色、文字間隔、テキストの整列、テキストの装飾、テキストのインデントなどを変更できます.

共通属性

color:テキストの色を定義

text-align:テキストの配置を定義する

letter-spacing:文字間隔

を定義する
3.3背景

CSSでは、背景として純色を適用したり、背景画像を使用してかなり複雑な効果を作成したりすることができます.CSSのこの方面の能力はHTMLの上ではるかに高いです.

共通属性:

background:バックグラウンド属性を宣言

に設定する役割を果たす略記属性

background-color:背景色の定義

background-image:背景ピクチャ

を定義する

background-position:背景ピクチャの開始位置を定義する【left,center,right】

background-repeat:バックグラウンドピクチャが

を繰り返すかどうかを定義する
3.4寸法

CSSサイズプロパティを使用すると、要素の高さと幅を制御できます.

共通属性:

width:要素の幅を設定

height:要素の高さを設定する

3.5リスト

CSSリストプロパティを使用すると、リスト項目フラグを配置、変更したり、画像をリスト項目フラグとして使用したりできます.

共通属性:

list-style:略記プロパティ.リストに使用されるすべてのプロパティを宣言に設定します.

list-style-image:リスト項目フラグをイメージ

として定義する

list-style-position:リスト項目フラグを定義する位置

list-style-type:リスト項目フラグのタイプを定義します.

 
3.6表

CSSテーブルのプロパティを使用すると、テーブルの外観を大幅に改善できます.

共通属性:

border-collapse:表の枠線を単一の枠線にマージするかどうかを定義します.

border-spacing:セルの枠線を区切る距離

を定義します.

caption-side:テーブルタイトルの位置を定義する【top,bottom】

3.7輪郭

プロファイルは、エレメントの周囲に描かれた線で、枠線の縁の外周に位置し、エレメントを強調する役割を果たすことができます.

CSS outlineプロパティでは、要素のアウトラインのスタイル、色、幅を指定します.

共通属性:

outline:宣言ですべてのアウトライン属性を設定する

outline-color:輪郭の色を定義する

outline-style:輪郭を定義するスタイル

outline-width:輪郭の幅を定義する

3.8位置決め

CSS測位プロパティを使用すると、要素を測位できます.

の位置付けの基本的な考え方は簡単です.これにより、要素ボックスが通常の位置に対して現れるべき位置、または親要素、別の要素、さらにはブラウザウィンドウ自体の位置

を定義できます.

CSSには3つの基本的な位置決め機構がある:通常ストリーム、フローティング、絶対位置決め.

共通属性:

position:要素を静的、相対的、絶対的、または固定的な位置に配置します.

top:位置決め要素の上外縁境界とそのブロック上境界との間のオフセット量

を定義する.

right:位置決め要素の右外距離境界とそのブロックを含む右境界との間のオフセット

を定義する.

left:位置決め要素の左外縁境界とそのブロック左境界との間のオフセット

を定義する.

bottom:位置決め要素の下の外側の境界とそのブロックの下の境界との間のオフセットを定義します.

3.9 display      

ラベルの属性(行内ラベルまたはブロックラベル、非表示および表示ラベル)

を決定する.

共通属性:

noneこの要素は表示されません.

blockこの要素はブロックレベルの要素として表示され、この要素の前後に改行文字が付きます.

inlinerデフォルト.この要素はインライン要素として表示され、要素の前後に改行はありません.

list-itemこの要素はリストとして表示されます.