CSS入门学习

CSS是什么

CSS 指的是层叠样式表 (Cascading Style Sheets)，说白了就是来定义 HTML 元素的样式的。根据层叠样式表来理解下 CSS ，样式表好理解，就是有样式的“表”，那层叠指的是什么呢？层叠指的是一层一层叠加的效果，我们可以在多个地方来设置某个元素的样式，这个元素的最终显示结果是它们共同叠加的效果。叠加效果是有相关规则的，比如谁的优先级更高、谁会覆盖谁等，下面会有相关介绍。

CSS 是用来写样式的，但是写几个元素放在浏览器里就有样式了，这是什么鬼？例子如下：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
</head>
<body id="body">
	<div>
	<H1>aaa</H1>
	<H2>bbb</H2>
	<p>ccc</p>
	</div>
</body>
</html>

可以很明显的看到 aaa、bbb 被放大并且加粗了。这是因为浏览器有默认的样式，并且不同浏览器会有不同的样式。这就需要考虑不同浏览器的兼容问题了，这个问题先放在这里，下面有解决的办法。

CSS样式怎么来写

怎么来写样式呢？主要有以下几种方法：

属性样式
内部样式
引用样式

属性样式

属性样式，html 代码还是上个例子的代码，CSS 代码如下：

<H1 style='color: red'>aaa</H1>
<H2 style='color: green'>bbb</H2>
<p style='color: gray'>ccc</p>

效果如下：

内部样式

<style type="text/css">
	H1 {
		color: red;
	}
	H2 {
		color: green;
	}
	p {
		color: gray;
	}
</style>

效果同上面的一样

引用样式

引用样式
default.html

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<link rel="stylesheet" type="text/css" href="default.css" /> 
</head>
<body id="body">
	<div>
		<H1>aaa</H1>
		<H2>bbb</H2>
		<p>ccc</p>
	</div>
</body>
</html>

default.css

H1 {
	color: red;
}
H2 {
	color: green;
}
p {
	color: gray;
}

效果同上面的一样。

样式的优先级

接着来说一下如果多个地方都设置了某一标签的样式该来怎么展示的问题。属性样式 > 内部样式 > 引用样式，层叠效果是各个设置效果的叠加，有相同的话是后面的覆盖前面的。举例：
1.属性样式的优先级高于内部样式

例子中同时设置了 H1 标签的属性样式为 color:green、内部样式为 vred ，最终效果为 color:red。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
	H1 {
		color: red;
	}
</style>
</head>
<body id="body">
	<div>
	<H1 style='color:green'>aaa</H1>
	</div>
</body>
</html>

2.样式的叠加，例子中设置了 p 标签的属性样式为 color:green、内部样式为 color:red;font-size: 50px;,最终效果为 color: green;font-size: 50px; 。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
	p {
		color: red;
		font-size: 50px;
	}
</style>
</head>
<body id="body">
	<div>
	<p style='color:green'>ccc</p>
	</div>
</body>
</html>

浏览器的默认样式

上文提到浏览器有默认的样式，其主要目地是为了让没有样式的页面显示起来不至于那么寒碜～～～。为了保持兼容性，一般会重置不同浏览器默认的样式，称为重置样式表。已经有很多别人写好的重置样式表，这里就不再造轮子，直接拿过来用。

CSS标准文档流

文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。CSS 中的元素分为两种：块级元素和行内元素。

块级元素

霸占一行，不能与其它任何元素并列，能设置宽、高等属性，默认的宽度为父容器的宽度。

行内元素

行内元素与其它元素并排，不能设置宽、高，默认的宽度就是文字的宽度。

HTML 中，标签分为两种：文本级和容器级，常见的文本级标签：p、span、a、等，常见的容器级标签：div、h、li等。
容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

下面来看一下标准文档流中块级元素和行内元素展示样子。下面的例子中我们可以看到 div 独自占一行，而 sapn 是与其它元素并列展示。

HTML

<body id="body">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<span>aaa</span>
	<span>bbb</span>
	<span>ccc</span>
	<div>4</div>
	<span>ddd</span>
</body>

CSS

#body {
		background-color: #ccc;
	}
div {
	background-color: green;
	width: 200px;
	height: 50px;
	margin-top: 10px;
}
span {
	background-color: red;
}