HTML CSS

17 Mar 2025 | 6 分钟阅读

引言

HTML 代表超文本标记语言。我们也称它为互联网的骨干。它是用于创建网页和应用程序的标记语言之一。HTML 最重要和最强大的功能之一是它的 CSS。我们可以借助 CSS 来设计我们的 HTML 页面。

什么是 CSS？

CSS 代表层叠样式表。它用于设计网页的布局。CSS 帮助开发人员节省大量工作。借助 CSS，我们可以控制要使用的背景图像或背景颜色、元素之间的间距、不同设备和屏幕尺寸的不同显示、颜色、字体、元素如何定位和布局，以及更多内容。

这里的“层叠”一词意味着如果我们对父元素应用某些样式，那么类似的样式将自动应用于子元素。

使用 CSS

我们可以通过 3 种方式将 CSS 属性应用于我们的 HTML 页面。这 3 种方式如下。

行内 CSS。
内部 CSS。
外部 CSS。

内联 CSS

我们可以通过在特定行中编写 CSS 代码来实现 CSS 属性。这可以通过行内 CSS 来完成。在行内 CSS 中，我们可以使用 style 属性来实现 CSS 属性。

示例

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head> <!-- Document Header Ends -->
<body>
  <h2 style="color:blue;">WELCOME TO JAVATPOINT</h2>
  <p style="color:red;">A red paragraph.</p>

 </body>
 </html>

输出

说明

上面的代码是行内 CSS 实现的一个例子。在代码中，我们通过 style 属性在标签内实现了一些 CSS 属性。

行内 CSS 的优点

使用行内 CSS 有一些优点。这些优点如下。

我们可以非常快速轻松地将 CSS 属性插入 HTML 页面。因此，这种方法对于测试网页和对网页执行快速修复操作非常有用。
就像外部 CSS 一样，不需要为 CSS 上传额外的文件。

行内 CSS 的缺点

使用行内 CSS 也有一些缺点。这些缺点如下。

在 HTML 代码中实现行内 CSS 会使我们的 HTML 结构非常混乱。如果我们对多个标签实现行内 CSS，加载页面可能需要很长时间，并使我们的网页变慢。

内部 CSS

内部 CSS 用于在单个 HTML 页面中实现 CSS 属性。我们可以在 HTML 页面的 head 标签内编写内部 CSS。我们必须在 <style> 标签内编写代码。

借助上述过程，我们可以将内部 CSS 实现到 HTML 代码中。

步骤 1: 首先，我们必须打开我们的 HTML 页面；然后，我们必须搜索 <head> 打开标签。

步骤 2: 我们必须在 <head> 标签内编写以下代码。

步骤 3: 我们必须在 <style> 标签内编写所需的 CSS 代码。例如如下。

body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}

步骤 4: 然后我们必须关闭 style 标签。

示例 2

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {background-color: powderblue;}
    h2 {color: blue;}
    p {color: red;}
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

输出

说明

在上面，我们在 style 标签内实现了 CSS 属性。在 style 标签内，我们通过定位标签名来为不同的元素定义了不同的样式。

内部 CSS 的优点

在我们的 HTML 代码中使用内部 CSS 有一些优点。这些优点如下。

1. 我们可以使用 ID 选择器或类选择器等选择器。类或 ID 选择器的实现如下。

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
 
#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

2. 在内部 CSS 中，我们不必上传额外文件。因为在内部 CSS 中，我们将所有代码都写在一个代码中。

内部 CSS 的缺点

在我们的 HTML 代码中使用内部 CSS 有一些缺点。这些缺点如下。

如果我们将 CSS 代码与我们的 HTML 代码一起添加，它会增加页面大小和网页的加载时间。

外部 CSS

借助外部 CSS，我们必须编写另一个文件，在那里我们必须使用任何文本编辑器编写 CSS 代码，然后我们必须借助语法将该文件链接到 HTML 代码。

这种方法是所有开发人员都遵循的更有效、更可靠的方法。当我们想要更改网页的设计时，我们只需要转到 .CSS 文件，然后根据我们的需要修改该文件。

借助以下步骤，我们可以将外部 CSS 实现到我们的 HTML 代码中。

步骤 1: 首先，我们必须创建一个文件，并使用任何文本编辑器将其命名为 .css 扩展名。例如如下。

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

步骤 2: 然后我们必须进入 HTML 文件中的 <head> 标签；然后，我们必须在 <title> 标签之后创建指向该 CSS 文件的引用路径。

示例 3

HTML 代码

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

CSS 代码

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

输出

说明

在上面的代码中，我们必须创建两个文件。一个用于 HTML，另一个用于 CSS。然后我们必须使用 <head> 标签内的 link 属性链接这些文件。

CSS 颜色、字体和大小

借助这些属性，我们可以为我们的网页设置颜色、字体和字体大小。这些是所有网页的常见属性。

示例

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
     color: blue;
     font-family: verdana;
     font-size: 300%;
    }
    p {
     color: red;
     font-family: courier;
     font-size: 160%;
    }
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

输出

说明

在上面的代码中，我们为我们的网页提供了一些字体系列、颜色和字体大小。

CSS 边框

借助此，我们可以在 HTML 元素周围设置边框。

示例

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
     color: blue;
     font-family: verdana;
     font-size: 300%;
    }
    p {
     color: red;
     font-family: courier;
     font-size: 160%;
     border: 2px solid powderblue;
    }
    
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

输出

CSS 内边距和外边距

借助内边距，我们可以定义文本和边框之间的空间。借助外边距，我们可以定义边框外部的空间。

示例

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
     color: blue;
     font-family: verdana;
     font-size: 300%;
    }
    p {
     color: red;
     font-family: courier;
     font-size: 160%;
     border: 2px solid powderblue;
     padding: 30px;
     margin: 50px;
    }
    
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

输出

下一个主题HTML 转 JPG

HTML CSS

引言

什么是 CSS？

使用 CSS

内联 CSS

内部 CSS

外部 CSS

CSS 颜色、字体和大小

CSS 边框

CSS 内边距和外边距

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML CSS

引言

什么是 CSS？

使用 CSS

内联 CSS

内部 CSS

外部 CSS

CSS 颜色、字体和大小

CSS 边框

CSS 内边距和外边距

相关帖子

如何创建 Discord 机器人

HTML5 签名板转图片

HTML 结构

HTML 创建器

HTML 转 TXT

HTML P 标签

HTML5 可用的 API

HTML 导航

哪个内联属性用于指定样式

如何在 HTML 中更改字体

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器