4、ホームページ制作Dreamweaver(スタイルシートCSS)
7933 ワード
スタイルシートスタイルシート
スタイルが統一されたページを作成するには、色やフォントなどの属性に対するスタイルシートの仕様が必要であり、bodyで何度も定義する手間も省けるので、1つのスタイルシートは欠かせません.
スタイルシートにはhtmlのに直接書く方法と、外部を参照する方法の2つがある.cssファイル.
1つ目の方法の使用(スタイルシートセレクタ)
まずheadでstyleラベルで宣言<style type="text/css"> </style>
1、ラベルで要素を位置決めし、属性を設定するbody
{
background-color:#CC0;
background-image:url(../../xxx.jpg);<!--"(../../)" html -->
background-repeat:no-repeat;
}
table
{
background-image:url(../../xxx.jpg);
background-repeat:repeat;
}
2、カスタム名:(1)スタイルグループにカスタム名を設定し、のラベルで運用する.ming
{
background-image:url(../../xxx.jpg);
background-repeat:no-repeat;
background-size:contain
}
<body class="ming">
<table class = "ming"></table>
</body>
(2)「ラベル名.カスタム名」(ラベル内でのみ使用でき、ラベル名と「.カスタム名」の間にスペースが1つある)table .ming
{
color:#3F0;
}
<body>
<table class = "ming"></table>
<font class = "ming"></font><!-- -->
</body>
(3)、「.カスタム名ラベル」(.カスタム名の後にラベルが存在する部分を自動的に探してスタイルに割り当てる).ming font
{
font:" ";
}
<body>
<table class = "ming">
<tr>
<td>
<font> </font>
</tr>
</td>
<tr>
<td>
<button> </button>
</tr>
</td>
</table>
</body>
3、id値で適当な要素を検索する:#id(#にID値を付けて、このIDが存在する要素を個別に設定することができる)[#idも同様にカスタム名のいくつかの方法で使用することができる]#id1
{
color:#3F0;
}
<body>
<table>
<tr>
<td>
<input type="text" id="id1" />
</td>
</tr>
</table>
</body>
セレクタの優先度:
ID>class名>ラベル
第2の方法の使用(CSS)
インポート:
htmlファイルの:
<style type="text/css"> </style>
body
{
background-color:#CC0;
background-image:url(../../xxx.jpg);<!--"(../../)" html -->
background-repeat:no-repeat;
}
table
{
background-image:url(../../xxx.jpg);
background-repeat:repeat;
}
.ming
{
background-image:url(../../xxx.jpg);
background-repeat:no-repeat;
background-size:contain
}
<body class="ming">
<table class = "ming"></table>
</body>
table .ming
{
color:#3F0;
}
<body>
<table class = "ming"></table>
<font class = "ming"></font><!-- -->
</body>
.ming font
{
font:" ";
}
<body>
<table class = "ming">
<tr>
<td>
<font> </font>
</tr>
</td>
<tr>
<td>
<button> </button>
</tr>
</td>
</table>
</body>
#id1
{
color:#3F0;
}
<body>
<table>
<tr>
<td>
<input type="text" id="id1" />
</td>
</tr>
</table>
</body>