CSS笔记-02样式分类

#1.引入样式表分类
##1.1行内样式
###1.1.1概念：
称为行内样式，行间样式
是直接通过标签的style属性来设置元素的样式
###1.2.2基本语法格式如下

<标签名 style="属性1：属性值1; 属性2：属性值2;..........">内容</标签名>

实际上任何HTML标签都拥有style属性，用来设置行内样式
案例：

<div style="color:red;font-size:12px;">这就是行内样式</div>

效果图：
CSS笔记-02样式分类
##1.2内嵌样式
###1.2.2基本语法
即把css代码内嵌到html的头部标签中
###1.2.3具体代码与效果如下

<html>
	<head>
		<!--声明网页编码集-->
		<meta charset="UTF-8">
		<title>css入门</title>
		<meta name="Description" content="">
		<!--内嵌样式-->
		<style typ="text/css">
			div{background:red;}
		</style>
	</head>
	<body>
		<div>这就是内嵌样式</div>	
	</body>
</html>

效果图
CSS笔记-02样式分类
##1.3外联样式
###1.3.1外联样式写法:
将css文件通过一个标签引入到html页面中
例如：

	<head>
		<!--声明网页编码集-->
		<meta charset="UTF-8">
		<title>css入门</title>
		<!--外联样式-->
		<link rel="stylesheet"  type="text/css" href="1.css">
		<link rel="stylesheet"  type="text/css" href="2.css">
	 </head>

###1.3.2步骤
(1)新建一个css文件例如1.css
(2)通过<link rel="stylesheet" type="text/css" href="1.css">引入css文件
(3)将link标签放到head标签中
###1.3.3具体代码及效果
html代码

<html>
	<head>
		<meta charset="UTF-8">
		<title>css练习</title>
		<!--引入样式-->
		<link rel="stylesheet" type="text/css" href="1.css">
	</head>
	<body>
		<p>这是外部样式</p>
	</body>
</html>

1.css代码

p{font-size:25px;color:red;}

效果图：
CSS笔记-02样式分类
###1.4三种样式表的对比