CSS_html/css_WEB-ITnose の導入

WBOY
リリース: 2016-06-24 11:36:15
オリジナル
1327 人が閲覧しました

前の言葉

Web の初期の頃、HTML は非常に限定された言語であり、見た目は気にされませんでした。それは単なる簡潔なマークアップ メカニズムでした。 Mosaic Web ブラウザの出現により、Web サイトがあらゆる場所に出現し始めました。ページの外観を変更する必要性が高まったため、 などのマークアップ要素が追加されました。数年後、ほとんどの Web サイトのマークアップは、ほぼ完全に表とフォント要素で構成され、それらが表現することを目的としたコンテンツに本当の意味を伝えることができず、ドキュメントが使いにくくなり、保守が困難になりました。そこで 1995 年に、W3C は構造とスタイルが混在する問題を解決するために CSS をリリースしました。

外部スタイルシート

【linkタグを使用する】

linkタグ内では、rel属性とhref属性は必須で、type属性とmedia属性は省略可能です

<!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 を含むリンクタグのみを使用します


rel 属性を設定します。 代替スタイルシートの候補スタイルシートを定義できます。これは、ユーザーがこのスタイルシートを選択したときにドキュメントの表示にのみ使用されます。ブラウザが候補スタイル シートを使用できる場合、リンク要素の title 属性値を使用して候補スタイルのリストが生成され、メニュー バーの [表示] -> [スタイル] で選択できます。 (IE、Firefox対応)

【注意】候補スタイルシートにタイトルが設定されていない場合、候補スタイルシートリストに表示されず、参照することができません

れーれー

<!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 要素を使用する】

内部スタイル シートには、文書内に別途表示されるスタイル シートを含めるために