CSS: псевдоелементи и псевдо-класове

Понякога изглежда, че за да оцелеете в съвременния свят, трябва да знаете как да създадете уеб сайтове. Дори в училищата те учат основите на HTML.

Какво е това?

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

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

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

След: след

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

Всеки трябва да е най-малко веднъж се вижда на всички онлайн съобщения за публикации, след което бяха думите: "Нова", "нови" или "шок", "Любими", "най-добър", "Супер" и т.н. Това .. обектите бяха определени, като се използва CSS след псевдоелемент.

За да създадете такава позиция, трябва да добавите следния код към каскаден стилов лист:

Тук думата ново посочва името на новия клас, така че преди необходимия абзац в HTML кода, трябва да въведете: class = "new". Името на класа трябва да е между скобите на началния маркер. Ако всичко е направено правилно, след края на абзаца на страницата на браузъра ще има надпис "Нещо ново".

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

Преди: преди

Почти еднакви характеристики имат преди това псевдоелемент CSS. С една малка разлика: тя е предназначена да добави необходимите елементи пред обекта. Написано е точно по същия начин, както след това, само с предишната дума.

Преди следващия абзац на текста можете да добавяте думи, които привличат вниманието, или просто да поставите изображение или елемент на Unicode пред текста. Например, отваряне на котировки или отстъпи. За да реализирате това, трябва да добавите нов клас към маркера CSS и да определите необходимите характеристики. Най-простото решение ще изглежда така:

За да отложите края на документа, трябва да създадете след псевдо класа и вместо съдържание: отворено пиша съдържание: затворено, съответно да промените позиционирането. Ако в псевдо класа преди тирето е от лявото поле, тогава в класа след това трябва да е отдясно. Също така в маркирането можете да добавите изображение (например същите котировки) и текстът вече няма да изглежда като тъп лист.

Епическата сага: първо

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

Този псевдоелемент на CSS има две характеристики - линия и буква:

• писмо - променя първата буква от текстовия фрагмент, към който е добавена. По този начин тя представлява падаща капка - елемент, в който базовата линия е няколко реда по-ниски спрямо основния текст. За да зададете този параметър в листа с каскаден стил, трябва да зададете характеристиките на параграфа. Например, P: първа буква {***} - и вече между скобите показват всички необходими параметри, като цвят, шрифт, размер. Ако първоначалната буква се създава само за първия абзац, тогава се създава нов клас (точно както в примера с нов: след).
• линия - тази позиция напълно променя първия ред на параграфа. Много е удобно да се използва в научни публикации, ако трябва да подчертаете важна информация. Той е написан по същия начин като други примери. Но тук е важно да помним, че псевдо елементът не избира присъда, а низ. В зависимост от това на браузъра на потребителя използва, в първия си низ може да бъде по-дълъг или по-кратък, така че е важно да се гарантира, че този избор не изглеждаше нелепо. В такива случаи е създаден псевдо-елемент от прекъсването на линия в CSS.

Нова линия

Всъщност този елемент рядко се използва, защото той успешно замества свободен край
. Има обаче ситуации, при които е необходимо да се определи прекъсване на линията чрез псевдоелементи. За тези цели можете да използвате същото след това. За това е написан следният код: след {съдържание: ` A`- бяло пространство: предварително}. Името на класа трябва да бъде написано между скобите на етикета за отваряне, веднага щом той се затвори, след него се показва прекъсната линия.

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

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

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

Всички псевдо-класове са написани на таблица с каскадни стилове с прост и проверен синтаксис:

• Селектор: Псевдоклас {характеристики на стила: цвят, размер, тире, позициониране и т.н.}

Тези класове могат да бъдат разделени на три основни групи:

• Тези, които определят състоянието на елемента;
• тези, които принадлежат на псевдоелементите;
• фиктивни класове, които определят езика на съдържанието.

Псевдокласите и състоянието на елементите

Помислете за същата последователност като псевдокласите. Първият подвид се характеризира с промяна в състоянието на елемента, в зависимост от състоянието му в определен момент. Така е в примера по-горе: ако връзката се предаде, то ще промени цвета. Това включва такива псевдо-класове:

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

Начинаещите погрешно приемат, че тези псевдо-класове са само за справки, но с правилното желание и фантазия можете да промените всеки елемент от сайта.

Специално за псевдоелементите на CSS

Към тази група селектори са псевдо-класове, които могат да променят псевдоелементите. Такава е псевдокласът : първо дете. В каскадния стилов лист трябва да създадете нов клас за : първо дете и задайте цвета на текста или неговия размер. Резултатът ще изглежда така:

• B: първо дете {цвят: червено-}

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

също : първо дете използвайте за премахване на тирето в първия параграф, а след това вместо цвят: червено- ще бъде необходимо да напишете текст-тире: 0-, и B се заменя с P (също обозначава маркера, който е отговорен за началото на параграфа).

Език на съдържанието

Псевдо класа : lang основно се отнася за текстове, които са написани на различни езици. Например, ако статията има цитати на оригиналния език, можете да зададете отделни характеристики за тях. Синтаксисът за този клъстер ще бъде:

• Име на класа: lang (език) {текст характеристики (цвят, шрифт, изглед и т.н.)}

Що се отнася до позицията "език", тя се определя съгласно приетите норми. Например, английски, руски, немски и т.н. Благодарение на този псевдоклас можете да промените стила на чужд текст в целия документ.

данни

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