堆棧內存溢出
  簡體   English   中英

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

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

 原文  2014-06-22 00:00:47  0   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