Само о компликованом или научите ЦСС3. Део 2. Врсте ЦСС селектора

Поштовани, драги читаоци сајта ремонтцомпа.ру! Моје име је Роман Нахват и представљам вам други део низа чланака о језику стила ЦСС. У првом делу смо погледали три начина додавања стилова на веб страницу, наиме, испитали смо унутрашње стилове, који су проширења за једну ознаку ХТМЛ документа, глобалне стилове, када се користе која својства стила пишу између ознака и, као и сродни стилови, који су дефинисани у посебној .цсс датотеци из ХТМЛ документа. Веома важан концепт у ЦСС-у је селектор. Селектор одређује на који ће се елемент (или елементе) у ХТМЛ документу примијенити стил. Постоји неколико врста селектора у ЦСС-у које ћемо покривати у овом чланку..

Само о компликованом или научите ЦСС3. Део 2. Врсте ЦСС селектора


Креирајте сљедећу структуру ХТМЛ документа с којим је листа стилова селецтор_типе.цсс () већ повезана

Сачувајте овај документ као селецрор.хтмл на флеш диску у ЦСС фасцикли

На исти начин креирајте и сачувајте датотеку селецтор_типе.цсс на флеш диску у ЦСС фасцикли

На веб страницу селецрор.хтмл додајте наслов „ЦСС Селектори“ и одломак „Селектор је ....“

Такође додамо табелу на веб страницу селецрор.хтмл, за то ћемо написати тагове и

Поравнаћемо креирану таблицу у средини веб странице (атрибут поравнања са центром вредности), а такође ћемо поставити дебљину обруба таблице на 1 пиксел (бордер = "1")

Између ознака и наведите назив табеле (Врсте ЦСС селектора)

Између тагова и
пишу ознаке и , ово ће створити један ред табеле

Између тагова и напишите ознаке два пута ... , ова акција ће створити две колоне у табели. Навешћемо имена ступаца као "Селектор" и "Пример коришћења"

Слично томе, додајте још седам редака у табелу (тагове) и ), а у сваком реду ћемо створити две колоне (тагове) и )

Као резултат тога, веб страница селецтор.хтмл попримице следећи облик

Из креиране табеле види се да постоје следеће врсте ЦСС селектора: Селектор типова Селектор идентификатора Класа селектор Универзални селектор Десцендант селектор Селектор селектора Селектор генерички повезаних елемената Погледајмо сваку врсту селектора користећи веб страницу селецтор.хтмл као пример Селектор типа одговара неком називу елемента у ХТМЛ документ. На пример, на веб страници селецтор.хтмл налази се наслов „ЦСС Селектори“ који је означен

...

. Поравнајте текст наслова у средини веб странице и подесите га на црвено

У датотеци стилова селецтор_типе.цсс, означавамо заглавље као ознаку типа

, даље у заградама означавамо својство стила и његову вредност, коју желимо да применимо на заглавље са текстом "Селектори у ЦСС-у"

Као што видите, наслов наслова налази се у средини веб странице и црвене је боје

Селектор брачног елемента одговара елементу браће у односу на други елемент. На пример, ознака

(одломак "Селектор је ....") сестрински је ознаци

(наслов "Селектори у ЦСС-у").

Промените боју текста у одломку („Селектор је ...“) иза наслова („Селектори у ЦСС-у“) у плави виолет користећи селектор сестре. У датотеку стилова селецтор_типе.цсс додајте линију х1 + п цолор: блуевиолет

Као што видите, боја текста параграфа се променила у плаву

Додајте још два идентична параграфа на веб страницу после заглавља „ЦСС Селектори“

Добијамо следеће: текст првог одељка је плави виолет, а боја текста преостала два параграфа остаје подразумевано.

Промените боју текста сва три параграфа пратећи наслов „ЦСС Селектори“ у плави виолет користећи селектор генеричких елемената. Селектор генерализованих сродних елемената одговара елементу који је сестрински другом елементу. На пример, неколико тагова

(три параграфа „Селектор је ....“) су сестра за ознаку

(наслов "Селектори у ЦСС"). У датотеку селецтор_типе.цсс напишите следећи ред х1 ~ п цолор: блуевиолет

Као резултат коришћења селектора генерализованих сродних елемената, боја текста сва три параграфа после наслова „Селектори у ЦСС-у“ се променила у плави виолет

Размотрите другу врсту ЦСС селектора, као што је селектор идентификатора. Бирач идентификатора одговара елементу чији атрибут ид има вредност која одговара оној назначеној симболом # Повећајте величину фонта и промијените боју текста у називу таблице (ознаке ...) користећи селектор идентификатора. Унутар ознаке напишите идентификатор са именом "цапт", као што је приказано испод ()

У датотеку селецтор_типе.цсс додајте следећи ред #цапт цолор: ред; фонт-сизе: 20пк, где је иза симбола # означен идентификатор "цапт"

Као што видите, величина и боја текста у називу табеле мењају се у складу са својством стила прописаним у датотеци селецтор_типе.цсс

Можете створити много идентификатора у ХТМЛ документу, али само под условом да се њихова имена никада не понове. Напишемо још један идентификатор са именом „тр1“ унутар ознаке , као што је приказано испод ()

Користећи идентификатор "тр1", поравнаћемо текст у именима ступаца табела у центру, поставити их на зелено, а такође ћемо направити фонт у називима ступа подебљано. У датотеку селецтор_типе.цсс упишите # тр1 тект-алигн: центер; фонт-веигхт: болд; боја: зелена

Добијамо следеће

Сљедећа врста селектора коју разматрамо је селектор класе. Селектор класе одговара елементу чија атрибута класе има вредност која одговара оној наведеној након тачке. Промените боју обруба табеле на веб страници селецтор.хтмл у плаву користећи селектор класе. За ово унутар ознаке напишите име класе на следећи начин: табела, где је цласс1 име класе

У датотеку стилова селецтор_типе.цсс додајте следећи ред .цласс1 бордер-цолор: блуе

Као што видите, боја оквира стола се променила у плаву

Промените боју текста у табели у зелену. У датотеку селецтор_типе.цсс упишите линију .цласс1 цолор: греен

Видимо да се боја текста у табели променила у зелену

Додајте неку позадинску слику на веб страницу користећи универзални селектор. На флеш диску у ЦСС фасцикли имамо датотеку слика са сликом имена и екстензијом .јпг

У датотеку стилова селецтор_типе.цсс додајте линију * бацкгроунд-имаге: урл (имаге.јпг)

Као резултат, веб страница ће добити следећи облик

Размотрите последњу врсту селектора, као што је селектор потомака. Дечији селектор одговара елементу који је потомак другог елемента. На пример, у сва три параграфа (тагови)

и

) приложите фразе "ХТМЛ документ" и "ЦСС правило" између ознака ... , као што је приказано испод. У овом случају, ознака биће потомак ознаке

. Ознака промените фонт израза "ХТМЛ документ" и "ЦСС правило" у курзив

Комбинације "ХТМЛ документа" и "ЦСС правила" курзивним фонтом

Промените боју текста фразама „ХТМЛ документ“ и „ЦСС правило“ у црвену користећи селектор потомака. Да бисте то учинили, у датотеку стилова селецтор_типе.цсс додајте линију п И цолор: ред

Као резултат, веб страница ће добити следећи облик

Наставак у чланку: Само о компликованом или научите ЦСС3. Део 3. Начини подешавања боја у ЦСС-у. Подесите транспарентност на елемент у ХТМЛ документу

Категорија