如何添加 CSS


目录

    显示目录


当浏览器读取样式表时,它将根据以下格式格式化 HTML 文档 样式表中的信息。


插入 CSS 的三种方法

插入样式表的方法有以下三种:

  • 外部CSS

  • 内部CSS

  • 内联CSS


外部CSS

与 外部样式表,您可以通过更改来更改整个网站的外观 只有一个文件!

每个 HTML 页面必须包含对内部外部样式表文件的引用 head 部分内的 元素。

例子

外部样式在 HTML 页面的 <head> 部分的 元素内定义:

 <!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>

自己尝试一下 →

<!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”

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

注意:不要在属性值 (20) 和单位之间添加空格 (像素):

错误(空格):

margin-left: 20 px;

正确(无空格):

margin-left: 20px;


内部CSS

如果单个 HTML 页面具有独特的样式,则可以使用内部样式表。

内部样式在 <style> 元素内部定义,位于 head 内部 部分。

例子

内部样式在 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>

自己尝试一下 →

<!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 属性。

例子

内联样式在相关的“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>

自己尝试一下 →

<!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>


提示:内联样式失去了样式表的许多优点(通过混合 内容与演示)。谨慎使用此方法。


多种样式表

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

假设外部样式表的<h1>元素具有以下样式:

h1
{
  color: navy;
}

然后,假设内部样式表的<h1>元素也具有以下样式:

h1
{
  color: orange;   
}

例子

如果内部样式是在外部样式表链接之后定义的,则 <h1> 元素将是 “橙子”:

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

自己尝试一下→

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>


例子

但是,如果内部样式是在外部样式表链接之前定义的,则 <h1> 元素将是 “海军”:

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

自己尝试一下→

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>



级联顺序

当为 HTML 元素指定多个样式时,将使用哪种样式?

页面中的所有样式都会“级联”成新的“虚拟”样式 按以下规则排列,其中第一个具有最高优先级:

  1. 内联样式(HTML 元素内)

  2. 外部和内部样式表(在头部)

  3. 浏览器默认

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>