HTML CSS

CSS 代表层叠样式表。 CSS 节省了大量工作。它可以同时控制多个网页的布局。

CSS = 样式和颜色

操纵文本颜色、盒子

什么是CSS？

层叠样式表 (CSS) 用于格式化网页的布局。使用 CSS，您可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示，以及多得多！ 提示：“级联”一词意味着应用于父元素的样式也将应用于父元素中的所有子元素。因此，如果将正文文本的颜色设置为“蓝色”，正文中的所有标题、段落和其他文本元素也将获得相同的颜色（除非您指定其他内容）！

使用CSS

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

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

添加 CSS 最常见的方法是将样式保留在外部 CSS 文件中。然而，在本教程中，我们将使用内联样式和内部样式，因为这样更容易演示，也更容易让您自己尝试。

内联CSS

内联 CSS 用于将独特的样式应用于单个 HTML 元素。内联 CSS 使用styleHTML 元素的属性。以下示例将<h1>元素的文本颜色设置为蓝色，将元素的文本颜色<p>设置为红色：

例子

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

内部CSS

内部 CSS 用于定义单个 HTML 页面的样式。内部 CSS 是在<head>HTML 页面的某个<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 页面的样式。要使用外部样式表，请在<head>每个 HTML 页面的部分中添加指向它的链接：

例子

<!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”文件如下所示：

“样式.css”：

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

提示：使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！

CSS 颜色、字体和大小

在这里，我们将演示一些常用的 CSS 属性。稍后您将了解更多有关它们的信息。 CSScolor属性定义要使用的文本颜色。 CSSfont-family属性定义要使用的字体。 CSSfont-size属性定义要使用的文本大小。

例子

CSS 颜色、字体系列和字体大小属性的使用：

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

CSSborder属性定义 HTML 元素周围的边框。 提示：您可以为几乎所有 HTML 元素定义边框。

例子

CSS边框属性的使用：

p {   border: 2px solid powderblue; }

CSS 填充

CSSpadding属性定义文本和边框之间的填充（空间）。

例子

CSS 边框和填充属性的使用：

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

CSS 边距

CSSmargin属性定义边框外的边距（空间）。

例子

CSS 边框和边距属性的使用：

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

链接到外部 CSS

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

例子

此示例使用完整的 URL 链接到样式表：

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

例子

此示例链接到位于当前网站上的 html 文件夹中的样式表：

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

例子

此示例链接到与当前页面位于同一文件夹中的样式表：

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

章节总结

使用 HTMLstyle属性进行内联样式设置
使用 HTML<style>元素定义内部 CSS
使用 HTML<link>元素引用外部 CSS 文件
使用 HTML<head>元素存储 <style> 和 <link> 元素
使用 CSScolor属性设置文本颜色
font-family使用文本字体的CSS属性
使用 CSSfont-size属性设置文本大小
使用 CSSborder属性作为边框
使用 CSSpadding属性设置边框内的空间
margin对边框外的空间使用 CSS属性