ホームページ > ウェブフロントエンド > htmlチュートリアル > 共通スタイル属性_html/css_WEB-ITnose

共通スタイル属性_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:27:07
オリジナル
944 人が閲覧しました

注意情報

レビュー:

フォーム機能:

使用法の観点から: html はコンテンツを入力する方法を提供します。

サーバーの観点から: 情報を収集する方法を提供します。

クライアントとサーバーが対話するため。

例: 登録ページ、ファイルのアップロード。

3 つの共通要素: 入力選択テキストエリア

10 つの一般的な入力タイプ:

テキスト、パスワード、ラジオ、チェックボックス、送信、リセット、ボタン、画像、非表示、ファイル

ラジオの名前は同じままである必要があります。ラジオ ボタンの要素が相互に排他的であることを確認してください。

チェックボックス内の名前も同じままにする必要があります。

バインドにラベルを使用します。テキストをクリックすることは、小さなチェック ボタンをクリックすることと同じです。

Submit と image の両方に送信機能があり、フォームのアクションの URL によって応答されます。

表示送信、速い応答速度、小さな配信コンテンツ、および少数のアプリケーションを取得します

ポスト暗黙的な送信、遅い応答速度、大きな配信コンテンツ、および幅広いアプリケーションを取得します。

チェックがデフォルトで選択されています

選択: 名前オプション値が選択されています

テキストエリア: スペースは外側に表示され、テキストの内側には改行があり、改行は外側に表示されます。

属性: rowscols と readonly

CSS カスケード スタイル シート:

機能: ページを美しくし、HTML タグを変更するために使用されます。

css コードは HTML プロバイダーをアンインストールします。埋め込み方法:

1. 行の埋め込み: style HTML 上のすべてのタグには style 属性があり、CSS コードは style の値として使用されます。改造範囲は狭いです。

2. ページ内埋め込み: style、stle は、head 内のタグとしてアンロードされます。このタグに type="text/css" を設定するには、次の 3 つの方法があります。

(1) タグ セレクター: p{} font{} table{} div{}

(2) クラス セレクター: .className{} は複数として記述できます

(3) ID セレクター: #identity{} は複数として記述できず、重複する ID は存在できません.

優先度レベル: row>id>class>

3. CSS でよく使用される属性:

境界線の変更:

書き込み: 複数の要素が 1 つのスタイルを共有します:

p,font,span {}

p,#spanStyle,.fontStyle{}

p スパン{}は、p のスパンが {} 内のスタイルに従うことを意味します。

padding と margin はマージンを決定するために使用されます。

リスト内の画像スタイルを変更します: {list-style-image:(url)}

div をレイアウトに使用でき、より複雑なレイアウト方法を使用できます。 Div はブロックレベルのタグです。デフォルトは 1 行です。

Span はデフォルトでは行を折り返さず、幅と高さはなく、コンテンツの影響を受けます。

Float プロパティ。

1. レイヤーがある場合は、そのレイヤーを上に配置します。

2. 配置方法がある場合、誰が最後に登場し、誰が先頭に登場します。

3. z-index: 数値 大きい数値を持つ人が一番上です。

4. ネストがある場合は、中にあるものが一番上に表示されます。

css+divを使って電子ノートのレイアウトを実装する練習をします。

サンプルコード:

および対応する効果:

ブラウザーが異なれば効果も異なります。

段落内の共通属性:

color:#660;background-color:#9CF;width:500px;height:800px;text-align:center;text-decoration:underline; :「Lucida Console」、Monaco、monospace;white-space:pre-line;line-height:normal;letter-spacing:normal;word-spacing:10px;

必要な場合は詳細をお問い合わせください。

border:0; border-bottom:#00F 5px dotted;

これら 2 つの文の前後の位置は非常に特殊です:

前後の位置が一致している場合は、ここで示す必要はありません。 reversed:

border-bottom:#00F 5px dotted;border:0;

table{ border:#9F6 20px inset;}

ボーダーを付けるにはインセットを追加する必要があります

ブラウザによって異なります影響については考えないでください。全くない。

絶対と相対は、現在の要素が以前の位置を放棄するかどうかを示します。

相対とは前の位置を維持することを意味し、

絶対とは前の位置を放棄することを意味します。

段落の共通属性:

フォントの色 font-color

段落の背景色background-color

段落の幅: width

段落の高さ: height

段落テキストの配置: text-align

テキストの変更: text -decoration: 下線

フォントサイズ: font-size

フォントスタイル: font-family

空白: (前​​のユニットの物理的な長さに応じて) ホワイトスペース

行の高さ: line-height

文字間隔: Letter-spacing

単語間隔: word-spacing

コードと効果:

1、

    


    

效果:

2、

   

    

   

    

    

    

    你好

       

    

    Hello

    

3、

        

    

        

    

    你好

    

    

    Hello

    

4、

   

    

    

  

    

你好

    

こんにちは

5、

< ;/table>

6、

ニーハオこんにちは
ダジアハオタハオ

  

    

 

            

       

7、

汪汪汪

8、

< body>

これは文字部分です

   

これは段落部分です

  

これは段落部分です

これは区间部分です

& lt;/span>

id和区间搞反了!

この区间部分

9、

      

  • 相册

  • |

  • 留言板

  • |

  •        

  • 说说

  • |

  • 日志

  • |

  • 个人中心

  •  

10、

  • lifei

  • jiyongc

  •     

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート