Style MySQL table with CSS

Заряжай свой CSS с PHP под капотом

Каскадные таблицы стилей — это язык презентационных таблиц стилей. В этом смысле он не обладает достаточной функциональностью, которую многие разработчики хотят удовлетворить своим инстинктам программиста. Сегодня мы поговорим о том, как перезарядить ваш CSS, добавив немного PHP.

Учебное пособие

• Программа : Apache, PHP
• Версия : н / д
• Сложность: Средняя
• Расчетное время завершения: 20 минут

Вступление

Использование CSS для включения веб-сайта является обязательным требованием в современном веб-сайте для не-Flash-сайтов — и на то есть веская причина. CSS мощный Это может сделать или сломать сайт (хотя обычно IE6 делает взлом). Даже несмотря на его полезность, дизайнеры и разработчики с момента своего появления более двенадцати лет назад с помощью Рекомендации уровня 1 CSS стремились к большему использованию языка. Сегодня мы рассмотрим некоторые способы сделать ваш CSS более насыщенным с помощью PHP .

Примечание: я не собираюсь спорить за или против концепции CSS-переменных и / или CSS-констант. Эта статья написана с предположением, что вы примете обоснованное решение, когда они будут представлены с тем, что он может сделать. В этой статье рассказывается, как их настраивать и использовать, но не рассматриваются полные противоречия.

Настройка вещей

Перед началом наддува мы должны убедиться, что у вас есть соответствующие требования для этого. Мы рассмотрим два способа заставить ваш CSS работать с PHP: один короткий и приятный, а другой более элегантный и менее заметный для пользователя. Оба они имеют одинаковые основные требования к серверу, на котором работает PHP. Более элегантная версия требует немного больше:

Настройка простого метода

Веб-браузеры не слишком требовательны к расширениям файлов при работе с тегом HTML-ссылки. Они разборчивы в данных заголовка, которые он получает для этого файла. Это означает, что вы можете связать файл * .php с соответствующими данными заголовка вместо файла * .css, и браузер будет интерпретировать результат так же, как стандартный CSS. Для этого добавьте заголовок PHP, который сообщает Apache для вывода файла в виде CSS:

Затем просто сделайте ссылку на файл PHP, как обычно:

Теперь, когда вы сделали это, вы можете — теоретически — перейти к следующему разделу учебника, касающемуся переменных и констант CSS, если хотите; однако любой, кто просматривает ваш источник, увидит, что у вас есть файл PHP, где должен быть файл CSS. Кроме того, то, что браузер правильно интерпретирует результат, не означает, что он обязательно будет выполнять другие действия, такие как кэширование файла в браузере. Чтобы это исправить, перейдем к чуть более элегантной версии.

Настройка элегантного метода

Apache поставляется с большим количеством трюков .htaccess. Это одна из них. Мы скажем Apache интерпретировать все CSS-файлы в определенной папке как PHP-файлы, и веб-браузер (и ваши пользователи), вообще говоря, не будут знать, что вы делаете это. Первое, что нужно сделать, это поместить данные заголовка в ваш файл CSS, как и в Simple Method:

Затем вместо сохранения файла CSS в виде файла * .php вы сохраняете его как файл * .css и помещаете его в папку для CSS (в нашем примере ~ / css /). Сделав это, создайте файл * .htaccess в этой папке и добавьте следующее:

 Приложение AddHandler / x-httpd-php .css 

Этот фрагмент говорит Apache интерпретировать все CSS-файлы в папке с файлом * .htaccess с помощью обработчика сценариев PHP. Если у вас нет возможности добавить это в одну папку или если это нужно для всего сервера, вы также можете добавить это в файл конфигурации сервера httpd.conf для Apache. Для этого вам нужно добавить предыдущий фрагмент прямо под группой объявлений AddType и AddHandler (например, с одного из моих серверов):

Просто помните, что если вы добавите это в файл конфигурации сервера httpd.conf, то к КАЖДОМУ файлу * .css на сервере теперь должен быть добавлен заголовок PHP для text / css. Вот почему я рекомендую добавить его через .htaccess

Запустите движок с переменными CSS

Мы провели тест на 100 лучших блогов для внешних CSS-файлов и общего размера. Средний топ-100 блогов использует 4 внешних CSS-файла (включая @imports) со средним общим размером файла 43,1 КБ (без сжатия). Количество внешних CSS-файлов варьировалось от 1 до 18. Общий размер CSS варьировался от 0,2К до колоссальных 307К. Обратите внимание, что этот анализ не включает внутренний CSS внутри (X) HTML-файлов. Он включает в себя вложенные CSS-файлы, вызываемые с помощью директив @import.

Это много CSS. Почему это? Часто это происходит потому, что CSS доставляется без сжатия и не оптимизируется. Более вероятным подозрением является раздувание CSS и плохо поддерживаемый код. Одним из популярных способов улучшить сопровождение кода является реализация CSS-переменных через PHP.

Это означает, что вместо того, чтобы иметь такой CSS-код (да, это привело бы к аберрации дизайна, но это хорошо иллюстрирует смысл):

Вы могли бы иметь CSS как это:

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

В приведенном выше примере мы использовали основные переменные для настройки монохромной цветовой схемы, которую затем можно использовать на всем сайте в других стилях. Эти переменные можно легко заменить на $ color01, $ color02, $ color03 и т. Д., Чтобы получить аналогичные эффекты. Часто дизайнеры и разработчики интерфейсных веб-сайтов спрашивают клиентов: «Эй, ты можешь сделать весь текст немного темнее?» или «Можете ли вы сделать весь текст чуть больше?» Хотя использование таких переменных не всегда будет лучшим решением, оно часто сокращает время обслуживания при использовании многих систем шаблонов и блогов (WordPress, Moveable Type, Expression Engine и т. Д.) Или корпоративных CMS (Drupal, Joomla, Bitrix и т. Д.). ).

Альтернативный метод хранения переменных состоит в том, чтобы хранить данные в ассоциированных массивах (это мой предпочтительный метод), который создает код, похожий на следующий:

Расчеты в CSS

После того, как вы настроили использование PHP с вашим CSS, вы можете сделать некоторые полезные вещи, такие как вычисления. Предположим, что вы хотите настроить систему, предоставив на экране группу DIV, каждый из которых имеет свой тип элемента внутри. Каждый тип элемента (т. Е. Img, p, blockquote и т. Д.) Имеет уникальную высоту и ширину, управляемые с помощью CSS, и вы хотите, чтобы величина поля была основана на этих значениях, например:

В этом сценарии вы хотите настроить стандартизированную сетку, которая содержит три различных типа элементов (img, p и blockquote), инкапсулированных в два разных контейнера (div и li). Каждый DIV должен иметь ширину 550px и высоту 250px, каждый LI должен иметь ширину 600px и высоту 300px, и каждый из типов элементов имеет различную высоту и ширину. Расположение элементов внутри должно быть в мертвой точке. Со временем высоты и ширины различных DIV / LI и элементов, вероятно, потребуется изменить. Вы можете вручную ввести величину поля для каждого из различных элементов и / или использовать дополнительную информацию о классе в контейнерах DIV, чтобы добавить соответствующее количество отступов, но это не так полезно для быстрых изменений, как те, которые нужны кому-то, кто прототипирование в браузере или кто имеет 200 из этих различных элементов, для которых они должны будут изменить данные.

Шаг 1 — Структура

Во-первых, мы настраиваем контент XHTML, который будем стилизовать следующим образом:

Источник

Use CSS Style in PHP

1. Use CSS in a PHP-Only File
2. Use CSS in a PHP+HTML File
3. Use Inline CSS in PHP echo Statements

This article will teach you three methods that’ll help you use CSS styles in PHP.

The first method is via a PHP-only file, and the second is to embed PHP in an HTML+CSS file. Then the third method will use inline CSS in PHP echo statements.

Use CSS in a PHP-Only File

A standard HTML file can embed CSS styles in the element or link to an external CSS file. By default, this CSS file will have the css extension, but it can also have the php extension.

This means you can write CSS code, save it as a PHP file and link it to your HTML. In this PHP file, you can do more than what you’ll do in a CSS file; you can write PHP code.

First, you can define a PHP code block with CSS property and values stored as variables. Then outside the PHP block, you can write normal CSS that’ll use the variables as values of CSS properties.

We’ve done that in the following; save it as 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: ;  color: ;  font-size: ;  font-family: ; > 

Save the following HTML, and ensure you’ve linked styles.php in the tag.

 html lang="en"> head>  meta charset="utf-8">  title>Webpage using CSS styles generated with PHPtitle>   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> 

Use CSS in a PHP+HTML File

HTML can use CSS via the tag or the tag, which can contain PHP in a dedicated PHP block. If the PHP code generates or manipulates HTML code, the linked CSS code can style the HTML.

For example, you can style the table using CSS if PHP pulls database records to make an HTML table. To show how to do this, create a database called my_website in MySQL.

Next, create a site_users table in my_website using the following queries.

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; 

Insert data into the site_users table.

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'); 

Now, in the following, we have HTML, PHP, and CSS. The CSS is in the element; the PHP is in a PHP block within the HTML.

The PHP creates an HTML table using records from the site_users table. When the PHP generates the table, the CSS will style it.

    /* 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  
  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 ""; // Print the table headers. echo ""; foreach ($table_header as $value) < echo ""; > echo ""; // Print the table rows foreach ($site_users as $row) < echo ""; foreach ($row as $value) < if (is_null($value)) < echo ""; > else < echo ""; > > echo ""; > echo "
" . $value . "
NULL
" . $value . "
"; ?>
  

Use Inline CSS in PHP echo Statements

PHP works well with HTML and has the echo statement that can send HTML with inline CSS to the web browser. This is useful when debugging or sending large chunks of HTML to the web browser.

The following shows you how to use inline CSS with PHP echo . We define the text and store three colors in the $colors_array .

Then we use foreach to loop through the $colors_array , and we set the array element as the value of the inline CSS. When you run the code, the text appears three times with different colors.

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

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.

Related Article — PHP CSS

Источник