The css file is correct, the css code is valid, but it does not work

I have a strange, annoying problem. I have a folder css/and index.htmlin the root. I upload css files to the header as follows:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>blabla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="keywords" />
    <meta name="description" content="desc" />

    <!-- style files -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>

but cssdoes not work: I see simple index.html. I am sure the css path is right; when I click "view source" and copy / paste the path to the css files, it shows the css files.

Also, when I copy css directly to index.html, it works. What could be the problem?

+3
source share
17 answers

Probably not used as text / css. Have you checked your server configuration?

+2

URL-, , . , :

  • () URL-, HTML-? .
  • () URL-, CSS ?

, , link.

+2

Firefox Firebug. ; , .

+1

, jensgram, , (css/...), , .

Firebug "net". , - URL.

+1

:
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
.. , , . , , .   , <!DOCTYPE>, ?  
, ...


, , , !

+1

:

  • , body {border:10px solid red !important;}, css html .
  • , , , / .
  • , ... href="css/reset.css?001"...
  • .
  • " ".

, !

+1

Firebug/Chrome Web Inspector , . , - CSS, , , HTTP 401. ( CHMOD, Unix, 0644 ).

+1

<link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen/>

  <link rel="stylesheet" type="text/css" href="~/css/reset.css" media="screen" />
+1

media. , , .

0

, . , ressources:

ERR_BLOCKED_BY_CLIENT

AdBlock.

0

URL , ? , - . , a/href= "/css/ reset.css"

0

, ,

0

enter image description here

.

.

index.html
-----------------

    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>blabla</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="keywords" content="keywords" />
        <meta name="description" content="desc" />

        <!-- style files -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
    </head>
    <body>
    <div id="reset">
        Reset Div
    </div>

    <div id="layout">
        Layout Div
    </div>

    <div id="global">
        global Div

    </div>

    </body>
    </html>

----------
reset.css
----------
#reset{
color:green;
}

----------
global.css
----------

#global{
    color:red;
}

-----------
layout.css
------------

#layout{
color:blue;
}

index.html.

enter image description here

0

, css. .

0

...

W3:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

/css/reset.css .

<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />

, , .

http://www.yourweb.com/css/reset.css -?

PHP, :

<?php echo realpath(dirname(__FILE__)); ?>

.

, jsfiddle, URL- css?

0

, , , , .

, , // , , .

, url // css.

xxx.xxx.xxx.xxx/path/to/css.css

,

//xxx.xxx.xxx.xxx/path/to/css.css

.

:

  • Wrong way, maybe you are missing something? Try the slash at the beginning or in the absolute path.
0
source

Source: https://habr.com/ru/post/1724133/


All Articles