HTMLにおけるCSSの基本的な使い方
本文はHTMLでCSSを使う基本的な方法を列挙して、みんなの参考に供します.
CSSファイルを参照
HTMLの内直接定義
idの使用
HTMLタグクラスの上書き
HTML Tagサブクラスの継承
タグがHTMLで統一的に定義されます.
擬似状態の継承
カスタムクラス
句点で始まるのはカスタムクラスです
HTMLの直接定義
CSSとHTMLを統合してCSSも従来の属性定義も使用すると、CSSはHTML属性定義を上書きします.
CSS
CSSでwidthが指定されているため、実際の幅はCSSに準じてwidth=100となる. 高さはCSSで定義されていない場合はHTML属性に準じてheight=400
CSSファイルを参照
<link type="text/css" rel="stylesheet" href="js_css/menutree.css">
HTMLの内直接定義
<style type="text/css">
</style>
idの使用
<style type="text/css">
#loginTable
{
}
</style>
HTML
<table id="loginTable">
</table>
HTMLタグクラスの上書き
<style type="text/css">
table
{
}
</style>
HTML
<table>
</table>
この例では、ページ内のすべてのラベルが統一的に定義されます.HTML Tagサブクラスの継承
CSS
<style type="text/css">
table.login
{
}
</style>
HTML
<table class="login">
</table>
この例では、class="login"属性を持つ擬似状態の継承
a:link { }
a:visited { }
a:active { }
a:hover { }
a.menu:link {}
a.menu:visited{}
カスタムクラス
句点で始まるのはカスタムクラスです
<style type="text/css">
.loginTable
{
}
</style>
HTML
<table class="loginTable">
</table>
この例では、class=「loginTable」を指定するすべてのラベルが統一的に定義されます.各Htmlラベルのプロパティは、.loginTableの一部が有効にならない可能性があることに注意してください.たとえば、tableラベルにfloatプロパティを指定すると、有効になりません.HTMLの直接定義
<table style="{border-width:1px; border-style: solid; }">
</table>
CSSとHTMLを統合してCSSも従来の属性定義も使用すると、CSSはHTML属性定義を上書きします.
CSS
table.s
{
width: 100px;
}
HTML
<table width="400" height="400" class="s"> </table>
CSSでwidthが指定されているため、実際の幅はCSSに準じてwidth=100となる. 高さはCSSで定義されていない場合はHTML属性に準じてheight=400