Веб-сайти виглядали б нудно без CSS, оскільки ця мова стилю відповідає за стиль, розмір, колір і позиціонування тексту на веб-сторінці.
Що таке CSS?
Каскадні таблиці стилів, скорочено CSS, — це мова, яка описує, як елементи HTML мають відображатися на екрані чи папері. CSS був створений World Wide Web Consortium (W3C) у 1996 році.
Елементи HTML не були розроблені для того, щоб мати теги, які могли б допомогти форматувати веб-сторінку, і від розробників вимагалося лише написати розмітку для сторінки. Введення таких тегів, як , коли було запущено HTML 3.2, створило нові проблеми для розробників.
Оскільки веб-сторінки мають кольоровий фон, різні шрифти та кілька стилів, переписування коду стало дорогим і болісним. Школи W3C запровадили CSS для вирішення цих проблем, і він продовжував розвиватися протягом багатьох років.
Чому CSS?
#1. CSS є ефективним
CSS позбавляє нас від болю, пов’язаного з додаванням тегів, таких як шрифт, вирівнювання елементів, рамки, колір, стиль фону та розмір на кожній веб-сторінці.
#2. Економити час
Ви можете легко змінити зовнішній вигляд усього веб-сайту, змінивши зовнішній файл CSS.
#3. Сумісність кількох пристроїв
Сучасні користувачі Інтернету заходять на сайти за допомогою гаджетів із різними розмірами екранів, таких як ПК, планшети та смартфони. CSS дозволяє легко створювати веб-сторінки, які реагують на розміри екрана.
#4. Прості в обслуговуванні програми
Сучасні веб-додатки постійно розвиваються. CSS дозволяє легко змінювати окремі компоненти або навіть весь веб-сайт без зміни кодової бази.
Як CSS використовується з HTML для створення веб-сайтів?
HTML — це стандартна мова розмітки, яка використовується для створення веб-сторінок. З іншого боку, CSS описує, як відображаються веб-сторінки (створені за допомогою HTML). Веб-сторінка, створена за допомогою HTML і CSS, ідеально матиме HTML-файл із текстом, посиланнями на зображення та тегами HTML.
Цей файл HTML може мати окремий файл CSS, пов’язаний із ним за допомогою тегу посилання, або використовувати внутрішні чи вбудовані стилі CSS. Файл HTML може мати заголовок, наприклад
, і абзац, позначений
. Ви можете використовувати CSS, щоб наказати браузеру відображати весь вміст абзацу жирним шрифтом або навіть зробити вміст заголовка 50 пікселів і зеленого кольору.
У наступному розділі ми продемонструємо, як працюють HTML і CSS.
Типи CSS
#1. Зовнішній CSS
Щоб класифікувати CSS як зовнішній, має бути файл HTML і окремий файл CSS із розширенням .css. Наприклад, style.css. Файл CSS пов’язується з файлом/документом HTML за допомогою тегу посилання.
Приклад зовнішнього файлу CSS:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Файл CSS можна пов’язати з таким HTML-документом:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Тег link пов’язує зовнішню таблицю стилів із документом HTML, тоді як атрибут href визначає розташування зовнішньої таблиці стилів.
Остаточна веб-сторінка відобразиться таким чином:
Зовнішній CSS є найбільш рекомендованим підходом, оскільки він полегшує створення багаторазових компонентів і внесення універсальних змін до кодової бази.
#2. Внутрішній CSS
Внутрішній CSS ідеально підходить, якщо у вас є один HTML-документ, який потрібно унікально стилізувати. Набір правил стилю записаний у документі HTML у розділі head.
Це приклад внутрішнього CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Відтворена веб-сторінка виглядатиме так:
Внутрішній CSS у більшості випадків не ідеальний, оскільки він робить код у документі HTML настільки великим, що впливає на швидкість завантаження.
#3. Вбудований CSS
Вбудований CSS містить стиль CSS у тілі. Наприклад, ви можете стилізувати абзац, заголовок або навіть div за допомогою вбудованого CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Відтворений документ виглядатиме так:
Вбудований CSS не ідеальний, якщо ви хочете масштабувати свою веб-програму, оскільки додавання властивості CSS до кожного тегу HTML вимагає часу.
Перегляньте деякі з найкращих онлайн-курсів і книг, щоб опанувати CSS.
Створюйте адаптивні веб-сайти за допомогою HTML і CSS
Цей курс по створенню адаптивних реальних веб-сайтів навчає, як створювати адаптивні веб-сайти за допомогою HTML5 і CSS3. Вам не потрібні будь-які попередні знання з веб-розробки, щоб вивчити цей курс, який вивчає такі концепції, як модель коробки, вирішення конфліктів селекторів, схеми позиціонування та успадкування.
Це також ідеальний курс, якщо ви хочете навчитися проводити мозковий штурм, планувати, малювати, кодувати, тестувати та оптимізувати професійний веб-сайт.
Розширений CSS і Sass
Розширений курс CSS і Sass познайомить вас із тим, як CSS працює за лаштунками, досліджуючи такі теми, як каскад, специфічність і успадкування.
Курс містить багато сучасних методів CSS для створення потужних, адаптивних веб-сторінок. Курс знайомить із Saas і як його використовувати в проектах під час розробки CSS, глобальних змінних і керування медіа-запитами.
Це також ідеальний курс, якщо ви хочете вивчити анімацію CSS, оскільки він торкається @keyframes, анімації та переходу.
Вивчіть CSS
Вивчайте CSS від Codecademy навчає, як використовувати CSS для візуального перетворення HTML на привабливі веб-сайти. Курс поділено на 8 уроків і містить 6 проектів для перевірки вашого розуміння.
Основні речі, які ви дізнаєтесь із цього курсу, це те, як додавати стилі до елементів HTML, з’єднувати файли HTML і CSS і створювати унікальні макети для веб-сторінок.
Створіть свою першу веб-сторінку за допомогою HTML і CSS
Курс «Створіть свою першу веб-сторінку» навчає, як використовувати HTML5 і CSS3 для створення адаптивних веб-сайтів. Цей безкоштовний курс складається з 4 модулів і потребує приблизно 10 годин для проходження. Щоб вивчити цей курс, вам не потрібні попередні знання з програмування.
Основи CSS
Основи CSS створено W3Cx. Деякі з речей, які ви дізнаєтеся на цьому курсі: найкращі практики веб-дизайну, основні селектори CSS і як вибрати властивості CSS. Курс розділений на 5 модулів; вам потрібно близько 5 тижнів, щоб завершити його, якщо навчаєтеся 5-7 годин на тиждень.
Знайомство з CSS3
Цей курс CSS3 представляє каскадні таблиці стилів. Курс, підготовлений Мічиганським університетом, навчає, як писати правила CSS, розвивати хороші звички програмування та тестувати код. Вам потрібно близько 12 годин, щоб пройти цей курс, після закінчення якого ви отримаєте сертифікат, яким можна поділитися.
Знайомство з HTML і CSS
Цей вступний курс з HTML і CSS навчає, як створювати стильні та добре структуровані веб-сайти за допомогою HTML і CSS. Курс навчає учнів, як створювати веб-сайти за допомогою деревоподібної структури, а потім стилізувати їх за допомогою CSS.
Цей безкоштовний курс підходить для початківців і використовує модель самостійного навчання. Вам потрібно близько 3 тижнів, щоб пройти цей курс, який викладають експерти галузі.
Підручник CSS
CSS Tutorial – це безкоштовний курс на W3schools. Курс розділений на розділи для легкого розуміння. Кожен розділ містить приклади та вправи. На платформі є онлайн, де ви можете експериментувати з різними концепціями за допомогою кнопки «Спробуйте самі».
CSS: повне керівництво
Книга CSS: The Definitive Guide стане в нагоді, якщо ви хочете вивчити основи CSS, від селекторів і специфіки до каскаду. У книзі також детально описано flexbox, позиціонування та трюки float.
Цю книгу також варто замовити, якщо ви хочете навчитися використовувати CSS для створення 2D і 3D трансформацій, переходів і анімації. Повний посібник доступний як у версіях для Kindle, так і в м’якій палітурці.
Адаптивний веб-дизайн із HTML5 і CSS
У цій книзі про адаптивний веб-дизайн із використанням HTML5 і CSS розповідається, як створювати адаптивні веб-сайти з перспективою майбутнього за допомогою HTML5 і CSS.
Вивчивши прийоми з цієї книги, створені вами веб-сайти працюватимуть бездоганно на комп’ютерах, планшетах і мобільних телефонах. Книга написана у легкому для сприйняття форматі та доступна в м’якій обкладинці та у форматах Kindle.
HTML і CSS: дизайн і створення веб-сайтів
Ця книга про HTML і CSS ідеально підходить для всіх, незалежно від того, чи ви любителі, студенти чи професіонали.
Письменник передає зміст цієї книги за допомогою інформаційної графіки та фотографій стилю життя, щоб полегшити сприйняття різних концепцій. Ресурс представлено в унікальній структурі, що дозволяє легко переглядати всі розділи.
Сучасний CSS
Ця книга про сучасний CSS: оволодійте ключовими концепціями CSS для сучасної веб-розробки навчає CSS через приклади коду, діаграми та знімки екрана.
У перших розділах книги представлено кольори, селектори, коробкові моделі, комбінатори та особливості. Потім у книзі представлені стилі тексту, позиціонування, градієнти, рамки, Z-індекс і контексти стекування. Ви також вивчаєте такі складні теми, як переходи, анімація, перетворення, flexbox і сітки CSS.
Заключні слова
Роль CSS на сучасних веб-сайтах важко підкреслити. Крім того, що веб-сторінки роблять візуально привабливими, CSS полегшує навігацію різними веб-сторінками.
Вивчення CSS може бути легким, якщо ви користуєтеся наведеними вище ресурсами. Деякі з цих курсів безкоштовні, а інші платні.
Далі ви можете переглянути шпаргалки CSS для розробників і дизайнерів.