gpt4 book ai didi

html - 如何将 CSS 文件链接到 Brackets 上的 html 页面

转载 作者:行者123 更新时间:2023-11-28 16:50:55 25 4
gpt4 key购买 nike

我在将我的 css 文件链接到我创建的其中一个页面时遇到问题。上传的图片显示了我尝试链接两者的尝试,以及 css 文件中的代码。 css 文件和 html 文件都在同一个文件夹中。但是,我的主页无法识别 css。任何帮助将不胜感激。谢谢。

linking the css

css file code

最佳答案

基本上样式可以使用以下三种方法之一链接到 HTML 文档:

  1. 内联样式
  2. 嵌入样式(内部样式)
  3. 外部风格

如何将 CSS 样式表连接到 HTML 页面

  1. 内联样式

    内联样式 是向 HTML 页面添加 CSS 样式的最简单方法。内联样式通过其 style 属性应用于文档中的特定标记而应用于 HTML 文档,

    例如,如果你想给

    添加样式,那么你可以这样编码:

    <p style="color: #0000FF">...<p>

    以上声明将确保段落文本为蓝色。此方法可应用于 < body > .... < /body > 中的任何 HTML 元素。 HTML 页面。

示例:

<html>
<body>
<p style="color: #0000FF">
Instyle Paragraph Testing
</p>
<p>
Another Paragraph Testing
</p>
</body>
</html>

请注意第一个 < p > 中包含的文本段落将为蓝色。您只能看到该段落受到影响,第二段默认为黑色。

内联样式的主要缺点是无法重用。考虑重组一个包含数百个页面的网站,其中内联样式散落在标记中。您必须进入每个页面并单独更改每个 CSS 属性,这是一项非常困难的任务。

  1. 嵌入样式(内部样式)

    嵌入式样式允许您通过将它们放置在开始和结束样式标签之间来实现任意数量的 CSS 样式。

    <style>......</style>

    您可以将样式标签放在 < head > ... < /head > 中部分,就在 < title > 之后HTML 页面的标记。

像这样

<head>
<style>
........
........
</style>
</head>

您应该从如下开始样式标签开始:<style type="text/css">

开头的 Style 标签应该总是使用属性“type”。对于 CSS 文档,该属性值为“text/css”。

示例:

<html>
<head>
<title>Embedded Style Sample</title>
<style type="text/css">
h1{
color: #0000FF;
}
h2{
color: #00CCFF;
}
</style>
</head>
<body>
<h1>Embedded Style testing</h1>
<h2>Next Line</h2>
</body>
</html>

  1. 外部样式

    外部样式表 是仅包含 CSS 样式格式的纯文本文件。外部文件的扩展名应以 .css 扩展名结尾 (例如 pagestyle.css)。此外部文件称为外部样式表。

    外部样式表(.css 文件)始终与 HTML 文件分开。您可以使用 标签将这个外部文件(.css 文件)链接到您的 HTML 文档文件。您可以将此 < 链接 > 标记放在 < head > 中部分,并在 < title > 之后HTML 文件的元素。

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

例如,您的 HTML 文件放在一个文件夹中假设您的文件夹名称是 WebDesign 并且您的 CSS 文件也放在该文件夹中,即您的 html 文件中的 WebDesign 文件夹CSS 将直接这样链接

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

关于html - 如何将 CSS 文件链接到 Brackets 上的 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59017927/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com