トッカンソフトウェア

CSSの指定

今回はCSSを指定する方法をやります。



CSSの指定

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSのテストページ</title>
<style type="text/css">
body {
	/* 背景色 */
	background-color: green;
}
p {
	/* 文字色 */
	color: red;
}
.class {
	/* 文字色 */
	color: white;
}
div .class {
	/* 背景色 */
	background-color: blue;
}
#id {
	background-color: yellow;
}
</style>
</head>
<body>
	<div>
		
		<p class="class" >CLASS1</p>
	</div>
	<p class="class" >CLASS2</p>
	<p id="id">ID</p>
</body>
</html>


			
実行イメージ

優先順

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSのテストページ</title>
<style type="text/css">
* {
	/* 背景色 */
	background-color: gray !important;
}
div {
	/* 背景色 */
	background-color: green;
}
div {
	/* 背景色 */
	background-color: blue;
}
.class {
	/* 背景色 */
	background-color: red;
}
#id {
	/* 背景色 */
	background-color: yellow;
}

</style>
</head>
<body>
	<p id="id" class="class" style="background-color: pink;">TEST</p>
</body>
</html>


			
実行イメージ


ページのトップへ戻る