第2天：css 快速入门

css是什么

　　css（cascading style sheet,可以译为“层叠样式表”），是一组格式设置规则，用于控制web页面的外观

如何让一个标签具有样式

　　第一步：必须保证引入方式正确

　　第二步：必须让css和html元素产生关联，也就是说要先找到这个元素

　　第三步：用相应的css属性去修改html元素样式

css的三种引入形式

　　1、将css内嵌到HTML文件中，这种方式又叫内联样式表，例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

　　2、将一个外部样式链接到HTML文件中，这种方式又叫链接样式表，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

　　3、将样式表加入到HTML文件中，这种方式又叫做行内样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<body>
		<div style="width: 200px;height: 200px;background: green;"></div>
	</body>
</html>

基础选择器

　　id选择器：id选择器在css中只出现一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<style type="text/css">
		#box{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div id="box"></div>
	</body>
</html>

　　类选择器：将相同类型的元素进行分类定义，分类定义的好处就是能够复用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<style type="text/css">
		.box{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>

　　标签选择器：直接使用HTML标签名称作为css选择器的名称，这种方式会影响HTML中所有此标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<style type="text/css">
		div{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div ></div>
	</body>
</html>

基本属性

颜色表示方式

　　RGB模式

秒客网