CSSの詳しい解説

高洛峰オリジナル: 2016-10-20 13:26:451132ブラウズ

CSS入門

1. CSSの概要と機能

CSS:Cascading Style Sheets）とは、Webページの表示効果を定義するために使用されるカスケードスタイルシートです。 HTML コード内のスタイル定義の重複を解決し、後続のスタイルコードの保守性を向上させ、Web ページの表示効果を高めることができます。
機能：CSSでWebページのコンテンツと表示スタイルを分離し、表示機能を向上させます。

2.CSSとHTMLの組み合わせ(*****)(4種類)

CSSとHTMLの組み合わせ方法

1.スタイル属性の方法:

タグ内のstyle属性を使用して表示を変更します。各タグのスタイル。

例:

pタグの段落コンテンツ。

この方法はより柔軟ですが、複数の同一タグに同じスタイルを定義するのが面倒なので、ローカルな変更に適しています。

2. styleタグメソッド：（埋め込みメソッド）

複数のタグを一律に変更するには、headタグにstyleタグを追加します。

<head>
    <style type=”text/css”>
        p { color:#FF0000;}
    </style></head>

この方法は単一ページのスタイルを均一に設定できますが、局所的な領域には十分な柔軟性がありません。

3.インポート方法：（よく使われる方法）

前提としてCSSファイルが定義されていることが前提となります。 Web ページのスタイルの一部を使用する必要がある場合は、この方法を使用します。

例:

<style type="text/css">
    @import url(css_3.css);
    div { color:#FF0000;}</style>

外部CSSファイル(.css)の末尾を定義します。
@import url("css ファイルのアドレス");

注: URL 括弧はセミコロンで終了する必要があります。インポートされたスタイルがこのページで定義されたスタイルと重複する場合、このページで定義されたスタイルが優先されます。

4.リンク方法：（よく使われる方法）

headタグ内のlinkタグを通じて実装しますまず前提として、所定のCSSファイルが存在する必要があります。

例:

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

　　<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，不能写在<style>内部，写在<head>标签的内部。
　　rel：代表当前的文件和引入文件的关系。
　　type：类型
　　href：CSS的地址

注: 複数の CSS ファイルは、複数のリンクタグを介してリンクできます。繰り返されるスタイルは、最後にリンクされた CSS スタイルの影響を受けます。

3. CSSスタイルの優先順位とコードの仕様

1. CSSの優先順位

（一般的には）上から下、外側から内側、優先度の低いものから高いものへ。
特殊な場合: タグ名セレクター

2. CSS コードの仕様

(1) セレクター名 {属性名:属性値; 属性名:属性値;.. .}

( 2) 属性はセミコロンで区切ります
(3) 属性と属性値はコロンで直接接続します

(3) 属性に複数の値がある場合、値はスペースで直接区切ります開く
例

。 div{border: value 1 value 2 value 3}

4. CSSセレクター(*****)

1. セレクター:

書かれたCSSコードはラベルのどこに作用するのか？

2. 基本セレクター:

(1) タグ名セレクター

各タグはclass属性とid属性を定義します。ラベルの操作を容易にするためにラベルを識別するために使用されます。
定義上、複数のタグのclass属性値は同じでも構いませんが、id値はJavaScriptでよく使われるため一意である必要があります。

(2)クラスセレクター：（よく使われる）
タグ内にclass属性を定義し、値を代入します。タグ名.クラス値を通じてタグのスタイルを設定します。
例:
同じラベルに異なるスタイルを設定する場合は、クラスを使用して区別します。

p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p><p class=”pclass_2”>P标签样式</p>

異なるタグに同じ設定がある場合はクラスを使って統一的に定義します。

.classname {color: #00FF00;}

P タグスタイル

DIV タグスタイル

(3) id セレクター:
クラスセレクターと似ていますが、形式が異なり、セレクターの名前は次のとおりです。 #id 値。
例:

#pid { color:#0000FF;}

P tag style

注: 複数のタグで同じ id 値を定義することもできますが、JavaScript がタグ要素を取得するときにエラーが発生します。したがって、習慣を形成し、id 値の一意性を確保することは、将来のデータベース設計にも非常に有益です。

優先度（特別）：
タグ名セレクター

3. 拡張子セレクター：

(1) 関連セレクター：複数のタグ間に関係があります。
スペースで区切る
(2) 結合セレクター: 複数の異なるセレクターに同じスタイルを設定する
カンマで区切る
(3) 疑似要素セレクター: CSSで定義されたセレクター
superを使用する場合リンクの4つの状態、順序使用用途: L V H A

5. CSS レイアウト (理解)

* ボックスモデル

私の心はバラの匂いを嗅ぐ虎のようです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS自動行折り返し次の記事：CSS自動行折り返し

続きを見る

CSSの詳しい解説

関連記事