二维码
搜索 ×

CSS 如何添加

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 如何添加

当浏览器读取样式表时，它会根据样式表中的信息。

插入CSS的三种方法

插入样式表有三种方法：

  • 外部 CSS
  • 内部 CSS
  • 内联 CSS

外部 CSS

使用 外部样式表，您可以通过更改一个文件！

每个 HTML 页面都必须包含对外部样式表文件的引用 <link> 元素，位于 head 部分内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
外部样式在 HTML 页面的 <head> 部分内的 <link> 元素中定义：

<!DOCTYPE html>

<html>  
<head>  
<link rel="stylesheet" href="mystyle.css">  
</head>  
<body>

<h1>This is a heading</h1>  
<p>This is a paragraph.</p>

</body>  
</html>

外部样式表可以在任何文本编辑器中编写，并且必须使用 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标记。

以下是“mystyle.css”文件的外观：

mystyle.css 
1
2
3
4
body {  background-color: lightblue;}  

h1 {  color: navy;  
  margin-left: 20px;}

注意： 不要在属性margin-left: 20 px;和margin-left: 20px;之间添加空格 （px）。

内部 CSS

如果单个 HTML 页面具有唯一的样式，则可以使用内部样式表。

内部样式在头部内部的 <style> 元素内定义 部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
内部样式在 HTML 页面的 <head> 部分内的 `<style>`元素中定义：

<!DOCTYPE html>

<html>  
<head>  
<style>  
body {  background-color: linen;}

h1 {  color: maroon;  
  margin-left: 40px;}  
</style>  

</head>  
<body>

<h1>This is a heading</h1>  
<p>This is a paragraph.</p>

</body>  
</html>

内联 CSS

内联样式可用于为单个元素应用唯一样式。

若要使用内联样式，请将 style 属性添加到相关元素。这 style 属性可以包含任何 CSS 属性。

1
2
3
4
5
6
7
8
9
10
11
12
内联样式在相关样式的“style”属性中定义 元素：

<!DOCTYPE html>

<html>  
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>  
<p style="color:red;">This is a paragraph.</p>  

</body>  
</html>

**提示：**内联样式失去了样式表的许多优点（通过混合 内容与演示）。请谨慎使用此方法。

多个样式表

如果在不同的样式表中为同一选择器（元素）定义了某些属性， 将使用上次读取的样式表中的值。

假定**外部样式表**具有 `

` 元素的以下样式： 
1
h1 {  color: navy;}

然后，假定内部样式**表**还具有 `

` 元素的以下样式： 
1
h1 {  color: orange;   }

1
2
3
4
5
6
7
8
如果内部样式是在链接到外部样式表**之后**定义的，则 <h1> 元素将是 “橙色”：

<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
<style>  
h1 {  color: orange;}  
</style>  
</head>

1
2
3
4
5
6
7
8
但是，如果在链接到外部样式表之前定义了内部样式，则 <h1> 元素将是 “海军”：

<head>  
<style>  
h1 {  color: orange;}  
</style>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head>

级联顺序

当为 HTML 元素指定了多个样式时，将使用什么样式？

页面中的所有样式都将“级联”为新的“虚拟”样式 按以下规则工作表，其中第一名具有最高优先级：

  1. 内联样式（在 HTML 元素内）
  2. 外部和内部样式表（在头部部分）
  3. 浏览器默认

因此，内联样式具有最高优先级，并将覆盖外部和 内部样式和浏览器默认值。

推荐教程