【CSS学习笔记3】-插入方法

2023-09-19 本文已影响0人兔小小

插入 CSS 的三种方法

有三种插入样式表的方法：

外部 CSS
内部 CSS
内联 CSS

外部 CSS

带有一个外部样式表，您可以通过更改来更改整个网站的外观只需一个文件！

每个 HTML 页都必须包含对内部外部样式表文件的引用 <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”文件的外观（不要在属性值(20)和单位(px)之间添加空格）：margin-left: 20 px是错误的;

body {
  background-color: lightblue;
}

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

内部 CSS

内部样式在 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 属性可以包含任何 CSS 属性。

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

但是，如果在指向外部样式表的链接之前定义了内部样式，则 <h1> 元素将是 “深蓝”：

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

级联顺序

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

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

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

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