Brisket パブリッシングシステムは CSS_html/css_WEB-ITnose を HTML に導入します-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Brisket パブリッシングシステムは CSS_html/css_WEB-ITnose を HTML に導入します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

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 ファイルをインポートできます。どの導入方法が使用されるかは、具体的な状況によって異なります。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。