CSS 类型

2025年3月17日 | 阅读 3 分钟

CSS (层叠样式表) 描述了将在屏幕、纸张或其他媒介上显示的 HTML 元素。它节省了大量时间。它可以一次控制多个网页的布局。它设置了页面的字体大小、字体系列、颜色、背景颜色。

它允许我们在网站上添加效果或动画。我们使用CSS来显示动画，如按钮、效果、加载器或旋转器，以及动画背景。

如果不使用 CSS，网站将不会看起来吸引人。CSS有3种类型，如下所示。

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

1. 内部 CSS

内部 CSS 在 HTML 文档的 <head> 部分使用 <style> 标签。这种 CSS 样式是样式化单个页面的有效方法。对多个网页使用 CSS 样式会很耗时，因为我们需要在每个网页上放置样式。

我们可以通过以下步骤使用内部 CSS。

1. 首先，打开HTML页面并找到<head>。

2. 在<head>之后放置以下代码。

3. 在新行中添加 CSS 的规则。

示例

body {
    background-color: black;
}
h1 {
    color: white;
    padding: 50px;
}

4. 关闭 style 标签。

添加内部 CSS 后，完整的 HTML 文件如下所示。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: black;
}
h1 {
    color: red;
    padding: 50px;
} 
</style>
</head>
<body>
<h2>CSS types</h2>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>

我们也可以在样式表中(.*css 文件)使用选择器(类和 ID)。

示例

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

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

内部 CSS 的优点

内部 CSS 在我们将代码添加到 HTML 页面时，无法上传多个文件。

内部 CSS 的缺点

在HTML文档中添加代码会降低网页的页面大小和加载时间。

2. 外部 CSS

在外部 CSS中，我们将网页链接到外部.css文件。它是通过文本编辑器创建的。CSS 是样式化网站更有效的方法。通过编辑.css文件，我们可以一次性更改整个网站。

要使用外部 CSS，请遵循以下步骤。

1. 使用文本编辑器创建一个新的.css文件，并添加层叠样式表规则。

例如

.xleftcol {
   float: right;
   width: 35%;
   background:#608800;
}
.xmiddlecol {
   float: right;
   width: 35%;
   background:#eff3df;
}

2. 在 HTML 表的 <head> 部分的 <title> 标签之后，添加对外部 .css 文件的引用。

外部 CSS 的优点

我们的文件结构更清晰，大小更小。
我们在外部 CSS 中对多个网页使用相同的.css文件。

外部 CSS 的缺点

在外部 CSS 加载之前，页面无法正确显示。
在外部 CSS 中，上传大量 CSS 文件会增加网站的下载时间。

3. 行内 CSS

行内 CSS 用于样式化特定的HTML元素。在不使用选择器的情况下，将style属性添加到每个 HTML 标签。如果仅使用行内 CSS，则管理网站可能会很困难。但是，HTML 中的行内CSS在某些情况下很有用。我们无法访问CSS 文件或将样式应用于元素。

在下面的示例中，我们在 <p> 和 <h1> 标签中使用了行内 CSS。

<!DOCTYPE html>
<html>
<body style="background-color:white;">
<h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
<p style="color:blue;">It will be useful here.</p>
</body>
</html>

行内 CSS 的优点

我们可以在 HTML 页面上创建 CSS 规则。
在行内 CSS 中，我们无法创建和上传单独的文档。

行内 CSS 的缺点

行内 CSS，将CSS规则添加到 HTML 元素是耗时的并且会弄乱 HTML 结构。
它一次样式化多个元素，这会影响页面的大小和下载时间。

下一主题Css flex direction

CSS 类型

1. 内部 CSS

2. 外部 CSS

3. 行内 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 多选题

面试题

CSS 类型

1. 内部 CSS

2. 外部 CSS

3. 行内 CSS

相关帖子

CSS Spacing

CSS Colorful Text

CSS Shapes

CSS Background Image Full Screen

CSS Strikethrough

如何在 CSS 中编写内联悬停效果

CSS Text Replace

CSS Float Right

Circle Image CSS

Background Video CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器