CSS-те басу оқиғаларын онсыз өңдеудің жолы бар ма? JavaScript көмегімен. көмегімен әдісті қолдануға болады :мақсат. Бірақ оны пайдалану мүмкін болмаса ше? Басқа әдіс бар.
Демонстрацияны қараңыз. Ол бір жол емес, толығымен CSS-те жасалған JavaScript коды. Ол:active және:hover селекторларының бастапқы қолданылуына негізделген.
Сипаттама
Алдымен сіз тінтуірді басқан кезде көрсетілетін түйме мен блоктарды қамтитын контейнер жасауыңыз керек. Белгілеу құрылымы келесідей болады:
.wrapper-де тінтуір түймесі басылғанша .мазмұнын көрінбейтін етуіміз керек. Мәселені шешу үшін .content сипаты дисплейін орнатыңыз: none . Содан кейін, .wrapper ішінде тінтуір түймесі басылғанда, біз дисплейді қосамыз: .content . Неліктен .wrapper:active .content сипаты дисплейін орнату: блок . Бұл күйде .content тек тінтуір түймесі басылғанда ғана көрінеді. Егер сіз оны шығарсаңыз, .content қайтадан жоғалады. Оны түзету үшін тінтуір курсоры .content біткен кезде элементке дисплей: блок сипаты тағайындалғанына көз жеткізейік. Яғни, .content:hover үшін дисплей: блок сипатын орнаттық. CSS коды келесідей болады:
Мазмұн (дисплей: жоқ; ) .ораушы:белсенді .мазмұн (дисплей: блок; ) .мазмұн:көлік (дисплей: блок; )
Тек «тарақ» қалды сыртқы түріжәне оны нақтырақ етіңіз:
Қаптама (позиция: салыстырмалы; ) .button (фон: сары; биіктік: 20px; ені: 150px; ) .мазмұн (позиция: абсолютті; толтырғыш-жоғарғы: 20px; ) .content li (фон: қызыл; )
Жоғарыдағы кодтағы түйме мәтіні сары фонға ие болады, ал тінтуір түймесін басқан кезде көрсетілетін ақпарат қызыл фонға ие болады.
Құжаттың таңдалған фрагментіне өту үшін адресте # символы жазылады және идентификатордың аты көрсетіледі. Мысалы, мекенжайда http://www.w3.org/TR/css3-selectors/#target-pseudo id төлсипаты target-pseudo мәніне орнатылған элементке ауысу орын алады. Бұл мекенжай жазбасы «мақсатты элемент» деп аталады. :target псевдоклассы мақсатты элементке, басқаша айтқанда, идентификаторға қолданылады. мекенжай жолағыбраузер.
Белгілер
| Сипаттама | Мысал | |
|---|---|---|
| <тип> | Мәннің түрін көрсетеді. | <размер> |
| A&& B | Мәндер көрсетілген тәртіпте шығарылуы керек. | <размер> && <цвет> |
| А | Б | Ұсынылған мәндерден (A немесе B) тек бір мәнді таңдау керек екенін көрсетеді. | қалыпты | шағын қалпақшалар |
| A || Б | Әрбір мән дербес немесе басқалармен бірге кез келген тәртіпте қолданылуы мүмкін. | ені || санау |
| Топтардың құндылықтары. | [ кесу || крест] | |
| * | Нөл немесе одан көп рет қайталаңыз. | [,<время>]* |
| + | Бір немесе бірнеше рет қайталаңыз. | <число>+ |
| ? | Көрсетілген түр, сөз немесе топ міндетті емес. | кірістірілген? |
| (A, B) | Кем дегенде A қайталаңыз, бірақ B реттен көп емес. | <радиус>{1,4} |
| # | Үтірмен бөлінген бір немесе бірнеше рет қайталаңыз. | <время># |
Мысал
- 1-әңгіме
- 2-әңгіме
1-әңгіме
Әңгіме қабірді қалай жасау керек болды, олар оны қазып, содан кейін оны жерлей бастады, одан не пайда болды.
2-әңгіме
Асхананың жанында алты саусақты жұмбақ қызғылт іздердің қалай пайда болғаны және бұл неліктен болғаны туралы әңгіме.
Бұл мысалда мақсатты элемент өң түсімен бөлектелген.
Ескерту
3.0 нұсқасына дейінгі Safari-де стиль ережелері пайдаланушы шолғыштағы шарлауды (Артқа және Алға түймелері) пайдаланған кезде қолданылмайды.
Техникалық сипаттама
Әрбір спецификация мақұлдаудың бірнеше сатысынан өтеді.
- Ұсыныс - Техникалық сипаттаманы W3C мақұлдаған және стандарт ретінде ұсынылады.
- Кандидат ұсынысы ( Мүмкін ұсыныс ) - стандартқа жауапты топ оның мақсаттарына сәйкес келетініне қанағаттанса, бірақ стандартты енгізу үшін әзірлеушілер қауымдастығының көмегін қажет етеді.
- Ұсынылған ұсыныс Ұсынылған ұсыныс) - бұл кезеңде құжат түпкілікті бекіту үшін W3C Консультативтік кеңесіне беріледі.
- Жұмыс жобасы - қоғамдастық талқылауы үшін талқыланған және түзетілген жобаның жетілген нұсқасы.
- Редактор жобасы ( Редакциялық жоба) - жоба редакторлары өзгерістер енгізгеннен кейін стандарттың жобалық нұсқасы.
- нобай ( Техникалық сипаттама жобасы) – стандарттың бірінші жобалық нұсқасы.
Браузерлер
Браузер кестесінде келесі белгілер қолданылады.
Pseudo-class:target CSS3-тің тамаша мүмкіндіктерінің бірі болып табылады. Ол URI құжатындағы идентификатор көрсеткен элементке сәйкес келеді.
URI идентификаторында төлсипат мәніне сәйкес идентификатор атауынан кейін «#» таңбасы бар идентификаторқұжаттағы элемент.
Қолдау
Біз CSS3 туралы айтып жатқандықтан, жалған класты IE 6-дан 8-ге дейінгі нұсқалардан басқа барлық заманауи браузерлер қолдайды. Әдеттегі көңілсіздік сізді:target пайдалануды шешуге кедергі болмауы керек. IE9 псевдокласс:target қазірдің өзінде қолдайды.
Қалай қолдануға болады: мақсат?
Бұл псевдо класстың өзіндік болуы мүмкін өзіндік стилі, сондай-ақ псевдосыныптар : меңзерді апарыңыз, :белсендінемесе :фокуссілтемелер үшін. Жоғарыда аталған псевдосыныптармен бірдей :мақсатвеб-сайтпен белгілі бір әрекеттер үшін пайдаланылады. Әсіресе келесідей фрагмент идентификаторын пайдаланған кезде: http://example.com/index.html#lorem-ipsum.
Демонстрация
Демонстрациялық бет қалай және қашан пайдалану керектігінің өте айқын мысалын береді :мақсат. Псевдо класс :мақсатресурсыңызды пайдалану мүмкіндігін жақсарта алады.
HTML белгілеу
Төменде демонстрациядан мысал келтірілген. Бізде 4 сілтеме және бірдей блоктар саны бар. Әр топтың өзіндік бірегей идентификаторы болады.
- 1-блок
- 2-блок
- 3-блок
- 4-блок
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Температураның жоғарылауы, әртүрлі элементтердің әртүрлілігі, неке орци порта магнасы, одан кейінгі aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.
Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Eenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
Pellentesque quis Tortor Vitae elit cursus vulputate және vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Класстың әлеуметтiк әлеуметтiк моменті конубиа ностраға, әр inceptos himenaeos үшін.
Уақытша тыныштық. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut ague euismod porta. Ыңғайлы емес. Nunc ornare adipiscing egestas.
CSS
Келесі CSS коды қажетті әсерге қол жеткізуге мүмкіндік береді, оның көмегімен сәйкес идентификаторы бар блок ерекшеленеді (тіктөртбұрыштың айналасында көлеңке пайда болады).
/* Біраз бос орын қосыңыз */ ul, div (төменгі жиек: 10px; ) /* Әдепкі блок стилі */ div ( толтыру: 10px; жиек: 1px қатты #eaeaea; -moz-border-radius: 5px; шекара- радиус : 5px; ) /* */ div:target сәйкестендіру кезінде сыртқы түрін өзгерту #9c9c9c ; қорап-көлеңке: 0 0 4px #9c9c9c )
Төменде кодтың нәтижесі берілген. Сілтемені бассаңыз, сәйкес блок бөлектеледі және белсенді болады.
Бүгін біз байланысты негізгі функциялар туралы айтатын боламыз псевдо классымен :мақсатжәне оны таза CSS көмегімен таңғажайып әсерлер жасау үшін қалай пайдалануға болатынын, слайд-шоуларды жасауды үйреніңіз css анықтамасыжәне тағы басқалар.
Бұл не: мақсат?
h1 (қаріп: қалың 30px/1,5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: мақсатты (қаріп өлшемі: 50px; мәтінді безендіру: астын сызу; түс: #37aee4; )
Анимация қосайық
Әсерімізді жақсартайық және түсін өзгерту үшін жақсы кішкене ауысу сияқты анимацияны қосамыз. Оның қалай жұмыс істейтінін қараңыз.
h1 (шрифт: қалың 30px/1,5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-өту: түс 0,5 с жеңіл; -moz-өту: түс 0,5 с жеңіл; -o-өту: түс 0,5 s оңай; -ms-өткізу: түсі 0,5с жеңіл;
Мақсатты емес объектіні басқару
Таңдалған тақырыптан кейін келетін абзацтың мәнерлерін өзгерткіміз келеді делік.
Бұл келесі кодты пайдалану арқылы өте оңай. Демонстрацияны қараңыз.
h1: мақсат + p (фон: #f7f7f7; толтыру: 10px; )
CSS көмегімен қарапайым слайдшоуды құру
Әзірлеушілер псевдосыныпты қолданатын тонна қосымшаларды ойлап тапты : мақсат. Бұл псевдоселектор қойындыларды немесе тіпті слайд-шоуларды жасау кезінде пайдалы болуы мүмкін. Соңғысын қалай жүзеге асыруға болатынын көрейік.
Реттелмеген тізім жасайық. Әрбір тізім элементінде үзінді идентификаторын көрсететін тег якоры және сәйкес идентификаторы бар кескін болады.
- Бір
- Екі
- Үш
- Төрт
- Бес
Енді стильдерімізді қосамыз:
* ( маржа: 0px; толтыру: 0px; ) #слайдшоу ( жиегі: 50px авто; орны: салыстырмалы; ені: 400px; ) ul ( тізім стилі: жоқ; ) li ( қалқымалы: солға; толып кету: жасырын; жиегі: 0 20px 0 0; ) li a (түс: #222; мәтіндік безендіру: жоқ; шрифт: 15px/1 Helvetica, sans-serif; -webkit-өту: түс 0,5с жеңіл; -moz-өту: түсті 0,5с жеңіл; -o-өту: түсті 0,5с жеңілдігі; ; -moz-transition: мөлдірлік 1s көшу: бұлыңғырлық 1s жеңілдігі ) li img: мақсатты ( z-индекс: 1; ) li img:not(:target) ( мөлдірлік: 0; )
Алдымен қосайық қалқымалы: солғабіздің тізімдегі барлық элементтер. Біз элементтер үшін абсолютті және салыстырмалы орналасуды қолдандық.
Әрі қарай, орнатамыз z-индекс: -1барлық кескіндер үшін, содан кейін орнатыңыз z-индекс: 1мақсатты суреттер үшін. Бұл тізім элементін басқан кезде кескіннің өзгеруіне әкеледі. Өтуді біркелкі ету үшін біз басқа кескіндер үшін мөлдірлік мәнін орнатамыз 0 .
Таза CSS слайдшоу көрсетілімін қараңыз.
Кросс-браузер үйлесімділігі
Псевдокласс : мақсатүшінші деңгейлі CSS селекторы, яғни оған (сіз ешқашан болжай алмайсыз) ... IE қоспағанда барлық дерлік браузерде қолдау көрсетіледі. Жақсы ескі есек тек 9 және 10 нұсқаларында CSS3 селекторларын қолдайды.
IE-де CSS3 селекторларын көрсетуге қатысты кез келген басқа мәселе сияқты, бұл Selectivizr көмегімен өте оңай түзету.
Осы плагин мен кейбір вуду сиқырының арқасында қажетті CSS3 селекторларына тіпті IE6-да қолдау көрсетіледі.
Қорытынды
Псевдо-сыныптарды пайдалану бастапқыда күрделі болып көрінуі мүмкін, бірақ сіз олардың жұмысыңызды қалай жеңілдететінін және сайтыңызды қызықты ететінін түсінесіз. Псевдоселектор
:мақсат- бұған жақсы мысал. Тек стильдермен шектен шықпағаныңызға көз жеткізіңіз.
Тағы бір қызықты пайдалану жағдайы :мақсат
target="_blank" тег жасау үшін пайдаланылады сілтемені жаңа терезеде ашты. Бірақ мақсатты HTML дегеніміз не? Неліктен ол бос болуы керек? Ал ең қызығы неліктен басында астын сызу бар? Осы кодты толығырақ қарастырып, оның не істейтінін түсінейік.
мақсатты атрибут
Мақсатты мәндер
Мақсатты атрибут үшін ең көп таралған төрт мән:
_өзім
Бұл тег HTML-де пайдаланылған жағдайда ғана орын алуы мүмкін
_бос
Сілтемені жаңа қойындыда немесе терезеде ашады. Бұл пайдаланушының жергілікті параметрлерімен анықталады, көптеген браузерлерде бұл жаңа қойынды беті. Бұл мәнді пайдалану арқылы қалқымалы жарнама бірліктерін енгізуге болады деп ойлауыңыз мүмкін. Бірақ бұл дұрыс емес. Көбінесе бұл үшін HTML емес, JavaScript пайдаланылады.
Бұл мақсатты HTML төлсипатының мәні сыртқы сайттарға немесе PDF файлдарына сілтемелерді жаңа қойындыда ашу үшін жақсы пайдаланылады. Осының арқасында осы қойындыларды жапқаннан кейін пайдаланушы сіздің сайтыңызға қайтарылады. Бірақ мұны теріс пайдаланбау керек, өйткені әрбір сілтеме жаңа қойындыда ашылатын болса, пайдаланушыға шарлау өте қиын болады.
_ата-ана
_parent мәні сіз тұрған кадрдың негізгі жақтауындағы сілтемені ашады. Бұл танымал мән емес, өйткені фреймдерді жасауға арналған тегтер