Въведение в класове по html и css

Разбира се, уеб разработката е огромна. Голяма част от това е, защото почти всички са в мрежата. Въпреки това има недостиг на разработчици в тази област и затова учебната програма за уеб разработка е толкова лесно достъпна и безплатна също. Имайки това предвид, ще ви покажем малко за това какво представлява HTML и CSS. По-конкретно, ще ви покажем как работят „класовете“.

Ние не ви почваме от самото начало, тъй като вече има много безплатни учебни програми. Вместо това специално ще ви покажем как работят класовете, тъй като това е необходим компонент за стилизиране на уебсайта ви. Също така сме помислили, че може да си струва да разгледаме, преди да публикуваме погледа си в Twitter Bootstrap API, тъй като класовете също са задължителен компонент в това.

Като отказ от отговорност, ако сте напълно нови в HTML и CSS, това вероятно не е добро начало за вас. Ако сте запознати с него, не бива да е прекалено трудно да вземете. Но ако търсите пълен урок за начинаещи, в интернет има много страхотни опции. За да назовем няколко, има FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity и много други. Ако решите да започнете да копаете в едно от тях, силно бих препоръчал да се залепите с такъв (като Free Code Camp) и да го завършите, преди да започнете друго, тъй като много от „основното“ съдържание може да бъде доста повтарящо се.

С това не трябва да се разберем за какви класове става дума.

Как работят класовете

Класовете са изключително полезни. Те изваждат повторяемостта от стилистичния HTML. Без класове бихте стилизирали всеки елемент от вашата маркировка поотделно. А какво ще стане, ако имате два еднакви елемента, но искате да оформите всеки от тях по различен начин? Би било пълна каша. Затова имаме часове. Класовете добавят някаква организационна структура на вашия HTML, което ви позволява да поддържате кода сравнително чист. Не само това, но класовете могат да се използват повече от веднъж. С други думи, никога няма да ви се наложи да създавате едни и същи правила за стилизиране два пъти.

Ето как изглеждат класовете в рамките на нашите етикет:

Както можете да видите, под нашия етикет на тялото имаме две

елементи с различни класове. Първият

tag има клас „head1“, докато вторият маркер има клас „head2“. Така че, в нашия CSS, вместо да прилагаме стилизиране само към

елемент, можем да приложим стайлинг към тези отделни класове. Защо бихме искали да правим това?

Основната причина е, че не искате всичките си

елементи да имат еднакъв стайлинг. Това би създало много главоболия при създаването на уебсайт, а в допълнение към това, уебсайтовете не биха изглеждали много страхотно. Класовете ни позволяват да приложим стайлинг само към този един екземпляр от маркера, а не върху всички

тагове в целия документ. И така, как да напишете клас в HTML? Като този:

Някои съдържание

Можете да добавите свойството „class“ към почти всеки HTML елемент.

Страхотен! И така, ние имаме класове, но в сегашното си състояние те всъщност не правят нищо. Това е така, защото все още не сме добавили никакви правила за стилизиране в класа. За целта ще трябва да създадем отделен .css документ. Просто ще го нарека main.css. В този документ бихме стилизирали клас като този:

За да изберете клас, който искаме да стилизираме, правим това:

.head1 {цвят: червен; подравняване на текст: център; }

В рамките на къдравите скоби са всички „правила“ (или стилистика), които прилагаме към този клас. Има много различни правила, които можете да поставите вътре в този клас. В моя случай промених цвета на текста на червен с помощта на правилото „цвят“ и центрирах текста с помощта на правилото „подравняване на текст“. Можете да намерите пълен списък с правила за CSS, както и тяхната документация от мрежата за разработчици на Mozilla.

Сега стилът ни все още не се прилага към класовете в нашия HTML документ и това е така, защото все още не сме свързали двата файла заедно. Върнете се до вашия HTML файл и в таг, ще искате да свържете вашия CSS файл, като направите това:

Вашият HTML документ трябва да изглежда така:

И вашият тестов проект трябва да изглежда така в мрежата:

За по-подробно видео, което минава през тези стъпки, моля, вижте по-долу.

Видео

заключение

И това е всичко, което има за часовете! Те са наистина прости за разбиране. Очевидно в големите и популярни уебсайтове, които посещавате, правилата в часовете са много по-сложни от това, което покрихме, но в най-основната им форма, това е начинът, по който те работят.

Ако имате някакви въпроси или имате проблеми след дълго, не забравяйте да ни уведомите в коментарите по-долу или повече във форумите на PCMech! Или, ако се интересувате от пълно ръководство за начинаещи HTML / CSS за PCMech, не забравяйте да ни уведомите и това!