HTMLにおけるCSSの基本的な使い方


本文はHTMLでCSSを使う基本的な方法を列挙して、みんなの参考に供します.
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"属性を持つ
タグがHTMLで統一的に定義されます.
擬似状態の継承
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