Що таке CSS?

У перші дні Інтернету єдиний спосіб визначити, як відображається текст та інший вміст на веб-сайті, – це передати його кодом у HTML. Сьогодні майже всі веб-сайти замість цього покладаються на щось, що називається CSS або Cascading Style Sheets.


Якщо ви знайомі з програмою Microsoft Word або Google Docs, ви ознайомитесь із налаштуваннями стилю, схожими на CSS. По суті, CSS-файл визначає спосіб відображення кожної частини веб-сайту. Наприклад, якщо текст тіла відображається у Times New Roman розміром 12 за допомогою темно-синього кольору, ця інформація буде зберігатися у файлі CSS.

У WordPress кожна установка постачається з файлом “style.css” (всередині каталогу шаблонів), який містить усі правила форматування сторінки. Причина, що CSS називається “каскадною”, полягає в тому, що підрозділи також можуть мати власний файл CSS, кожен з яких “каскадує” на наступний.

CSS, HTML та PHP – це три формати, які повинні вивчити всі розробники WordPress, але якщо ви зацікавлені лише в управлінні сайтом WordPress, вам не доведеться турбуватися про вивчення CSS, оскільки ця інформація вже міститься на веб-сайті вашого веб-сайту тема.

Однак для розробників модифікація CSS – це простий спосіб швидко змінити спосіб відображення веб-сайту. Деякі теми навіть дозволяють вам змінювати файл CSS безпосередньо з панелі адміністрування, але для доступу до цієї функції ви повинні використовувати WordPress версії 4.7 або пізнішої версії..

Примітка. Якщо ви зміните свою тему, ви втратите будь-які зміни, внесені до файлів CSS.

CSS використовує два терміни, які називаються ідентифікаторами та класами, щоб вирішити, як слід застосовувати правила форматування. Це дозволяє вам точно налаштувати певні ділянки веб-сайту, щоб відображатись по-різному. WordPress вбудований з декількома названими класами та елементами.

Переваги CSS

Поділ змісту та презентації
Правила CSS можуть надаватися у файлі, який є окремим (вмісту) HTML. Якщо всі сторінки посилаються на цей централізований файл CSS, то зовнішній вигляд веб-сайту можна легше оновити. Наприклад, колір або розмір усіх заголовків першого рівня можна змінити, оновивши єдине правило CSS.

Менші розміри файлів веб-сторінки
Оскільки код, необхідний для стильового вмісту, можна видалити з окремих веб-сторінок, розмір кожного файлу веб-сторінки зменшується. Залежно від еталонів, розміри файлів можуть бути зменшені до 60%.

Покращена швидкість завантаження веб-сторінок
Після завантаження таблиці стилів, вона зазвичай зберігається на комп’ютері користувача (кешована). Для кожної наступної переглянутої веб-сторінки потрібно завантажувати лише HTML.

Підвищена швидкість візуалізації
Після завантаження веб-сторінки браузер обробляє базовий код для визначення способу відображення вмісту. Цей процес називається “надання”. На час, який потрібна візуалізація веб-сторінки, впливає складність коду, який отримує браузер. Використання CSS для управління макетом сторінки, як правило, спрощує структуру коду, що робить його “простішим” (швидшим) для веб-переглядача.

Поточне обслуговування
Оскільки для кожної веб-сторінки потрібно менше коду, зменшується і ймовірність помилок кодування, і час, необхідний для додавання вмісту на веб-сайт..

Зміна презентації для різних пристроїв
Специфікація CSS дозволяє використовувати різні правила залежно від пристрою, який використовується для доступу до Інтернету. Наприклад, для переформатування веб-сторінки для друку чи перегляду на мобільному телефоні може використовуватися інший набір правил.

Доступність
На веб-сторінки, які надають “гачки” для допоміжних технологій, таких як зчитувачі екрану, можна додати додаткові функції. (Зчитувач екрану – це програма, яка читає вголос інтерфейс до комп’ютерних програм та вмісту, заснованого на комп’ютері, включаючи веб-сторінки). Методи на основі CSS можуть використовуватися для забезпечення таких гачків, не впливаючи на досвід основних користувачів. Наприклад, додаткові заголовки можуть бути додані до вмісту, який “перегляне” лише читач екрану. Ці заголовки можуть використовуватися для надання додаткової контекстної інформації, яка в іншому випадку передається візуальним дизайном. Наприклад, перелік термінів глосарію біля підніжжя кожної статті глосарію передує невидимим заголовком: “Загальна історія глосарію”.

Макет без таблиць
До введення CSS макети з багато стовпців можна було створити лише за допомогою таблиць HTML. На жаль, на рівні коду таблиця, яка використовується для цілей компонування, не може бути диференційована від таблиці, яка використовується для розмітки табличних даних (наприклад, статистики). Це має найбільший вплив на технології, які “читають” вміст веб-сторінок на рівні коду, а не візуального. Якщо на значення вмісту впливає те, як він був розмічений, то використання таблиці для цілей компонування може потенційно змінити значення вмісту. Використовуючи CSS-позиціонування, макет може бути досягнутий без шкоди для змістової структури чи сенсу.

Настроювання
Вдосконалене програмне забезпечення для веб-перегляду дозволяє користувачеві легко змінювати задані автором стилі. Хоча, звичайно, вимагає, щоб користувач більше дізнався про механіку Інтернету, показ вмісту може бути повністю налаштований.

Оптимізація пошукових систем
Пошукові системи можуть присвоювати більше значення вмісту, знайденому спочатку в коді, та / або обмежити кількість вмісту, індексованого на кожній сторінці, певним числом символів. Якщо блоки вмісту розміщуються за допомогою CSS, порядок коду веб-сторінки не потрібно відповідати порядку відображення. Наприклад, код глобальних панелей навігації, розташований у верхній частині екрана, може надходити після вмісту в джерелі.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector