Понякога изглежда, че за да оцелееш в съвременния свят, трябва да знаеш как да създаваш сайтове. Дори училищата преподават основите на HTML. Но за да се създаде качествен ресурс, това не е достатъчно. Трябва да знаете основите на каскадни стилове, включително псевдокласи и CSS псевдоелементи.
Какво е това?
С тайни закони всички стилове, които уебмастъра вписва в CSS маркировката, се използват за тези елементи от структурата, които могат да се видят в изходния код. Има обаче групи от елементи, които не са написани в HTML документа, но те също трябва да посочат стилове.
Например, в HTML файла няма етикет, който да е отговорен за проектирането на главни букви на нов абзац или регион, който е пред определен елемент. И етикетите не могат да показват активност на връзките или да променят изображението, когато курсорът на мишката води към него. За да направим тези и много други стойности, има CSS селектори: псевдо-класове и псевдо-елементи. Псевдокласовете се наричат селектори, които засягат съществуващите елементи на документа. Псевдо-елементите обикновено задават и променят зоната, която първоначално липсва в изходния файл. Казано по-просто, псевдо-елементите указват нови страници, които не са в HTML маркировката, а псевдокласовете определят състоянието на обектите при определени условия.
След: след
Първото нещо, на което трябва да обърнем внимание, са псевдоелементите на CSS преди и след, тъй като всеки уважаващ себе си ресурс ги използва, за да подобри външния вид, четливостта и привлекателността на сайта. Тези елементиДайте възможност да добавяте нови области, надписи и стилове преди или след изходния документ.
Всеки вероятно е виждал поне веднъж на сайта обяви за публикации, след които са изписани думите: „Новост“, „Нов“ или „Шок“, „Любими“, „Най-добър“, „Супер“ Тези обекти са зададени с помощта на CSS след псевдоелемента. За да създадете тази позиция, трябва да добавите следния код към каскадната таблица със стилове:
Тук думата new указва името на новия клас, така че преди да бъде въведен исканият абзац на HTML маркиране, трябва да се въведе: class = "new". Името на класа трябва да бъде между скобите на началния маркер. Ако всичко е направено правилно, след края на абзаца на страницата на браузъра ще се появи "нещо ново".
Разбира се, в примера е даден прост скрипт за надписа, но никой не каза, че не може да променяте размера, цвета и позиционирането. Всички необходими параметри могат да бъдат въведени в класа new след характеристиката на съдържанието. Разделете ги с точка и запетая, в края, затворете фигурната скоба.
To: преди
CSS преди псевдоелемента е практически идентичен. С една малка разлика: тя е предназначена да добави необходимите елементи пред обекта. То се записва по същия начин, както след, само с думата преди. Преди следващия абзац на текста можете да добавите думи, които привличат вниманието, или просто да сложите картина или елемент от Unicode преди текста. Например, отваряне на раздели или отстъпи. За да приложите това на практика, трябва да добавите нов клас в CSS маркирането и да зададете необходимите характеристики. Най-лесният начинрешението ще изглежда така:
За да направите отстъпки в края на документа, трябва да създадете псевдоклас след и вместо съдържание: open write content: close, съответно, за да промените позиционирането. Ако в псевдокласа преди отстъп от лявото поле, след това в клас след това трябва да бъде от дясно. Можете също да добавяте изображения (например едни и същи кавички) в маркирането, а текстът вече няма да изглежда като преносим лист.
Епична сага: първо
Псевдоелементът CSS първоначално е много популярен при създаването на нови проекти. В частност става дума за проекти с развлекателни и приказни теми, както и уеб ресурси с историческа и научна насоченост. Този CSS псевдоелемент има две характеристики - линия и буква:
Letter - променя първата буква на фрагмента от текста, към който е добавен. По този начин той образува буква - елемент, в който основната линия е с няколко реда по-ниска спрямо основния текст. За да зададете този параметър на каскадния стилов лист, трябва да посочите характеристиките на абзаца. Например, P: първа буква {***} - и вече между скобите посочват всички необходими параметри, като например цвят, шрифт, размер. Ако трябва само да създадете начална буква за първия абзац, тогава се създава нов клас (точно както в примера с новото: after).
Линия - тази позиция напълно променя първия ред на абзаца. Много е удобно да се използва в научни публикации, ако искате да подчертаете важна информация. То се записва по същия начин като други примери. Но тук е важно да се помни, че псевдоелементът не предлага предложение, асамата линия. В зависимост от браузъра, който потребителят използва, първата му линия може да бъде по-дълга или по-къса, така че е важно да се гарантира, че този избор не изглежда глупав. За тези случаи е създаден псевдоелементът на CSS от линията.
Нова линия
Всъщност, този елемент рядко се използва, тъй като успешно заменя марката .Въпреки това, има ситуации, при които е необходимо да се определи разделителна линия с псевдо-елементи. За тези цели можете да използвате същото след. За тази цел е написан следният код: след {content: 'A'; бяло пространство: pre;}. Името на класа трябва да бъде вмъкнато между скобите на началния етикет веднага след като се затвори, след него и ще последва разделителната линия. Тази опция отнема повече време за конструиране на четено съдържание и ако няма нужда да се работи с необичайно неизвестни браузъри, тогава е по-добре да се ограничи маркерът .
Синтаксис на псевдокласи
Както вече споменахме, псевдокласовете определят състоянието на елементите, с които потребителят взаимодейства. За разлика от CSS псевдоелемента, който определя невидимата структура на характеристиката, въображаемите класове са ориентирани към поведенчески фактори. За да бъдем по-ясни, можем да дадем малък пример. Да предположим, че сайтът има списък с полезни връзки, който потребителят преглежда, чете информация, но след известно време среща съдържанието, което вече е видяно. Той просто отиде на тази страница отново, защото има много връзки и те не се различават. За да предотвратите това, уебмастърите добавят псевдокласпроменя цвета на посетените връзки, след което потребителят ще знае точно какво е чел и къде още не е преминал.
Всички псевдо-класове са написани в таблица на каскадни стилове с прост и доказан синтаксис:
Селектор: Псевдоклас {характеристики на стила: цвят, размер, разстояние, местоположение и т.н.
тези, които определят състоянието на даден елемент;
тези, свързани с псевдоелемента;
фиктивни класове, определящи езика на съдържанието.
Псевдокласи и състояние на елементите
Да разгледаме реда, в който могат да бъдат псевдокласовете. При първия подвид промяната в състоянието на даден елемент зависи от нейното състояние в даден момент. Това беше в примера по-горе: ако връзката е пресечена, тогава тя ще промени цвета. Те включват следните псевдо-класове:
: active. Ако приложите този псевдоклас, тогава, когато минете върху отделен фрагмент, той ще стане активен. Това ще бъде при промяна на цвета, увеличаване на размера или ще се появи анимация.
: връзка. Обикновено се отнася за връзки, които потребителят все още не е посетил. Те остават непроменени.
: фокус. Често се използва за текстови документи, когато потребителят, след като постави курсора върху полето, може да промени цвета на текста. Понякога се използва за изображения. Например, картината е засенчена, но когато щракне, тя придобива естествен цвят.
: hover. Когато потребителят просто постави мишката върху даден обект, той може да промени цвета или формата си и не трябва да кликва.
: посетен. впо същество този псевдо-клас е предназначен за посещавани връзки, които променят цвета си до лилаво по подразбиране.
Новаците погрешно приемат, че тези псевдокласове са само за справки, но с правилното желание и въображение можете да промените всеки елемент на сайта.
Специално за CSS на псевдоелемента
Тази група селектори включва псевдо-класове, които могат да променят псевдо-елементи. Следният псевдоклас е: първо дете. В каскадния стилов лист трябва да създадете нов клас за: първо дете и да определите цвета на текста или неговия размер. Резултатът ще изглежда по следния начин:
B: първо дете {color: red;}
Това най-често се прави, когато е необходимо да се разпределят някои фрагменти от текста с удебелен шрифт, а само началото на абзаца трябва да е различно. Следователно, класът се нарича същото като етикета, който отговаря за удебелен текст. Ако го приложите на практика, тогава благодарение на псевдокласата, само първият подчертан удебелен фрагмент ще има червен цвят, други думи ще бъдат стандартни черни.
Също така: първо дете се използва за премахване на отстъп в първия параграф, след това вместо цвят: червен; ще трябва да напишете текст-отстъп: 0; и B, за да се замени с P (също е посочен и тагът, който съответства на началото на абзаца).
Език на съдържанието
Псевдоклас: lang се прилага главно за текстове, написани на различни езици. Например, ако статията съдържа цитати на оригиналния език, тогава за тях е възможно да се поставят отделни характеристики. Синтаксисът за този клъстер ще изглежда така:
Името на класа: lang (language){характеристики на текста (цвят, шрифт, тип и т.н.)}
По отношение на позицията "език", тя се посочва в съответствие с приетите правила. Например английски, руски - ua, немски - де и т.н. Благодарение на тази псевдоклас, можете да промените стила на чуждия текст в целия документ.
Заключения
CSS псевдокласовете и псевдо-елементите са един от тези въпроси за каскадни стилове, които причиняват трудности при разбирането. Тук обаче няма нищо сложно, най-важното - да се разбере, че псевдокласата е определено състояние, което се изпълнява при предварително договорени условия. Например, когато се намирате над мишката или кликване. Псевдо-елементът е независима част от документ, който не е част от HTML маркировката, но може да има свой собствен стил. Можете дори да кажете, че е виртуален HTML. Ако погледнете ситуацията на такава страна, всичко става изключително просто и разбираемо, но с такива познания можете да започнете да създавате сайтове.
