Коротко: PHP, HTML и CSS работают вместе, но на разных уровнях. PHP выполняется на сервере и генерирует HTML, который уходит в браузер; CSS приходит вместе с HTML и оформляет его. Точка соединения — файлы шаблонов: в них PHP «собирает» разметку, а CSS описывает вид этой разметки.
Кто где работает
| Технология | Где выполняется | Результат |
|---|---|---|
| PHP | на сервере | готовый HTML |
| HTML | в браузере (разметка) | структура страницы |
| CSS | в браузере | внешний вид |
| JavaScript | в браузере | поведение, интерактив |
Вкладки: разбор
- Браузер запрашивает адрес.
- Сервер выполняет PHP-код.
- PHP обращается к базе и собирает HTML.
- Готовый HTML отправляется в браузер.
- Браузер подгружает CSS и картинки и рисует страницу.
- JavaScript добавляет интерактив уже в браузере.
Поэтому в исходном коде страницы вы видите только результат PHP — сам PHP-код остаётся на сервере.
<?php $title = 'О компании'; ?>
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title><?php echo esc_html($title); ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title"><?php echo esc_html($title); ?></h1>
</body>
</html>Так выглядит типичная «точка соединения»: HTML-разметка с вставками PHP. В браузер уйдёт уже чистый HTML без PHP-тегов.
CSS подключают к сгенерированному HTML:
- тегом
<link>вhead— как обычно; - в WordPress — через
wp_enqueue_style(); - классы в разметке можно формировать и через PHP, но стили остаются в CSS-файле.
Правило: PHP не должен «рисовать» внешний вид, CSS не должен «решать логику».
- «Почему виден PHP-код?» — сервер не выполняет PHP (неверное расширение или настройки);
- «Почему стиль не применился?» — CSS не подключён или класс не совпадает;
- «Почему изменения не видны?» — меняли файл на сервере или кэш;
- «Почему в браузере нет моих переменных?» — PHP-переменные существуют только на сервере.
Практика: собрать страницу
- Подготовьте данные в PHP (запрос, массив).
- Соберите HTML-структуру.
- Выведите данные в разметку с экранированием.
- Подключите CSS-файл.
- Оформите элементы классами.
- Добавьте JS только там, где нужен интерактив.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Виден PHP-код | сервер не выполняет PHP | проверить настройки/расширение |
| Не применяется CSS | нет подключения/класса | проверить link и разметку |
| Стили «плывут» при обновлении | внешний вид задан в PHP | перенести в CSS |
Ошибка про $var |
переменная не определена | инициализировать и проверить |
Проверьте себя
Вопросы и ответы
Они существуют только на сервере: в браузер уходит уже готовый HTML, где вместо переменных — их значения.
Можно (тег link в шаблоне или блок со стилями прямо в HTML), но лучше подключать извне — через wp_enqueue_style() в WordPress или отдельным файлом.
Вывести класс в атрибут: class="card <?php echo $mod; ?>". Но сам стиль класса всё равно пишут в CSS.
Итоговые суммы — на сервере (PHP), потому что данные из браузера можно подделать. JS — только для мгновенного показа, с последующей проверкой на сервере.
Итоги
- PHP работает на сервере и генерирует HTML.
- HTML — структура, CSS — вид, JS — поведение.
- Точка соединения — шаблоны с вставками PHP.
- Чёткое разделение ответственности упрощает поддержку.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.