ホームページ > 記事 > ウェブフロントエンド > Brisket パブリッシング システムは CSS_html/css_WEB-ITnose を HTML に導入します
Brisket パブリッシング システムは CSS_html/css_WEB-ITnose を HTML に導入します
- WBOYオリジナル
- 2016-06-24 11:53:341345ブラウズ
1. CSS の紹介
カスケード スタイル シート (Cascading style Sheet) は、CSS と呼ばれ、HTML や XML などのファイル スタイルを表現するために使用されるコンピューター言語でもあります。 Web ページのプレゼンテーションとコンテンツのスタイル デザイン言語。 Web ページ内のオブジェクトの位置とレイアウトをピクセル レベルで制御でき、現在テキストベースの表示に最も広く使用されています。
ビーフブリスケット公開システムでは、Web ページのレイアウトと制御に CSS が使用されます。次に、CSS がどのように HTML に導入されるかを説明します。
2. 導入方法
HTML と CSS は、Web ページに同時に影響を与えるため、適切に機能するには相互にリンクする必要があります。 HTML では、CSS を導入する主な方法として、インライン、埋め込み、インポート、リンクの 4 つがあります。
1) インライン スタイル
インライン スタイルは、マークの style 属性に CSS スタイルを設定することです。このメソッドは、基本的に 1 つのタイトルにのみ影響します。したがって、実際にはあまり適用されません。 Re r
以上のコードが線種で、H1 タイトルのみが効果を持ち、テキストの色を青に設定し、背景色は灰色で、効果は次のとおりです:
2) 埋め込み
埋め込みは、ページ内のさまざまな要素の設定を と の間に集中させます。これは、複数ページの Web ページの場合、インラインの導入に適しています。 CSS 自体の利点が失われます。
上記の例では、ページ内のすべての h1 タグで同じスタイルを使用する場合、スタイルを head セクションに移動してインラインにアップグレードできます。
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML引入CSS</title></head><body> <h1 style ="color :cadetblue ;background-color : gray "> 行内式引入 </h1></body>
効果は次のとおりです。
インポート スタイル
。最初の 2 つの導入方法よりも広く使用されています。ただし、インポートされたスタイルを使用する場合、ページ全体が読み込まれるまで CSS ファイルは読み込まれません。比較的大きな Web ページ ファイルを含む一部のブラウザでは、スタイルなしのページが最初に表示され、次にスタイル付きのページが表示されます。コードは次のとおりです。
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML引入CSS</title> <style type="text/css" > h1 { color: cadetblue; background-color: gray; } </style></head><body> <h1>内嵌式引入CSS</h1> <h1>对整页h1标题产生效果</h1></body>
h1 { /*mystyle.css*/ color :cadetblue;background-color: gray} 4) リンク タイプ
リンク タイプは、インポート タイプと同様に、独立した CSS ファイルを HTML ファイルに導入します。ただし、表示効果の点では、CSS ファイルが最初に読み込まれ、次にページの主要部分が読み込まれるため、最初からスタイル効果が適用された状態でページが表示され、閲覧者のエクスペリエンスという点では、インポートされたスタイルよりも優れています。コードを導入するときは、インポートされたスタイル パーツを直接削除し、次のステートメントをヘッド パーツ (ブリスケットで使用されるインポート メソッドでもあります) に追加します:
/*HTML文档中style部分改为*/<style type ="text/css" > @import "mystyle.css"</style>
2 つのインポート メソッド、import と link はどちらも独立した CSS ファイルをインポートします。 。上記の表示効果の違いに加えて、メンテナンスのしやすさにも違いがあります。複数の CSS ファイルがある場合、リンク インポートを使用する場合は、CSS ファイルを個別にインポートするためのいくつかのステートメントが必要です。 CSS ファイル全体の分類を調整したい場合は、HTML ファイルを調整する必要があり、メンテナンスが困難になります。インポート メソッドでは、一般的な CSS ファイルを指定してから、そのファイル内の他の独立した CSS ファイルをインポートできます。どの導入方法が使用されるかは、具体的な状況によって異なります。