Css для початківців
У зв'язку з цим, з даного поста я починаю серію публікацій по CSS. Я постарався скласти уроки таким чином, щоб навіть людина, яка є повним нулем в веб-розробці зміг навчиться цій прекрасній технології.
Що таке CSS?
Після формування змісту сайту, на наступному етапі, ми переходимо на стадію оформлення його зовнішнього вигляду, щоб він був красивим і приємним. А також щоб він добре виглядав на різних дозволах дисплеїв. Якраз-таки для цього ми використовуємо каскадні таблиці стилів CSS.
Значить, для вивчення та ефективного використання CSS необхідно знати основи HTML. Без цього розуміння каскадних таблиць стилів не має практичного сенсу. Якщо ви все ще не знайомі з основами мови гіпертексту - пройдіть мої уроки по HTML.
Наочний приклад
Образно кажучи, створення сайтів можна порівняти з малюванням. Перед тим як ми почнемо спритно управлятися пензликом і полотном, нам варто визначитися з тим, що саме буде зображено на нашій картині. Уявімо, що ми вирішили намалювати пейзаж, на якому буде зображена птах на тлі дерев і гір. Можна сказати, що на цьому етапі ми визначили саме вміст картини.
Наступним кроком ми вирішуємо, яких кольорів і розмірів будуть дерева, гори, птиці і також те, як вони будуть розташовуватися відносно один одного.
Далі, за допомогою CSS ми визначаємо кольору, розміри і розташування елементів на веб-сторінці, тобто займаємося зовнішнім оформленням сайту.
Для більшої наочності, давайте перейдемо на який-небудь веб-сайт, наприклад, facebook.com. Наступним кроком нам буде потрібно встановити розширення для браузера під назвою WEbDeveloper. Я його вже встановив, ну а вам буде досить ввести в пошуковику фразу WEbDeveloper, перейти за посиланням і в вікні, клікнути на кнопку "Встановити".
У мене це розширення встановлено і управляється за допомогою іконки з шестерінкою в правій верхній частині екрану. Я пропоную на сайті faceboook.com відключити таблиці стилів і подивитися тільки на її вміст. Для цього ми переходимо в розділ CSS і натискаємо на Disable All Styles. Стилі відключаються і ми бачимо як непоказно виглядає вміст цієї веб-сторінки без оформлення.
Тобто зараз ми бачимо сайт на голому HTML. Щоб включити css файли цієї сторінки ми повертаємося до WEbDeveloper і знімаємо галочку з Disable All Styles.
Таблиця стилів знову підключилася і ми бачимо вміст веб-сторінки з оформленням.
Як працює CSS?
Всі правила оформлення сайту зберігаються в файлі з розширенням css, який в свою чергу завантажується на веб-сторінку через тег .
Під час завантаження html сторінки, через тег завантажується і CSS файл, після чого браузер починає його обробку і сайт відображається згідно з правилами, заданим в цьому файлі. У ньому описані властивості відображення елементів веб-сторінки.
Наприклад, через селектор 'p' ми задаємо тип, розмір і кольори шрифтів в абзацах. Для настройки шрифтів заголовка першого рівня ми використовуємо селектор 'h1'.
Думаю, загальний принцип роботи досить простий і зрозумілий, тому не будемо вдаватися в деталі. Якщо якісь моменти у вас викликають труднощі - нічого страшного, в наступних уроках на практиці все буде дуже легко і зрозуміло.
Навіщо вивчати CSS?
Не думаю що в наш час можна знайти хоч один більш-менш "пристойний" сайт без використання CSS. Дана технологія дуже добре зарекомендувала себе і на сьогоднішній день дуже важко уявити собі верстку сайту без використання каскадних таблиць стилів.
З її актуалізацією багато теги HTML 4 вже не використовуються. В основному це теги, які відповідали за оформлення веб-сторінок. І тут немає нічого дивного, адже за це тепер уже відповідають CSS властивості. Якщо ви вже володієте азами HTML, наступним логічним кроком буде вивчення CSS. Це той етап, який не вийде перестрибнути, якщо ви хочете навчитися верстці сайтів. Тим більше що це не займе багато часу.
- З використанням CSS стилів, код HTML значно скорочується. Часом в кілька разів. Це позитивно впливає на швидкість завантаження сайту, що в свою чергу полегшує його просування в пошукових системах;
- При оновленні дизайну сайту, більше немає необхідності правити кожен тег окремо на всіх веб-сторінках. Досить змінити пару рядків в таблиці стилів;
- CSS відкриває перед вами широкі можливості в оформленні та розмітки ваших сайтів;
- Відпадає необхідність використовувати застарілі теги. Багато пошукачі не люблять їх, і використання застарілих тегів вважається моветоном;
- Використовуючи CSS ви йдете в ногу з часом.
Як швидко навчитися основам CSS
У вивченні CSS, як і в програмуванні в загальному, найважливішу роль відіграє практика. Чим частіше ви будете практикуватися, тим більше у вас буде виходити.
У даній серії уроків я зроблю акцент на практичних прийомах CSS, які допоможуть вам верстати сайти професійно. Також я особливо виділю ті помилки, які роблять більшість веб-майстрів, з надією на те, що ви їх не повторите.
Суть роботи з каскадними таблицями стилів задоволена проста, тому не втрачайте час і приступайте до її освоєння. Список уроків:
На цьому у мене все. Сподіваюся, даний матеріал виявився для вас корисним. Якщо це так:
На цьому я з вами не прощаюсь. Дякую за увагу і до зустрічі в наступних публікаціях!