CSS样式与HTML元素交互示例-优快云博客

本文链接：https://blog.youkuaiyun.com/clz619/article/details/8114098

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*派生选择器--通过依据元素在其位置的上下文关系来定义样式*/
li strong {
	font-style: italic;
	font-weight: normal;
}

strong {
	color: red;
}

h2 {
	color: red;
}

h2 strong {
	color: blue;
}

/*id选择器--为标有特定 id 的 HTML 元素指定特定的样式*/
#red {
	color: red
}

#green {
	color: green;
	font-style: italic;
}

/*类选择器--注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用*/
.center {
	text-align: center;
}

.fancy {
	color: #f60;
	background: #666;
}

/*属性选择器--为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性*/
input[type="text"] {
	width: 150px;
	display: block;
	background-color: yellow;
	margin-bottom: 10px;
	font-family: Verdana, Arial;
}

input[type="button"] {
	width: 120px;
	height: 35px;
	margin-left: 15px;
	display: block;
	font-family: Verdana, Arial;
	margin-left: 15px;
}
</style>

</head>
<body>
	<div>
		<p>
			<strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong>
		</p>
		<ol>
			<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
			<li>我是正常的字体。</li>
		</ol>
		<p>
			The strongly emphasized word in this paragraph is<strong>red</strong>.
		</p>
		<h2>This subhead is also red.</h2>
		<h2>
			The strongly emphasized word in this subhead is<strong>blue</strong>.
		</h2>
	</div>

	<div>
		<p id="red">这个段落是红色。</p>
		<p id="green">这个段落是绿色。</p>

	</div>

	<div>
		<h1 class="center">This heading will be center-aligned</h1>
		<p class="center">This paragraph will also be center-aligned.</p>
		<table>
			<tr>
				<th>id</th>
				<th>name</th>
			</tr>
			<tr>
				<td class="fancy">s101</td>
				<td>ccc</td>
			</tr>
		</table>
	</div>
	<div>
		<input type="text" /><br /> <input type="button" value="ok" />
	</div>
</body>
</html>