CSS өбөлгөлөрү ачыктыгы. CSS менен ачык-айкын маалымат же текст

CSS3 желе дизайнерлердин пайда болуп, ар кандай жолдор менен иш жөнөкөй жана түшүнүктүү болуп калды: өткөндөн кийин, сен азыр ийкемдүү бир нерсеге өзгөчөлөштүрүү, аз көп JavaScript уланта берет. Сиз алкагында ачык-айкындуулугун өзгөртүш керек деп болсун - CSS дароо бир нече ыкмаларды сунуш кылат.

белгилердин жыйындысы менен аныкталат Негизги (арткы сүрөттү, маалымат-абалы , маалымат-өлчөмү, маалымат-кайра, маалымат-тиркеме, маалымат-тегине, маалымат-клип, маалымат-түс), сапаты боюнча өзүнчө өткөрүлүп айкалыштырылышы мүмкүн болгон ар бир өбөлгөлөрү. Келгиле, майда-чүйдөсүнө чейин алардын ар бирин карап чыгалы.

арткы түсүн Атрибут

CSS-жылы кошумча түсү бир болт кодду колдонуп, түстүү аты же RGB-материалдар: бир нече жол менен белгилениши мүмкүн. CSS3 ал ордуна RGBA менен RGB-эсепке алуу мүмкүнчүлүгү пайдалануу менен мүмкүн болуп калды.

Түстүү коду тордолгон кийин менчик жазылган: өбөлгөлөрү-түсү: # FFDAB9. Бул кире каармандар эле түгөй болсо, коду, адатта, бир аз кесип болуп саналат: # ccff00 # cf0 деп жазылган болот:

орган {маалымат-түсү: # cf0 ;}.

аты-жөнү, атүгүл экзотикалык түстүү болуп саналат. Мисалы, сиз NavajoWhite колдоно аласыз-стандартты, кызыл жана ак кошумча (#FFDEAD) же Honeydew2 (# E0EEE0):

орган {маалымат-түсү: кочкул кызыл; }.

акыркы орнотуусун CSS арткы түсүн эле эмес, бир гана ачык-айкын эмес, тактоо RGB же RGBA материалдар берет, ал эми 9 караганда ыкмасы гана IE котормолордо улуу иштейт. Башка серепчилер айкындуулук менен кадимки нускасын таанышат. W3C стандарттарына ылайык, ал дагы, анын ордуна көп адаттагыдай RGB-жылдын RGBA деген атоону колдонуу туура болот.

RGBA 0 алкагында жана тунуктугун тартып коёт акыркы балл (ачык-айкын) 1 га чейин (ачык эмес).

кээ бир өзгөчө мааниси бар. Арткы түс HSL жана HSLA колдонуу белгилениши мүмкүн. Эки CSS3 кошулду, ошондуктан IE айы 9 же андан жогору тарабынан колдоого алынбайт. Жактан бирдей RGB же RGBA гана ар кандай түрдө: Hue (көлөкө - түсү Айлануучу наркы градус берилет), Saturate (каныктыруу - пайыздарда түс сыйымдуулугу, 0 100), ашына (ашына - жарыктык, ушундай аталаган параметр тойгузам бааланат ).

маалымат-сүрөт Атрибут

ачык-айкын алкагында көпчүлүк кайчылаш-браузер версия - бул сүрөттөлүштүн пайдалануу болуп эсептелет. CSS3, сиз да көп сүрөттөрдү коюуга болот, бул үтүр аркылуу жасалат. мисалы:

{Маалымат-дене сүрөтү: нускага (bg1.png), нускага (bg2.png)}.

да IE8 колдоо Бул жолу. жайлаштыруунун колдонулган резина алкагында бир нече сүрөттөрдү. Маанилүүсү, колдонуучулар гана сүрөт жүктөп тургандай, бир сүрөттөлүштү пайдалануу жана CSS-жылы негизги түсү үчүн унутпа.

маалымат-абалын аныктоо

Сиз маалымат блогун сүрөттү колдоно турган болсо, CSS экрандагы каалаган сүрөттү жайгаштыруу үчүн мүмкүнчүлүк берет. Алыдын ала, сүрөттөлүш жогорку сол бурчунда жайгашкан. Attribute оозеки көрсөтмөлөрдү (жогорку, ал эми ылдый жагында, сол, оң), сандык (кызыгуу, пикселди жана башка бирдик) кетет. Мындай учурларда сиз, туурасынан жана тигинен эки баалуулуктарын, көрсөтүлүүгө тийиш:

орган {маалымат-орду: оң борбору ;} - бул, мисалы, үлгү беттин оң жагында, ошондой эле сүрөт алыстан жогору жана төмөн жайгашкан кылынат.

маалымат-өлчөмүн аныктоо

Кээде CSS билим сунуп же анын өлчөмүн азайтуу үчүн зарыл. Бул үчүн, атрибуттуу өбөлгөлөрү-өлчөмүн, ошондой эле арткы пиксел же пайыздарда белгилениши мүмкүн өлчөмүн жана башка ар кандай бөлүктөрүн пайдалануу.

бул сыпаты менен, кээ бир маселелер бар: браузер жазам мурунку котормолордо алкагында туура дисплей колдонуу үчүн. Албетте, учурдагы версия толугу менен бул сыпатын колдойт жана өзгөчө касиеттери болгон муктаждык көздөн кайым болду.

маалымат-тиркемени Атрибут

Бул сыпат-өйдө, ал эми негизги сүрөттөрү жүрүм-турумун аныктайт. Ошондуктан, ал (мурастагыла ичинде эмес, ушул макалада талкууланган сыпаттардан үчүн) 3 баалуулуктар болушу мүмкүн:

• туруктуу - белгиленген алкагында сүрөт кабыл алат;
• жылдырып - элементтердин калган менен өбөлгөлөрү түрмөктөрүн;
• жергиликтүү - алкагында сүрөт Жылган мазмун бар болсо, сыдырылышы жатат. алкагынын мазмунун чектелбейт Негизги белгиленет.

пайдалануунун мисалы:

орган {маалымат-тиркеме белгиленген}.

Учурда, Firefox акыркы мүлк (жергиликтүү) колдобойт.

маалымат-чыгышын аныктоо

Бул сыпат ханан элементи үчүн жооптуу болуп саналат. Эрте серепчилер жазам пайдаланууну талап кылат. менчик үч параметрлер бар:

• кадрын дыгын эске алуу менен толтуруу кутуча, жээк үлгүсүнө салыштырмалуу жайгашкан;
• чек-ара-куту касиеттери мурдагы деп чек айырмаланган үлгүсүн толугу менен же жарым-жартылай болушу мүмкүн;
• Контент-талаа ханан сүрөтү анын мазмунун pryavyazyvaya.

Эгер сизде бир нече баалуулуктарын көрсөтүү, анда браузерлер өз жолу менен жооп берет: Firefox жана Opera биринчи жолду көрөбүз.

маалымат кайталоону Атрибут

эреже катары, чөйрө көрсөтүлгөн болсо, анда ал туурасынан же тигинен кайталап керек. Бул үчүн жана бар атрибуттуу өбөлгөлөрү-кайталанып колдонулат. Ошентип, бөгөттөөлөр өбөлгөлөрү, мындай мүлктү бар CSS нече көрсөткүчтөрүнүн бири болушу мүмкүн:

• жок-кайталоо - сүрөттөлүш бир нускасы бир беттеги көрүнөт;
• кайталоо - өбөлгөлөрү Х жана Ү кайталанса;
• кайталап-X - гана туурасынан;
• кайталап-ж - тигинен гана;
• Мейкиндик - өбөлгөлөрү кайталанат, бирок космос сүрөттөр менен толтуруу мүмкүн эмес болсо, анда бош көрүнөт;
• Тегерек - сүрөт, бүт сүрөттөрүн, бүт аймакты толтуруп жок болсо, айтылып жатат.

касиеттер үлгүсү:

орган {маалымат-кайра: Өкмөткө кайталап кайталап} - окшош маалымат-кайра: ж-кайталап.

үтүр менен бөлүнүп параметрлерди, тизмесине жылы CSS3 нече Сүрөттөрдү баалуулуктарды белгилениши мүмкүн.

маалымат-клип Атрибут

Бул сыпат чек караштуу алкагында иш-аракетин (мис, чекиттүү алкагында учурда) аныктайт:

• толтуруу менен кутуча - блогунун ички көрсөтүлгөн маалымат;
• чек-ара-талаа - сүрөт алкагында келет;
• Контент-талаа - алкагында сүрөт гана мазмун ичинде пайда болот.

пайдалануунун мисалы:

орган {маалымат-клип: мазмунга кутуча;}.

Көлөкө жана Safari Сизде байлм талап кылат.

Чиелениши касиеттери жана чыпкасы

тунук касиетин сен тек-айкындуулугун коюуга мүмкүндүк берет - CSS мүлк бардык эле браузерлерге менен иш алып барат. Наркы 0,0 пайыздан 1,0 чейинки чекте белгиленет. Мындай учурда, сиз CSS алкагында ачык-айкындуулугун орното алат ордуна 0,3 жок, бүтүн балл .3 жазуу жетиштүү болот:

сектордун {маалымат-сүрөт: нускага ( img.png); тунуктугу: 3;}.

өбөлгөлөрү тунуктугун орнотуу үчүн, CSS да тогузунчу айы төмөн IE ылайыктуу болуп саналат, чыпкасы атрибутун колдонобуз:

сектордун {маалымат-сүрөт: нускага ( img.png); элеги: Alpha (тунуктугу = 30)}.

Бул учурда, тунук балл тунуктугу 0 жана 100. Эскертүү ортосунда жайгашкан RGBA мурас аркылуу ар кандай ачыктык орнотууларды аныктоо: тунуктугун аркылуу так гана эмес, маалымат, ал эми ошондой эле бөлүмдүн ичиндеги бардык элементтер болот.

Ар дайым КМШ серепчилери жана башка бардык өлкөлөр үчүн Колдонуу статистикасын мониторинг жүргүзүү. Бардык DTP ири көйгөй - IE улгайган котормолорунда алар толук канчалык CSS3 пайдаланууга жол бербейт. жайлаштыруунун сиздин браузер эч кандай CSS мүлктү колдойт текшерүү атайын кызматтар менен колдонуу үчүн, эч унутпа. Сиз браузерлердин улуу нускасын орнотуу мүмкүн эмес болсо, анда бир нече браузерлерде сайт ишин онлайн текшерет кызмат таап.