Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
630 views
in Technique[技术] by (71.8m points)

html not linking css

I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.

This is the code(just a test):

<!DOCTYPE html>
<html lang = "eng">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <title>title</title>
        <meta name="description" content="">
        <meta name="keywords" content="">

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

    <body>
        <h1>test</h1>
    </body>
</html>

and CSS:

body {
    background-color:#CCCCCC;
}

h1 {
    color:#0000EE;
}

Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.

I'm using Linux and Aptana Studio.

I've searched a lot the last 2 hours and cannot find where the mistake is.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I invite you to read this article Absolute and Relative Paths

Then we pass to your code:

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

Should be :

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

Your styles.css should be in the same folder as your html file.

To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).

An other way to make your css working is to integrate it inside your page without separation:

Example:

 <style type='text/css'>

    body {
        background-color:#CCCCCC;
   }

    h1 {
        color:#0000EE;
    }
</style>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...