CSS2 ба CSS3 хоорондох ялгаа

CSS3 дэх томоохон өөрчлөлтүүдийг ойлгох

CSS2 ба CSS3 хоорондын хамгийн том ялгаа нь CSS3 модул гэж нэрлэгддэг өөр өөр хэсгүүдэд хуваагдсан байдаг. Эдгээр модулиуд нь W3C-ээр дамжуулж, санал болгож буй үйл явцын янз бүрийн шатанд явж байна. Энэ процесс нь төрөл бүрийн үйлдвэрлэгчдийн браузер дээр CSS3 төрөл бүрийн хэсгүүдийг хүлээн зөвшөөрч, хэрэгжүүлэхэд илүү хялбар болсон.

Хэрэв та энэ үйл явцыг CSS2-т тохиолдсон зүйл дээр бүх зүйл бүх баримтыг багтаасан Cascading Style Sheets-ийн бүх мэдээллийг багтаасан бол та жижиг, хувь хүний ​​хэсгүүдийг зөвлөмжийг зөрчих давуу талыг харж эхэлнэ. Модулиуд тус бүрийг тусад нь хийж байгаа учраас CSS3 модулиудын хувьд илүү өргөн хүрээтэй браузер дэмждэг.

Шинэ болон өөрчлөгдсөн тодорхойлолтуудын нэгэн адил та өөрийн CSS3 хуудсыг боломжтой байдлаар олон хөтөч, үйлдлийн системийг сайтар шалгаж үзээрэй. Зорилго нь вэб хөтөч болгонд яг ижилхэн вэб хуудас бүтээх биш харин CSS3 стилийг оролцуулаад ямар ч загварыг ашигладаг, тэдгээрийг дэмждэг хөтчүүдэд сайн харагдуулж, хуучин хөтөчүүдэд зориулж арай зөөлөн аргаар эргэж харахыг баталгаажуулах явдал юм. болохгүй.

Шинэ CSS3 сонгогчид

CSS3 нь CSS дүрмүүдийг шинэ CSS сонгогчтой, шинэ комбинатор, зарим шинэ псевдо-элементүүдээр бичиж болох шинэ аргыг санал болгодог.

Шинэ гурван шинж чанарын сонгон шалгаруулагч:

• Аттрибут элемент [foo ^ = "bar" элементтэй таарч эхэлдэг) элемент нь "бар" -аар эхэлсэн foo гэгддэг шинж чанарыг агуулдаг.
• Аттрибут төгсгөлтэй яг элементтэй таарч байна [foo $ = "bar"] элемент нь foo гэгддэг шинж чанарыг "бар" төгсгөнө.
• Аттрибут нь тохирох элементийг агуулдаг [foo * = "bar"] элемент нь "bar" гэсэн мөр агуулсан foo гэгддэг шинж чанарыг агуулдаг.

16 шинэ псевдо класс:

• : root
  • Баримтын эх элемент. HTML-д энэ нь үргэлж байдаг.
• : nth-child (n)
  • Үүнийг яг тохирсон хүүхдийн элементүүд эсвэл хувьсах хэмжигдэхүүнүүдийг сольж ашиглахын тулд ашигла.
• : nth-last-child (n)
  • Хамгийн сүүлчийн хүүхдийн тоог тоолж буй хүүхдийн элементүүдийг хооронд нь харьцуулах.
• : nth-of-type (n)
  • Адил элементийн элементүүдийг баримт бичгийн модны өмнөхтэй ижил нэрээр тааруулна.
• : nth-last-of-type (n)
  • Ахлах элементүүдийг доод талаас нь тоолох ижил нэртэй таар.
• : сүүлчийн хүүхэд
  • Эцэг эхийн сүүлийн хүүхдийн элементийг тааруул.
• : эхний төрөл
  • Энэ төрлийн ах дүүгийн анхны элементийг харьцуул.
• : сүүлчийн төрлөөр
  • Ийм төрлийн дүүгийн сүүлчийн элементийг харьцуул.
• :зөвхөн хүүхэд
  • Эцэг эхийнх нь цорын ганц хүүхэд гэж үз.
• : зөвхөн төрөл
  • Түүний төрөлтийн зөвхөн нэг элементийг тааруулна.
• : хоосон
  • Хүүхэдгүй элементийг (текст зангилааг оруулаад) таар.
• : зорилтот
  • URI-ийн зааж байгаа зорилтыг элементтэй тааруулаарай.
• : идэвхжүүлсэн
  • Үүнийг идэвхжүүлсэн үед элементтэй тааруулна.
• : тахир дутуу
  • Энэ элементийг идэвхгүй болгох үед тааруулна.
• : шалгаж байна
  • Элементийг шалгасны дараа (радио товчлуур эсвэл дарах).

• : биш (s)
  • Элемент нь энгийн сонгогчтой тохирохгүй үед таарах.

Нэг шинэ хослол:

• elementA ~ elementB
  • ElementA нь elementA-ийн дараа хаа нэгтээ яваад байх үед таарч байх ёстой.

Шинэ шинж чанарууд

CSS3 нь шинэ CSS шинж чанаруудыг нэвтрүүлсэн. Эдгээр шинж чанаруудын ихэнх нь Photoshop шиг график програмаар илүүтэйгээр харьцах харагдах загварыг бий болгох явдал байв. Эдгээрийн зарим нь, хилийн радиус эсвэл хайрцаг-сүүдэр шиг CSS3 бол танилцуулгаас хойш байсан. Бусад, уянboxbox, CSS код зэрэг нь шинэ хэв маягийг CSS3 нэмэлтүүд гэж үздэг.

CSS3-д хайрцагны загвар өөрчлөгдөөгүй байна. Гэхдээ танай хайрцагны дэвсгэр, дэвсгэрийг хэвэнд нь оруулахад туслах шинэ стилийн шинж чанарууд бий.

Олон янзын дэвсгэрлэл Би mages

Зургийн суурь, арын байрлал, суурь-давталтын стилийг ашиглан олон тооны арын зургуудыг хайрцган дээр байрлуулж, нэг нэгэндээ байрлуулж болно. Эхнийх нь хэрэглэгчдэд хамгийн ойрхон давхарга юм. Хэрвээ өнгөт дэвсгэр байвал бүх зургийн давхаргын доор зурагдана.

New Background Style Properties

CSS3 дээр зарим шинэ суурь шинж чанарууд байдаг.

• арын клип
  • Энэ өмч нь арын зургийг хэрхэн хуулж авахыг тодорхойлдог. Анхдагч нь хилийн хайрцаг байдаг боловч энэ нь боодлын хайрцаг эсвэл контентын хайрцганд өөрчлөгдөж болно.
• гарал үүсэл
  • Энэ өмч нь дэвсгэр хайрцаг, хилийн хайрцаг, контентийн хайрцагт байрлах эсэх нь тодорхойлогдоно.
• арын хэмжээ
  • Энэ шинж чанар нь танд арын дэвсгэрийн хэмжээг харуулах боломжийг олгодог. Энэ нь хуудсыг тааруулахын тулд жижиг зургуудыг сунгана.

Үүсгэсэн Үндсэн Style Properties-д өөрчлөлтүүд

Одоо байгаа үндсэн загварын шинж чанаруудад цөөн өөрчлөлт орсон байна:

• background-repeat
  • Энэ өмчний хувьд хоёр шинэ утга байна: орон зай, дугуй. Орон зай нь пааландсан дүрсийг хайрцагны дотор тэгш өнцөгт хэлбэрээр хадгалдаггүй. Дугуй нь арын зургийг дүүргэж, хайрцгийг бүхэлд нь хэд хэдэн удаа шалгана.
• суурь-хавсралт
  • "Элемент" шинэ утгыг нэмсэнээр элемент нь элементийн агуулгаараа гүйлгэх мөртэй байх үед элемент нээгдэх болно.
• суурь
  • Товчийг түргэн бичсэн байдал нь хэмжээ, гарлын шинж чанарт нэмдэг.

CSS3 Border Properties

CSS3 хил дээр бидний ашигладаг стиль (хатуу, давхар, тасархай, гэх мэт) эсвэл зураг байж болно. Plus, CSS3 булангийн булан үүсгэх чадварыг бий болгодог. Хилийн зургууд сонирхолтой байдаг учир та бүх дөрвөн хилийн зургийг үүсгэж, тэр зургийг таны хил дээр хэрхэн хэрэглэхийг зааж өгнө.

Шинэ Хилийн Style Properties

CSS3 дэх хилийн зарим шинж чанарууд байдаг:

• хилийн радиус
  • хилийн баруун радиус , хилийн ёроолтой баруун радиус , хилийн ёроолоос зүүн радиус , хилийн дээд зүүн радиус
  • Эдгээр шинж чанарууд нь таны хил дээр бөөрөнхий булан үүсгэх боломжийг олгодог.
• border-image-source
  • Зургийн эх файлыг аль хэдийн тодорхойлогдсон хилийн хэв маягийн оронд ашиглахыг зааж өгнө.
• border-image-slice
  • Хилийн зургийн ирмэгээс дотогшоо эргэлтийг төлөөлнө
• border-image-width
  • Таны хилийн зургийн өргөний хэмжээг тодорхойлно.
• border-image-эхлэл
  • Хилийн боомтын талбай нь хилийн хайрцагт байрлах хэмжээнээс хэтрэв.
• border-image-stretch
  • Хилийн зурган дээрх талууд болон дунд хэсгүүдийн хавтанг хэрхэн яаж байрлуулж, хэмжинэ.
• хилийн зураг
  • Хил дамнасан дүрсний бүх эд хөрөнгийг түрээсийн өмч гэнэ.

Нэмэлт CSS3 Хил, араг ястай холбоотой шинж чанарууд

Хуудас завсарлагаар хайрцаг эвдэрч, шугамын завсарлагааны мөрийг (шугамын элементүүдийн хувьд) box-decoration-break property нь шинэ хайрцгийг яаж хил, далавчинд ороож байгааг тодорхойлдог. Оршил нь энэ өмчийг ашиглан олон эвдэрсэн хайрцагуудын хооронд хуваагдаж болно.

Бас элементийг хайрцагны сүүдэрт нэмэхийн тулд ашиглаж болох хайрцаг-сүүдэр өмч байдаг.

CSS3-тэй бол, та хүснэгтүүд болон хүнд төвөгтэй div tag бүтэцгүй олон баганатай Web хуудсыг хялбархан тохируулж болно. Та браузерт хэд хэдэн багана биеийн элемент байх ёстой, хэр өргөн байх ёстойг зааж өгнө. Дээр нь та хил (дүрмүүд), баганын өндрийг холбосон дэвсгэр өнгөнүүдийг нэмж болно, таны текст автоматаар бүх багануудаар дамжин урсах болно.

CSS3 багана - Багананы өргөн ба өргөнийг тодорхойл

Таны баганын тоо, өргөнийг тодорхойлох гурван боломж бий:

• багана-өргөн
  • Таны баганын өргөнийг тодорхойлно. Хөтөч нь текстийг өргөнөөр нь баганаар дүүргэх болно.
• багана-тоолох
  • Хуудасны баганын тоог тодорхойлно. Браузер нь зай талбайд таарах багануудыг үүсгэх болно, гэхдээ зөвхөн таны тогтоосон тоо.
• багана
  • Түргэн хугацааны түр зуурын шинж чанарууд нь аль эсвэл өргөн эсвэл тооны (эсвэл хоёуланг нь тодорхойлж болох боловч энэ нь ховор).

CSS3 багана ба дүрэм журам

Ачаалал, дүрмүүд нь ижил төстэй олон баганын баганын хооронд байрладаг. Цоорсон зай багануудыг тусгаарлах боловч дүрэм ямар ч зай эзэлдэггүй. Хэрэв баганын дүрэм нь энэ зайгаас илүү өргөн байвал, зэргэлдээ баганууд давхацдаг. баганын дүрэм, цоорхойнуудын хувьд таван шинэ шинж чанар байна:

• багана-ялгаа
  • Баганын хоорондох зөрүүний өргөнийг тодорхойлно.
• багана-дүрэм-өнгө
  • Дүрмийн өнгөийг тодорхойлно.
• багана-дүрэм-style
  • Дүрмийн хэв маягийг тодорхойлно (хатуу, тасархай, давхар, гэх мэт).
• багана-дүрмийн өргөн
  • Дүрмийн өргөнийг тодорхойлно.
• багана-дүрэм
  • Бүх гурван багана дүрмийн шинж чанарыг тодорхойлсон товчлох эд хөрөнгө.

CSS3 баганын завсарлага, баганыг багасгах, дүүргэх багана

Баганын завсарлага нь пайзны агуулгын эвдрэлийг тодорхойлоход хэрэглэгддэг ижил CSS2 сонголтуудыг ашигладаг, гэхдээ гурван шинэ шинж чанаруудтай: break-before , break- in ба break-inside .

Хүснэгтийн нэгэн адил элементийг column-span property дээр баганад оруулах боломжтой. Энэ нь олон баганатай сонин шиг сонины гарчгийг бий болгодог.

Багана дүүргэгч нь багананд хэр их агуулга байхыг шийддэг. Тэнцвэртэй багана баганууд дахь ижил хэмжээний агуулгыг тавихыг хичээдэг бол автоматаар агуулгаараа баганыг бүрэн дүүргэх хүртэл дараа нь дараагийнх руу явдаг.

CSS3-ийн илүү онцлогууд Арен & # 39; t CSS2-д багтсан

CSS2-д CSS3-д байхгүй олон нэмэлт боломжууд байгаа бөгөөд үүнд:

• CSS Загвар модулийн layout ба CSS3 Зүслэг байрлалын модуль : CSS бүхий тор үүсгэх.
• CSS3 Текстийн модуль : Дүрслэлийн текст болон бүр CSS-тэй сүүдэр үүсгэх боломжтой.
• CSS3 Өнгөний модуль : Одоо харагдахгүй байна.
• Хайрцгийн загварт оруулсан өөрчлөлт : IE-ийн шошго шиг ажилладаг marquee property.
• CSS3 Хэрэглэгчийн интерфэйсийн модул : Шинэ курсор, үйлдэл, шаардлагатай талбарууд, элемент бүрийг өөрчлөх зэрэг танд өгөх.
• Media Queries : Медиа хайлт нь загварын хуудас хэрхэн ашиглах талаар илүү уян хатан болгох боломжийг олгодог. Жишээ нь та 20Грамаас том харагдахportport бүхий гар утасны төхөөрөмжүүдийн загварын хуудсыг тодорхойлж болно.
• CSS3 Ruby модуль : Баримт бичгүүдийг тэмдэглэхийн тулд текст бадмаараг хэрэглэдэг хэлийг дэмждэг.
• CSS3 Paged Media модуль : Paged media (цаас, ил тод, гэх мэт) илүү их дэмжлэг авах боломжтой.
• Үүсгэсэн агуулга : L нь програмчлалын дагуу, ялангуяа педип медиад зориулж толгой , хөл, тэмдэглэгээ, бусад агуулгуудыг ажиллуулдаг.
• CSS3 Илэрхийллийн модуль : Дуугийн CSS-ийн өөрчлөлт.