CSS3 негизги өзгөрүүлөрдү түшүнүү
CSS2 ортосунда ири айырма CSS3 CSS3 ар түрдүү бөлүмдөрдө модулдары бөлүнүп кеткен. Бул Ар бир модулдун сунуш жүрүшүндө ар кайсы баскычтарында W3C аркылуу жол жатат. Бул жараян CSS3 ар кандай инструменттер үчүн кабыл алынган жана ар кандай өндүрүүчүлөрдүн браузерде ишке ашырылышы үчүн көп жардам берген.
Сен баары менен бир документ катары берилген CSS2 менен эмне үчүн бул ишти салыштырсак Cascading Style Sheets анын ичинде маалымат, сиз сунушту аз, айрым бөлүктөргө бөлүү артыкчылыктарын көрө башташат. модулдарын ар бири өз-өзүнчө иштеген жатат, анткени, биз CSS3 модулдар боюнча серепчи колдоо алда канча кенен бир мүмкүнчүлүктөрүбүз бар.
ар кандай жаңы жана өзгөртүү өзгөчөлүктөрдү эске алуу менен ошондой эле, мүмкүн болушунча көп серепчилер жана Иштетүү системалары-жылы толугу менен CSS3 беттерин сыноо үчүн шектенбесек болот. максат ар бир браузерде окшош болбоосу барактарды түзүү үчүн эмес, CSS3 кийингенин, анын ичинде сиз колдонгон ар кандай стилдери, аларды колдоо браузерлерде жана алар улгайган браузерлер учун сылык кулап улуу карап камсыз кылуу үчүн унутпа деп жок.
Болумушту CSS3 Selectors
CSS3 жаңы CSS селекторлор, ошондой эле жаңы комбинатор, жана кээ бир жаңы жасалма-элементтери менен CSS эрежелерин жаза аласыз, сиз жаңы жолдор менен бир тутам сунуш кылат.
Үч жаңы атрибуттарын:
- Так элементин дан баштап Атрибут [Күлкү ^ = "бар"] элементи "тилкесинде" менен башталат сыпат деп Капкарашка бар, мисалы,
- Атрибут аякташы дан так элемент [баллада $ = "бар"] элементи "тилкесинде" менен аяктап, бир сыпат деп Капкарашка бар, мисалы,
- Attribute дал элементи [Күлкү * = "бар"] камтылган элемент сап "деген сапты" бар бир сыпат деп Капкарашка бар, мисалы,
16 жаңы жасалма-класстар:
- негизги
- Документтин башкы элемент. HTML бул дайыма болуп саналат.
- :-чи бала (о)
- так бала элементтерин дал келген же тагышты дан алыш үчүн өзгөрмө колдонуу үчүн гана колдонуъуз.
- : чи-акыркы-бала (о)
- акыркы чыгып саноо так бала элементтерин дал келбейт.
- : чи-жылдын түрүнө (о)
- Документти көрүү дарактын ага чейин эле аты менен бир тууганы элементтерди дал келбейт.
- : чи-акыркы-жылдын түрүнө (о)
- Ошол эле аты түбүнө чейин саноо менен бир тууганы элементтерди дал келбейт.
- :акыркы бала
- ата-энесинин акыркы бала элементин дал келбейт.
- : Биринчи-жылдын түрү
- түрүн биринчи тууганы элементин дал келбейт.
- : Өткөн жылдын түрү
- түрүн акыркы бир тууганы элементин дал келбейт.
- гана бала
- анын ата-энесинин гана бала элементин дал келбейт.
- гана-жылдын түрү
- анын түрүнүн бири гана элементи дал келбейт.
- : бош
- жок балдар (анын ичинде текст бездери) бар элементин дал келбейт.
- максаттуу
- сөз Уринин максаттуу бир элементти дал келбейт.
- : иштетилген
- ал иштеп жатат качан элементти дал келбейт.
- : өчүрүлгөн
- ал өчүрүлгөн учурда элементин дал келбейт.
- : текшерилет
- аны текшерип жатат элемент (радио баскычы же баскыч) дал келбейт.
- : жок (с)
- Элемент жөнөкөй дал келбейт жатканда дал тандагыч с.
Бир жаңы комбинатор:
- Elementa ~ elementB
- elementB жерде Elementa артынан жатканда дал зарылдыгы жок, дароо эле.
Болумушту касиеттери
CSS3 да жаңы CSS касиеттери бир катар киргизилген. Бул касиеттери көбү, сыягы, Photoshop сыяктуу сүрөттөр программасы менен тыгыз байланышта турган көрсөтмө образын түзүү керек эле. Алардын кээ бирлери, чек-радиуста же куту-көлөкө сыяктуу, CSS3 болсо киргизүү жылдан бери болуп келатат. flexbox же CSS тармагы сыяктуу эле, дагы эле көп учурда CSS3 толуктоолорду эсептелет акыркы стилдери бар.
CSS3-жылы бокс үлгүсү өзгөргөн жок. Бирок сен кутучалардын өмүр баянын жана чек стилдештирүүнү жардам берет жаңы стили касиеттерин бир ууч бар.
Бир нече Негизги Мен магдар
маалымат-сүрөт, маалымат-абалын жана маалымат-кайра стилдери кутучага биринин үстүнө бири катмардуу болушу үчүн бир нече маалымат сүрөттөрдү көрсөтүүгө болот колдонуу. Биринчи сүрөт артында сырдалган төмөнкү менен, колдонуучуга жакын катмар болуп саналат. арткы түсү бар болсо, анда ар бир сүрөттөлүш катмарынын төмөн сърёттёлъшъ берилген.
Болумушту Негизги Style касиеттери
CSS3 кээ бир жаңы маалымат касиеттери да бар.
- маалымат-клип
- Бул мүлк чөйрө саамай керек кантип аныктайт. демейки чек куту, ал эми жакшы билмейинче, кутусуна же мазмуну кутусуна өзгөртүлүшү мүмкүн.
- маалымат-теги
- Бул мүлк өбөлгөлөрү билмейинче, кутуга, чек ара кутусуна же мазмуну коробкага жерлер болушу керекпи же жокпу аныктайт.
- маалымат-көлөм
- Бул менчик маалымат сүрөттүн өлчөмүн көрсөтүп берет. Бул баракты бата кичинекей сүрөттөрдү сунуп берет.
Бар Негизги Style касиеттери өзгөртүүлөр
Учурдагы негизги стили касиеттери бир нече өзгөртүүлөр да бар:
- маалымат-кайталоо
- Бул мүлк үчүн эки жаңы маанилери бар: мейкиндик жана тегерек. Space мейкиндиктери кесип туруп бир калыпта кутуга ичинде керилип, сүрөтү. Тур, бул мозаика кутучага жолу бир катар үчүн кошумча сүрөт rescales.
- маалымат-тиркеме
- "Жергиликтүү" бир жаңы Наркы жумада элемент жылдыруу тилкеси бар болгондо элементтин мазмун менен жылдырып үчүн кошулат.
- маалымат
- өбөлгөлөрү өтмө менчик өлчөмү жана тегине касиеттери кошумчалайт.
CSS3 чек касиеттери
Жылы CSS3 чек биз көнүп стилдери болушу мүмкүн (катуу, эки эсе көп, үйдү каптаганда, ж.б.), же бир сүрөттөлүш болушу мүмкүн. Plus, CSS3 бурчтары тегеректелген жаратууга жөндөмдүү келет. Чек ара Сүрөттөрдү төрт чек сүрөттү түзөт, анткени, андан кийин кандай чек деп сүрөттү колдонуу үчүн CSS айтып кызыктуу болуп саналат.
Жаңы чек ара Style касиеттери
CSS3 кээ бир жаңы чек ара касиеттери бар:
- чек радиусу
- чек-ара-жогорку-оң-радиусу, чек-ара-ылдыйкы оң-радиусу, чек-ара-төмөнкү-сол-радиусу, чек-ара-жогорку-сол-радиусу
- Бул касиеттери Эгер чек бурчтары тегеректелген түзүүгө мүмкүнчүлүк берет.
- чек-ара-сүрөт-булагы
- мурунтан эле аныкталган ордуна чек стилдеги колдонула турган сүрөтү булагы билэ белгилейт.
- чек-ара-сүрөт-экини
- чек ара сүрөтү кырына чейин ички Offsets чагылдырат
- чек-ара-сүрөт-туурасы
- Чек сүрөттөн туурасы наркын аныктайт.
- чек-ара-сүрөт-бөрк
- чек ара сүрөтү аймак чек кутучага жайылтуу өлчөмүн белгилейт.
- чек-ара-сүрөт-тушка
- чек ара айкелдин тараптар жана ортоңку бөлүктөрү керилип, же каралууда керектигин аныктайт.
- чек-ара-сүрөт
- бардык чек ара сүрөттөлүш өзгөчөлүктөрү үчүн өтмө мүлк.
Чек жана тектеги байланыштуу кошумча CSS3 касиеттери
кутуча бет заарда сынган болсо, сызык тыныгуу үчүн барак үзүлүшүн алдын ала кароо (сызыктай элементтерине) кутуча-жасалгалоо-брейк мүлк жаңы уяларды чек ара жана төшөмө менен ороп, кантип аныктайт. Стол болуп мындай мүлктү пайдаланган бир нече сынган кутучалардын арасында бөлүүгө болот.
Ошондой эле элементтерди кутуча үчүн көлөкө кошуу үчүн колдонсо болот Куту көмүскө мүлк жок.
CSS3 менен, сиз эми жонокой стол же татаал бөлүү теги структураларга бир нече катардан турган сайтты орното аласыз. Сиз жөн гана дене элементи канча мамычаны ээ болушу керек жана кандай гана кенен, алар керек экенин айтып. Плюс сиз чек аралары (эрежелер) кошууга болот, мамычасынын бийиктиги созулган негизги түстөрдү жана текст оордунда бардык катардан аркылуу агат.
CSS3 Columns - мамычаларынын саны жана туурасы аныктоо
Үч жаңы бар касиеттери сиз мамычаларынын санын жана туурасын аныктоого мүмкүндүк берет:
- бардык мамычаларды бөлүп-туурасы
- Сиздин мамычалар болушу керек жазылыкты аныктайт. браузер анда кең катардан орун толтуруу үчүн текстти агат.
- бардык мамычаларды бөлүп-саны
- беттеги мамычаларынын санын аныктайт. браузер анда мейкиндикте бата кенен тилке түзүүгө болот, бирок бир гана номери көрсөтүлөт.
- мамычалар
- Сиз туурасын же санын да аныктай алат өтмө мүлк (же экөө тең, бирок чанда гана мааниге ээ экенин).
CSS3 Тилкенин кемчиликтер жана эрежелери
Кемчиликтер жана эрежелер бир томдук жагдайда эки түркүктүн ортосуна жайгаштырылат. Кемчиликтер мамычаларды бөлүп чыгат, ал эми эрежелер ар кандай орун алган жок. ажырым караганда бир тилке эреже кененирээк болсо, анда чектеш тилке кайчылашып калат. бардык мамычаларды бөлүп эрежелери жана боштуктарын беш жаңы касиеттери бар:
- бардык мамычаларды бөлүп-ажырым
- түркүктүн ортосуна кемчиликтер туурасын аныктайт.
- бардык мамычаларды бөлүп-эреже-түсү
- эреже түсүн аныктайт.
- бардык мамычаларды бөлүп-ченем стили
- бийлик стилин аныктайт (катуу эле ыдырап, эки, ж.б.).
- бардык мамычаларды бөлүп-ченем, туурасы
- эреже туурасын аныктайт.
- бардык мамычаларды бөлүп-эреже
- баары бир учурда үч тилке эреже касиеттерин аныктоо желеги мүлк.
CSS3 Тилкенин Breaks, жайылышы тилкелерде жана МКБ Columns
Бардык мамычаларды бөлүп тыныгуулар Paged мазмунуна тыныгуу аныктоо үчүн пайдаланылат эле CSS2 ыкмаларды колдонуп, ал эми үч жаңы өзгөчөлүктөрү менен, мурда-кийин сындырып-сындырып, ичи-талкалайм.
столдор менен болуп, бардык мамычаларды бөлүп-карыш мүлк менен тилке созулган элементтерин орното аласыз. Бул дагы бир гезитке бир нече бөлүккө созулган баш түзүүгө мүмкүндүк берет.
тилке МКБ көп мазмуну ар бир мамынын ичинде болот кантип чечет. Салмактуу мамычалар унаам эле бардык мамычаларды бөлүп толгон чейин мазмунду агат, анан кийинки бир барат, ал эми ар бир тилкеде мазмуну бирдей өлчөмдө коюуга аракеттенишет.
CSS3 дагы өзгөчөлүктөрү Aren & # 39; CSS2 киргизилди T
анын ичинде, CSS2 бар эмес, CSS3 кошумча мүмкүнчүлүктөрү көп бар:
- CSS Template жайгашуусу модулу жана CSS3 Grid ханан модулу: CSS менен электр тармактарынын түзүү.
- CSS3 Text модулу: схема текстти, ал тургай, CSS менен тамчы-көлөкө түзөт.
- CSS3 Color модулу: Азыр бүдөмүктөнүү менен.
- Бокс үлгүсү өзгөртүүлөр: а ичинде Көрнөк IE тег сыяктуу менчик.
- CSS3 Колдонуучу Interface модулу: Силерге жаңы cursors берүү, иш-аракеттери үчүн жооп, зарыл болгон талаада, ал тургай, элементтерин өзгөртүү .
- Медиа Queries: Медиа суроолор бир стилдер жадыбалы колдонулушу керектигин аныктап жатканда көбүрөөк ийкемдүүлүктү берет. Мисалы, сиз гана 20em көп бир терезесин бар чөнтөк түзмөктөр үчүн бир стилдер жадыбалы аныктоо мүмкүн.
- CSS3 Ruby модулу: документтерди чечмелегенге текстти рубин колдонгон тилдер үчүн колдоо көрсөтөт.
- CSS3 Paged Медиа модулу: тилиндеги маалымат каражаттары үчүн дагы да колдоо үчүн (кагаз, селдерден, ж.б.).
- Жараткан мазмуну: чуркап L аталыштары жана төмөнкү колонтитулдар, шилтемелер, өзгөчө Paged маалымат каражаттары үчүн, программалык түзүлгөн башка мазмун.
- CSS3 Сүйлөө модулу: үндүк CSS өзгөртүүлөр.