ホームページ > 記事 > ウェブフロントエンド > CSSをゼロから始める (1 2016/9/21)
CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。
セレクターは通常、スタイルを設定する必要がある HTML 要素です。
各宣言は属性と値で構成されます。
プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。
次のコード行は、h1 要素内のテキストの色を赤に設定し、フォント サイズを 14 ピクセルに設定します。
この例では、h1 がセレクター、color と font-size が属性、red と 14px が値です。
ほとんどのスタイルシートには複数のルールが含まれており、ほとんどのルールには複数の宣言が含まれています。複数の宣言と空白の使用により、スタイルシートの編集が容易になります:
① セレクターのグループ化。セレクターをグループ化して、グループ化されたセレクターが同じ宣言を共有するようにすることができます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。
②相続
CSS によれば、子要素は親要素からプロパティを継承します。しかし、常にこのように機能するとは限りません。このルールを見てください:
上記のルールに従って、サイトの body 要素は Verdana フォントを使用します (フォントが訪問者のシステムに存在すると仮定します)。
CSS 継承では、子要素 (p、td、ul、ol、ul、li、dl、dt、dd など) は、最上位要素 (この場合は body) が所有するプロパティを継承します。追加のルールは必要ありません。本文のすべての子要素は、子要素の子要素と同様に Verdana フォントを表示する必要があります。そして、最近のほとんどのブラウザでは、これが実際に当てはまります。
要素の位置のコンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。
以下の例では、li 要素内の Strong 要素のみが斜体でスタイル設定されています。strong 要素に特別なクラスや ID を定義する必要はなく、コードはより簡潔になります。
ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。 ID セレクターは「#」で定義されます。
次の 2 つの ID セレクター、最初のものは要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます。
リーリーリーリー
① IDセレクターと派生セレクター
最新のレイアウトでは、派生セレクターの作成に ID セレクターがよく使用されます。
上記のスタイルは、ID がsidebar である要素内に表示される段落にのみ適用されます。この要素は div または table セルである可能性が最も高くなりますが、table またはその他のブロック レベル要素である可能性もあります。
リーリー
②個別セレクター
ID セレクターは、派生セレクターの作成に使用されない場合でも、独立して機能できます。
リーリー
5. クラスセレクター
以下の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。
リーリー
以下の HTML コードでは、h1 要素と p 要素の両方にセンター クラスがあります。これは、どちらも「.center」セレクターのルールを尊重することを意味します。
リーリー
① id と同様に、class も派生セレクターとして使用できます:
クラス名 fancy を持つ大きな要素内のテーブル セルには、灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前のより大きな要素は table または div である可能性があります)
リーリー
② 要素はクラスに基づいて選択することもできます:
クラス名が fancy のテーブルセルは、背景が灰色のオレンジ色になります。
リーリー
6.CSS属性セレクター
①属性セレクター
すべての要素を 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>; }
当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:外部,内部,内联。
① 外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</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;">/></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></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>;}
② 内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用