Style CSS

17 Mar 2025 | 4 分钟阅读

引言

当我们试图不使用 HTML 来构建网页时，这是不可能的。借助 HTML，我们可以创建网页内容，包括标题、段落、图像、表格、表单和列表。但仅凭 HTML，我们无法创建美观且响应迅速的网页。为了实现这一点，我们必须借助 CSS。

什么是 CSS？

CSS 代表 Cascading Style Sheet（层叠样式表）。借助层叠样式表 (CSS)，我们可以为网页提供所有样式属性。借助 CSS，我们可以设置网页元素的背景颜色、字体大小、字体系列、颜色等属性。CSS 还决定了网页上所有内容的显示方式。

如何在 HTML 中添加 CSS

我们可以在 HTML 中以三种方式添加 CSS。它们如下。

内联 CSS
内部或嵌入式 CSS
外部 CSS

内联 CSS

在内联 CSS 中，我们必须在 body 标签的打开标签中提供所需的 CSS 属性。这被称为内联 CSS。我们可以通过 style 属性来完成此操作。

如何在 HTML 中添加内联 CSS

内联 CSS 也称为嵌入式样式表。要将 CSS 添加到 HTML 中，我们必须遵循以下语法。

内联 CSS 可以覆盖任何其他应用的 CSS，因为它靠近 HTML 标签。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 style="color: blue; font-size: 24px; text-align: center;">Welcome to JavaTpoint</h1>

  <p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333;">This is an example of inline CSS. Inline styles are defined directly within the HTML elements using the 'style' attribute.</p>

  <div style="background-color: #f2f2f2; padding: 10px;">
    <p style="font-style: italic; font-weight: bold; color: green;">This is another paragraph with different inline styles applied.</p>
  </div>
</body>
</html>

输出

说明

我们在上面的代码中使用了内联 CSS 来为 h1、p 和 div 元素应用不同的样式。

内部或嵌入式 CSS

当只有一个 HTML 文件，并且我们需要为其提供属性时，我们必须选择内部或嵌入式 CSS。在此 CSS 中，我们可以在 head 标签内编写 CSS 属性。我们可以借助 <style> 标签编写 CSS 属性。

如何在 HTML 中添加内部 CSS

我们可以在 head 标签内使用 <style> 标签编写内部 CSS。我们可以借助以下语法编写内部 CSS。

<head>
   
<style>
       
selector { CSS property: value; }
   
</style>
</head>

与内联 CSS 相比，使用内部 CSS 是更好的实践。借助内部 CSS，我们可以一次性为一组元素提供样式属性。我们可以分离 CSS 和 HTML，但必须将它们写在一个文档中。我们的所有代码都存在于一个文件中。

然而，当有多个 HTML 页面时，选择内部 CSS 并不是一个好习惯。在这种情况下，我们必须选择外部 CSS。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
   }
 
   h1 {
    color: #007bff;
    text-align: center;
   }
 
   p {
    margin-bottom: 20px;
   }
 
   .highlight {
    background-color: #ffc107;
    padding: 5px;
    border-radius: 5px;
   }
  </style>
</head>
<body>
  <h1>Welcome to javaTpoint</h1>
 <p>This is an example of an internal CSS. It allows you to apply styles directly to HTML elements within the <style> element.</p>
 <p>You can also use classes to style specific elements, like this <span class="highlight">highlighted text</span>.</p>
</body>
</html>

输出

外部 CSS

在外部 CSS 中，我们必须创建一个外部 CSS 文件并将其链接到 HTML 元素。我们必须将该 CSS 文件保存为 CSS 文件扩展名。我们必须借助 CSS 文件链接 CSS 文件。借助标签，它将被应用于整个 HTML 文件。

如何将外部 CSS 文件添加到 HTML

我们必须借助以下语法链接 CSS 文件。我们必须将语法写在 <head> 标签内。

语法

<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyles.css">

在编写示例之前，让我们先了解一些在编写代码时需要遵循的最佳实践。它们如下。

每当我们 G需要为 HTML 文件提供 CSS 属性时，都需要在外部文件中进行更改。这是最节省时间的方法。
这是最 SEO 友好的软件。搜索引擎很容易读取它。
它还允许浏览器为访问者加载 CSS 文件。

示例

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="container">
  <h1>Welcome to javaTpoint</h1>
  <p>This is a paragraph with some text. <a href="https://tpointtech.cn/">Click here for javaTpoint</a>.</p>
  <a href="https://tpointtech.cn/" class="button">Click for javaTpoint</a>
 </div>
</body>
</html>

CSS 代码

/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
 }
 
 h1 {
  color: #333;
 }
 
 p {
  color: #666;
  line-height: 1.6;
 }
 
 a {
  color: #007bff;
  text-decoration: none;
 }
 
 a:hover {
  text-decoration: underline;
 }
 
 .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
 }
 
 .button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
 }
 
 .button:hover {
  background-color: #0056b3;
 }

输出

下一个主题CSS 中的背景模糊

Style CSS

引言

什么是 CSS？

如何在 HTML 中添加 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

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

Style CSS

引言

什么是 CSS？

如何在 HTML 中添加 CSS

内联 CSS

内部或嵌入式 CSS

外部 CSS

相关帖子

如何在表单的 input 元素内使用 CSS 添加图标

CSS Watch Animation

CSS First Child

CSS 中如何定位图片

CSS font-style 属性

CSS 中如何居中按钮

CSS Corp Pvt Ltd

CSS 中如何添加背景图片

CSS Ellipsis

使用 CSS 隐藏滚动条

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器