1. Поява CSS
Коли стало зрозуміло, що браузером користуються не стільки в наукових цілях, скільки в розважальних, у ньому одразу стало бракувати мультимедіа: відео, анімації, кольорів, звуків, прозорості тощо.
Спочатку хотіли додати більше тегів для цього, але потім зрозуміли, що нових тегів будуть сотні, і вони сильно ускладнять роботу з HTML-документами. Тому з'явилася ідея відокремити «розфарбування документа» (оформлення) від його вмісту. Так і з'явилися CSS.
Cascading Style Sheets (CSS) або каскадні таблиці стилів, є одним із ключових компонентів веб-розробки, які відповідають за візуальне оформлення вебсторінок.
CSS — це набір властивостей, кожна з яких має ім'я та значення. Веб-розробник задає ці властивості, а браузер відповідає за їхнє відображення. Такі властивості можна задати практично для будь-якого елемента. Приклад CSS-стилів:
| Ім'я CSS-властивості | Пояснення | Приклад |
|---|---|---|
color |
Колір | color: red |
height |
Висота | height: 400px |
width |
Ширина | width: 100% |
background-color |
Колір фону | background-color: rgb(ffccdd) |
border |
Рамка елемента | border: 1 px solid black |
font-size |
Розмір шрифту | font-size: 2em |
border-radius |
Радіус закруглених кутів | border-radius: 4px |
Таких CSS-параметрів (їх ще називають CSS-властивості) менше сотні. Але вони можуть хитро взаємодіяти один з одним і давати дуже несподівані ефекти. На JavaRush ви навчитеся з ними працювати і створювати справжню магію на сторінці 🦄.
2. Стилі елементів
Для кожного HTML-елемента можна вказати власний CSS-стиль за допомогою атрибута style.
Приклад:
<p style="color: blue; font-size: 16px;">Це приклад вбудованого стилю.</p>
Цей стиль повідомляє браузеру, що текст всередині параграфа потрібно намалювати синім кольором, а розмір шрифту має бути 16 пікселів у висоту.
Насправді тут два «стилі»:
color = bluefont-size = 16px
Просто вони вказані в один рядок і розділені крапкою з комою.
Також ви можете, наприклад, створити чорний прямокутник і написати у ньому текст білим кольором. Виглядати цей код буде так:
<div style="width:100%; height:200px;color:white;background-color:black">
Білий текст на чорному фоні
</div>
3. Кольори
Докладніше ми розберемо CSS-стилі, коли вивчимо HTML. Але щоб вам було цікавіше, давайте сьогодні розберемося з кольорами. За допомогою CSS можна задати будь-який колір, який може показати комп'ютер, і навіть більше.
Кольори в CSS є важливою частиною стилізації вебсторінок. Вони дозволяють створювати візуально привабливі та інтуїтивно зрозумілі інтерфейси.
1. Імена кольорів (Color Names)
CSS підтримує більше 140 стандартних імен кольорів. Це простий і зрозумілий спосіб задання кольору.
<div style="color: lightblue;"> Блакитний колір тексту</div>
Деякі поширені імена кольорів:
| # | CSS-ім'я кольору | Ім'я кольору українською |
|---|---|---|
| 1 | red | червоний |
| 2 | blue | синій |
| 3 | green | зелений |
| 4 | yellow | жовтий |
| 5 | black | чорний |
| 6 | white | білий |
| 7 | gray | сірий |
| 8 | silver | срібний |
| 9 | purple | пурпурний |
| 10 | navy | темно-синій |
| 11 | aqua | аква |
| 12 | lime | лаймовий |
| 13 | fuchsia | фуксія |
| 14 | teal | бірюзовий |
| 15 | olive | оливковий |
| 16 | maroon | бордовий |
| 17 | orange | помаранчевий |
| 18 | brown | коричневий |
| 19 | pink | рожевий |
| 20 | gold | золотий |
2. Шістнадцяткові значення (Hexadecimal Values)
Є ще один спосіб, за допомогою якого ви можете задати будь-який колір — шістнадцяткова кодування. Вона дозволяє задати 16 мільйонів відтінків — назви для такої кількості кольорів придумати неможливо, тому використовують цифри.
Шістнадцяткові значення задаються з використанням символу #, за яким слідують шість цифр або букв, що представляють інтенсивність червоного, зеленого та синього кольорів (RRGGBB).
<div style="color: #ff0000; background-color: #00ff00;"> Червоний на зеленому </div>
Ви будете часто зустрічати такий спосіб задання кольору в прикладах. Ми повернемося до цієї теми, коли будемо вивчати CSS докладніше.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ