Само собою зрозуміло, що веб-розробка величезна. Значна частина цього полягає в тому, що майже всі є у Мережі. Однак розробників у цій галузі не вистачає, і тому навчальний план веб-розробки такий доступний і безкоштовний. Зважаючи на це, ми збираємось показати вам трохи про те, що таке HTML та CSS. Більш конкретно, ми покажемо вам, як працюють «класи».
Ми не починаємо вас з самого початку, оскільки там вже є безліч безкоштовних навчальних програм. Натомість ми спеціально збираємось показати вам, як працюють уроки, оскільки це необхідний компонент для стилізації вашого веб-сайту. Ми також думали, що це може бути варто висвітлити, перш ніж опублікувати наш погляд на API Bootstrap Twitter, оскільки класи також є обов'язковим компонентом.
Як відмова від відповідальності, якщо ви абсолютно новачок у HTML та CSS, це, мабуть, не вдалий для вас початок. Якщо ви знайомі з цим, все-таки це не повинно бути занадто важким. Але, якщо ви шукаєте повний підручник для початківців, в Інтернеті є безліч чудових варіантів. Щоб назвати декілька, є FreeCodeCamp, проект Odin, CodeAcademy, Code School, Team Treehouse, Udacity та багато інших. Якщо ви вирішите почати копатися в одному з таких, я б дуже рекомендував дотримуватися одного (наприклад, Free Code Camp) і закінчити його перед початком іншого, оскільки багато "базового" вмісту може бути досить повторюваним.
Коли це не вийде, давайте розберемося про те, про що йдеться.
Як працюють класи
Заняття надзвичайно корисні. Вони виймають повторюваність стилю HTML. Без класів ви б стилювали кожен елемент своєї розмітки окремо. А що, якби у вас було два однакових елемента, але хотіли кожен із них стильно відрізнятись? Це був би повний безлад. Тому ми маємо заняття. Класи додають вашу організаційну структуру HTML, що дозволяє зберегти ваш код порівняно чистим. Мало того, але класи можна використовувати не один раз. Іншими словами, вам ніколи не доведеться створювати однакові правила стилізації двічі.
Ось як виглядають класи в нашому тезі:
Як ви бачите, під нашим тегом body є два
елементи з різними класами. Першийтег має клас "head1", а другий тег має клас "head2". Отже, в нашому CSS замість того, щоб застосовувати стилінг лише доелемент, ми можемо застосувати стилізацію до цих окремих класів. Чому ми б хотіли це робити?
елемент, ми можемо застосувати стилізацію до цих окремих класів. Чому ми б хотіли це робити?
Основна причина полягає в тому, що ви не хочете всіх своїх
елементи мати однакову стилізацію. Це створило б багато головних болів при створенні веб-сайту, і крім того, веб-сайти не виглядатимуть дуже чудово. Класи дозволяють застосувати стилізацію лише до одного екземпляра тегу, а не до всіхтеги в документі. Отже, як ви пишете клас у HTML? Подобається це:
Деякий вміст
Ви можете додати властивість "class" майже до будь-якого елемента HTML.
Чудово! Отже, у нас є заняття, але в їх нинішньому стані вони нічого не роблять. Це тому, що ми ще не додали жодних правил стилізації до класу. Для цього нам потрібно створити окремий .css документ. Я просто буду називати це main.css. У цьому документі ми б стилізували такий клас:
Щоб вибрати клас, який ми хочемо стилізувати, робимо це:
.head1 {колір: червоний; вирівнювання тексту: центр; }
У фігурних дужках є всі "правила" (або стилі), які ми застосовуємо до цього класу. Існує багато різних правил, які можна поставити всередині цього класу. У моєму випадку я змінив колір тексту на червоний за допомогою правила "color" і зосереджував текст за допомогою правила "text-align". Повний список правил CSS, а також їх документацію ви можете знайти в Мережі розробників Mozilla.
Тепер наш стиль ще не застосовується до класів у нашому HTML документі, і це тому, що ми ще два файли ще не зв'язали разом. Поверніться до свого HTML-файлу та в
тегу, ви хочете зв’язати свій CSS-файл, зробивши це:
Ваш HTML-документ повинен виглядати так:
І ваш тестовий проект повинен виглядати так в Інтернеті:
Більш детальне відео, яке проходить через ці кроки, дивіться нижче.
Відео
Висновок
І це все, що є на заняттях! Їх дуже просто зрозуміти. Очевидно, що на великих та популярних веб-сайтах, які ви відвідуєте, правила в межах занять набагато складніші, ніж те, що ми висвітлювали, але в їх найосновнішому вигляді, саме так вони працюють.
Якщо у вас виникли якісь питання або виникли проблеми довгі, не забудьте повідомити нас про це в коментарях нижче або на форумах PCMech! Або, якщо вас зацікавить повний посібник для початківців HTML / CSS на PCMech, не забудьте повідомити нам про це!
