如何在 PHP 文件中通过 CSS 自定义段落样式-php教程-PHP中文网

如何在 PHP 文件中通过 CSS 自定义段落样式

本文讲解如何在纯 php 输出的 html 页面中正确引入外部 css 或内联样式，从而修改特定段落（如 class="pruducten"）的字体大小等外观属性，解决因标签嵌入位置错误或未输出导致样式失效的问题。

本文讲解如何在纯 php 输出的 html 页面中正确引入外部 css 或内联样式，从而修改特定段落（如 class="pruducten"）的字体大小等外观属性，解决因标签嵌入位置错误或未输出导致样式失效的问题。

在 PHP 文件中动态生成 HTML 内容时，不能直接在标签内写 HTML 标签（如）而不做输出处理——PHP 解析器会将其视为语法错误或忽略，导致样式表无法加载。你原代码中直接写在 PHP 代码块内，既未用 echo 输出，也未脱离 PHP 环境，因此浏览器根本收不到该标签。

✅ 正确做法有两类，推荐按场景选择：

✅ 方案一：用 echo 输出标签（需确保输出位置在 HTML 中）

虽然你当前代码是纯 PHP 输出，但理想结构应包含完整的 HTML 文档结构。建议将 PHP 逻辑与 HTML 结构分离，例如：



  <meta charset="UTF-8"><title>Producten Overzicht</title><!-- ✅ 正确：link 标签位于 <head> 中，且独立于 PHP 块 --><link rel="stylesheet" type="text/css" href="mystyle.css"><?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>";

  $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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="overflowclass">CSS工具箱(专业版)</a>
													<p class="overflowclass">全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>";

  $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>";
  }
?>

并在 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> 或  开始处）
  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 友好，且天然支持标准结构。