CSS的三种使用方法。 行内样式: 内嵌式: 外部式:该怎么写?

阅读:306 责任编辑:CSS 来源:CSS使用方法

 CSS的三种使用方法。 行内样式: 内嵌式: 外部式:该怎么写?

外部样式.jpg

外部式:
(1)用法:当要在站点上所有或部分网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表中修改一次,而该更改会反映到所有与该样式表相链接的网页上。

(2)举例:通常外部样式表以 .css 做为文件扩展名,例如 Mystyles.css。然后在需要此样式的页面中将其链接进来。

2.内嵌式:

(1)用法:当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。 

(2)举例:在 MicrosoftFrontPage2000中,某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令(在 “格式” 菜单上)在普通段落周围应用框,FrontPage 会写下格式设置信息,作为段落标记符的内嵌样式属性。

3.行内样式:

行内样式就是直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。通过这种方法,可以很简单地对某个元素单独定义样式。

 

三中的使用方法的简单实例如下:

行内样式:

<!doctype html><html><head><meta charset="UTF-8"><title>css行内样式</title></head><body><div style="width:100px;height:100px;background:red;"></div>></body></html>
内嵌样式:

!doctype html><html><head><meta charset="UTF-8"><title>css内嵌样式</title></head><body><style type="text/css">#div{width:100px;height:100px;background:red;}</style><div id="div"></div>></body></html>
外部式:

<!doctype html><html><head><meta charset="UTF-8"><title>css内嵌样式</title><link rel="stylesheet" type="text/css" href="ccss.css"></head><body><div id="div"></div>></body></html>
css文件
#div{width:100px;height:100px;background:red;}
简言之:
行内样式:就是代码写在具体网页中的一个元素内;比如:<div style="color:#f00"></div>内嵌式:就是在</head>前面写;比如:<style type="text/css">.div{color:#F00}</style>外部式:就是引用外部css文件;比如:<link href="css.css" type="text/css" rel="stylesheet" />

本文标签: CSS使用方法  行内样式 内嵌式 外部式

图文推荐