CSS初步

8天前发布

1.CSS引用
<link href="css/styles.cs" type="text/css" rel="stylesheet">
2.选择器
（1）通用选择器*{}，选取所有元素
（2）类型选择器h1,h2,h3{}
（3）类选择器.note{}应用所有类名为note的元素
  p.note{}应用于所有p元素中类名是note的元素
（4）ID选择器#introduction{}
(5）子元素选择器 li>a{}应用于所有父元素是Li的a元素。对其他<a>不起作用
（6）后代选择器p a{}应用于所有位于<p>元素中的<a>元素
(7)相邻兄弟选择器h1+p{} 应用于h1元素后第一个p元素
（8）普通兄弟选择器h1~p{}如果有两个P元素都是h1的兄弟元素，两个都被选中。
3.CSS规则级联
<!DOCTYPE html>
<html>
	<head>
		<title>How CSS Rules Cascade</title>
		<style type="text/css">
			* {
				font-family: Arial, Verdana, sans-serif;}
			h1 {
				font-family: "Courier New", Courier, monospace;}
			i {
				color: green;}
			i {
				color: red;}
			b {
				color: pink;}
			p b {
				color: blue !important;}
			p b {
				color: violet;}
			p#intro {
				font-size: 100%;}
			p {
				font-size: 75%;}
		</style>
	</head>
	<body>
		<h1>Potatoes</h1>
		<p id="intro">There are <i>dozens</i> of different <b>potato</b> varieties.</p>
		<p>They are usually described as early, second early and maincrop potatoes.</p>
	</body>
</html>

（1）就近原则
  如果两个选择器相同，后出现的优先级高于先出现的。
(2)具体性原则
如果一个选择器比其他选择器更加具体，那么具体的选择器优于一般的选择器。
h1优于* p b优于p
p#inftro优于 p
(3)重要性，添加！important强调规则重要。
4.继承
font-family可以继承。background-color，border不会继承。
将属性值设为inherit来强制继承
<!DOCTYPE html>
<html>
	<head>
		<title>Inheritance</title>
		<style type="text/css">
			body {
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
				padding: 10px;}
			.page {
				border: 1px solid #665544;
				background-color: #efefef;
				padding: inherit;}
		</style>
	</head>
	<body>
		<div class="page">
			<h1>Potatoes</h1>
			<p>There are dozens of different potato varieties.</p>
			<p>They are usually described as early, second early and maincrop potatoes.</p>
		</div>
	</body>
</html>

评分

欢迎为Ta评分