html cssスタイルを追加する2つの方法

1720 ワード

html cssスタイルを追加するには、それぞれ行内式(style属性を使用して、特定のHTMLタグ内で使用)、埋め込み式(styleタグを特定のページのhead部分にcssコードを入れる)、外連結式(linkタグを使用して、外部cssファイルをHTMLにリンクする)の3つの方法があります.
一、行内式
style属性を使用して、特定のHTMLタグにCSSスタイルを設定します.
インラインCSSは使わないことをお勧めします.HTMLタグごとに個別にスタイルを設定する必要があるので、インラインCSSだけを使用すると、管理サイトが非常に困難になるかもしれません.しかし、場合によっては有用です.例えば、CSSファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合.インラインCSSのあるHTMLページの例は以下の通りです.

Hostinger Tutorials

Something usefull here.

二、埋め込み式
埋め込みcssスタイルとは、cssコードを特定のページの一部に置くことです.インラインCSSはラベル間に置く必要があります.
クラスおよびIDは、CSSコードを参照するために使用されてもよいが、それらは特定のページだけでアクティブな状態にある.ページを読み込むたびに、このように組み込まれたCSSスタイルをダウンロードします.これによって、ロード速度を高めることができます.いくつかの場合には、埋め込み式の表を使うと役に立ちます.たとえば、誰かにページテンプレートを送信します.すべては一つのページにあるので、プレビューを見やすいです.
内部スタイルシートの例:


  


三、外連結式
外部連結とは、外部のCSSファイル(.cssファイル)をlinkタグ要素を使ってHTMLページに引用し、参照はページの一部に置く必要があります.
これはCSSをhtmlページに追加する一番便利な方法です.このように、外部のCSSファイルに対する変更はすべてあなたのウェブサイトに反映されます.
外付けスタイルシートの例:


  


style.cssはすべてのスタイルルールを含んでいます.たとえば:
.xleftcol {

   float: left;

   width: 33%;

   background:#809900;

}

.xmiddlecol {

   float: left;

   width: 34%;

   background:#eff2df;

}
現在は多くのサイトで外部様式表を使用していますが、外部様式は個々のドキュメントで作成し、各種のWeb文書に添付したものです.外部のスタイルシートは、接続されたどのファイルにも影響を及ぼします.これは、20ページのウェブサイトがあれば、各ページは同じスタイルのテーブルを使用しています.変更が必要な場合は、スタイルシートを編集するだけで、これらのページを完成することができます.これにより、長期サイト管理がより容易になります.