Verwenden Sie den CSS-Stil in PHP
- Verwenden Sie CSS in einer Nur-PHP-Datei
- Verwenden Sie CSS in einer PHP+HTML-Datei
-
Verwenden Sie Inline-CSS in PHP-
echo-Anweisungen
In diesem Artikel lernen Sie drei Methoden kennen, die Ihnen bei der Verwendung von CSS-Stilen in PHP helfen.
Die erste Methode ist über eine Nur-PHP-Datei und die zweite besteht darin, PHP in eine HTML+CSS-Datei einzubetten. Dann verwendet die dritte Methode Inline-CSS in PHP-echo-Anweisungen.
Verwenden Sie CSS in einer Nur-PHP-Datei
Eine Standard-HTML-Datei kann CSS-Stile in das <head>-Element einbetten oder auf eine externe CSS-Datei verlinken. Standardmäßig hat diese CSS-Datei die Erweiterung css, kann aber auch die Erweiterung php haben.
Das bedeutet, dass Sie CSS-Code schreiben, als PHP-Datei speichern und mit Ihrem HTML-Code verknüpfen können. In dieser PHP-Datei können Sie mehr tun als in einer CSS-Datei; Sie können PHP-Code schreiben.
Zunächst können Sie einen PHP-Codeblock mit CSS-Eigenschaft und Werten definieren, die als Variablen gespeichert sind. Dann können Sie außerhalb des PHP-Blocks normales CSS schreiben, das die Variablen als Werte von CSS-Eigenschaften verwendet.
Das haben wir im Folgenden getan; speichern Sie es als styles.php.
<?php
// The "header" is the most important part of
// this code. Without it, it will not work.
header("Content-type: text/css");
$font_family = 'Trebuchet MS, Verdana, Helvetica';
$font_size = '1.2em';
$background_color = '#000000';
$font_color = '#ffffff';
// Close the PHP code block.
?>
body {
background-color: <?php echo $background_color; ?>;
color: <?php echo $font_color; ?>;
font-size: <?php echo $font_size; ?>;
font-family: <?php echo $font_family; ?>;
}
Speichern Sie den folgenden HTML-Code und vergewissern Sie sich, dass Sie styles.php im <link>-Tag verlinkt haben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpage using CSS styles generated with PHP</title>
<!-- Link styles.php as the CSS file -->
<link rel="stylesheet" type="text/css" href="styles.php">
</head>
<body>
<h1>Hello, We styled this page using CSS in a PHP file!</h1>
<h1>How cool is that?</h1>
</body>
</html>
Ausgang:
Verwenden Sie CSS in einer PHP+HTML-Datei
HTML kann CSS über das Tag <style> oder das Tag <link> verwenden, das PHP in einem dedizierten PHP-Block enthalten kann. Wenn der PHP-Code HTML-Code generiert oder manipuliert, kann der verknüpfte CSS-Code den HTML-Code formatieren.
Beispielsweise können Sie die Tabelle mit CSS formatieren, wenn PHP Datenbankeinträge abruft, um eine HTML-Tabelle zu erstellen. Um zu zeigen, wie das geht, erstellen Sie in MySQL eine Datenbank namens my_website.
Erstellen Sie als Nächstes eine Tabelle site_users in my_website mit den folgenden Abfragen.
CREATE TABLE site_users (
user_id INT NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
PRIMARY KEY (user_id)) ENGINE = InnoDB;
Fügen Sie Daten in die Tabelle site_users ein.
INSERT INTO site_users (username, email) VALUES ('user_1', 'user_1@gmail.com');
INSERT INTO site_users (username, email) VALUES ('user_2', 'user_2@gmail.com');
INSERT INTO site_users (username, email) VALUES ('user_3', 'user_3@gmail.com');
Im Folgenden haben wir nun HTML, PHP und CSS. Das CSS befindet sich im Element <head>; das PHP befindet sich in einem PHP-Block innerhalb des HTML.
Das PHP erstellt eine HTML-Tabelle mit Datensätzen aus der Tabelle site_users. Wenn PHP die Tabelle generiert, gestaltet CSS sie.
<!doctype html>
<head>
<meta charset="utf-8">
<title>Style MySQL table with CSS</title>
<style>
/* This CSS will style the table generated by PHP. */
table { border-collapse: collapse; width: 30em; font-size: 1.2em; }
table, th, td { border: 2px solid #1a1a1a; }
td,th { padding: 0.5em; }
/* Create a striped table. */
tr:nth-child(even) { background-color: #f2f2f2; }
/* General body styles. */
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
</style>
</head>
<body>
<main>
<!--
We generated this table using PHP, and the CSS
style in the <style> tag will apply to it.
This is another way to use CSS in PHP.
-->
<?php
// Connect to the database. Change the connection
/// settings based on your environment.
$connect_to_mysql = new mysqli("localhost", "root", "", "my_website");
// Select the data from the site_users table.
$site_users = $connect_to_mysql->query("SELECT * FROM site_users")->fetch_all(MYSQLI_ASSOC);
// Get keys from the first row.
$table_header = array_keys(reset($site_users));
// Print the table.
echo "<table>";
// Print the table headers.
echo "<tr>";
foreach ($table_header as $value) {
echo "<th align='left'>" . $value . "</th>";
}
echo "</tr>";
// Print the table rows
foreach ($site_users as $row) {
echo "<tr>";
foreach ($row as $value) {
if (is_null($value)) {
echo "<td>NULL</td>";
} else {
echo "<td>" . $value . "</td>";
}
}
echo "</tr>";
}
echo "</table>";
?>
</main>
</body>
Ausgang:
Verwenden Sie Inline-CSS in PHP-echo-Anweisungen
PHP funktioniert gut mit HTML und hat die echo-Anweisung, die HTML mit Inline-CSS an den Webbrowser senden kann. Dies ist nützlich beim Debuggen oder beim Senden großer HTML-Blöcke an den Webbrowser.
Im Folgenden erfahren Sie, wie Sie Inline-CSS mit PHP echo verwenden. Wir definieren den Text und speichern drei Farben im $colors_array.
Dann durchlaufen wir mit foreach das $colors_array und setzen das Array-Element als Wert des Inline-CSS. Wenn Sie den Code ausführen, wird der Text dreimal mit unterschiedlichen Farben angezeigt.
<?php
$sample_text = "We generated this text color using inline CSS in PHP.";
$colors_array = ['red', 'green', 'blue'];
foreach ($colors_array as $value) {
// Use inline CSS with PHP echo.
echo "<p style='color: $value'>" . $sample_text . "</p>";
}
?>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn