从零开始的毕设--CSS（1）

CSS与HTML

HTML可以比喻为房子，CSS比喻为房子内的房间。
为这些房间设置型号，喷漆颜色等等，就需要用到CSS。
相比HTML，CSS更适合设置指定样式，也更有利于处理多个页面的样式。

<style type="text/css">
p{
	background-color:red;
	border:1px solid gray;
	color:maroon;
}
<!--表示段落背景为红色，并且有粗细为1像素，灰色实现边框-->
<!--改变字体颜色是maroon，你可能以为是font-color，可惜并不是-->
</style>

用选择器做更复杂的设置

增加规则：

<style type="text/css">
	h1,h2{
		font-family:sans-serif;
		color:gray;
}
	h1{
		border-bottom:1px solid black;
}
	p{
	color:maroon;
}
<!--我们把开头的h1，h2或者p或者h1称为选择器-->

</style>

创建一个CSS文件

css文件中只包括CSS，不能包含HTML
所以只用在css文件中复制：

	h1,h2{
		font-family:sans-serif;
		color:gray;
}
	h1{
		border-bottom:1px solid black;
}
	p{
	color:maroon;
}

从"lounge.html"链接到外部样式表：

<head>
<meta charset="utf-8">
<title>Head Firtst Lounge</title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
</head>

link元素链接外部信息
type类型是“text/css”表示这是一个CSS样式表，但在HTML5中，不再需要这个属性了。
rel属性指定HRML文件与所连接文件的关系，我们这里使用的是样式表：stylesheet
href可以放相对链接或者URL

谈谈继承

为p选择器增加font-family属性时，会影响<p>元素中内部元素的字体，如<em>和<a>
也就是它们继承了父元素的样式。
在这里插入图片描述
继承是可以覆盖的。
为p选用了一种字体，可以为子元素选择另一种字体。

创建类选择器

实际上，我们不希望所有的p选择器都是一种形式的，这时候就需要类选择器。
我们可以在css文件里这样写：

p{
	color:maroon;
	background-color: red;
	}
p.greentea{
	color: green;
	}

并且在html文件里这样应用

<p class="greentea">Green Tea $1.56</p>
<!--这样会覆盖p的color 并且继承bg-color-->

如果省略元素名，那么这个规则会应用到所有使用这个类的成员，如下：

.greentea{
	color:green;
	}

一个元素可以假如多个类：

	<p class="greentea blueberry">
	<!--如果规则中有重复的，则以最后一个类的规则为准-->