CSS(カスケードスタイルシート)の基礎知識_html/css_WEB-ITnose

CSS はカスケード スタイル シートを指します。スタイルは、HTML 要素の表示方法を定義します。通常、スタイル シートに保存され、コンテンツとプレゼンテーションの分離の問題を解決するために HTML 4.0 にスタイルを追加します。

同じ HTML 要素が複数のスタイルで定義されている場合、どのスタイルが使用されますか?

一般的に言えば、すべてのスタイルは次のルールに従って新しい仮想スタイル シートにカスケードされ、番号 4 が最も高い優先順位を持ちます。

1. ブラウザのデフォルト
2. 外部スタイルシート
3. 内部スタイルシート(タグ内)
4. インラインスタイル(HTML要素内)

したがって、インラインスタイル(HTML要素内)の内部)が最も高いprecedence は、

タグ内のスタイル宣言、外部スタイル シート内のスタイル宣言、またはブラウザ内のスタイル宣言 (デフォルト) よりも優先されることを意味します。

CSS 構文

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

そうですか

セレクターは通常、スタイルを変更する必要がある HTML 要素です。

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

プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

selector {declaration1; declaration2; ... declarationN }

次のコード行は、h1 要素内のテキストの色を赤に設定し、フォント サイズを 14 ピクセルに設定します。

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

そうですね

以下の図は、上記のコードの構造を示しています:

ヒント: 宣言を囲むには中かっこを使用します。

セレクターのグループ

グループ化されたセレクターが同じ宣言を共有するように、セレクターをグループ化できます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。

selector {property: value}

継承とその問題点

CSS によれば、子要素は親要素からプロパティを継承します。しかし、常にこのように機能するとは限りません。次のルールを見てください:

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

上記のルールに従って、サイトの body 要素は Verdana フォントを使用します (フォントが訪問者のシステムに存在すると仮定します)。

CSS 継承では、子要素 (p、td、ul、ol、ul、li、dl、dt、dd など) は、最上位要素 (この場合は body) が所有するプロパティを継承します。追加のルールは必要ありません。本文のすべての子要素は、子要素の子要素と同様に Verdana フォントを表示する必要があります。そして、最近のほとんどのブラウザでは、これが実際に当てはまります。

しかし、ブラウザ戦争の血なまぐさい時代には、標準のサポートが企業にとって優先事項ではなかったので、必ずしもこれが起こるとは限りません。たとえば、Netscape 4 は継承をサポートしておらず、継承を無視するだけでなく、body 要素に適用されるルールも無視します。 IE/Windows では、表内のフォント スタイルが無視されるという、IE6 までの関連問題が依然として存在します。私たちは何をすべきか？

派生セレクター

位置にある要素のコンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。

CSS1 では、この方法でルールを適用するセレクターは、コンテキストに依存してルールを適用または回避するため、コンテキスト セレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも同じことを行います。

派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、HTML コードをよりクリーンにすることができます。

たとえば、リスト内の強い要素を通常の太字ではなく斜体にしたい場合は、次のように派生セレクターを定義できます。

h1,h2,h3,h4,h5,h6 {  color: green;  }

とマークされた青いコードのコンテキストに注意してください。 :

body {     font-family: Verdana, sans-serif;     }

上記の例では、li 要素内の Strong 要素のみが斜体でスタイル設定されています。strong 要素に対して特別なクラスや ID を定義する必要はなく、コードはより簡潔になります。

id selector

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

idセレクターは「#」で定義されます。

各 ID は同じ HTML ドキュメント内で 1 回しか出現できないことに注意してください。

CSS では、クラス セレクターはピリオド付きで表示されます:

li strong {    font-style: italic;    font-weight: normal;  }

上記の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 id="This-heading-will-be-center-aligned">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

要灵活运用各种类型CSS的使用，以及结合。

如何插入样式表

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<style type="text/css">  hr {color: sienna;}  p {margin-left: 20px;}  body {background-image: url("images/back40.gif");}</style>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {  color: red;  text-align: left;  font-size: 8pt;  }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {  text-align: right;   font-size: 20pt;  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red; text-align: right; font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。