CSSをゼロから始める (1 2016/9/21)

1.基本文法

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

リーリー

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

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

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

リーリー

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

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

リーリー

ほとんどのスタイルシートには複数のルールが含まれており、ほとんどのルールには複数の宣言が含まれています。複数の宣言と空白の使用により、スタイルシートの編集が容易になります:

リーリー

2.高度な文法

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

リーリー

②相続

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

リーリー

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

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

3.CSS派生セレクター

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

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

リーリー

リーリー

4 IDセレクター

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

次の 2 つの ID セレクター、最初のものは要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます。

リーリー

リーリー

① IDセレクターと派生セレクター

最新のレイアウトでは、派生セレクターの作成に ID セレクターがよく使用されます。

上記のスタイルは、ID がsidebar である要素内に表示される段落にのみ適用されます。この要素は div または table セルである可能性が最も高くなりますが、table またはその他のブロック レベル要素である可能性もあります。

リーリー

②個別セレクター

ID セレクターは、派生セレクターの作成に使用されない場合でも、独立して機能できます。

リーリー

5. クラスセレクター

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

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

リーリー

以下の HTML コードでは、h1 要素と p 要素の両方にセンター クラスがあります。これは、どちらも「.center」セレクターのルールを尊重することを意味します。

リーリー

① id と同様に、class も派生セレクターとして使用できます:

クラス名 fancy を持つ大きな要素内のテーブル セルには、灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前のより大きな要素は table または div である可能性があります)

リーリー

② 要素はクラスに基づいて選択することもできます:

クラス名が fancy のテーブルセルは、背景が灰色のオレンジ色になります。

リーリー

6.CSS属性セレクター

指定した属性を持つ HTML 要素のスタイルを設定する class 属性と id 属性だけでなく、指定した属性を持つ HTML 要素のスタイルを設定できます。

①属性セレクター

すべての要素を title 属性でスタイル設定します:

リーリー

② 属性と値のセレクター

title="W3School" を持つすべての要素のスタイルを設定します:

リーリー

 

③ 属性和值选择器 - 多个值

为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

<span style="color: #800000;">[title~=hello] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }

 

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

<span style="color: #800000;">[lang|=en] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }

 

7.如何插入CSS

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

① 外部样式表

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

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>

 

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

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

<span style="color: #800000;">hr </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> sienna</span>;}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">background-image</span>:<span style="color: #0000ff;"> url("images/back40.gif")</span>;}

 

 

② 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<span style="color: #800000;">&lt;head&gt;
&lt;style type="text/css"&gt;
  hr </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> sienna</span>;}<span style="color: #800000;">
  p </span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
  body </span>{<span style="color: #ff0000;">background-image</span>:<span style="color: #0000ff;"> url("images/back40.gif")</span>;}<span style="color: #800000;">
&lt;/style&gt;
&lt;/head&gt;</span>

 

③内联样式表

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

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

<span style="color: #800000;">&lt;p style="color: sienna; margin-left: 20px"&gt;
This is a paragraph
&lt;/p&gt;</span>

 

 

 

CSS基础到这里，接下来看看比较详细的每个部分的介绍。