【html学习笔记9】-CSS

2023-08-22 本文已影响0人兔小小

什么是 CSS？

级联样式表（CSS）用于设置网页布局的格式。使用CSS，可以控制颜色，字体，文本大小，间距，元素如何定位和布局，使用什么图像或背景颜色，不同设备和屏幕尺寸的显示，等等。

提示：层叠一词意味着样式应用于父元素也将应用于父母。因此，如果您将正文文本的颜色设置为“蓝色”，则所有标题，段落和正文中的其他文本元素也将获得相同的颜色（除非您指定别的东西）！

使用CSS

可以通过 3 种方式将 CSS 添加到 HTML 文档中：

内联 - 通过使用 HTML 元素中的属性style
内部 - 通过使用部分中的元素<style><head>
外部 - 通过使用元素链接到外部 CSS 文件<link>

内联 CSS

内联 CSS 用于将唯一样式应用于单个 HTML 元素。内联 CSS 使用 HTML 元素的属性style，例如：

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

内部 CSS

内部 CSS 用于定义单个 HTML 页面的样式。内部 CSS 在 HTML 页面的部分中定义在元素中<head><style>。下面的示例设置所有元素的文本颜色（在该页面上）为蓝色，并将所有元素的文本颜色更改为红。此外，页面将以“粉蓝色”背景显示颜色：<h1><p>，有点像批处理。

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

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

</body>
</html>

外部 CSS

外部样式表用于定义许多 HTML 页的样式。若要使用外部样式表，要在每个 HTML 页的部分中添加指向该样式表的链接：<head>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

外部样式表可以在任何文本编辑器中编写。该文件不得包含任何 HTML 代码，并且必须使用 .css 扩展名保存。使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！以下是“styles.css”文件：

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS 文字颜色、字体和大小

一些常用的 CSS 属性。

CSS 属性定义要使用的文本颜色color
CSS 属性定义要使用的字体font-family
CSS 属性定义要使用的文本大小font-size

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

CSS 边框

CSS 属性定义边框在 HTML 元素周围border，可以为几乎所有 HTML 元素定义边框。

p {
  border: 2px solid powderblue;
}

CSS 填充

CSS 属性定义填充（空格）在文本和边框之间padding

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS 边距

CSS 属性定义边距（空格）在边界之外margin

p {
  border: 2px solid powderblue;
  margin: 50px;
}

链接到外部 CSS

可以使用完整 URL 或相对于当前网页的路径引用外部样式表。

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

也可以链接到位于当前网站的 html 文件夹中的样式表：

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

还可以链接到与当前页位于同一文件夹中的样式表：

<link rel="stylesheet" href="styles.css">