Погода в Сивомаскинском
Домой

Сисадмин

Девелопер

Мои программы

Как использовать CSS с PHP


Узнайте о различных способах добавления каскадных таблиц стилей (CSS) на ваш сайт с помощью PHP — с примерами кода.

На веб-сайтах, работающих на PHP, HTML-разметка, таблицы стилей CSS и скрипты JavaScript хранятся в PHP-файлах.

Любой код, не заключённый в тег PHP (то есть <?php ?>), не обязательно должен соответствовать синтаксису PHP и будет выведен как статический код в HTML-документе, который сервер генерирует в ответ на запрос браузера.

С другой стороны, код, заключённый в тег PHP, должен соответствовать синтаксису языка PHP и будет динамически выводиться в HTML-файл, загружаемый браузером пользователя.

Другими словами, существует статический и динамический способы добавления CSS с помощью PHP. В оставшейся части статьи мы рассмотрим оба способа.

Статическое добавление CSS с помощью PHP

В PHP-файле вы можете встроить CSS-код в атрибут style="" HTML-элементов, встроить его в тег <style type="text/css"> в заголовке или сослаться на него в теге <link rel="stylesheet">, и он будет выведен без изменений.

Следующий PHP-файл:

<!doctype html>
<html>
    <head>
        <style>
            font-size: 42px;
        </style>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 style="color:blue">Hello, world!</h1>
    </body>
</html>


В результате получится следующая HTML-разметка:

<!doctype html>
<html>
    <head>
        <style>
            font-size: 42px;
        </style>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 style="color:blue">Hello, world!</h1>
    </body>
</html>

Однако это предполагает, что вы пишете только HTML/CSS-код и сохраняете его в PHP-файле. В этом случае вы не используете возможности PHP для динамического изменения вашего сайта.

Динамическое добавление CSS с помощью PHP

Теперь, когда мы рассмотрели статический способ, давайте уделим пару минут обсуждению того, как динамически добавлять CSS-код в HTML-документ.

Одна из многих возможностей PHP — объявление переменных и сохранение в них информации. Затем вы можете ссылаться на эти переменные в echo операторах PHP, чтобы вывести сохранённую в них информацию на экран.

Например, вы можете сохранить значения свойств CSS в переменных PHP, а затем вывести их в HTML-файлах на стороне клиента, чтобы динамически генерировать код CSS при каждом запросе.

 

<?php
$h1_size = "42px";
$h1_color = "blue";
$stylesheet_url = "style.css";
?>
<!doctype html>
<html>
    <head>
    <?php
    echo "<style>
            font-size: {$h1_size}};
        </style>"
        ?>
        <?php
        $url = "style.css";
        echo "<link rel='stylesheet' href='{$stylesheet_url}'>";
        ?>
    </head>
    <body>
        <h1 <?php echo "style='color:blue'" ?>>Hello, world!</h1>
    </body>
</html>
 
 
Результат будет таким же, как в статическом примере, приведённом несколькими абзацами выше. Но разница в том, что вы можете задавать значения в коде CSS и повторно использовать их в правилах CSS.
 

<!doctype html>
<html>
    <head>
        <style>
            font-size: 42px;
        </style>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 style="color:blue">Hello, world!</h1>
    </body>
</html>

 

Пока всё идёт хорошо.

Но настоящая сила PHP,  заключается в его функциях.

Например, вы можете создать функцию для генерации элемента <link> с атрибутами rel=”” и href=””, хранящимися в переменных:

 

<?php
    // Define the linkResource() function
    function linkResource($rel, $href) {
        echo "<link rel='{$rel}' href='{$href}'>";
    }
?>


С помощью этой функции вы можете подключить любую внешнюю таблицу стилей CSS или JS-скрипт.

Обратите внимание на использование одинарных и двойных кавычек. Если в вашем PHP-коде используются двойные кавычки, то для HTML-кода в операторах echo нужно использовать одинарные кавычки, и наоборот.

Если вы вызовете функцию linkResource() в любом месте вашего PHP-файла со следующими параметрами:

// Call the linkResource() function
<?php linkResource("stylesheet", "/css/style.css"); ?>


Он выведет элемент DOM <link> с указанными параметрами в HTML-файл на стороне клиента:

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


Вот как это выглядит на практике. Ниже приведён PHP-файл на стороне сервера:

 

<?php
    function linkResource($rel, $href) {
        echo "<link rel='{$rel}' href='{$href}'>";
    }
?>
<!doctype html>
<html>
    <head>
        <?php linkResource("stylesheet", "/css/normalize.css"); ?>
        <?php linkResource("stylesheet", "/css/style.css"); ?>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>


Ниже будет выведен HTML-файл на стороне клиента:

 

<!doctype html>
<html>
    <head>
        <link rel='stylesheet' href='/css/normalize.css'>
        <link rel='stylesheet' href='/css/style.css'>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

В заключение

 

Есть два способа добавить CSS-код с помощью PHP. Первый — статический, то есть жёсткое кодирование в PHP-файлах, а второй — динамический, то есть генерация с помощью функций и переменных.

Теперь, когда вы знаете, как использовать оба инструмента, вы можете выбрать тот, который подходит для вашего проекта, в зависимости от потребностей и требований.

 

Источник: https://makersaid.com

 



Вернуться назад