Question

我已经看到本网站上讨论的以下问题，但没有一个建议的修复程序对我有用。我将粘贴所有文件和我的目录结构的文本。它只不过是从.html文件链接到外部样式表。结果应该是 - 当lounge.html运行时，应将lounge.css应用为样式表，以便指定的样式显示在elixer.html和directions.html中。但这些风格并没有出现。

我已经看到一些建议，表明这不能在计算机上本地运行，但可以在网络服务器上运行，但我无法想象这种情况。有任何想法吗？提前致谢。这是目录结构：

C:/HFHTMLCSS/chapter2/lounge/lounge.css

C:/HFHTMLCSS/chapter2/lounge/lounge.html

C:/HFHTMLCSS/chapter2/lounge/elixer.html

C:/HFHTMLCSS/chapter2/lounge/directions.html


When I run lounge.html, 

lounge.css:

h1, h2  {
    font-family: sans-serif;
    color: gray;
}

h1  {
    border-bottom: 1px solid black;
}

p  {
    color: maroon;
}

lounge.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>

        <link type="text.css" rel = "stylesheet" href="lounge.css">
  </head>
    <body>
    <h1>Welcome to the Head First Lounge</h1>
    <p>
    <img src="C:/HFHTMLCSS/chapter2/lounge/images/drinks.gif" alt="Drinks">
</p>
<p>    
       Join us any evening for refreshing <a href="C:/HFHTMLCSS/chapter2/lounge/elixir.html">elixers</a>
       conversation and maybe a game or two of 
       <em>Dance Dance Revolution</em>.
       Wireless access is always provided;  
       BYOWS (Bring your own web server).
    </p>
    <h2>Directions</h2>
    <p>
      You'll find us right in the center of downtown Webville.   
      If you need help finding us, check out our <a href="C:/HFHTMLCSS/chapter2/lounge/directions.html">detailed directions</a>.
      Come join us!
    </p>
  </body>
</html>

elixer.html:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <title>Head First Lounge Elixirs</title>
    <link type="text/css"  rel="stylesheet"  href=lounge.css">
  </head>
  <body>
    <h1>Our Elixirs</h1>

    <h2>Green Tea Cooler</h2>
    <p>
      <img src="images/green.jpg">
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>
    <h2>Raspberry Ice Concentration</h2>
    <p>
      <img src="images/lightblue.jpg">
      Combining raspberry juice with lemon grass,
      citrus peel and rosehips, this icy drink
      will make your mind feel clear and crisp.
    </p>
    <h2>Blueberry Bliss Elixir</h2>
    <p>
      <img src="images/blue.jpg">
      Blueberries and cherry essence mixed into a base
      of elderflower herb tea will put you in a relaxed
      state of bliss in no time.
    </p>
    <h2>Cranberry Antioxidant Blast</h2>
    <p>
      <img src="images/red.jpg">
      Wake up to the flavors of cranberry and hibiscus
      in this vitamin C rich elixir.
    </p>
    <p>
        <a href="beverages/lounge.html">Back to the Lounge</a>
    </p>

  </body>
</html>

directions.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Head First Lounge Directions</title>
    <link type="text/css"  rel="stylesheet" href="lounge.css">
  </head>
  <body>
    <h1>Directions</h1>
    <p>Take the 305 S exit to Webville - go 0.4 mi</p>
    <p>Continue on 305 - go 12 mi</p>
    <p>Turn right at Structure Ave N - go 0.6 mi</p>
    <p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
    <p>Turn right at Structure Ave N - go 0.7 mi</p>
    <p>Continue on Structure Ave S - go 0.2 mi</p>
    <p>Turn right at SW Presentation Way - go 0.0 mi</p>
  </body>
</html>

Answer 1

HTML不是你运行的东西。它是一种文档格式，大致可与文字处理器相媲美，您的Web浏览器可以渲染到布局。 HTML的语法要求使用URI（统一资源标识符）作为图像或样式表等各种元素的src属性，并且正确引用属性非常重要。 elixer.html只是在CSS文件名之前缺少双引号。

顺便说一句，这些链接和图像也必然会在真实的Web服务器上中断。你放在那里的是半Unix，半Windows语法，带有unixish正斜杠和Windows的驱动器号。那不行。只需将它们设为相对URI，如

<img src="images/drinks.gif" alt="Drinks">
<a href="elixir.html">

这样他们就可以像在本地服务器上一样在本地服务器上工作。

从.html文件链接到外部样式表？

1 个答案: