CSS の知識の簡単な紹介-htmlチュートリアル-php.cn

CSS の知識の簡単な紹介

零下一度

リリース： 2017-06-26 15:43:48

オリジナル

1292 人が閲覧しました

1. CSS 定義

CSS は、HTML または XML (SVG や XHTML などの XML 分岐言語を含む) ドキュメントのプレゼンテーションを記述するために使用されるスタイルシート言語である Cascading Style Sheets を指します。 CSS は、画面、紙、オーディオ、その他のメディア上で要素をどのようにレンダリングするかを記述します。

2. CSS を使用する理由

Web ページは HTML タグで構成されており、これらのタグはブラウザのデフォルトの方法に従ってタイプセットされ、スタイルが設定されます。これらのデフォルトのスタイルを変更したい場合は、CSS を使用することをお勧めします。コンテンツとパフォーマンスの分離が実現され、保守が容易になるだけではありません。

3. CSS 構文

CSS 構文は、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。

selector {declaration1; declaration2; ... declarationN }

ログイン後にコピー

各宣言は属性と値で構成されます。

selector {property: value}

ログイン後にコピー

次の例では、h1 がセレクター、color と font-size が属性、red と 14px が値です。

h1 {color:red; font-size:14px;}

ログイン後にコピー

この図は、上記のコードの構造を鮮明に表しています

CSS はスペースと大文字小文字を区別しません。つまり、スペースが含まれているかどうかは影響を受けません。ブラウザのCSS

/* 属性为大小，值为小写，并且冒号后面有多个空格 */
 .box {COLOR:   blue;
}/* 建议写法 */.box {color: blue;
}

ログイン後にコピー

での動作効果上記2つの書き方は、ブラウザで表示した場合も同様の効果があります。

4. CSS コメント

HTML 言語と同様に、CSS にもコメントがあります

4.1. 単一行のコメント

/* 这是表示单行的注释 */

ログイン後にコピー

たとえば、次の記述は間違っています

/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */

ログイン後にコピー

。 . 複数行コメント

/*
 * 这是表示多行的注释
 * 注释内容1
 * 注释内容2 */

ログイン後にコピー

5. 導入方法

5.1. インラインスタイル

インラインスタイルとは、タグのstyle属性にCSSのスタイルを設定することです。

<div style="..."></div>

ログイン後にコピー

5.2. Embeddedとは、Webページのタグの中にCSSスタイルを集中的に記述することです

5.3.

CSS スタイルを別のファイルに記述し、リンクタグを通じて CSS スタイルファイルを導入します

<head><meta charset="UTF-8"><title>嵌入式</title>...<style type="text/css">...在这里写CSS样式</style></head>

ログイン後にコピー

type 属性: オプションは「text/css」の 1 つだけで、現在の CSS テキストファイルが

rel: 現在のHTMLファイルとCSSファイルの関係はスタイルシートの指定

href: 外部スタイルシートのパスを指定

5.4、インポート(非推奨)

CSSスタイルを別ファイルに記述し、 @import タグの CSS スタイルファイルを使用して導入します

<head><meta charset="UTF-8"><title>外联式</title>...<link rel="stylesheet" href="outer.css?1.1.11" /></head>

ログイン後にコピー

注: インポートされたスタイルは、すべての CSS ルールが書き込まれる前に書かれている必要があります。そうでない場合、外部スタイルシートのインポートは、外部スタイルへのリンクと同様です。これはファイル内で直接使用することと同じであり、HTML ファイルのスペースを占有するため、この方法はお勧めできません。その結果、最初に Web ページを開いたときに、インポートされたスタイルが最後に読み込まれることになります。読み込みが完了するまでスタイルはインポートされません。ユーザーエクスペリエンスは良くありません

外部スタイルシートをインポートするもう 1 つの用途は、ファイルが多数の外部スタイルシートを参照する必要がある場合に、スタイルを配置することです。

import.cssの内容は以下の通りです

@import “a.css”

@import “b. css”
@import “c.css”

上記の 4 つのインポートされたスタイルに加えて、すべてのタグにはデフォルトのスタイルがブラウザスタイルまたはデフォルトスタイルと呼ばれることを知っておく必要があります。つまり、スタイルを追加せずに HTML タグがブラウザーでどのように表示されるかということです。

6. 提案と注意点

いくつかの提案

今後コードを最適化するために、次のように各属性値の後にセミコロンを追加することをお勧めします。 style:normal ; }

一部の HTML 属性には、次のようなカスタムのデフォルト CSS 属性値があります:
ブラウザとの互換性を保つために、CSS をリセットすることをお勧めします。すべての要素の属性値 (例:
————>h1 { font-size: 12px; }
特殊なフォントを使用したい場合は、ユーザーがフォントを持っていないのではないかと心配している場合は、画像を使用して置き換えることができます
中国語と英語のフォントを設定する順序は、最初に英語のフォントを設定し、次に中国語のフォントを設定します。たとえば、次のようになります。 "Courier New", "宋体" }、フォントには二重引用符を使用することをお勧めします

インラインスタイルが最も優先されます