Базові поняття синтаксису
Синтаксис дуже простий. Складається таких елементів:
→ об’єкт, який хочем змінити (наприклад, тег <p> чи увесь <body>)
→ що саме хочемо змінити: наприклад, колір чи розмір
→ значення, на яке ми хочемо змінити стиль: наприклад, зробити висоту картинки 500 пікселів, або зробити текст червоним
Наприклад, ми хочемо, щоб весь жирний текст нашого абзацу був синім. Отже, треба послатися на тег <b></b>, адже цим тегом позначено потрібний нам об’єкт. А його значенням — синій колір.
На мові CSS буд виглядати так:👉 Як це виглядає в коді?
Детально про те, як це працює
Кілька важливих нюансів
І так з будь-яким об’єктом: картинка, таблиця, весь абзац тексту, кнопка, посилання, заголовок. Як бачите, ми не пишемо повну назву тегу, не пишемо його зміст — просто помічаємо сам елемент. Ми детально це розберемо. Зараз задача в тому, щоб розібрати саме синтаксис мови.
Як писати селектори вибору елементів та їх властивості — розібрали. Тепер кілька важливих нюансів.
Перший нюанс.
У кінці властивості завжди ставимо «;». Це не критично, але якщо у одного селектора буде декілька властивостей, CSS може не зрозуміти, де закінчується одна властивість та починається друга. Адже всі властивості одного об’єкту пишуться в одних фігурних дужечках.
Другий нюанс.
Всі властивості та значення (тобто те, що вписуємо у дужки {…}) пишемо лише латиницею та лише з маленької літери.
Третій нюанс.
Тепер ви працюєте з декількома сторінками одночасно, як профі. Тому треба навчитись використовувати коментарі: це те, що можна вписувати в код, але браузер ніяк зчитувати текст не буде. Коментарі потрібні, щоб ви не заплутались у коді, якщо повернетесь до нього через певний час. Або якщо будете працювати над спільним сайтом у команді.
Пишуться коментарі так:
/* тут ваш коментар */
Ось як виглядає коментар в CSS
Завдання
1. Поверніться до вашого index.html
2. Виділіть якийсь текст тегом <b></b>
3. У CSS файлі змініть колір цього об’єкту на синій, як на зразку