ホームページ > 記事 > ウェブフロントエンド > CSS の知識の簡単な紹介
CSS の知識の簡単な紹介
- 零下一度オリジナル
- 2017-06-26 15:43:481289ブラウズ
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 テキスト ファイルが
5.4、インポート(非推奨)
<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", "宋体" }、フォントには二重引用符を使用することをお勧めします
- スタイル適用順序
インラインスタイルが最も優先されます
- 同じスタイル属性の場合、異なるスタイル属性はマージされて表現されます
-
同じスタイルと同じ属性の場合、表現方法は
!重要 指定されたスタイル ルールが最初に適用されます
以上がCSS の知識の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。