Xpressのフロントエンドレコード--------- HTML5 + CSSシリーズ3.0

フォーム

uが  役割をフォーム:ユーザーの情報を収集します

フォームボックス

フォーム
フォームの役割は、ユーザの情報を収集するために、
フォームのボックスを:
< フォーム=「ネームフォーム」方法=「POST / GET」アクション=「アドレスを送信」>  </ フォーム>  
< INPUTのタイプ=「テキスト」=「デフォルト」/>    テキストボックス 
 < INPUT タイプのは=「パスワード」 />            パスワードボックス 
 < INPUT タイプの=「提出」値は=「ボタン内容」 />   ボタンを提出する 
 < INPUT タイプの=「RESET」を=「コンテンツボタン」 />      リセットボタン 
 <INPUT =「「」タイプ= 『ボタン』= 『コンテンツボタン』/>   ボタン

(ボタンとの違いを提出し、いない、情報機能を提出するだけな役割を果たしてボタンをジャンプして送信ボタンを提出しています提出。)

 

はじめにCSS 

  CSS(カスケーディング・スタイルシート)カスケーディング・スタイル・シートへの翻訳ページスタイルを制御するための 

CSSのラミネートプロパティ

競合するカスケードルール(重量)によれば、同一の構成要素に対して同じ属性を設定する際にCSS積層体がCSSスタイルを指し、高い重量CSSセレクタ指定された属性を適用することを選択し、また、一般に低重量をカバーする高い重量として記載したがって、それはまたラベルを積層すると呼ばれ、自動的にその下位のタグをすべて継承することに優れています

 

C SSは、スタイルシートを作成すると分類

1. インラインスタイルシート(インラインスタイル、インラインスタイル、インラインスタイル)

構文: < タグ スタイル= "プロパティ:プロパティ値; プロパティプロパティ値; "> </ タブ>

たとえば、次のように <Pスタイル= "色:赤;"> これは何であるか。</ P>

モーダルを使用した場合の実用的な仕事、ミスをしています

 

2 (ページにネストされた)、内部スタイルシート

   構文を作成:

<スタイルタイプ= "テキスト/ cssの">

     CSSの構文例:DIV {幅:200pxの;}

</スタイル> 

注:使用スタイルスタイルタグを作成するために、タグは好ましくで書かれている<HEAD> </ head>の間に

場合は、より適切な場合、比較的小さな、便利なメンテナンスでは、小さな効果を書きます

 

3 、外部スタイルシートを参照

   (1)   文言を引用しました。

<リンクのhref = " 先のファイルパス"のrel = "スタイルシート"タイプ= "テキスト/ cssの" />

説明:

      で記述された <頭> </ head>の間。

      REL :関連する文書を定義するために使用される、関連付けられたスタイルシートことを示しています。

      タイプのカスタムドキュメントタイプ。

最も一般的に使用され、変更後の多目的、明確な構造、メンテナンスが容易することができへの外部リンク

 

  (2)導入文言

<スタイルタイプ= "テキスト/ cssの">

@importのURL(「ターゲット・ファイルの完全名のパスとファイル名」);

</スタイル>

注意: @ インポートない間にスペースURL 小さすぎるとブラケットの間にはスペースを、セミコロンで終了する必要があります 

第四に、スタイルシートの適用範囲

現在の線のスタイルタグの範囲内でスコープのスタイル内側に ある現在のファイル、外部スタイルシートの適用範囲は、すべての関連ファイルです。

第五に、スタイルシートの優先順位

インラインスタイルシートの優先順位が最も高いです

内部および外部スタイルシートスタイルシートと高い優先順位を書いた後、について書くの優先順位。

CSSの基本的な文法

セレクタ(セレクタ)、ステートメント:CSS構文は2つの部分から成り 

セレクタ { プロパティプロパティ値;  } 

 

CSSの構文:

  • それぞれのCSS スタイル属性と属性値に分割される二つの部分、すなわち、セレクタと宣言から成ります。
  • プロパティには、コロンで接続されているブレース、属性と属性値に配置する必要があります。
  • 各ステートメントはセミコロンで終了します。
  • 場合は、属性、属性と属性値の複数の属性値は、順序に関係なく。
  • 文章のスタイル、スペース、改行操作の過程で表示属性は影響しません。 

 

CSSのセレクタは、定義されました

の定義のセレクタ(オペレータ)

オブジェクトセレクタのスタイルを定義するために、前記要素とすることができるタグ自体、要素または要素名のクラスのために処方され得ます

 

1 )タグセレクタ(タイプセレクタ/ 要素セレクタ):

ラベルの選択は、マーキングに応じてHTML言語で直接定義されています

構文:ラベル名 { プロパティ:プロパティ値; }

  例:     DIV {幅:30px;}

説明:

A)文書の言語選択の要素がセレクタとしてオブジェクト・タイプである、すなわち、要素名セレクタとしての構造を使用します。例については、本体div要素p型、IMG、EM、強い、スパン...... ようにと。

B)すべてのページ要素がセレクタとして使用することができます

使用法:

表示素子は、文書を統一するときは、タグ(タイプ)セレクタを使用することができます。

 

クラスセレクタ( クラスセレクタ

  • クラスセレクタ用途は参照することにより発効する必要があります

      構文: .classファイル{ プロパティ:プロパティ値;}

説明:

  • 私たちは、クラスセレクタを使用する場合、各要素はクラス名として定義する必要があり、
  • クラスセレクタの構文は次のとおりです。 " のように:<のdivクラス="トップ"> </ div>"
  • 用法:クラスセレクタは、パターンのクラスを定義するためのより適切です。

フラグは、複数設けられていてもよい。<タグクラス=「名1名2」> </タグ>:クラス名の構文を

3 IDのセレクタ

構文: #ID { プロパティ:プロパティ値;}

説明:私たちが使用している場合、ID セレクタは、各要素は次のように定義されなければならないのid 属性を、

<DIV ID = "トップ"> </ div>

:英語名を取るために命名するときは、キーワードを使用することはできませんすべてのタグと属性がキーワードです

1 )各要素のために使用することができるIDのセレクタが、IDがの要素である一意の識別子ができない重複識別名を

2 )最も有用である:ウェブの周辺構造を作成します。

 

(4) 通配符:*

      構文:* { プロパティ:; パディング:0;マージン:0; }

使用方法:スタイルをリセットするために使用。

 

(5)擬似クラスセレクタ

A:リンク{色:#1 FF0000 ;} / * ハイパーリンク初期状態 * /

A:訪問{色:#00FF00 ;} / * ハイパーリンクがアクセスされた後の状態 * /

A:ホバー{色:#1 FF00FF ;} / * 状態のときにハイパーリンク上にマウス * /

A:アクティブ{色:#1 0000FF ;} / * マウスダウンハイパーリンク状態 * /

注意:

文体の上記の順序に従って適切に表示することができ、または故障の影響の一部

  

(6)グループセレクタ(セレクタ設定)

構文:セレクタ 1 ...... 、セレクタ5 { プロパティ:プロパティ値;}

説明:選択パターンの複数の同じアプリケーション、各選択グループにまとめ、方法を分離「」を使用することができます。

 例:.div、#div、P {幅:100pxに;}

(7)セレクタ含む子孫セレクタ

 構文:  セレクタ 1   セレクタ2 { プロパティ:プロパティ値;}

説明:セレクタ 1 及びセレクタ2 空間セレクタことを意味し、分離された 1は、すべての子セレクタ含ま2。

例: DIV {リチウムUL高さ:200pxの;}

(8)属性セレクタ

構文:  [クラス= " ボックス" ] { プロパティ:プロパティ値;}

説明:このプロパティは、要素に含まれなければなりません

例: [クラス= " ボックス" ] {高さ:200pxの;}

 

拡張:

*リンクとの違いを導入するインポート外部スタイル:

違い 1:祖先の違い:リンクは、XHTMLタグを属し、CSSの@importは完全に提供する方法です。リンクタグに加えて、CSSを読み込むことができます、また、このようなRSSの定義として他のものの多くは、定義された相対接続属性、@インポートできる唯一の負荷CSSを行うことができます。

違い 2:異なる順序をロードします。ページがロードされている場合は(閲覧ときには、ビューアである)、リンク参照CSSもロードされ、CSS @import参照は、ページ全体がダウンロードされるまで待機してからロードされます。ページのロード中にので、時々ブラウザがCSSスタイルを@import開始しません。

違い 3:互換性の違い。:古いブラウザはサポートしていませんので、@importはそのような問題をのみ、IE5以上に知識を特定すること、およびリンクラベルするために、@のインポートをCSS2.1を提案しています。

違い 4:使用差制御スタイルDOM:DOM制御@importのDOMを制御することはできませんので、唯一のリンクタグを使用して、スタイルを変更するにはJavaScriptを使用して。

 

おすすめ

転載: www.cnblogs.com/hudunyu/p/11409916.html