CSS: хүснэгт дизайн. бүртгэлийн жишээ

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

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

хүснэгт хил

CSS хүснэгт хэв маяг загвар нь үргэлж хил (хүрээ) нь тоглолтыг багтана. Бүх анхдагч хүснэгт тойм хүрээ биш юм. Өөрөөр хэлбэл, энэ нь 0 пиксел тэнцүү байна. Гэхдээ энэ нь үл хөдлөх хөрөнгийн хилийн засаж болно.

Та бүхэлд нь ширээн гадна хүрээг зааж өгч болно:

хүснэгт {хилийн: 3px хатуу хар, }

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

-ны TD {хилийн: 3px хатуу хар,}

зузаан, өнгө, та ямар ч зааж өгч болно. эс залгах үед хил хязгаар хоёр дахин биш гэдгийг санаарай.

үг нь хатуу тасралтгүй бүртгэх илэрхийлнэ. Та бусад утгыг зааж өгч болно.

Энэ нь хамгийн түгээмэл, хатуу хүрээ хэрэглэгддэг бөгөөд энэ нь илүү сонирхол татахуйц харагддаг талаар болон сайтын гол агуулга нь анхаарал сарниулж байна.

хилийн үл хөдлөх хөрөнгийн самбар дээр мөн зааж өгч болно. хил зөвхөн зүүн буюу баруун тал нь дээд, доод нь тохируулж болно. Учир нь зарим тохиолдолд энэ нь нэг дор бүхэлд нь ширээн хүрээ нь боломжгүй сонголт биш юм.

хүснэгт {хилийн дээд: 1px хатуу улаан, }

Тэгэхээр та зөвхөн хүснэгтийн орой нь хүрээг тохируулж болно. Үүний нэгэн адил аливаа бусад нам, оронд нь зөвхөн дээд бичих нь: баруун, зүүн буюу доод.

хүснэгт толгой

Хүснэгт толгой хаяг <тайлбар> ашиглан зааж өгч болно. Энэ хаяг нь нарийн тааруулах шинж чанар нь маш их бүртгүүлэх CSS байж болно. Энэ элементүүд таны хүссэн замыг маневр болох юм, учир нь CSS хүснэгт дизайн сайн байдаг.

Энэ нэр нь (жишээ нь "1-р хүснэгтэд" гэх мэт) ном нь стандартын нэгэн адил харагдана.

Та нэр, эд хөрөнгийн тайлбар талын (дээд ба доод) байрлалыг зааж өгч болно. зүүн нийцүүлэх буюу баруун өмчийн текст уялдуулах тодорхойлогдоно.

суурь хүснэгт

хүснэгтийн Оршил ямар ч өнгө, хэв маяг нь байж болно. Өнгө нь үл хөдлөх хөрөнгийн суурь өнгө өгдөг. үг хэлэх нь ашиглах бүрэн нийцсэн шинж нэр. Энэ нь олон удаа хадгалах дэмжлэг үзүүлдэг.

өнгө нь нэр, янз бүрийн кодчилолын гэж зааж өгч болно. Үүнээс гадна, та дараах зааж өгч болно:

• Ил тод, - Ил тод.
• Өвлөн - өнгө эцэг эх элементийн адил юм.
• Эхний - анхдагч байдаг.

ил тод байдал нь Сонголт нь CSS файлд текстийн бүх ширээ нэг өнгөөр хийсэн тэдгээр тохиолдолд хэрэглэж болно, гэхдээ энэ тохиолдолд ямар ч шаардлага байхгүй.

Үүнээс гадна, суурь дүрс байж болох юм. загварын заасан суурь, зураг эд хөрөнгийн хийх, хэрэгтэй. зам нь иймэрхүү байна:

URL ( "URL")

файлд зам харьцангуй буюу туйлын аль нэг байж болно.

Илүү төвөгтэй дүүргэлтийн нь налуу хийж болно:

• шугаман-градиент ();
• шууны-градиент ();
• давтан шугаман-градиент () болон давтан-шууны-градиент () - градиент давтан хэлэв.

суурь эсийн

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

ээлжлэн гадна, та тухайн баганад эсвэл эгнээ тоог зааж өгч болно. Энэ мэт жишээ нь:

• TR: nth-хүүхэд (тэр ч байтугай) {...} - Сарнилттай зааж өгөх хэрэгтэй;
• TR: nth-хүүхэд (1) {...} - тодорхой нэг мөр шинж заалт;
• TD: nth-хүүхэд (тэр ч байтугай) {...} - цувааг ээлжлэн тухай заалт;
• TD: nth-хүүхэд (1) {...} - Тухайн баганын шинж илрэл.

дараалал, тоо зааж өгч болно гадна - Эхний (TD: Эхний хүүхдийн), эсвэл хамгийн сүүлд (TD: Сүүлийн хүүхдийн).

эсийн хоорондох ялгаа

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

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

хилийн уналт: сүйрэл

Гэхдээ энэ нь бас зай, эсрэгээр нэмэгдсэн ёстой гэж тохиолддог байна. Түүнээс гадна, цоорхойг хэмжээ багана хооронд шугамын хооронд зааж өгч болно. утга нь (оронд нурж) болохыг харуулж байна:

хилийн уналт: тусад нь

Гэхдээ ийм арга хэмжээ нь эсийг салгаж шаардлагатай юм гэдгийг харуулж байна. энэ нь тэдний эзлэх хувь байсан учраас нэмэлт хөрөнгийг заасан:

хилийн зай: 20px.

Та мөр ба баганын хооронд өөр өөр зайг зааж хүсэж байгаа бол, энэ нь хоёр зүйлийг заана:

хилийн зай: 10px20px.

хөтчүүд ялгаа

CSS-д загвар хүснэгт браузер дээр хамааран өөр өөр харагдаж болно гэдгийг санаарай. Ялангуяа муу CSS-д шинэчлэл дэмжиж байна гэж, хуучин хувилбаруудтай жишээ юм.

Дээрх тоон утгууд нь хүрээ зузаантай жишээ юм.

Энэ жишээн дээр, тогтмолууд нь хүрээ зузаан нь.

хилийн хэв маяг нь мөн ихээхэн ялгаатай байна.

Тиймээс хөгжлийн үргэлж өөр өөр хөтчүүд нь үр дүнг үзнэ үү.

CSS-д загвар хүснэгт хөтөч төрлийг шалгах нь зүйтэй. Ялангуяа ашиглаж том асуудал Internet Explorer-ийн хуучин хувилбарууд нь хэрэглэгчдэд байх.

Маш дэвшилтэт хөгжүүлэгчид, шал өөр CSS файлыг холбох браузер дээр хамаарч болно. Харин хэн нэгэн, эсвэл бүр чек зарим нэг тодорхой хэв маягийг (анги) болгодог.

Ихэнх асуудал сүүдэр үүсдэг.

CSS: Хүснэгт Format жишээ

Бүртгэл маш ялгаатай байж болно. Энэ нь бүх л газар болон түүний загвар хамаарна. Бүх нэгтгэж, үүсгэсэн байвал өнгө байх ёстой. Мөн энэ нь маш их үүрэг, амт хөгжүүлэгч болгодог. гоо сайхны мэдрэмж нь бүгд өөр өөр байдаг.

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

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

ирмэг бөөрөнхий хийж болно. Энэ бол үнэхээр гоё харагдаж байна.

дүгнэлт

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

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

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