本文讲解如何在纯 php 输出的 html 页面中正确引入外部 css 或内联样式，从而修改特定段落（如 class="pruducten"）的字体大小等外观属性，解决因标签嵌入位置错误或未输出导致样式失效的问题。
本文讲解如何在纯 php 输出的 html 页面中正确引入外部 css 或内联样式，从而修改特定段落（如 class="pruducten"）的字体大小等外观属性，解决因标签嵌入位置错误或未输出导致样式失效的问题。
在 PHP 文件中动态生成 HTML 内容时，不能直接在 标签内写 HTML 标签（如 ）而不做输出处理——PHP 解析器会将其视为语法错误或忽略，导致样式表无法加载。你原代码中 直接写在 PHP 代码块内，既未用 echo 输出，也未脱离 PHP 环境，因此浏览器根本收不到该标签。
✅ 正确做法有两类，推荐按场景选择：
✅ 方案一：用 echo 输出 标签（需确保输出位置在 HTML 中）
虽然你当前代码是纯 PHP 输出，但理想结构应包含完整的 HTML 文档结构。建议将 PHP 逻辑与 HTML 结构分离，例如：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Producten Overzicht</title>
<!-- ✅ 正确：link 标签位于 <head> 中，且独立于 PHP 块 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<?php
include('DatabaseConnector.php');
$database = new DatabaseConnector("test", "root", "");
$email = $database->selectValue("SELECT emailadres FROM klant WHERE naam = 'Bibiche' AND achternaam = 'Laarakkers'");
echo "<p> Het emailadres van Bibiche Laarakkers is $email.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>";
$productInfo = $database->selectSingleRow("SELECT gewicht, prijs, calorieen FROM product WHERE naam = 'Sausage Muffin with Egg Whites'");
echo "<h2>Sausage Muffin with Egg Whites</h2>";
echo "<p>Gewicht: {$productInfo['gewicht']}<br>Prijs: {$productInfo['prijs']}<br>Aantal Calorieën: {$productInfo['calorieen']}</p>";
$producten = $database->selectRows("SELECT naam, prijs FROM product");
foreach($producten as $product) {
// ✅ 使用 class="producten"（注意拼写修正：原 'pruducten' 应为 'producten'）
echo "<p class='producten'>Product: {$product['naam']}<br>Prijs: {$product['prijs']}</p>";
}
?>
</body>
</html>并在 mystyle.css 中定义：
.producten {
font-size: 1.2rem;
color: #2c3e50;
line-height: 1.6;
}⚠️ 注意：CSS 文件路径 mystyle.css 是相对于当前 HTML 页面 URL 的路径（非 PHP 文件路径）。确保该文件与 PHP 脚本在同一目录，或使用正确相对/绝对路径（如 ./css/mystyle.css）。
✅ 方案二：内联
若暂时无法重构 HTML 结构，可在 PHP 中 echo 一段
<?php
include('DatabaseConnector.php');
$database = new DatabaseConnector("test", "root", "");
// ✅ 内联样式：确保在任何 HTML 内容前输出（最好在 <head> 或 <body> 开始处）
echo '<style type="text/css">
.producten {
font-size: 1.4rem;
font-weight: 600;
margin: 0.5rem 0;
}
</style>';
?>
<!-- 后续 HTML + PHP 输出同上 -->? 关键注意事项
- 拼写修正：你代码中写的是 class='pruducten'（多了一个 u），应统一为 producten，否则 CSS 选择器不生效。
- 输出时机： 或
- 调试技巧：右键网页 →「查看页面源代码」，确认 或
- 最佳实践：避免全 PHP 输出 HTML。采用「HTML 为主、PHP 为辅」的混合写法（即 PHP 块只负责数据逻辑和 echo 动态内容），更易维护、SEO 友好，且天然支持标准 结构。
通过以上任一方式，你即可精准控制 .producten 段落的字体大小、颜色、间距等所有 CSS 属性，实现专业级样式定制。
