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则代表引入的文件是一个纯文本的样式文件

 

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

热门文章

优秀文章