css的几种使用方式和区别

在html中, 使用css有以下几种方式

  1. 嵌入式
  2. 内连式
  3. 导入式
  4. 外部css样式表

直接在html中使用style标签,这种写法叫做嵌入式css写法,比如

<html>
<head>
<title>嵌入式样式表</title>
<style type="text/css">
body
{
     background-image:url(nvshen.png);color:red;
}
</style>
</head>

<body>
i love her.
</body>
</html>

这样我就给当前body区定义了一个图片,并把文字颜色设置成了红色。

下面来看看内连式,内连式是在html属性中直接设置的, 比如, 我们知道, 任意的html属性标签都支持name class id style这四个属性, 我们就可以这样来设置内连css

<html>
<head>
<title>内连式样式表</title>
</head>

<body>
<b style="font-size:12px;color:blue;">
i love her.
</b>
</body>
</html>

这样, 就是一个内连式样式表

我们可以通过 @import url() 设置一个外部导入的css,比如

<html>
<head>
<title>导入式css样式表</title>
<style type="text/css">
@import url(css/css.css);
</style>
</head>

<body>
<h1>
i love her.
</h1>
</body>
</html>

这就是一个外部导入的css,除此之外, 还可以直接在.css文件里通过该方法进行在css中的css文件导入。

下面来看看外部样式表

<html>
<head>
<title>外部css样式表</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
<h1>
i love her.
</h1>
</body>
</html>

他们之间的优先级:

如果存在内连样式表, 首先应用内连样式表,如果不存在内连样式表, 按css文件次序加载并应用样式。

常见的几个属性

id class name stye 任意标签都可以有的属性

text-align:center 文本居中

border: 像数宽 solid red; 实线边框颜色

font-size: 设置字体大小 color: 设置字体颜色

background-image:url() 背景图

bgcolor:表格颜色

和html混写在html属性中为内连式

xxxx.css 外部样式

使用<style type="text/css"> 为嵌入式

属性名:属性值

border:1px;solid blue 定义一个1像数的蓝色实线边框