HTML5页面CSS样式未生效问题求助

我正在制作一个用于学习的简易网站，目标是全程采用HTML5格式，尽可能多地使用新语义标签。但编写的CSS中设置的字体等样式未在页面上生效，CSS未作用于HTML页面，不清楚问题所在，以下是我的HTML和CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
</head>
<body>
    <header>
        <span>Dasmoto's Arts & Crafts</span>
        <img src="./resources/images/pattern.jpeg" alt="">
    </header>
</body>
</html>

header {
    position: relative;
}

header span {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: khaki;
}

header img {
    position: absolute;
    width: 100%;
    height: 150px;
}

问题原因及解决方法 #

核心问题：CSS未与HTML建立关联

你的代码仅编写了CSS规则，但没有将其引入到HTML文件中，浏览器无法读取并应用这些样式，导致样式不生效。可以通过以下两种方式解决：

1. 内部样式表（嵌入HTML）
   在HTML的<head>标签内添加<style>标签，将CSS代码放入其中，同时优化布局问题，修改后的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
    <style>
        header {
            position: relative;
            height: 150px; /* 避免header因内部绝对定位元素失去高度 */
        }

        header span {
            position: absolute;
            font-family: Arial, Helvetica, sans-serif;
            color: khaki;
            z-index: 1; /* 让文字显示在图片上方 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 让文字居中 */
            font-size: 2rem; /* 可选：调整文字大小 */
        }

        header img {
            position: absolute;
            width: 100%;
            height: 150px;
        }
    </style>
</head>
<body>
    <header>
        <span>Dasmoto's Arts & Crafts</span>
        <img src="./resources/images/pattern.jpeg" alt="">
    </header>
</body>
</html>

2. 外部样式表（独立文件）

• 创建一个名为styles.css的文件，将所有CSS代码复制到该文件中；
• 在HTML的<head>标签内添加链接标签，引入外部CSS文件：

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

注意：href的值要根据CSS文件的实际位置调整，如果CSS文件和HTML文件在同一目录，使用上述路径即可；如果CSS文件在子文件夹（如css文件夹）中，路径改为./css/styles.css。

额外布局优化

原代码中的绝对定位会导致两个问题：

• <header>元素因内部元素均为绝对定位，会失去高度，添加height: 150px;可解决此问题；
• 图片会覆盖文字，给<span>添加z-index: 1;可让文字显示在图片上方，同时通过top: 50%; left: 50%; transform: translate(-50%, -50%);实现文字居中。

内容的提问来源于stack exchange，提问作者thlisenby