あなたがCSSを始めるために知っておく必要があるすべての（またはほとんどすべて）

私は私の古いブログから取られたこのポストを復活させ、ここにそれを置くことにしました。 それは、エージェントのスタイルシートで何かを忘れるたびにガイドを持って常に良いことだ。

そう動作するように取得してみましょう！

スタイルシートは、3つの方法で文書にリンクすることができます。

1。 リンクまたはインポート。
2。 組み込ま;
3。 インライン。

外部スタイルシート

スタイルシートはCSSのルールは、ドキュメント内のドキュメントで宣言されているときに、外で言われているHTML 。 スタイルシートは独立したファイルであり、HTMLファイルの拡張子は。CSSは

外部スタイルシートは、複数のページに適用される理想的です。 外部スタイルシートを使用すると、一つのファイル（スタイルシートのファイル）を変更することにより、サイト全体の外観を変更することができます。

外部スタイルシートからcssファイルは、文書の<>タグ内にHTML文書をリンクまたはインポートする必要があります。 構文一般的に estilo.cssと呼ばれるスタイルシートをリンクするためには以下の通りです：

estilo.cssと呼ばれるスタイルシートをインポートする一般的な構文は、次のとおりです。

ブラウザは、ルールファイルのestilo.cssのスタイルを読んで、そしてそれに応じて文書をフォーマットされます。

外部スタイルシートは、任意のテキストエディタで書くことができます。 ファイルは任意のHTMLタグを含めることはできません。 スタイルシートは、A. CSSで"保存"する必要があります。
埋め込みスタイルシートや内部

スタイルシートは、CSSルールは、HTMLドキュメント自体で宣言されているときに、埋め込みまたは内部と呼ばれています。

、埋め込みまたは内部スタイルシートは、単一のページとしてアプリケーションに最適です。 スタイルシートまたは内に埋め込まれたと、あなただけの1つのドキュメントの外観、スタイルシートが組み込まれているものを変更することができます。

ドキュメントの有効なスタイルルールは、スタイルのタグを持つ文書の<>セクション<>構文として以下のように宣言されています：

ブラウザはページ自体のスタイルルールを読んで、それに応じて文書の書式を設定します。

注：ブラウザは通常、不明なタグを無視します。 これは、スタイルをサポートしていない古いブラウザでは、タグを無視することを意味しますが、タグの内容が画面に表示されます。 あなたはコンテンツを表示するため、古いブラウザを防ぐことができます

タグは、HTMLマークアップのコメントを使用して"それを隠して"。

上記のコード内のシンボルを含む（に近いコメントを）注意してください。
インラインスタイルシート

ルールは、HTML要素のタグ内で宣言されているときにスタイルシートはインラインCSSと呼ばれています。

インラインスタイルは、HTML要素に適用されます。 彼は、プレゼンテーションとの混合コンテンツのスタイルシートの利点の多くを失います。 もし要素の単一のオカレンスにスタイルを適用する場合と同様に、例外的なケースでは、このメソッドを使用します。

インラインスタイルを適用するための構文は、次のとおりです。

今、CSSの中で最も重要な特性：

プロパティのフォント

ソースのプロパティは、HTML要素内のテキストを構成する文字の特徴を（CSSルールの値）を定義します。

基本的な情報源と、このチュートリアルで解決される予定は以下の通りです。

*カラー：... ... ... ... ... ...フォントの色
フォントファミリ：... ... ...フォント
フォントサイズ：... ... ... ... ... ... ... ... ...フォントサイズ
フォントスタイル：... ... ... ...フォントスタイル
フォントバリアント：小さいサイズの場合... ... ...情報源
フォントの太さ：... ... ... ... ... ... ... ...濃いソースが（太字）です
*フォント：... ... ... ... ... ... ...すべてのプロパティの省略形

ソースのプロパティの有効な値

*色：
1。 進コード：＃FFFFFF
2。 RGBコード：RGB（255,235,0）
3。 カラー赤、青、緑などの名前...
フォントファミリ：
1。 家族名：フォント名によって定義され、
P. 例："MS Pゴシック"、"ヘルベチカ"、"MS Pゴシック"、等。
2。 一般的なファミリー：一般名によって定義され、
P. たとえば、"セリフ""サンセリフ体"、""筆記体、等。
フォントサイズ：
1。 xx - small〜
2。 X -小
3。 小型
4。 培地
5。 大規模な
6。 X - LARGE
7。 XX -大
8。 小さい
9。 大きい
10。 長さ：CSSで認識される措置（ピクセル、PT、の、CM、...）
11。 ％
フォントスタイル：
1。 ノーマル：通常のフォントでは縦方向に
2。 イタリック：傾斜噴水
3。 斜：斜めソース
フォントバリアント：
1。 ノーマル：通常のフォント
2。 スモールキャップ：低い高さになっ大文字
フォントの太さ：
1。 通常
2。 太字
3。 大胆な
4。 ライター
5。 100
6。 200
7。 300
8。 400
9。 500
10。 600
11。 700
12。 800
13。 900

テキストのプロパティ

テキストでは、HTML要素に入力テキストの特性を（CSSルールの値）を定義します。

テキストのプロパティを以下に示します。

*カラー... ... ... ... ... ... ...テキストの色;
*文字間隔... ... ...文字の間隔;
*単語間隔... ... ...単語間の間隔。
*のtext - align ... ... ... ... ... ... ... ... ... ...テキストの配置;
*テキストの装飾テキストの装飾... ...。
*テキストインデント... ... ... ...テキストのインデント;
*テキスト変換... ....文字の形状;
*方向... ... ... ... ...テキストの方向;
*ホワイトスペース... ... ...ブラウザが空白をどのように扱うか。
テキストのプロパティの有効な値

*色：
1。 進コード：＃FFFFFF
2。 RGBコード：RGB（255,235,0）
3。 カラー赤、青、緑などの名前...
*のletter - spacing：
1。 正常：これはデフォルトの間隔です。
2。 長さ：CSSで認識される措置は、（ピクセル、PT、の、CM、...）有効な負の値です。
*単語間隔：
1。 正常：これはデフォルトの間隔です。
2。 長さ：CSSで認識される措置は、（ピクセル、PT、の、CM、...）有効な負の値です。
*のtext - align：
1。 左：テキストを左揃え
2。 右：右にテキストを揃える
3。 センターは：センターでテキストを揃え
4。 正当化：テキストの力を左から右に線の全体の長さを占めるように
*テキストの装飾：
1。 なし：装飾
2。 下線：テキストの場所を下線
3。 上線：上線テキストの場所
4。 ラインスルー：テキストの上に線を入れる
5。 点滅：テキストが点滅している
*テキストインデント：
1。 長さ：CSSで認識される措置（ピクセル、PT、の、CM、...）
2。 ％：親要素の幅の割合
*テキスト変換：
1。 なし：通常のテキスト
2。 大文字：大文字にテキストのすべての最初の文字を
3。 大文字、大文字にテキストのすべての文字
4。 小文字：文字列のすべての小文字
*方向：
1。 LTR：左から右に書かれたテキスト
2。 RTL：右から左に書かれたテキスト
*ホワイトスペース：
1。 正常：空白はブラウザによって無視される
2。 プリ：空白がブラウザによって保存されます。
3。 NOWRAP：テキストは、画面上の単一の行でそれのすべてが表示されます。 タグ<>を発見するためには改行はありません

マージンプロパティ

銀行のためのプロパティは、HTML要素のエッジの太さの値を設定します。

マージンのプロパティは次のとおりです。
*マージントップ... ... ....上のマージンを設定します。
*マージン - 右... ... ...右マージンを設定します。
*マージン底... ...下の余白を設定します。
*マージン - 左... ... ...左マージンを設定します。
*証拠金... ... ... ... ...すべてのバンクの速記

マージンのプロパティの有効な値

1。 オート：マージンのデフォルト値
2。 長さ：CSSで認識される措置（ピクセル、PT、の、CM、...）
3。 ％：親要素の幅の割合

ボーダープロパティ

エッジのプロパティは、HTML要素の4つの境界線の特性を（CSSルールの値）を定義します。

エッジのプロパティを以下に示します。

*ボーダー幅：... ... ... ... ...ボーダーの太さ
*のborder - style：... ... ... ... ...ボーダーのスタイル
*ボーダーカラー：... ... ... ... ...ボーダーの色
* --------------
*ボーダートップ幅：... ... ... ...上端の厚さ
*ボーダートップスタイル：スタイル... ... ... ...上端から
*ボーダートップカラー：... ... ... ...上端の色
* --------------
*ボーダー右幅：... ... ...右端の厚さ
*ボーダー右のスタイル：... ... ....スタイルの右端
*ボーダー - 右色：... ... ...右の枠線の色
* --------------
*ボーダー底幅：... ... ...下端の厚さ
*ボーダー底スタイル：スタイル... ... ...下端から
*ボーダー - ボトムカラー：... ... ...下端の色
* --------------
*ボーダー左幅：... ... ... ... ... ... ... ... ...左端の厚さ
*ボーダー左のスタイル：スタイル... ... ... ... ... ... ... ... ...左端から
*ボーダー - 左カラー：... ... ... ... ... ... ... ... ...左側の枠線の色
* --------------
*ボーダートップ：...上端のすべてのプロパティのための速記
*ボーダー右：..右端からすべてのプロパティの省略形
*ボーダー底：..下端のすべてのプロパティのための速記
*ボーダー左：..左端からすべてのプロパティの省略形
*ボーダー：... ... ... ... ... ... ... ...すべての四隅に簡単な方法

エッジのプロパティの有効な値

*色：
1。 進コード：＃FFFFFF
2。 RGBコード：RGB（255,235,0）
3。 カラー赤、青、緑などの名前...
*スタイル：
1。 なし：境界線なし
2。 隠し：noneと等価
3。 点線：点線の境界線
4。 破線、点線の境界線
5。 固体：Solid Edgeの
6。 二重：二重線の境界線
7。 溝、ノッチエッジ
8。 尾根​​、岩棚の棚
9。 挿入図：低レリーフのエッジ
10。 当初：エンボスエッジ
*幅：
1。 シン：薄いエッジ
2。 培地：内側縁
3。 厚さ：太いボーダー
4。 長さ：CSSで認識される措置（ピクセル、PT、の、CM、...）

パディングのプロパティ

間隔のプロパティは、（いくつかは、"フィラー"として翻訳）内容とHTML要素の境界線間の間隔の値を定義します。

間隔のプロパティは次のとおりです。

*パディング - トップ... ... ....パディングトップを設定します。
*パディング - 右... ... ...右の間隔を定義します。
パディング底* ... ....下の間隔を定義します。
*パディング - 左は... ... ...左の間隔を設定します。
*パディング... ... ... ... ...すべての間隔のための速記
間隔のプロパティの有効な値

1。 オート：マージンのデフォルト値
2。 長さ：CSSで認識される措置（ピクセル、PT、の、CM、...）
3。 ％：親要素の幅の割合

backgroundプロパティ

backgroundプロパティは、HTML要素の底からの特性を（CSSルールの値）を定義します。

背景のプロパティは次のとおりです。

*背景色... ... ... ... ...背景色;
*背景画像... ... ... .... 背景画像;
*はbackground - repeat ... ... ... .... どのように背景の画像が配置されている。
*背景 - 添付ファイル... ....画面に背景画像"ロール"する場合、またはない。
*背景位置... ... ... ...どこでどのように背景画像が配置されている。
*背景... ... ... ... ... ... ... ...すべてのプロパティの省略形。

背景のプロパティの有効な値

*背景色：
1。 進コード：＃FFFFFF
2。 RGBコード：RGB（255,235,0）
3。 カラー赤、青、緑などの名前...
4。 透明：透明
*背景イメージ：
1。 URL：URL（パス/ image.gifの）
*背景リピート：
1。 繰り返し実行されません：ノー繰り返し
2。 垂直方向と水平方向の繰り返し：繰り返し
3。 縦リピート：リピート- Y
4。 水平方向のリピート：リピート- X
*背景 - 添付ファイル：
1。 画面上の画像：固定
2。 画面のスクロールに絵"ロール"
* BACKGROUND - POSITION：
1。 X - POS Y - POS
2。 X -％Y -％
3。 左上
4。 トップセンター
5。 右上
6。 センターは、左
7。 中央センター
8。 中央右
9。 左下
10。 ボトムセンター
11。 右下

プロパティリスト

プロパティリストには、HTMLリストの特性を（値）を定義します。

リストのプロパティを以下に示します：

*リストスタイル画像... ... ... .... リストのマーカーとしてのイメージ;
*リストスタイルの位置... ... ....マーカがリストに配置されている。
*リストスタイルのタイプ... ... ... ... ...リストからブックマークの一種;
*リストスタイル... ... ... ... ... ... ... ...すべてのプロパティの省略形。

リストのプロパティの有効な値

*リストスタイルのイメージ：
1。 なし
2。 URL：URL（パス/ marcador.gif）
*リストスタイルの位置：
1。 外側：外側のラベルのテキストの配置
2。 内側：テキストとマーカーライン
*リストスタイルのタイプ：
1。 なし：マーカー
2。 トーク：円（ボールをいっぱいに）
3。 サークル：サークル（ボールは空）
4。 四角、四角
5。 進：1、2、3、4、...
6。 進をリードするゼロ
7。 下のローマ字：ローマ字小文字のI、II、III、IV、...
8。 アッパーローマ字：ローマ字大文字のI、II、III、IV、...
9。 低α、A、B、C、Dを、小文字...
10。 アッパー-アルファ：大文字A、B、C、D、...
11。 低ギリシャ語
12。 低ラテン
13。 アッパーラテン
14。 ヘブライ
15。 アルメニア語
16。 ジョージアン
17。 CJK -表意文字
18。 平仮名
19。 カタカナ
20。 ひらがな、いろは
21。 カタカナ、いろは

ボーナス！

ポジション

position属性は、次の3つの値を受け取ることができます。

*アブソリュート：それはレイヤリングを可能にし、それをあなたが作成して準備したページ上の位置を決定する唯一のものである。 絶対位置決め;
相対*：この値は、テキストがページ上の位置の残りを持っているため、それが重なるこ​​とはできない定義されていますが、まだいくつかの興味深い属性を認識することが可能です。 相対的な位置;
* Estaticは、それが制御層によって決定される特別な位置を認識しないことを決定します。 静的なポジショニング。

レフト

層は、ブラウザまたは親要素の左端になることを距離を設定します。 あなたは、絶対値、相対またはオート（自動）を取ることができます。

注：絶対値は、で説明されているフォーマットの定義に従って値を受け入れる"サイズフォーマット。"
RIGHT

レイヤーがブラウザの右端または親要素を持つことの距離を設定します。 あなたは、絶対値、相対またはオート（自動）を取ることができます。

注：絶対値は、で説明されているフォーマットの定義に従って値を受け入れる"サイズフォーマット。"
TOP

最上層からの距離は、ブラウザまたは親要素を持って設定します。 あなたは、絶対値、相対またはオート（自動）を取ることができます。

注：絶対値は、で説明されているフォーマットの定義に従って値を受け入れる"サイズフォーマット。"
Botom

底層からの距離は、ブラウザまたは親要素を持って設定します。 あなたは、絶対値、相対またはオート（自動）を取ることができます。

注：絶対値は、で説明されているフォーマットの定義に従って値を受け入れる"サイズフォーマット。"

Z - INDEX

要素の重なり順を決定します。 値が大きいほど、より高い層の値auto（自動）と数字を、受け入れます。

可視化

このスタイルは、要素を隠すために使用されます。 目に見えない要素は依然としてページ上のスペースを占有します。 有効な値は次のとおりです（最上層のinherits属性、デフォルト）目に見える（可視）、隠された（隠し）と継承。

OVERFLOW

その限界は、その内容よりも小さいときには、レイヤーの内容をどのように動作するかを決定します。 有効な値は次のとおりです。可視（目に見える、その内容を表示するには、レイヤーのサイズを変更）、隠し（オカルト余剰はレイヤーの内容を無視する）、スクロール（スクロールバーが層を示しています）と自己（にスクロールバーが表示されます。必要に応じて層）。

、DISPLAY

要素を表示する必要があるときと場合に識別します。

*ブロック：ブロックとして、改行を使用して要素の前後に。 周りの要素（デフォルト値）に関連して新しいボックスを作成します。
*インライン：要素の前と後のない改行;
*リストアイテム：リスト項目のマーカーを除いてブロックと同じが追加されます。
*なし：それは目に見えないし、ページ上のスペースを占有していません。 二次を含めたあらゆる状況で要素の表示を、無効にします。

後、私は彼らの技術革新とCSS 3に関する記事を尽くします。

関連する投稿

1. フロートとクリアと垂直方向と水平方向の中央のdiv

タグ： CSS