CSS导入方式

一、style属性[行内样式]

在单独制定的一个标签的时候使用。
例如：可以设置字体颜色，字体，字体大小。

如果果多个标签都使用相同的样式，那么代码冗余
格式：

<p style="color:#0F0">Hello World</p>

但是如果出现了新的内容页需要同样的相同大小的字体，就需要每个都定义，比较麻烦！

<html>
    <head>
    </head>
    <body>
        <span style="color: black; font-family: cursive; font-size: 22">hello,world</span>
    </body>
</html>

例如:：每个段落都需要相同的显示效果.需要重复定义。

<body>
	<!--style 属性设置字体颜色,字体,字体大小-->
	<p style="color: black; font-family:Courier;font-size: 20px">
		hello,world
	</p>
	<!--,设置字体颜色,字体,字体大小,添加背景图片-->
	<p style="color:yellow ; font-family:cursive; font-size:22px;width: 230px;height: 160px;  background-image: url('pic/image1.jpg')">
		All time is no time when it is past.
	</p>

	<p style="color:yellow ; font-family:cursive; font-size:22px;width: 230px;height: 160px;  background-image: url('pic/image3.jpg')">
		Don't spend time beating on a wall, hoping to transform it into a door.
	</p>

	<p style="color:yellow;font-size:20px;font-family: cursive; width:230px;height:160px; background-image: url('pic/image2.jpg')">
		In this world, only those men who really feel happy can give women happiness.
	</p>
</body>

效果：

总结：
使用每个HTML元素的style属性指定样式，每个样式之间使用";"隔开

格式： <h2 style="color:#3F0; border:dotted">AAAAAAA</h2>
优点：可以单独对每个元素使用不同的样式
缺点：如果有很多页面的元素的样式是一致的，不能提高代码的复用性

二、使用<style>标签[内部样式]
在页面中如果有多个标签样式相同时使用，你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。
格式如下：

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>        
        <style type="text/css">
            
        </style>
</head>

案例实现:：



<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>New Web Project</title>

	<style type="text/css">
		p {
			color: yellow;
			font-size: 20px;
			font-family: cursive;
			width: 230px;
			height: 160px;
			border: 1px;
			border-style: solid;
			border-color: black;
		}
	</style>
	</head>

<body>

	<p style="background-image: url('pic/image1.jpg')">
		All time is no time when it is past.         </p>

	<p style="background-image: url('pic/image2.jpg')">
		Do the thing you fear, and the death of fear is certain.         </p>

	<p style="background-image: url('pic/image3.jpg')">
		Don't spend time beating on a wall, hoping to transform it into a door.         </p>
</body>

效果：

总结：
在页面的<head>标签中使用<style>标签引入样式

格式： <style>h2{ color:#00F;} </style>
特点：该引入方式可以写在页面的任何位置，但是推荐放在<head></head>
优点：可以对当前页面的所有的元素进行统一的修饰
缺点：如果不同的页面样式是相同的，该引入方式不同提高代码的复用性

三、使用<link>标签[外部样式]

格式如下：

<link rel="stylesheet" type="text/css" href="路径">

案例：

HTML文件：

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--使用link标签引入外部css文件-->

	<link rel="stylesheet" href="Demo5.css" type="text/css" />     </head>

<body>

	<p style="background-image: url('pic/image1.jpg')">
		All time is no time when it is past.         </p>

	<p style="background-image: url('pic/image2.jpg')">
		Do the thing you fear, and the death of fear is certain.         </p>

	<p style="background-image: url('pic/image3.jpg')">
		Don't spend time beating on a wall, hoping to transform it into a door.         </p>
</body>

CSS文件：

p {
    color: yellow;
    font-size: 20px;
    font-family: cursive;
    width: 230px;
    height: 160px;
}

效果：

第三种方式总结:

<link rel="stylesheet" href="general.css"  type="text/css"/>

推荐使用第三种方式

相关属性：

rel: 标识当前页面文件和引入文件的关系如果值为stylesheet则代表是修饰与被修饰的关系
href：引入外部资源的路径
type: 引入外部资源的类型如果值为text/css则代表引入的文件是一个纯文本的样式文件

优点：代码的复用性好
缺点：引入的是文件，所以效率比较低，对于一些追求页面速度的网页不适合使用如：搜索网页

CSS的优势标签选择器

CSS导入方式

微信关注