CSS スタイルは、HTML 文書内に別ファイル ( .css形式のファイル) として導入する方法と、HTML 文書内に直接記述する方法があります。大きく分けて、次の 4 つの方法があります。
1 番目と 2 番目のメソッドはどちらも CSS スタイルを現在の HTML ドキュメントに書き込み、3 番目と 4 番目のメソッドは両方とも CSS スタイルを外部ファイルに配置し、それを現在の HTML ドキュメントにインポートします。
インライン スタイルは、コード行内のタグに CSS スタイルを直接配置することです。通常はタグのstyle属性にインライン スタイルが直接挿入されるため、これが最も直接的な方法であり、最も直接的な方法でもあります。スタイルを変更するのが最も不便です。
【例1】段落、<h2>タグ、<em>タグ、<strong>タグ、<div>タグにそれぞれCSSインラインスタイルを適用します。
<!doctype html>
<html>
<頭>
<meta charset="UTF-8">
<title>インライン スタイル</title>
</head>
<本文>
<p style="background-color: #999900">インライン要素、コントロール段落-1</p>
<h2 style="background-color: #FF6633">インライン要素、h2 タイトル要素</h2>
<p style="background-color: #999900">インライン要素、コントロール段落 2</p>
<strong style="font-size:30px;">インライン要素、strong は em よりも効果的です</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">インライン要素、div ブロックレベル要素</div>
<em style="font-size:2em;">インライン要素、em 強調</em>
</body>
</html>ページのデモ効果は次のとおりです。
上記の例では、インライン スタイルは HTML 要素の style 属性によって埋め込まれます。つまり、CSS コードはstyle=""引用符内に配置でき、複数の CSS 属性値はセミコロンで区切られます;たとえば、次の例の <div> タグは次のとおりです。
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">インライン要素、div ブロックレベル要素</div>
段落 <p> タグは背景色を茶色 (background-color: #999900) に設定し、タイトル <h2> タグは背景色を赤色 (background-color: #FF6633) に設定します。
<strong> タグはフォントを 30 ピクセル (font-size:30px;) に設定し、<div> タグは高さと行の高さを 30 ピクセルに設定し、背景色と色を設定します (background-color: #66CC99; color) : #993300 ; height:30px; line-height:30px;)、<em> タグはフォント サイズを相対単位 (font-size: 2em;) に設定します。
2 つの段落 <p> タグの内容は異なりますが、同じ背景色設定を使用しますが、CSS インライン属性を 2 回追加して、背景色 background-color: #999900 を設定します。
インライン要素は書くのが簡単ですが、例を通して次の欠点を見つけることができます。
各タグは、style 属性を追加してスタイルを設定する必要があります。 Web ページ制作者が HTML タグとスタイルを混合していた以前とは異なり、現在ではインライン スタイルは CSS を通じて記述されており、以前はスタイル効果を実現するために HTML タグ属性が使用されていました。方法は異なりますが、結果は同じです。将来の維持コストが高くなります。つまり、ページを変更するときに、Web サイトの各ページを 1 つずつ開いて 1 つずつ変更する必要があり、表示されなくなります。 CSS の役割はまったくありません。多くのインライン スタイルを追加すると、ポータルがこの方法で作成されるとページが大きくなり、サーバーの帯域幅とトラフィックが無駄になります。インターネット上の一部の Web ページでは、ソース ファイルを見るとこのように書かれていることがわかりますが、状況に応じて区別する必要があります。
Web ページ作成者がこのようなインライン スタイルを作成すると、以前に作成したスタイルの競合を考慮する必要がなく、現在のスタイルをすぐに変更できます。Web ページ内にこのような状況が存在する場合、そのスタイルはバックグラウンドでエディタによって生成されるためです。編集する場合、または背景が完全に開発されていない場合は、エディターで色、厚さ、背景色、傾きなどの効果を直接変更するのではなく、エディターがスタイルを選択するためのオプションを開発する必要があります。インラインスタイルは、Webページのソースファイルの先頭、つまり<head>と<head>の間にCSSを記述し、それをHTMLタグ内の<style>タグで囲むことしかできないのが特徴です。インライン スタイルを複数回記述する場合の欠点を解決するには、page を使用します。
【例2】段落の記述方法をインライン形式に設定し、コード量を削減します。
<!doctype html>
<html>
<頭>
<meta charset="utf-8">
<title>埋め込み</title>
<style type="text/css">
p{
text-align: left; /*テキストを左揃え*/
font-size: 18px; /*フォントサイズ 18 ピクセル*/
line-height: 25px; /*行の高さ 25 ピクセル*/
text-indent: 2em; /*最初の行をテキストサイズのスペース 2 つ分インデントします*/
width: 500px; /*段落の幅 500 ピクセル*/
margin: 0 auto; /*ブラウザの下に中央揃え*/
margin-bottom: 20px; /*段落の下マージン 20 ピクセル*/
}
</スタイル>
</head>
<本文>
<p>「百度」という社名は、宋の時代の詩「千百度の彼を探して」に由来しています。 （百度会社の会議室は清宇事件と名付けられており、この詩の単語カードです）。 「熊の足」アイコンのアイデアは、「熊の足をパトロールするハンター」の刺激から生まれました。これは、李博士の「分析検索技術」と非常によく似ており、百度の検索コンセプトを形成し、最終的に百度のアイコン画像になりました。その後、検索エンジンの多くがSOHUのキツネ、GOOGLEの犬などの動物画像で表現されていたため、Baiduは自然にそれをクマと呼んだ。 Baidu Bear は Baidu Company のイメージになっています。 </p>
<p>Baidu のロゴ変更計画では、Baidu が提案した 3 つの新しいロゴ デザインはすべてネチズンの投票により拒否され、より多くのネチズンが元の熊の足のロゴに投票しました。 </p>
<p>ロゴを変更するために合計 3 ラウンドの投票が行われました。第 2 ラウンドの投票が終了するまで、新しい笑顔のロゴが絶対的に有利でした。しかし、最終投票ではオリジナルのクマの足のロゴがネットユーザーからの最多票を劇的に獲得し、3つの新しいロゴ案を完全に拒否した。 </p>
</body>
</html>ページのデモ効果は次のとおりです。
上の例では、段落は次のように設定されています。テキストは左揃え、フォントのサイズは 14、行の高さは 25 ピクセル、幅は 500 ピクセル、下マージンは 20 ピクセル、ブラウザはテキストの下の中央に配置されます。ブラウザでは、最初の行はテキストサイズのスペース 2 つ分インデントされます。最初の行のインデントには相対単位が使用されます。この設定の目的は、フォント サイズが変更された場合でも ( font-size: 18px;など)、テキスト サイズ 2 つのスペースでインデントできるようにすることです。
たとえば、前の例では、両方の段落で同じスタイルを使用していますが、インライン スタイルを使用すると、すべての段落スタイルをまとめることができます。
スタイルは CSS スタイルだけでなく JavaScript スクリプトも定義できるため、スタイルを使用する場合は注意が必要です。 style の type 値がtext/cssの場合、CSS スタイルは内部的に書き込まれます。 style の type 値がtext/javascriptの場合、JavaScript スクリプトは内部的に書き込まれます。
styleタグのtitle属性
style には特別な属性 title があり、viewer はタイトルに応じて異なるスタイルを設定できます。ただし、IE ブラウザはこれをサポートしていません。 Firefox ブラウザーはこの効果をサポートしています。
【例3】Firefoxブラウザに2つのフォントサイズスタイルをそれぞれ設定し、Firefoxの「表示」メニューから変更します。
<!doctype html>
<html>
<頭>
<meta charset="utf-8">
<style type="text/css" title="フォントサイズ 14">
p{
text-align: left; /*テキストを左揃え*/
font-size: 14px; /*フォントサイズ 14 ピクセル*/
line-height: 25px; /*行の高さ 25 ピクセル*/
text-indent: 2em; /*最初の行をテキストサイズのスペース 2 つ分インデントします*/
width: 500px; /*段落の幅 500 ピクセル*/
margin: 0 auto; /*ブラウザの下に中央揃え*/
}
</スタイル>
<style type="text/css" title="フォントサイズ 18">
p{
text-align: left; /*テキストを左揃え*/
font-size: 18px; /*フォントサイズ 18 ピクセル*/
line-height: 25px; /*行の高さ 25 ピクセル*/
text-indent: 2em; /*最初の行をテキストサイズのスペース 2 つ分インデントします*/
width: 500px; /*段落の幅 500 ピクセル*/
margin: 0 auto; /*ブラウザの下に中央揃え*/
color: #6699FF; /*フォントの色を変更*/
}
</スタイル>
</head>
<本文>
<p>「Baidu」という社名は、宋の時代の詩「千百度の彼を探して」に由来しています。 （百度会社の会議室は清宇事件と名付けられており、この詩の単語カードです）。 「熊の足」アイコンのアイデアは、「熊の足をパトロールするハンター」の刺激から生まれました。これは、李博士の「分析検索技術」と非常によく似ており、百度の検索コンセプトを形成し、最終的に百度のアイコン画像になりました。 </p>
</body>
</html>ページのデモ効果を次の図に示します。
上の例では、 <style type="text/css" title="名称">によって 2 つのフォント サイズが定義されており、Firefox の [表示] メニューの [ページ スタイル] サブメニューに 2 つのオプションがあります。サイズ 14、フォント サイズ 18。デフォルトでは、最初に書かれた<style type="text/css" title="名称">が表示されます。ページ スタイルはメニューから変更できます。
link メソッドは、HTML の <link> タグを介して外部スタイル シート ファイルを HTML ドキュメントにリンクする方法であり、インターネット上の Web サイトで最も一般的に使用される方法であり、最も実用的な方法です。この手法により、HTMLドキュメントとCSSファイルが完全に分離され、構造層とプレゼンテーション層の完全分離が実現され、Webページ構造の拡張性とCSSスタイルの保守性が向上します。
[例4] リンクスタイルを使用してHTMLコードにスタイルを適用すると、記述と変更が簡単になります。
<!doctype html>
<html>
<頭>
<meta charset="utf-8">
<タイトル></タイトル>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<本文>
<p>私は lianjie-2.css ファイルによって制御されています。階下のあなたはどうですか? ? </p>
<h3>上の階では、<span>lianjie.css</span> ファイルによってカラフルなドレスが与えられました。 </h3>
</body>
</html>ページのデモ効果は次のとおりです。
上記の例では、2 つの CSS ファイルがリンクによってリンクされており、どちらも有効であるため、Web サイト作成者は共通部分を CSS ファイルに組み込み、現在のページ スタイルに対応する新しいスタイル ファイルを作成します。
lianjie.css ファイルのコード:
h3{
font-weight:normal; /*タイトルのデフォルトの太字効果をキャンセルします*/
背景色: #66CC99; /* 背景色を設定します*/
height: 50px; /*ラベルの高さを設定します*/
line-height:50px; /* ラベルの行の高さを設定します*/
}
スパン{
color: #FFOOOO; /* フォントの色*/
font-weight:bold; /* 太字のフォント*/
}lianjie-2.css ファイルのコード:
p{
color: #FF3333; /*フォントの色の設定*/
フォントの太さ: 太字; /* 太字のフォント*/
border-bottom: 3px 破線 #009933; /* 下の境界線を設定します*/
line-height: 30px; /* 行の高さを設定します*/
}リンクされたスタイルは CSS コードと HTML コードを完全に分離し、構造とスタイルの分離を実現します。これにより、HTML コードがページ構造を具体的に構築できるようになり、美化作業は CSS によって完了されます。
インポートされた CSS スタイルをリンクする利点:
CSS ファイルを別の HTML ファイルに配置して、Web サイトのすべてのページのスタイルを統一することができます。さらに、CSS コードを 1 つの CSS ファイルに入れると、CSS ファイルが変更されたときに、適用されるすべてのページのコードとメンテナンスの時間が短縮されます。この CSS ファイルは、サーバーからすべてのページを取得して変更後にアップロードすることなく、すべての HTML ファイルが更新されます。スタイルのインポート @import コマンドを使用して、外部スタイル シートをインポートします。インポートされたスタイルには 6 つの記述方法があります。
@インポートdaoru.css;
@import 'daomxss';
@import "daoru.css";
@インポートURL(daoru.css);
@import url('daoru.css');
@import url("daoru.css");【例5】スタイルシート lianjie.css と daoru.css をインポートし、<body> タグの背景色を記述する ただし、インポートしたスタイルシートと <body> タグのスタイルを反転することはできません。
<html>
<頭>
<meta charset="utf-8">
<タイトル></タイトル>
<style type="text/css">
@インポートURL(lianjie.css);
@インポートURL(daoru.css);
ボディ { 背景色: #e4e929;
</スタイル>
</head>
<本文>
<div>
<p>私は lianjie-2.css ファイルによって制御されています。階下のあなたはどうですか? ? </p>
<h3>ジャケットでは、<span>lianjie.css</span> ファイルによって花柄のドレスが決まりました。 </h3>
</div>
</body>
</html>ページのデモ効果を次の図に示します。
上記の例では、 @import url("lianjie-2.css"); p{text-indent: 3em;}である必要がありますが、 p{text-indent:3em;} @import url("lianjie-2.css");そうしないと、インポート効果が無効になります。 CSS ファイルでは、@import を先頭に配置し、CSS スタイルを最後に追加する必要があります。そうしないと無効になります。
lianjie.css ファイルのコード、前の例と同じ、つまりリンク タイプ。
daoru.css ファイルのコード:
@import url("lianjie-2.css");
p { テキストインデント: 3em }HTML 埋め込み CSS スタイルの 4 つの実装方法に関するこの記事はこれで終わりです。その他の関連する HTML 埋め込み CSS スタイルについては、downcodes.com の以前の記事を検索するか、引き続き次の関連記事を参照してください。 . ダウンコード.comをサポート！