ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS_html/css_WEB-ITnose の導入
CSS_html/css_WEB-ITnose の導入
- WBOYオリジナル
- 2016-06-24 11:36:151347ブラウズ
前の言葉
Web の初期の頃、HTML は非常に限定された言語であり、見た目は気にされませんでした。それは単なる簡潔なマークアップ メカニズムでした。 Mosaic Web ブラウザの出現により、Web サイトがあらゆる場所に出現し始めました。ページの外観を変更する必要性が高まったため、240cb830ca84ebaabbd07850110b414d や 3d49bde0e0b2e042578ad34140b6c48e などのマークアップ要素が追加されました。数年後、ほとんどの Web サイトのマークアップは、ほぼ完全に表とフォント要素で構成され、それらが表現することを目的としたコンテンツに本当の意味を伝えることができず、ドキュメントが使いにくくなり、保守が困難になりました。そこで 1995 年に、W3C は構造とスタイルが混在する問題を解決するために CSS をリリースしました。
外部スタイルシート
【linkタグを使用する】
linkタグ内では、rel属性とhref属性は必須で、type属性とmedia属性は省略可能です
da742a6055aae82456ba7b57813f897f
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css"><title>Document</title></head><body></body> </html>
body{ background-color: red;} [注] スタイルシートには HTML マークアップ言語を含めることはできません。CSS ルールと CSS コメントのみを含めることができます
/*若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别*/<style></style>body{ background-color: red;}
【複数のスタイルシート】
ドキュメントは複数のスタイルシートに関連付けられている場合があり、その場合、ドキュメントは最初に表示されるときにスタイルシートとして rel を含むリンクタグのみを使用します
e0e7c3220b19b6a3b48e7d116cabf355
bcbd15f079e65627be3c57f31236ba08れーれー
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css"><link rel="stylesheet" href="sheet2.css"><title>Document</title></head><body></body> </html>
/*sheet1*/body{ background-color: red;}
内部スタイル シート
【style 要素を使用する】
内部スタイル シートには、文書内に別途表示されるスタイル シートを含めるために c9ccee2e6ea535a969eb3f532ad9fe89 要素を使用する必要があります。
/*sheet2*/body{ height: 100px; border: 10px solid black;}
【複数のスタイルタグ】
文書内に複数のスタイルタグを出現させることができ、スタイルルールはカスケードスタイルルールと一致します
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="sheet1.css" /><link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/><title>Document</title></head><body></body> </html>
【@importディレクティブを使用する】
link と同様に、 @import ディレクティブは、Web ブラウザーに外部スタイル シートをロードし、HTML ドキュメントをレンダリングするときにそのスタイルを使用するように指示するために使用されます。唯一の違いは、コマンドの特定の構文と配置です。 @import ディレクティブは、スタイル シートで別のスタイル シートのスタイルを使用する必要がある場合によく使用されます。
/*sheet1*/body{ background-color: red;} [注意] @import は style 要素内で他の CSS ルールの前に配置する必要があります。そうしないとまったく機能しません。
/*sheet2*/body{ height: 100px; border: 10px solid black;}
【複数の @import ディレクティブ】
@import ディレクティブを使用して複数の CSS スタイル シートをインポートしたり、メディアを使用してアプリケーション シナリオを制限したりできます。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>body{ background-color: red;} </style><title>Document</title></head><body></body> </html>
インライン スタイル (インライン スタイル)
ネストされたスタイル シートや外部スタイル シートを使用せずに、単一の要素にいくつかのスタイルを指定したいだけの場合は、HTML style 属性を使用してインライン スタイルを設定できます。 ...