style属性 - スタイルシート

公開日: 2017/02/21

style属性は、要素にスタイルシートを適用するための属性です。個々の要素に直接、スタイルシートを適用できます。

説明

style属性は、個々の要素にスタイルシートを適用できます。値にそのまま、コードを埋め込んで下さい。値の囲み文字を内部で使うと表示が崩れてしまうのでご注意下さい。ダブルクオート(")とシングルクオート(')で分けるようにしましょう。

見本のスタイルシート

p {
	width: 200px ;
	height: 100px ;
	background-color: #f00 ;
	color: #fff ;
}

style属性で埋め込んだ例

<p style="
	width: 200px ;
	height: 100px ;
	background-color: #f00 ;
	color: #fff ;
"></p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】style属性 - スタイルシート</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/style/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>style属性は、個々の要素に直接、スタイルシートを適用するための要素です。</p>

<p><span style="color: red; font-weight: 700 ;">SYNCER</span>はウェブサイトだ。</p>

	</body>
</html>

デモを開く

デモ

META
HTML
CSS
JavaScript
Result
Open

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/830/"> <meta charset="utf-8"> <title>【デモ】style属性 - スタイルシート</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/style/"> </head> <body>

<p>style属性は、個々の要素に直接、スタイルシートを適用するための要素です。</p> <p><span style="color: red; font-weight: 700 ;">SYNCER</span>はウェブサイトだ。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>