链接CSS文件不起作用


Llinking a CSS file is not working

我在将样式表链接到包含在.php文件中的网站的html部分时遇到问题。

我不确定为什么样式表中的某些元素不起作用,例如,如果我将bodybackground-color设置为红色,它就会设置红色,但是,如果我在CSS文件中创建一个div.header元素,并尝试将其作为<div id='header'>添加到html文件中的元素中,它就不会起任何作用。

这可能是什么原因?下面是我的CSS文件和.php文件。

courses.css:

h1{
font:bolder;
}
h3{
font-color:red;
}
body{
background-color:white;
}
div.header{
position:fixed;
margin-top: 1ex;
margin-bottom: 1ex;
background-color: red;
}
div.Select_Course{
position:relative;
right:2ex;
top:4ex;
border:solid thin black;
padding: 5ex;
margin-bottom:3ex;
height:relative;
}

和我的.php文件

<meta charset="UTF-8">
<?php
    $mysqli = new mysqli('localhost', 'user', 'password','dbname');
    if ($mysqli->connect_errno) 
    {
        die('Database connection failed');
    }
    //$m->set_charset('utf8');
    $search_course = "
    SELECT title, summary, id
    FROM course
    WHERE title LIKE '%".$_POST['searchBar']."%'";
    $result = $mysqli->query($search_course) or die($mysqli->error);
    $search_result = $result->fetch_assoc();
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel='stylesheet' href='courses.css'>
    <div id='header'>
        <h1>Search Results</h1>
    </div>
</head>
<body>
    <?php while($search_result = $result->fetch_assoc()) { ?>
    <div id='Select_Course'>
        <form name="searchresults" method="post" action="selectedcourse.php">
            <h3><?= $search_result['title'] ?>    <input name="searchforcourse" type="submit" value="View Course" /></h3>
            <input name="Coursenamesearch" type="text" value="<?= $search_result['title'] ?>" hidden/>
        </form>
    <p><?= $search_result['summary'] ?></p>
    </div>
    <?php } ?>
</body>
</html>

div#头必须在<body>内,而不是在<head>内,该标记仅用于资源。

针对CSS中的问题。如果要通过id引用元素,则应使用#,而不是仅用于通过类名引用的.

不要在CSS文件中创建div.header元素,只需创建一个名为.header的元素。

例如:

CSS文件:

.header {
   background-color: #ffffff;
}

HTML文件:

<div class="header"></div>

头标签可能也可以

<head>
<meta charset="utf-8">
<link rel='stylesheet' href='courses.css'>
</head>
<header>
    <h1>Search Results</h1>
</header>

CSS

header h1 {
    background-color: #FFF;
}

或者只是

h1 {
    background-color: #FFF;
}