CSS алдында - түпнұсқа, ыңғайлы, практикалық

Pseudo-элементтер және CSS псевдос-кластары: алдында, кейін, қозғалыс, белсенді және т.б. - сайттың орындалуын сапалы жақсарту және жеңілдетудің тиімді мүмкіндігі, JavaScript интерпретаторларын кодты емес, күрделі реакцияларды жобалау шешімдерін, оқиға элементтерін, диалогтарды және келуші әрекеттерін талап етпейтін анық кодпен.

Псевдо-элементтер ыңғайлы, көпфункционалды, қарапайым және күрделі авторлық идеялар үшін айтарлықтай және көп өзгермелі қасиеттерге ие: ерекше назар аудару, іс-әрекеттерді нақты көрсетпеу, қажетті жерде қажетті кеңесті шығару.

Үлкен перспективалар url () псевдомердің мазмұнында көрсетілген кезде ашылады. Шынында да, бұл опция Сайт бетіне нәрсе жүктеу жағдайында, сонымен қатар кез келген жерде нәрсе ықтимал активтеу жағдайында жаңа көкжиектерді ашады.

Псевдо-элементтердің айрықша ерекшелігі

Псевдо-элементтер (CSS дейін, :: кейін) элементтен, селектордан және псевдократтардан ерекшеленеді, олар бастапқыда құжаттың ағашында жоқ. Мүмкін, іс жүзінде бұл өте маңызды емес, бірақ егер мазмұнды сайттың беттеріне орналастыру туралы мәселені қарасақ, онда мазмұн сипатына сену іздеу механизмі үшін мағынасы жоқ.

Pseudo-element :: CSS-ға дейін элементке дейін, және кейін - кейінгі мазмұнды қосуға мүмкіндік береді. Мазмұн қарапайым мәтіннен CSS сипаттарына қатысты күрделі пішімдеуге дейін өзгеруі мүмкін, бірақ HTML тегтері емес. Псевдос элементі ол бекітілген элементтің ішінде орналасуы мүмкін, өйткені бұрынғы және кейінгі мағынасы салыстырмалы және жылжымалы болып табылады. Сіз позицияны ғана емес, өлшемдерін, түстерін, фондарын, қаріптерін және басқа CSS сипаттарын да белгілей алмайсыз.

CSS псевдосы сыныптары секілді, алдында және кейін «:» символы алдында, бірақ CSS3 стандарты бойынша «::» ұсынылады. Бетте нақты пайдалануды тексеру ешқашан артық болмайды: кейбір браузерлер немесе олардың нұсқалары осы немесе басқа жалған элементді байқамауы мүмкін.

Жалпы пайдалану шарттары

Мысалы, class элементінің class = 'scElement' сипаттамасымен және әр бетте 'Элемент' мазмұнын мәнер кестесінде CSS сипаттамасын көрсете отырып:

.scElement {
POSITION ...;
Z-индексі ...;
...

},

Сіз оған «: hover» деген жалған класс және «:: дейін» деген жалған элемент CSS-ге қолдана аласыз:

.scElement: hover :: before {content: 'prefix'; Түс ...; Фондық-түсті ...;}

Содан кейін, «Элемент» деген сөздің үстіне тышқаныңызды апарғанда, әріптер мен фонның өзгеретінін білдіретін «префикс» сөзі пайда болады.

Псевдостерлік мазмұнның нұсқалары

Егер сіз жалған элемент сипаттарын көрсетпесеңіз, олар негізгі элемент - scElement сияқты бірдей қалады. Сіз url-ні көрсете аласыз, содан кейін мазмұн: url ('/ scBox / rm-v / sc-rights.png') сипаты сіз оны үстіне апарған кезде элементтің суретін көрсетеді. «\ 03B1» мазмұны болған жағдайда «alfa » математикалық таңбасы пайда болады , бірақ арнайы таңбаларды қолданыңыз: «& nbsp;», «& lt;», «& laquo;», «& raquo;» Ал басқалары болмауы керек - олар сол сияқты көрінеді.

Ашық мәтін, url (), он алтылық таңбалар тізбегі, белгілер: ашық-цитатамен / жабық-цитатамен немесе ашық-тырнақшасыз / жоқ-жабу-цитатамен және т.б. сияқты көптеген параметрлері бар. Абсолюттік мазмұн позициясын Стиль сипаттары арқылы, бұрын қолданылған CSS, жалған элементті оған қосылған элементтің кез келген жеріне орналастыруға мүмкіндік береді.

Бір уақытта және кейінгі пайдалануды біріктіре аласыз. Сондықтан рәміздерді мазмұнмен CSS-ға орналастыру арқылы әртүрлі эффекттерді алуыңызға болады және түрлі жалған сыныптар мен псевдо-элементтерді біріктіру арқылы JavaScript кодының бір байтын жұмсамай, келушіні таң қалдырасыз.

Псевдо-элементтердің ерекшеліктері

Оларды тағайындау үшін «:» белгісі, сондай-ақ жалған сыныптар үшін пайдаланылады, бірақ CSS3-де жалған элементтердің айырмашылығы әдетте «::» деп белгіленеді. Мұны түсінетін браузерлер екі белгілерді де қабылдайды. Жазбадағы бос орындарға жол берілмейді, жалған сынып және (немесе тек) жалған элемент жазылған жолы бірге жазылады:

ScElement: hover :: before {content: 'prefix'; ...}

ScElement: белсенді: кейін {content: 'suffix'; ...}

Сайтты мазмұннан тыс жұмыс істемей тұрып, CSS-ны ұмытуға болмайды. Стилдер бет мазмұнына қатысты емес. Псевдоқұралдар ерекшелік емес. Олар DOM ағашында жоқ және оларды сайттың маңызды бөлімдерінде пайдалану мүмкін емес - олар мазмұнға қосылмайды.

«:» Және «::» пайдалану мобильді платформалармен және заманауи браузерлермен қамтамасыз етіледі, бірақ ескірген нұсқаларда жұмысын тексеру артық болмайды.

Псевдомердің мазмұны торап мазмұнына кірмейді. Бұл іздеу жүйелерінде көрінбейді. Бұл жағдайды қалай пайдалануға болады нақты жағдайға байланысты, бірақ CSS-ды бұрынғы, сондай-ақ кейін, қарамастан немесе күрделі қолдану мүмкіндігі мазмұн url () болған кезде қызықты. Сайтқа сілтеме ретінде псевдомердің мазмұнын тікелей пайдалану, мысалы, суретті файлды жүктеуге мүмкіндік береді.

Сайттағы мәнер файлдарын өзгерту мүмкіндігі (каскадты стиль кесте файлдары - ерекше емес) псевдо-элементтерді белгілі бір уақытта, алушының әрекеттеріне байланысты алгоритмнің дұрыс жерінде қалыптастыруға және пайдалануға жол бермейді.