Що таке CSS - що таке каскадні таблиці стилів SISTRIX
У веб-дизайні CSS пропонує можливість зберігати певні стилістичні компоненти, які використовуються в документах HTML, централізовано у файлі та використовувати їх для всіх документів HTML.
Що таке CSS?
CSS розшифровується як Каскадні таблиці стилів і це можливість для документів HTML відокремлювати вміст сторінки від інструкцій з проектування окремих елементів, таких як заголовки, цитати тощо.
Ви можете створити файл CSS для домену та інтегрувати його як зовнішній ресурс на всіх підсторінках. Це може заощадити багато часу, коли існують фіксовані вказівки щодо елементів мого дизайну, які не змінюються між документами.
Каскадна частина стає зрозумілою при роботі з різними класами. Наприклад, ви можете вказати у файлі CSS, що всі заголовки H2 (батьківський елемент) відображаються у розмірі шрифту 46, а потім вставити підклас заголовків H2 (дочірній елемент), що містить текст жиру друкує, якщо визначено певний клас (наприклад, "жирний").
У документі мені не потрібно повторювати інструкцію щодо розміру шрифту для підкласу, оскільки це успадковується від інструкції вищого рівня (переливається).
З цією інструкцією кожен отримує
-Елементуйте шрифт розміром 42 і лише заголовки з
також друкуються жирним шрифтом.
Чому існують каскадні таблиці стилів?
Можливість відокремити дизайн від змісту документа приносить помітні переваги в швидкості. Окремі документи HTML коротші, оскільки інструкції з проектування передаються на аутсорсинг.
Крім того, оператору веб-сайту не потрібно забезпечувати наявність усіх необхідних інструкцій щодо проектування для кожного документа. Це може надзвичайно зменшити адміністративні зусилля, особливо завдяки великій кількості документів.
Я також можу сказати браузерам, як довго можна використовувати файл CSS (і як довго його можна кешувати). Це означає, що браузер не повинен завантажувати файл щоразу, що сприяє збільшенню часу завантаження.
Як я можу передати інформацію CSS в документ?
Існує кілька способів вбудування CSS в документ HTML. Найпоширеніші - це посилання на зовнішній файл CSS та пряме вбудовування в документ HTML.
Зовнішній файл CSS
Зазвичай найпростіше узагальнити всю інформацію про стиль у файлі CSS і вказати на це посилання в частині HTML-документа:
Це повідомляє браузеру, що файл "my-stylesheet.css" повинен бути завантажений, щоб правильно відображати вміст HTML-документа.
Вбудований CSS
Ви також можете додати частину моєї таблиці стилів безпосередньо, у розділі документа HTML.
Ви використовуєте для цього один
Тепер браузер буде знати, що всі елементи з class = "img-responsive" повинні використовувати вищевказані вказівки щодо стилю.
Використання CSS для оптимізації пошукової системи
Можливість визначити інформацію про стиль один раз і впровадити її на всіх підсторінках, природно, також приносить переваги для оптимізації пошукової системи.
Інструкції у файлі CSS можна використовувати для точного визначення способу відображення документа на робочому столі та/або мобільному браузері. Тож ви можете зробити одне Чуйний дизайн і всі підсторінки можуть цим скористатися, так що для настільних ПК та мобільних пристроїв не потрібні дві версії.
Крім того, протягом багатьох років CSS використовувався для збільшення швидкості завантаження багатьох веб-сайтів. Це стало необхідним, коли для коректного відображення веб-сайту була потрібна велика кількість файлів.
Велика кількість запитів у старому HTTP-стандарті, HTTP/1.1, означало, що час завантаження було продовжено виключно з тієї причини, що браузеру було дозволено створювати лише максимальну кількість з'єднань.
З новим стандартом HTTP/2 це обмеження вже не застосовується.
CSS та HTTP/1.1
З HTTP/1.1 більшість браузерів, простіше кажучи, дозволяють лише 6 одночасних з'єднань на хост. Крім того, зв’язки розриваються після передачі ресурсу. Це може призвести до збільшення часу завантаження завдяки лише затримці (що особливо помітно при мобільних з'єднаннях).
Ви також можете завантажити графічні елементи, які використовуються на веб-сайті як великий спрайт зображення, а потім відображати лише ті частини зображення, які містять необхідну графіку, через CSS.
CSS та HTTP/2
З новим стандартом HTTP 2.0 обмеження максимальної кількості з'єднань послаблено, і з'єднання також можна використовувати для більш ніж одного ресурсу. Як результат, затримка встановлення з'єднання відіграє набагато меншу роль у швидкості сторінки.
Висновок на каскадних таблицях стилів
CSS є невід’ємною частиною веб-дизайну, і цілком логічно, як SEO для вирішення можливостей, які пропонують каскадні таблиці стилів.
Особливо, коли йдеться про оптимізацію PageSpeed, сьогодні час першої змістовної фарби все ще можна скоротити за допомогою вбудованого CSS.