Съкращението CSS означава „каскадни стилови таблици“. CSS се използва за оформяне на уебсайтове и приложения, използвани на всички устройства. Стиловата таблица обикновено се използва заедно с HTML и интерфейсен език за програмиране като JavaScript.

CSS може да бъде внедрен по един от трите начина - вграден, вътрешен или външен. Въпреки че външният CSS е препоръчителният подход, има случаи, когато двата останали метода на внедряване може да са по -практични.

В тази статия ще научите всички основи на CSS, за да започнете да създавате приложения днес.

Кога да използвате различните методи за внедряване на CSS

Вграденият CSS е идеалният метод за внедряване, когато намерението е да се включат само едно или две предпочитания за стилизиране на уеб страница, заедно с няколко други нишови случая. Вграденият CSS метод използва стил ключова дума заедно със свойство CSS за постигане на конкретен резултат.

Ако възнамерявате да промените цвета на едно заглавие в червено, тогава вграденият CSS може да е добър вариант. Нишов случай, както бе споменато по -горе, би бил при създаването на HTML оформления, състоящи се предимно от таблици (остаряла практика).

Използване на Inline CSS пример

Основна заглавие

Редът с код по -горе ще покаже текста „Основно заглавие“, покрит с червен цвят. Това вероятно е една от единствените практически причини за използване на вграден CSS, защото обикновено има само една h1 елемент на дадена уеб страница.

Ако възнамерявате да покриете всички h2 елементи на уеб страница с жълт цвят. Ще трябва да използвате CSS стил ключова дума, заедно с цвят свойство и неговата стойност (жълто) на всеки елемент. По -ефективен начин за изпълнение на тази задача обаче е използването на вътрешен CSS.

Използване на пример за вътрешен CSS

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

И така, защо външният метод за внедряване на CSS все още е най -препоръчителният подход? Разделяне на притесненията. С външен CSS вашият CSS код е напълно отделен от вашия HTML код, което гарантира мащабируемост за големи проекти и прави процеса на тестване по -ефективен.

Използване на пример за външен CSS

Вмъкване на горния ред код в маркер на вашия HTML файл ще улесни оформянето на вашата уеб страница, използвайки външния CSS метод. Единственият аспект на кода по -горе, който ще се промени, е стойността, присвоена на href свойство, което винаги трябва да е името на CSS файла (включително разширението .css).

Свързани: Какво представляват каскадни стилови таблици и за какво се използва CSS? С вашия CSS файл, свързан с вашия HTML документ, вече можете да започнете да пишете CSS код във вашия CSS файл. На този етап единствената разлика между горния вътрешен пример за CSS и външния CSS е стил етикет. Следователно, вмъкването на следния код в CSS файл ще доведе до същия резултат като вътрешния CSS пример по -горе.

h2 {
цвят: жълт;
}

Проучване на основната структура на CSS

Основната CSS декларация съдържа седем основни елемента, както можете да видите от примера по -долу. Всички те работят заедно, за да постигнат определен набор от стилни предпочитания.

Селекторът

В CSS декларация селектор може да бъде или документ за самоличност, а клас, елемент, или в някои специални случаи, псевдоселектор. В CSS структурата над а element се използва като селектор, което означава, че всички връзки на уеб страница ще бъдат покрити с червено. По същество целта на селектора е да идентифицира елементите, които трябва да бъдат оформени.

Декларация Начало и Край

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

Собствеността

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

Разделителят за собственост/стойност

Въпреки че може да изглежда малък и незначителен, разделителят собственост/стойност е също толкова важен, колкото и всички останали елементи в CSS структурата. Ако някога има случай, когато този елемент е забравен, цялата CSS декларация няма да се изпълни.

Стойността

Стойността на CSS свойството представлява точния стил, който искате да приложите към дадено свойство. Стойностите, които са на разположение за използване, зависят от типа собственост. Например, свойството, използвано в структурата по -горе, е цвят, което означава, че има само един тип стойност, който може да се приложи към това свойство, име на цвят. А цвят стойността може да бъде представена в една от четирите форми: стойност на думата (като в примера по -горе), шестнадесетична стойност, стойност на HSL (нюанс, наситеност, лекота) или стойност на RGB (червено, зелено, синьо).

Разделителят на декларацията

Разделителят на декларации показва, че сте в края на конкретна декларация за стил. В горната структура има само един разделител на декларации, но може да има и повече. Всичко зависи от броя на CSS свойствата, които възнамерявате да използвате за конкретна клас, документ за самоличност, или елемент.

Какво представляват идентификаторите и класовете?

идентификатори и класове играят основна роля в процеса на оформяне на CSS. Подобно на HTML елементи, CSS идентификатори и класове се използват като селектори в CSS декларация. Въпреки това, класове и идентификатори имат предимство пред HTML елемент.

Общото правило в CSS е, че последната декларация за стил, която добавите към файл, ще замени тези, които са били там преди. Следователно, ако има две декларации с h2 селектор в CSS файл, добавената последна декларация замества тези, които са били там преди.

Ако обаче това h2 елементът има документ за самоличност който се използва като селектор в CSS декларация, независимо от нейната позиция (преди или след) към CSS декларация, която има h2 елемент като негов селектор, предпочитанието за стилизиране в документ за самоличност декларацията винаги ще има предимство пред елемента. Накратко, един документ за самоличност ще замени други селектори за стил.

Важно е да запомните, че в CSS декларация, идентификатори започват с цифров знак и класовете започват с точка. Най -съществената разлика между an документ за самоличност и а клас това ли е документ за самоличност е уникален, докато a клас може да се дублира. Например, колекция от подобни на етикетите може да се даде същото клас име; както и да е документ за самоличност от всеки маркерът трябва да е уникален.

Проучване на различните видове селектори

Има три основни типа селектори - единични, множество и вложени. Досега тази статия обхваща подробно единични селектори.

Когато използвате CSS, ще има случаи, когато искате различни елементи на различни позиции на a уеб страница, за да има подобен стил, различен от общия стил, приложен към цялата уеб страница. В тези случаи знанието как да използвате множество селектори ще бъде полезно.

Пример за основен HTML шаблон

Добре дошли

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Невъзможно отклонение
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







относно

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Невъзможно отклонение
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Заглавие

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dic quod quibusdam!
Ea delectus sit, Laboriosam eos aperiam asperiores? В ad Laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum Laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id neophoditatibus harum ratione, ipsum doloremque deleniti ex eligendi
импредира hic maxime? Eius modi optio ad, nisi tempora sapiente?







Заглавие

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dic quod quibusdam!
Ea delectus sit, Laboriosam eos aperiam asperiores? В ad Laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum Laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id neophoditatibus harum ratione, ipsum doloremque deleniti ex eligendi
импредира hic maxime? Eius modi optio ad, nisi tempora sapiente?

Ако погледнете внимателно HTML файла по -горе, ще видите динамиката, която съществува между тях идентификатори и класове. Във връзка с горния файл, ако искате да приложите същия стил към относно раздел и статиите само на уеб страницата, следният CSS код ще постигне това.

Пример за използване на множество селектори

#За, .content {
цвят: бял;
цвят на фона: тъмносин;
}

Когато използвате множество селектори, винаги трябва да отделяте всеки селектор чрез запетая. Примерът по -горе има два селектора, an документ за самоличност и а клас. Ако запетая, която следва относнодокумент за самоличност липсва, CSS декларацията няма да се изпълни.

Връщайки се към примера за основен HTML шаблон по -горе, има два присъстващи тагове - единият в секцията за добре дошли, а другият в раздела за информация. Ако целта ви е да насочите само към един от тях тагове, вложеният селектор трябва да бъде вашият метод за преминаване.

Използване на примери за вложени селектори

#Добре дошли p span {
цвят: червен;
}

Вложеният селектор по -горе съдържа документ за самоличност и два HTML елемента. Както можете да видите от горния пример, вложен селектор ви дава възможност да насочвате към конкретен елемент в група.

Следователно, само педя раздел в етикет на div с добре дошъл идентификатор ще бъдат покрити в червен цвят.

Независимо дали използвате език за стилизиране като CSS или език за програмиране, абсолютно трябва да знаете как да напишете коментар. Коментарите са от съществено значение в проекти на ниво предприятие, където множество разработчици работят заедно, и са полезни и при извършване на малки проекти.

CSS коментар съдържа две наклонени черти напред, две звездички и раздел за коментари.

/ * Ето как пишете коментар на един ред в CSS */

/*
Ето как пишете
многоредов коментар
в CSS
*/

Какво следва?

Тази статия ви предоставя основните компоненти на CSS. Вече можете да използвате идентификатор:

• Всеки един от трите метода за внедряване на CSS
• Всички елементи в CSS декларация
• Трите основни типа селектори
• CSS коментар

И все пак това е само началото. CSS има няколко рамки, които ще ви помогнат да развиете по -добро разбиране на езика. Единственото предизвикателство е да решите кое е най -доброто за вас.

Tailwind CSS vs. Bootstrap: Коя е по -добра рамка?

При избора на CSS рамка е важно да намерите тази, която отговаря на вашите изисквания.

Прочетете Напред

За автора