css 样式的导入的三种方式

html-css086

css 样式的导入的三种方式,第1张

1.行内样式 行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。

<p style="font-size: 12pxfont-weight:boldfont-style:italiccolor:red">By adding inline CSS styling to the></p>

2.嵌入样式 嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖。

<head>

<style type="text/css">

h1 {font-size:16px}

p {color:blue}

</style>

</head>

3.链接样式

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

样式的写法

例子如下

1 ) p {color:redfont-size:12pxfont-weight:bold}

2 ) h1 {color:bluefont-weight:bold}

h2 {color:bluefont-weight:bold}

h3 {color:bluefont-weight:bold}

3）假设，你在写完前面那条规则后，又想只把h3变成斜体，那可以再为h3写一条规则：

h1, h2, h3 {color:bluefont-weight:bold}

h3 {font-style:italic}

CSS三种引入方式：

1. 通过外部样式表（external style sheets）引入；

2. 通过内部样式表（internal style sheets）引入；

3. 通过内联样式（inline styles）引入。

拓展：

外部样式表是指将所有的样式定义保存在单独的文件中，然后通过HTML标签引入到文档中，这种方式能够让样式在多个文档中重复使用，减少代码量，方便管理。

内部样式表是指将样式定义保存在HTML文档中，通过标签将样式定义以内部样式表的形式嵌入到文档中。

内联样式是指将样式定义直接写在HTML元素的style属性中，这种方式最为灵活，但容易使代码冗余，影响维护。

一般来说只有3种：

1.最常用的，引入样式表，在样式表中编写样式，引入方式如下：

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

2.在Html头部用<style></style>包起来，在这里面编写样式：

<style type="text/css">

*{

padding: 0margin: 0

}

</style>

3.在标签里面直接编写行内样式。

<div style="color: #333"><div>

当然还有一种方式是用JS直接更改或者赋值给某个标签，但是其实是属于第三种的范围的