堆栈内存溢出
  繁体   English   中英

使用TextEdit（MAC）到HTML5文件的外部StyleSheet（CSS）链接

[英]External StyleSheet (CSS) link to HTML5 file using TextEdit (MAC)

 原文  2014-06-22 00:00:47  4   3    html/ css/ macos/ stylesheet/ external

问题描述

我正在上第一堂网页设计课。 我们正在使用HTML5和CSS进行编码。 我创建了一个index.html文档，该文档在使用并编码颜色，字体和布局时可以正常工作。 现在的任务是删除该部分，并用指向CSS外部样式表的链接替换它。 执行完此操作后，我的HTML文件似乎并未真正链接到我的CSS文件。 衷心感谢您能提供的任何帮助。

我的HTML和CSS文件保存在计算机上的同一文件中。 文件名是index.html和javajam.css。 我正在使用MAC和TextEditor。

这是我的HTML代码： 

<!DOCTYPE html>
<html lang=“en”>
    <head>
        <title>JavaJam Coffee House Menu</title>
        <meta charset=“utf-8”>
        <link rel=“stylesheet” href=“javajam.css”>
    </head>
    <body id=“wrapper”>
        <h1>JavaJam Coffee House</h1>
        <br>
        <nav>
            <a href=file:///JavaJam/index.html>Home</a>
            &nbsp;
            <a href=file:///JavaJam/menu.html>Menu</a>
            &nbsp;
            <a href=http://music.html>Music</a>
            &nbsp;
            <a href=http://jobs.html>Jobs</a>
        </nav>
        <br>
        <dt>
            <strong>Just Java</strong>
        </dt>
        <dd>Regular house blend, decaffeinated coffee, or flavor of the day.</dd>
        <dd>Endless Cup $2.00</dd>
        <br>
        <dt>
            <strong>Cafe au Lait</strong>
        </dt>
        <dd>House blended coffee infused into a smooth, steamed milk.</dd>
        <dd>Single $2.00 &nbsp Double $3.00</dd>
        <br>
        <dt>
            <strong>Iced Cappuccino</strong>
        </dt>
        <dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.</dd>
        <dd>Single $4.75 &nbsp Double $5.75</dd>
        <br>
        <br>
        <footer>
            Copyright&copy 2013 JavaJam Coffee House
            <br>
            <a href=“mailto:kellie@mckinneyjackson.com”>kellie@mckinneyjackson.com</a>
        </footer>
    </body>
</html>

这是我的CSS代码： 

body {
    background-color: #ffffcc;
    color: #330000;
    font-family: Veranda, Arial, sans-serif;
}
h1 {
    background-color: #ccaa66;
    color: #000000;
    line-height: 200%;
    text-align: center;
}
.nav {
    text-align: center;
}
#footer {
    background-color: #ccaa66;
    color: #000000;
    font-size: small;
    font-style: italic;
    text-align: center;
}
#wrapper {
    width: 80%;
    margin-right: auto;
    margin-left: auto
}

3 个解决方案

解决方案1
 1 已采纳  2014-06-22 00:28:23

我也不是专家，但也许您的错是引号不正确。

“ en”->“ en” ....

这是正确的版本。 我已经对其进行了测试，并且可以正常工作。 我添加了type =“ text / css” media =“ screen”，但是我将没有它。 

<!DOCTYPE html>
 <html lang="en">
<head>
    <title>JavaJam Coffee House Menu</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="javajam.css">
</head>
<body id="wrapper">
    <h1>JavaJam Coffee House</h1>
    <br>
    <nav>
        <a href=file:///JavaJam/index.html>Home</a>
        &nbsp;
        <a href=file:///JavaJam/menu.html>Menu</a>
        &nbsp;
        <a href=http://music.html>Music</a>
        &nbsp;
        <a href=http://jobs.html>Jobs</a>
    </nav>
    <br>
    <dt>
        <strong>Just Java</strong>
    </dt>
    <dd>Regular house blend, decaffeinated coffee, or flavor of the day.</dd>
    <dd>Endless Cup $2.00</dd>
    <br>
    <dt>
        <strong>Cafe au Lait</strong>
    </dt>
    <dd>House blended coffee infused into a smooth, steamed milk.</dd>
    <dd>Single $2.00 &nbsp Double $3.00</dd>
    <br>
    <dt>
        <strong>Iced Cappuccino</strong>
    </dt>
    <dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.</dd>
    <dd>Single $4.75 &nbsp Double $5.75</dd>
    <br>
    <br>
    <footer>
        Copyright&copy 2013 JavaJam Coffee House
        <br>
        <a href="mailto:kellie@mckinneyjackson.com">kellie@mckinneyjackson.com</a>
    </footer>
</body>

解决方案2
 0  2014-06-22 01:39:34

你想要：

  1. 系统偏好设置>键盘>文本>取消选中“使用智能引号和破折号”

  2. TextEdit>首选项>取消选中“智能引号”和“智能破折号”

  3. TextEdit>编辑>替代>取消选中“智能引号”和“智能破折号”

这是小牛的问题。

解决方案3
 0  2016-02-15 03:55:13

首先，除非您指的是外部链接，否则文件路径中的任何地方都永远不会有FTP或HTTP。 确保将所有内容都放在项目名称的文件夹中，在这种情况下，假设是猴子，然后在该文件夹中，将CSS放在一个名为CSS的文件夹中，并在该标题的内部放入CSS main.css或styles.css，您的照片位于一个名为MEDIA的文件夹中，假设在您的MEDIA文件夹中，我们有2个文件，其中一个名为beaver.jpg的照片和一个名为DOG.JPG的照片。 接下来，使用INDEX.HTML，MENU.HTML，JOBS.HTML和MUSIC.HTML。 并将其放在名为Monkey的文件夹中，这是项目的主文件夹，请考虑将其视为ROOT文件夹。 您绝对不要使用c：/ jonsmith / desktop / monkey。 如果文件路径中有C：或ANY？：驱动器盘符，那么html将永远无法正常工作。 从那里开始，您的NAV文件将仅是：

“ href =” monkey / index.html“>主页”

“ href =” monkey / music.html“>音乐”

“ href = monkey / jobs.html>工作”

“ href =” monkey / menu.html“>菜单”

减去“”

文件路径中没有HTTP或FTP，它们不正确！

其次，强调将永远是<em>文字在这里</ em>

忘了开头<之后的空格，我必须这样做才能显示出来，否则您只会看到DOG

如果是P标记，H标记或其他任何标记，则所有标记都不会重要，它们始终是：

“ <P>这是一个句子标记”

“ <H1>这就是H1”

“ <EM>这是强调标记 ”

“ <HEAD>这是HEAD标记”

减去“”和每行开头<后的空格。 我必须以这种方式使它正确显示，否则您只会看到

这是H1标签

。

他们将始终被配对。

每当您有“ =”符号时，例如“ <a href =” monkey / index.html“>主页”甚至是“ <IMG SRC =” SOMETHING.JPG“>”那么，您总是使用“文字搜索”方法。

再次删除每行开头<的空格。

第三，假设您有一张图片，<IMG SRC =“ MONKEY / MEDIA / beaver.jpg” ALT =“海狸的照片”>始终为有残障人士使用ALT选项卡，数字1，数字2， “”规则将适用于第1条，第3条。请说您有图像，<IMG SRC =“ monkey / media / beaver.jpg”>，并且您还想添加dog.jpg。 然后的命令将是：

“ <img src =” monkey / media / beaver.jpg“>”

然后您将添加

“ <img src =” monkey / media / dog.jpg“>”

减去“”和每行开头<后的空格。

因为它们位于相同的文件夹和目录中，所以不需要../。 让我们说您想要音频轨道，并且它位于文件夹中的猴子/音频中，并且您拥有一个名为ROCKON.MP3的文件，那么您应该使用../命令。 ../MONKEY/AUDIO/ROCKON.MP3。 但是，如果位于媒体文件夹中，则您将使用MONKEY / MEDIA / ROCKON.MP3路径。

最后，使用一个名为“ brackets”的程序来编写HTML，因为它将帮助您自动关闭<>标记和其他命令，并且在DOUBT中时，请始终参考w3.org，这是您可以访问的网站获取有关HTML和CSS的帮助。 我建议您仔细查看一下，看看情况看起来如何。 并且出于上帝的爱，由于文件路径不正确，因此丢失了FTP和HTTP，这是问题的80％。 HTTP表示它是浏览器项目，表示链接位于外部，而不是位于Internet上的某个地方，而FTP是文件传输协议，表示您正在尝试链接到文件服务器上的文件。 如果您的文件是本地文件（例如计算机），则FTP和HTTP对您不利。 FTP和HTTP指的是外部世界，如果它是本地的，例如您的便携式计算机，则不需要FTP和HTTP。 现在，假设您是在google.com上引用某项内容，那么是的，您应该使用HTTP规则，即https://www.google.com/search?q=mouse&biw=1280&bih=884&source=lnms&tbm=isch&sa = X＆ved = 0ahUKEwjUlO6T7_jKAhWF5yYKHXQYBAYQ_AUIBigB＃imgrc = RCa64rFGKx9lnM％3A ，否则不要这样做 ，请始终使用monkey / media / beaver.jpg或您使用的任何路径。

需要更多建议，<link rel =” stylesheet” href =“ javajam.css”>会起作用，但是某些浏览器不会支持这种方法，而直接使用<link rel =” stylesheet” type =“ text / css” href =“ javajam.css”>更安全。

再次删除开头的空格<

希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 CSS 中链接外部样式表 外部CSS样式表链接失败 将外部CSS样式表链接到HTML 样式表链接失败HTML / CSS 使用jQuery将外部CSS样式表应用于动态添加的HTML内容 将外部 CSS 样式表与 Shopify 产品页面链接起来 嵌入式CSS在Mac上无法与TextEdit一起使用 如何使用shell脚本将html中的外部CSS文件链接替换为CSS文件的内容？ 外部 Css 样式表未链接到我的 HTML 是否有使用HTML5的用例？ <link rel> 样式表和下一个的属性组合？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM