Rumah > Artikel > hujung hadapan web > html如何添加css样式？行内式、内嵌式、外联式的优缺点

html如何添加css样式？行内式、内嵌式、外联式的优缺点

青灯夜游asal: 2018-11-02 14:32:3116041semak imbas

html如何添加css样式？本篇文章就给大家介绍html添加css样式的三种方法：行内式、内嵌式、外联式的优缺点。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们要了解一下在html中添加css样式的三种方法是什么？它们分别为：

1、使用内联CSS来应用特定元素的规则，即：行内式

2、使用内部CSS并在93f0f5c25f18dab9d176bd4f6de5d30eHTML文档部分包含CSS规则，即：内嵌式

3、链接到包含所有CSS规则的外部文件（.css文件），即：外联式

下面我们就来具体的介绍一下行内式、内嵌式、外联式的实现与优缺点。

一、行内式

内联CSS要在特定的HTML标记内使用。c9ccee2e6ea535a969eb3f532ad9fe89属性用于设置特定HTML标记的样式。建议不要使用内联CSS，因为每个HTML标记都需要单独设置样式，如果您只使用内联CSS，管理网站可能会变得十分困难。但是，它在某些情况下很有用。例如，在您无法访问CSS文件或仅需要为单个元素应用样式的情况下。带有内联CSS的HTML页面示例如下所示：

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

内联CSS的优点：

1、如果您想测试和预览更改，则非常有用。

2、对快速修复很有用。

3、降低HTTP请求。

内联CSS的缺点：

内联CSS必须应用于每个元素。

二、内嵌式

内嵌css样式就是把css代码放在特定页面的93f0f5c25f18dab9d176bd4f6de5d30e部分中。类和ID可用于引用CSS代码，但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式，这样可以提高加载速度。在某些情况下使用内嵌样式表很有用，比如：向某人发送页面模板，因为一切都在一个页面中，所以看到预览要容易得多。内嵌CSS要放在c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927标签之间。内部样式表的一个示例：

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

内嵌CSS的优点：

1、样式表只影响一个页面。

2、内部样式表可以使用类和ID。

3、无需上传多个文件。HTML和CSS可以在同一个文件中。

内嵌CSS的缺点：

1、增加页面加载时间。

2、它只影响一个页面 - 如果要在多个文档上使用相同的CSS，则无用。

三、外联式

将CSS添加到html页面上最方便的方法可能就是将其链接到外部文件（.css文件）。这样，您对外部CSS文件所做的任何更改都将反映在你的网站上。外部CSS文件的引用要放在页面的93f0f5c25f18dab9d176bd4f6de5d30e部分中，例：

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

而style.css包含所有样式规则。例如：

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

外联CSS的优点：

1、HTML页面的大小更小，结构更清晰。

2、加载速度更快。

3、相同的.css文件可以在多个页面上使用。

外联CSS的缺点：

1、在加载外部CSS之前，页面可能无法正确呈现。

结论

以上就是本篇文的全部内容，给大家介绍了向html页面添加CSS的不同方法，并了解内联，外部和内部样式表之间的差异。大家可以更加需要使用不同的方法添加css样式，希望能对大家的学习有所帮助。【推荐视频学习：css教程】

Atas ialah kandungan terperinci html如何添加css样式？行内式、内嵌式、外联式的优缺点. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 样式表 http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：HTML怎么设置下划线？html文字加下划线方法Artikel seterusnya：深入理解css伪元素:before和:after（附示例）

Artikel berkaitan

Lihat lagi