Комп'ютерна Академія IT STEP - повноцінна IT-освіта для дорослих і дітей. Ми навчаємо з 1999 року. Авторські методики, викладачі-практики, 100% практичних занять.

Ви використовуєте застарілий браузер!

Ваш браузер Internet Explorer, на жаль, є застарілим. Ця версія браузеру не підтримує багато сучасних технологій, тому деякі функції сайту можуть працювати з помилками. Рекомендуємо переглядати сайт за допомогою актуальних версій браузерів Google Chrome, Safari, Mozilla Firefox, Opera, Microsoft Edge

ШАГ логотип

Що таке CSS і для чого потрібен веб-розробнику

ITSTEP Academy

20.03.2023

6812 переглядів

Написати 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.



Автор:

ITSTEP Academy

Редакція ITSTEP Academy

Дизайн

3D візуалізатор - професія майбутнього

Сучасний світ став візуальним, а тривимірна візуалізація – невід'ємною частиною нашої епохи. Пам'ятаєте останній раз, коли ви бачили реалістичне зображення будівлі, інтер'єру або продукту до його створення? Це була 3D візуалізація, і вона грає велику роль у нашому житті. 3D візуалізатор – це той, хто створює цю магію.

Сучасний світ став візуальним, а тривимірна візуалізація – невід'ємною частиною нашої епохи. Пам'ятаєте останній раз, коли ви бачили реалістичне зображення будівлі, інтер'єру або продукту до його створення? Це була 3D візуалізація, і вона грає велику роль у нашому житті. 3D візуалізатор – це той, хто створює цю магію.   Мистецтво 3D візуалізації проникає у багато сфер нашого життя. Від архітектури і дизайну інтер'єру до реклами та промислового проектування – скрізь можна знайти сліди роботи 3D візуалізаторів. Ми розглянемо, які завда

ШАГ логотип

Soft-skills

Як знайти роботу junior спеціалісту без досвіду роботи

Пошук роботи для фахівців у сфері інформаційних технологій завжди залишається актуальним питанням. Безліч новачків, які мають певні знання та навички в IT, стикаються із завданням: як розпочати кар'єру, не маючи досвіду роботи. Ринок IT надає безліч можливостей для джунів, які прагнуть застосувати знання на практиці.

Пошук роботи для фахівців у сфері інформаційних технологій завжди залишається актуальним питанням. Безліч новачків, які мають певні знання та навички в IT, стикаються із завданням: як розпочати кар'єру, не маючи досвіду роботи. Ринок IT надає безліч можливостей для джунів, які прагнуть застосувати знання на практиці.   Однак, незважаючи на потребу компаній у нових спеціалістах, пошук роботи для junior'ів без досвіду може стати певним викликом при конкуренції з досвідченішими кандидатами. Також, не завжди просто зрозуміти, які компетенції

ШАГ логотип

Soft-skills

10 кращих технік тайм-менеджменту для айтішника

Ефективне управління часом є однією з ключових навичок, необхідних айтішникам для успішної роботи в швидкому та динамічному світі інформаційних технологій. В індустрії, де терміни жорсткі, проекти багатозадачні, а вимоги до продуктивності високі, уміння ефективно планувати, організовувати та контролювати свій час стає невід'ємною частиною успіху.

Ефективне управління часом є однією з ключових навичок, необхідних айтішникам для успішної роботи в швидкому та динамічному світі інформаційних технологій. В індустрії, де терміни жорсткі, проекти багатозадачні, а вимоги до продуктивності високі, уміння ефективно планувати, організовувати та контролювати свій час стає невід'ємною частиною успіху.   У нашій статті ми представимо вам 10 найкращих технік тайм-менеджменту, спеціально підібраних для айтішників. Ви дізнаєтеся про різні стратегії, які допоможуть вам оптимізувати використ�

ШАГ логотип

SMART - цілі: найкращий помічник у плануванні для програмістів

Для успіху у програмуванні потрібні не тільки технічні навички, а й уміння ефективно керувати своїми завданнями та цілями. У цій статті ми поринемо у світ SMART-цілей та розглянемо, як програмісти можуть використовувати цей підхід для підвищення продуктивності та професійного розвитку.

Для успіху у програмуванні потрібні не тільки технічні навички, а й уміння ефективно керувати своїми завданнями та цілями. У цій статті ми поринемо у світ SMART-цілей та розглянемо, як програмісти можуть використовувати цей підхід для підвищення продуктивності та професійного розвитку.   Знайомство з концепцією SMART-цілей SMART - це акронім, який описує основні характеристики ефективної мети: Specific (конкретна), Measurable (вимірна), Achievable (досяжна), Relevant (пов'язана з поточними завданнями та цілями) та Time-bound (обмежена за часом). Кожен із цих аспектів �

ШАГ логотип

Цей сайт використовує Cookies

Політика конфіденційності