Написати HTML-розмітку документа — це лише невеличка частина щоденних завдань веб-розробника в конкретному проекті. Якщо ви знаєте, що таке HTML, які теги використовуються в розмітці і як правильно писати документ — переходьте до наступного етапу.
В статті розповімо, що таке CSS з нуля: як влаштований його код і як прописати стилі в дусі гуру-розробника, а не новачка після безкоштовних інтенсивів.
Що таке CSS
Кожен HTML-документ має базові параметри для тегів. Наприклад, розташування параграфів для тега [p], точки для ненумерованих списків і лінії розмітки для табличок. Але сьогодні цього недостатньо. Сайт має бути привабливим, красиво оформленим і наповнений графічними елементами.
Так виглядає чистий HTML блогу IT STEP
За візуальне оформлення Web-сторінки відповідає наступна сходинка - CSS. Перекладається як «Каскадні таблиці стилів».
CSS — це набір команд, які відповідають за візуалізацію сторінки. Наприклад, додати колір тексту, розмістити параграфи в рядок або колонками, змінити розмір картинок. Завдання CSS — прикрасити сайт, надати проекту завершеного вигляду.
А такий вигляд має блог у зв'язці розмітки веб-сторінки та продуманих стилів
Таблиці стилів не створюють нові елементи, а працюють із документом. Без HTML-документа, CSS не потрібен. Код не працюватиме, тому що візуалізувати нічого.
Якщо уявити веб-сторінку у вигляді будівництва будиночка, то HTML — це голі стіни, рами для вікон, неабиякий шифер і дверні прорізи. А CSS - це шпалери, колір фарби, скляні панелі, побілка стелі та купа декорацій.
HTML задає елементи на веб-сторінці. CSS їх прикрашає, розміщує і надає вигляду готового проекту. Ще є анімації, але про це в іншій статті.
Навіщо потрібні команди CSS
У 90-х поділу на HTML і CSS не було. Існували сайти у вигляді розміток — робота чистого ХТМЛ-документа.
Так виглядало створення сайтів 30 років тому на прикладі персонального блогу
На початку 2000-х з'явилися перші CSS-стилі, з якими сайт набув нового вигляду. Проста розмітка стала моветоном - спосіб розробки морально і технологічно застарів.
Так з'явилися перші веб-ресурси зі стилями. Дивитися сайт цікавіше і простіше, тому що кожен елемент відокремлений властивостями — розмір тексту, колір, шрифт, розміщення на сторінці.
Зараз без CSS-стилів неможливо створити повноцінний сайт. З розвитком CSS він став універсальним - його теги не потрібно налаштовувати під браузер. Також він кешується після першого запуску і запам'ятовується браузером. Це дає змогу швидше завантажувати сторінки.
І розробка на CSS зараз має кращий вигляд, ніж проекти минулої епохи.
Розглянемо, як працюють команди CSS на веб-сторінці.
HTML формує структуру веб-документів — текст, таблиці, гіперпосилання. CSS — створює розмітку, оформлення та стиль. Тому ХТМЛ завантажується першим, а стилі за ним. Нашому оку процес непомітний — браузер обробляє інформацію паралельно. Процес займає долі секунди.
Але якщо сайт погано зверстаний або є проблеми в DOM-дереві, то виникають помилки. Наприклад, браузер першим показує HTML-документ, а через 3-5 секунд після завантаження — стилі. Це погана верстка.
Хороша верстка — коли HTML і CSS працюють у синергії.
Як працює CSS
Почнемо від простого до складного: спочатку розглянемо підключення стилів, а потім - устрій коду. Варіантів, як підключати код CSS, мінімум три. Розглянемо варіанти за зростанням ефективності.
Усередині тега стилі CSS додають через атрибут Style.
Перший варіант: CSS-код можна написати всередині одного тега. Наприклад, прописати колір і розмір шрифту для конкретного параграфа. Цей спосіб називається інлайн (inline) записом.
Але у цього способу більше мінусів — його неможливо читати і використовувати повторно в інших місцях. Доводиться писати більше коду, наприклад, для кожного абзацу писати червоний колір. А чим більше коду — тим повільніше завантажується веб-сторінка. Тому прийом не використовують у сучасній веб-розробці.
У такому способі потрібно посилатися на той елемент, який стилізуємо. Приклад із параграфом — вказати тег [p].
Другий варіант — CSS-код вносять за допомогою тега style у документ. Він застосовується до будь-яких тегів HTML: від параграфів до елементів таблиці. Стилі підключають усередині розмітки head.
Виходить, що стилі знаходяться всередині документа HTML. Розмітка збільшується, читати важко.
Усередині проектної папки HTML-документ і папка зі стилями. Як створити файл CSS — створіть текстовий документ і замість розширення .txt встановіть .css.
Третій варіант: стилі веб-сторінок прописують в окремому документі. Для цього в папці проекту створюють текстовий документ із розширенням .css.
До HTML стилі підключають за допомогою тега link і властивості href всередині розмітки документа, щоб встановити розташування файлу. Це найпоширеніший спосіб. Якщо файл підключено до кількох сторінок сайту, то внести в них правки можна одночасно.
У тезі head підключають посилання на файли зі стилями. А в body йде розмітка документа. Замість додаткового CSS всередині HTML отримуємо акуратне посилання.
При цьому код CSS можна встановити як за файлом проекту, так і за посиланням з Інтернету. Так, наприклад, роблять для готових елементів: розробник переходить на сайт із шаблонами і копіює код розмітки. Якщо стилі його влаштовують — просто копіює і вставляє посилання зі стилями у свій документ.
Для готових елементів, наприклад, анімацій, стилі придумали сторонні розробники. Тому можна прикріпити посилання з Інтернету, а не створювати новий файл CSS під анімацію.
Краще — створювати окремий файл і прикріплювати його посиланням у розмітку. Ми не засмічуємо документ. А ще стилі так зручно читати і виправляти — зайва розмітка не заважає.
👉 Останній підхід використовують усі професійні розробники.
Правила побудови коду CSS
Синім виділили селектор, а зеленим — блок оголошення. Для зручності читання і роботи CSS усі оголошення пишуть всередині фігурних дужок.
CSS — це не мова програмування, а набір правил. Ці правила задають візуальне розташування і відображення елемента в документі.
Правила ділять на дві категорії:
-
Вибір селектора — це те, що потрібно стилізувати. Наприклад, потрібно додати колір параграфам тексту. Тоді використовуємо узагальнений для параграфів тег [p].
-
Блоки оголошень (Declare) — те, як будемо стилізувати селектор.
Щоб працювати з CSS, потрібно знати властивості мови. Наприклад, щоб змінити колір тексту, використовують властивість color, а розмір шрифту визначає властивість font-size.
Програмісти придумали правила для властивостей CSS. Вони майже не змінюються, тому хороший веб-розробник їх знає. Або може підглянути в довіднику.
👉 Посилання на довідник, де розписані всі властивості CSS.
Що таке селектори
Щоб змінити елемент у розмітці документа, його потрібно знайти і прив'язати до нього стилі. Стилі — це блоки оголошень, їх розглянули вище. А зараз потрібно знайти або створити свій селектор.
У прикладі Span — це селектор. А все, що в дужках — блок оголошення стилю: зміна кольору фону і загального кольору.
Селектор — це значок, що відповідає за конкретний елемент. Щось на кшталт ідентифікаційного коду елемента розмітки. Розрізняють селектори за тегом, класом та ідентифікатором.
Опис тегів, класів, ідентифікаторів та їхніх селекторів у коді.
👉 Селектор тега визначає всі елементи зазначеного типу на сторінці проекту. Наприклад, селектор для абзаців відповідає його назві в HTML — [р]. А для заголовків селектор — [h].
За тегом стилізуються всі елементи: наприклад, на сайті всі абзаци мають шрифт 10 пікселів і червоний колір. Додаємо тег і блоки оголошень. Стиль застосується до кожного абзацу.
👉 Селектори класу позначають конкретний елемент або частину сайту. Класам немає конкретних назв, тому розробник створює їх на свій смак. Але щоб було зручно читати іншим — є певні правила, на кшталт кодстайлу та методології. Про це пізніше.
Клас прописується всередині потрібного тега атрибутом Class. Якщо написати всередині одного абзацу клас — він належатиме тільки цьому абзацу. Якщо дописати в другий абзац — це загальний клас для двох абзаців. Їх паспорт.
Якщо до класу застосувати стиль — візуально оновиться тільки частина сайту або елемент із цим класом. Інших стиль не зачепить. Тому розробку на CSS роблять не за тегами, а за унікальними класами.
👉 Селектори-ідентифікатори (ID) — клас, який можна використовувати тільки для одного елемента. Ідентифікатор (ID) — це назва елемента сайту, яка не повинна повторюватися на сторінці. Наприклад, якщо біля списку написати id="style", то в іншому місці айді використовувати не можна. Тому ID майже не використовують, а стилізують класами (class).
Як працює код CSS
Усередині кожного елемента може бути кілька класів. А в кожного класу — свій набір стилів. Щоб не заплутатися — для CSS придумали кілька правил. Вони допомагають правильно стилізувати елемент і не заплутатися.
Селектор — це довідник для браузера. Він розповідає, до якого елемента CSS застосовує властивість. Наприклад, це заголовок, абзац або кубики на сайті.
У кожного селектора має бути властивість. На прикладі — властивість «Змінити колір фону», а значення — на який колір потрібно змінити.
Властивість не працює без значення — це те, як зміниться елемент, коли його прочитає браузер. Якщо в абзацу колір шрифту зміниться на червоний, то до нього застосували значення «червоний».
CSS — це каскадна таблиця стилів.
Загальне правило — до селектора можна скільки завгодно застосовувати властивостей і значень. Наприклад, до нашого параграфу [p] можна поставити три кольори шрифту, два варіанти розмірів, курсив, жирне накреслення, розмір у 20 пікселів і розташування по центру.
Якщо до одного елемента застосувати три однакові властивості, але різні значення — використовується нижнє. Так працює правило каскаду.
Але є нюанс — якщо використовувати три кольори або два варіанти шрифтів, то працювати буде один варіант. Це називається каскадністю стилів.
Наприклад, на початку документа написали — колір абзацу червоний. Десь у середині звернулися до абзацу з класом і написали — змінимо колір на зелений. Якщо перейти в документ і подивитися — весь текст буде червоним, а абзац — зеленим. Чому так?
Такий порядок у коді: правило, записане нижче, «перебиває» інші. Якщо зверху написати для всіх заголовків розмір у 18 пікселів, а нижче для тих самих заголовків написати 20 пікселів — браузер прочитає останнє. Усі заголовки будуть 20 пікселів.
Властивості параграфа нижче, але вони не працюють. Все тому, що селектор за класом «сильніший» за селектор тега.
У прикладі з кольором абзацу є ще одне правило — виняток за специфікою коду. Специфічність може бути однаковою у всіх, а може «важити» по-різному: припустимо, звернення до класу «перебиває» звернення за тегом. Як це працює.
Якщо для тега написати розмір у 18 пікселів, а для класу 20, то спрацює розмір у 20 пікселів за класом. Неважливо, де знаходиться клас: вище або нижче нового значення.
🟢 Клас важливіший за тег. Те ж саме з ідентифікатором — він важливіший за всі інші. Тому ідентифікатори використовують у крайніх ситуаціях: наприклад, коли стилів до одного елемента багато, а потрібні конкретні — «перебити інші». А елементу пишуть клас і унікальні значення стилів.
Так створюють стилі для веб-сторінки: розробник звертається до елементів документа і набирає властивості та значення, як листковий пиріг.
Для чого потрібні методології
Раніше ми розглядали, що для класу та ідентифікатора можна написати будь-яке слово. Але якщо писати будь-що — іншим розробникам буде незручно читати та змінювати код.
Тому в суспільстві програмістів придумали правила написання класів. Це називається стилем коду, або кодстайл.
У кожної компанії, групи розробників може бути свій кодстайл. Це як алфавіт і корпоративний сленг. Якщо працювати в одній компанії, а після стажуватися в іншій — кодстайл може відрізнятися, і до нього потрібно адаптуватися.
Здебільшого для позначення класу (селектора) використовують англійські слова, які максимально точно передають значення блоку.
Але назвати клас за асоціацією недостатньо. Усередині елемента може бути ще з десяток інших маленьких детальок. А всіх одним класом не назвеш.
Тому придумали список правил, на кшталт словника для веб-розробника. Це називається методологією.
На прикладі БЕМ-методології: верхній клас написали як menu, а наступні (вкладені) написали як menu__link і menu__item. Поділ рисками позначає основний клас і особливий елемент.
Широкого вживання набула так звана БЕМ-методологія (розшифровується як «Блок, Елемент, Модифікатор») — це підхід, заснований на простому правилі. Кожен елемент документа - самостійна частина. Якщо з документа не можна взяти блок і застосувати на цій самій сторінці, але в іншому місці — це не дуже добре для роботи веб-проекту.
Керуючи блоками, як конструктором, розробник може маневрувати в проекті: прибирати одні блоки, додавати інші та перевикористовувати в інших місцях. Це прискорює розробку. А документ легко читати.
Є інша методологія — атомарний CSS. У неї ті самі цілі, що й у БЕМ — скоротити код і зробити «людинозрозумілим».
В атомарній методології використовують не смислові блоки, а окремі правила. Наприклад, якщо ми хочемо змінити розмір тексту з 20 на 40 пікселів, колір на жовтий, то додаємо тегу з текстом класи font-size-40, і color-yellow. Фішка в тому, що властивості заздалегідь написали розробники. Програмісту залишилося вставити потрібний клас і властивість застосовується до блоку.
Атомарний підхід використовують на автономних проектах. Наприклад, на фреймворку Bootstrap використовують Atomic CSS, щоб верстати сторінки можна було без професійного розробника. Вставив клас — значення і властивість підтягнулася до класу.
Хто і як працює з CSS-кодом
На початку 2000-х жорсткого поділу на Front-end і Back-end не було. Програмістів на HTML і CSS називали «верстальниками». Слово залишили в ужитку, але розробники прокачалися далі. Тепер їх називають «веб-розробник» або «фронтенд-розробник».
А верстальники займаються рядовими завданнями. Наприклад, пишуть HTML-документи і прикріплюють стилі. В інші мови вони не сунуться.
На практиці знання HTML і CSS стануть у пригоді в будь-якому сайтобудуванні та застосунках: від складних платіжних систем до односторінкових сайтів. Основ CSS можна навчитися з нуля, не будучи технічним фахівцем. Наприклад, в IT STEP є курс «Front-end розробка», на якому можна розібратися з CSS, HTML. А ще перейти на третю сходинку і прокачатися в JavaScript.