Css-стилі для сайту: як їх правильно підключати і писати

2

Від автора: здрастуйте, шановні читачі порталу webformyself. В сайтобудуванні величезне значення має оформлення веб-ресурсу. Саме за це відповідає мова css (каскадні таблиці стилів), про який ми сьогодні і поговоримо. А точніше, про його підключенні і використанні. Розглянемо деякі css-стилі для сайту, які використовуються при оформленні веб-сторінок.

Підключення css

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

Треба сказати, що взагалі існують також можливості включення стилів у html-файл. Наприклад, їх можна визначити за допомогою атрибута style або такого ж тега. Це називають вбудованими стилями. Такий підхід сьогодні не вітається і порушує сучасні стандарти розробки.

А як же правильно зробити, запитаєте ви? Для цього потрібно створити новий файл з розширенням css, а потім підключити його до html. Це робиться дуже просто за допомогою тега link, який і відповідає за підключення зовнішніх файлів. Робиться це так:

Тег є одинарним, як ви вже зрозуміли. Трохи докладніше розповім про його атрибутах:

rel = «stylesheet» – взагалі атрибут rel записується для того, щоб визначити роль файлу на сторінці. У нашому випадку роль – це таблиця стилів, що і вказується.

type = «text/css» – так званий MIME-тип, який зазвичай вказується всім потрібним файлів, щоб браузер правильно їх інтерпретував. В сучасних браузерах можна не писати цей атрибут.

href = «style.css» – стандартний атрибут, що вказує адресу нашого зовнішнього файлу. В даному випадку він записаний виходячи з того, що файл має назву style, розширення css і знаходиться в тій же папці, що і html-документ.

Як бачите, підключення css-файлів у вас буде змінюватися тільки атрибут href, все інше міняти не потрібно. На сторінці можна підключати скільки завгодно таблиць стилів, але оптимальним вважається не більше 2-4, тому що занадто багато запитів до сервера це теж не дуже добре.

Де взяти готові css-стилі для сайту?

Ну гаразд, з підключенням, я сподіваюся, все більш менш зрозуміло. Але ж ви створюєте порожній файл, і щоб від його додавання було видно ефект, потрібно або самому написати правила, або взяти їх звідкись.

Css-стилі для сайту: як їх правильно підключати і писати

В мережі, наприклад, дуже багато безкоштовних html-шаблонів. Є можливість завантажити будь-який з них, то всередині обов’язково буде і готова таблиця стилів з потрібними правилами для оформлення сайту. Але коректно працювати вона буде тільки для свого ж html-документа. Справа в тому, що ці дві мови пов’язуються з допомогою так званих селекторів.

Селектор – це особливість мови css, притаманна лише йому. Навіщо вони потрібні? Ну от уявіть такий код:

Текст в заголовку

Текст в абзаці

І ось як css, наприклад, оформити абзац заголовок? Для цього і створені селектори, щоб звертатися тільки до тих елементів, до яких потрібно. Наприклад:

p{
font-size: 12px;
}
.title{
font-size: 36px;
}

Ми поставили для всіх абзаців розмір шрифту рівний 12 пікселям, а елементи з класом title (в нашому випадку це h1) отримали набагато більший розмір – 36 пікселів. Зауважте, у випадку з абзацами стилі застосовуватися до них всім, скільки б їх не було на сторінці.

Другий же селектор звернувся тільки до одного елемента – з класом title. Звичайно, можна створити інші елементи з точно таким класом, це не заборонено, і вони отримають таке саме правило, але якщо ми просто напишемо в html тег h1 (без класу title), то для нього ніяких правил додано не буде.

Ось так зручно css дозволяє вибирати потрібні елементи і залишати в спокої ті, що не потрібні. Яке це має відношення до готових стилів, які ви можете знайти в інтернеті? Там все прив’язане до певних класів та ідентифікаторів, тому ви не зможете ось так просто підключити ці таблиці до будь-яких файлів, вони не запрацюють, якщо в html у потрібних елементів не проставлені відповідні класи.

Наприклад, в таблиці стилів бачимо такий код:

.nav{
width: 300px;
background: aqua;

}
.nav a{
display: block;
color: #ccc;

}

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

Знову ж, в мережі ви можете знайти безліч готових шаблонів, в яких можна побачити цей зв’язок класів , так що якщо ви змінюєте щось в html, відповідні операції потрібно зробити і в таблиці стилів.

Як самому зробити css-стилі для сайту?

Сѕѕ не є чимось страшним і надзвичайно складним. Це звичайна технологія, створена людьми для оформлення веб-сторінок, має свої правила. Достатньо зрозуміти їх, і ви теж зможете створювати зовнішній вигляд веб-ресурсів з допомогою цієї мови.

Css-стилі для сайту: як їх правильно підключати і писати

Найголовніша умова швидкого освоєння – постійна практика, укупі з новими знаннями, які ви для себе засвоїте. Подібну практику вам може дати наш курс з різним технікам верстки.

Крім цього, ази css ви можете дізнатися і засвоїти в нашому преміум-розділі. Там є один з курсів, який повністю присвячений базовим властивостям цієї мови. Ось він.

Найголовніше, рішуче налаштуватися на вивчення і відкинути упередження про те, що це дуже важко. Також вам можуть допомогти безкоштовні матеріали на нашому сайті, статті та відеоуроки. При бажанні ви і зможете придбати основні знання, які потрібні при роботі з css.

На цьому я з вами прощаюся. Читайте наш блог webformyself, щоб покращувати свої знання в області сайтобудування.