ЦСС: псеудо-елементи и псеудо-класе

Понекад, чини се да, како би преживјелисавремени свет, морате знати како креирати веб странице. Чак иу школама, они подучавају основе ХТМЛ-а. Али то није довољно за стварање квалитетног ресурса. Још увек треба да знате основе каскадног листа стила, посебно псеудо-класе и ЦСС псеудо-елемената.

Шта је то?

Према неизреченом закону, сви стилови тоЧаробњак за веб се уписује у ЦСС ознаку, која се користи за елементе структуре које се могу видети у изворном коду. Међутим, постоје групе елемената које нису прописане у ХТМЛ документу, али такође морају одредити стилове.

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

Псеудо-класе су селектори који утичуна постојећим елементима документа. Псеудо-елементи обично наводе и мењају област која је првобитно била одсутна из изворне датотеке. Једноставно речено, псеудо-елементи постављају нова подручја странице која нису у ХТМЛ ознаку, а псеудо-класе дефинишу стање објеката под одређеним условима.

После: после

Прва ствар на коју треба обратити пажњу јестепсеудо-елементи ЦСС пре и после, пошто их сваки самоспоштујући извор користи за побољшање изгледа, читљивости и атрактивности сајта. Ови елементи пружају могућност додавања нових области, етикета и стилова пре или након оригиналног документа.

Сви су вероватно бар једном видели на некимсајтове са објављивањем публикација, а слиједе ријечи: "Новина", "Ново" или "Шок", "Фаворит", "Најбољи", "Супер" итд. Ови објекти су наведени помоћу ЦСС-а након псеудо-елемента.

Да бисте креирали такав положај, потребно је да додате следећи код у каскадни лист стила:

Овде нова реч је назив нове класе,тако да прије неопходног става у ХТМЛ ознаку морате унети: цласс = "нев". Име класе мора бити између заграда отварања ознаке. Ако се све исправно изврши, након завршетка пасуса на страници са прегледачем појављује се натпис "Нешто ново".

Наравно, примјер специфицира скрипту за једноставнунатписи, али нико није рекао да не можете промијенити величину, боју и позиционирање. Сви потребни параметри могу се унети у нову класу након карактеристика садржаја. Одвојите их тачком и зарезом на крају.

Пре: раније

Скоро идентичне карактеристике имајуЦСС псеудо-елемент пре. Са једном малом разликом: дизајниран је тако да додају неопходне елементе испред објекта. Записује се потпуно исто као и после, само са речима пре.

Пре следећег пасуса текста, можете додатиречи које привлаче пажњу, или можете једноставно ставити слику или елемент Уницоде испред текста. На пример, отварање цитата или индентова. Да бисте то учинили у животу, морате додати нову класу ЦСС марки и поставити потребне карактеристике. Најједноставније решење би било следеће:

Да бисте урезали на крају документа, морате креирати псеудо-класу након и умјесто садржај: отворен да пишем садржај: затворисходно томе променитепозиционирање. Ако је пре псеудо-класе било раздвојено са леве стране, онда је у класи после с десне стране. Такође можете додати слику марки (рецимо, исти цитати), а текст више неће изгледати као дугачак лист.

Епска сага: прво

Веома популаран у креирању нових пројекатапрви користи псеудо-елемент ЦСС. Посебно, ово се односи на пројекте са забавним и необичним темама, као и веб извори историјског и научног правца.

Овај ЦСС псеудо-елемент има две карактеристике - линија и слово:

Писмо - мења прво слово тог фрагмента текста, укоме се додаје. Дакле, формира почетно слово - елемент у којем је основна линија испод неколико линија у односу на главни текст. Да бисте поставили овај параметар у каскадни лист стила, морате подесити карактеристике за параграф. На пример П: прва писма {***} - и већ између заграда указује на све неопходнеПараметри као што су боја, фонт, величина. Ако почетно слово треба створити само за први пасус, онда се креира нова класа (као у примеру са ново: после).
Линија - ова позиција потпуно мења прву линијустав. Веома је згодно користити у научним публикацијама, уколико желите истакнути важне информације. Снима се на исти начин као и други примери. Али овде је важно запамтити да псеудо-елемент не бира реченицу, већ низ. У зависности од тога који претраживач корисник користи, његова прва линија може бити дуже или краће, па је важно осигурати да овај избор не изгледа смешно. За такве случајеве, псеудо-елемент прелома линија је креиран у ЦСС-у.

Нова линија

У ствари, овај елемент ретко се користи, јеруспешно је замењен ознаком <бр>. Међутим, постоје ситуације када је потребно одредити прекид линије са псеудо-елементима. У ове сврхе можете користити исте после. За ово је написан следећи код: после {цонтент: "А"; вхите-спаце: пре;}. Име класе мора бити уметнуто између заграда отварања ознаке, чим се затвори, након тога и слиједи линија.

Ова опција захтева више времена приликом конструисања читљивог садржаја, а ако нема потребе за рад са аномално непознатим претраживачима, онда је боље ограничити се на ознаку <бр>.

Синтакса псеудо-класе

Као што је већ поменуто, дефинишу се псеудо-класестање елемената са којима корисник интерактивно ради. За разлику од ЦСС псеудо-елемената, који дефинишу невидљиве структурне карактеристике, имагинарне класе се фокусирају на факторе понашања. Да бисте постали јаснији, можете дати мали пример. Претпоставимо да на сајту постоји листа корисних веза, корисник се креће кроз њих, чита информације, али након неког времена дође до тог садржаја који је већ био видјен. Поново је отишао на ову страницу, јер има много веза, и они се не разликују. Да би се ово спречило, вебмастери додају псеудо-класу која мења боју скениране везе, тада ће корисник тачно знати шта је прочитао и где још није отишао.

Све псеудо-класе снимљене су у каскадном листу са једноставним и доказаним синтаксама:

Селектор: Псеудо-класа {стил карактеристике: боја, величина, индент, позиционирање, итд.}

Ове класе се могу поделити у три главне групе:

оне које одређују стање елемента;
оне које се односе на псеудо-елементе;
думми цлассес које дефинишу језик садржаја.

Псеудо-класе и стање елемената

Размислите по реду, шта може битипсеудо-класе Прва подврста карактерише промена стања елемента у зависности од њеног стања у одређеном тренутку. Овако је то било у претходном примеру: ако кликнете на везу, она ће промијенити боју. Они укључују такве псеудо-класе:

:активан. Ако примените ову псеудо-класу, онда када кренете мишем преко одвојеног фрагмента, постаје активан. Ово ће се манифестовати у промени боје, повећању величине или ће се појавити анимација.
:линк. Већином се односи на везе које корисник још није посетио. Они остају непромењени.
: фокус. Најчешће се користи за текстуалне документе,када корисник, постављањем курсора на пољу, може промијенити боју текста. Понекад се користи за слике. На пример, они откривају сенкујућу слику, али када се кликне, стиче се природна боја.
:лебдите. Када корисник једноставно помера мишем на одређени објекат, он може да промени боју или облик, док он не мора да кликне.
:посетио. У суштини, ова псеудо-класа је намењена за посећене линкове који подразумевано мењају своју боју на љубичасту.

Почетници погрешно претпостављају да су ове псеудо-класе намијењене само за везе, али уз одговарајућу жељу и машту можете промијенити било који елемент локације.

Посебно за ЦСС псеудо-елементе

Ова група селектора укључује псеудо-класе које могу мењати псеудо-елементе. Таква псеудо-класа је : прво дете. У каскадном листу стилова, морате креирати нову класу : прво дете и подесите боју текста или његову величину. Резултат ће бити следећи:

Б: прва дијете {боја: црвена; }

Најчешће се то ради када је потребно.изаберите неколико текстуалних фрагмента са масним словима и само почетак пасуса би требали бити различити. Дакле, класа се зове исто као и ознака, која је одговорна за болд текст. Ако ово применимо у пракси, онда ће захваљујући псеудо-класи, само први фрагмент означен мастилом имати црвену боју, преостале речи ће бити стандардне црне.

Такође : прво дете користи се за уклањање индентације у првом параграфу, а затим умјесто тога боја: црвена; мораће да пише текст-индент: 0;, а Б се замењује са П (такође означеном ознаком која је одговорна за почетак параграфа).

Језик садржаја

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

Назив класе: ланг (језик) {карактеристике текста (боја, фонт, врста, итд.)}

Што се тиче позиције "језик", означава сепрема прихваћеним стандардима. На пример, енглески - ен, руски - ру, немачки - де, итд. Захваљујући овој псеудо-класи, можете променити стил страног текста у целом документу.

Закључци

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