CSS: стол дизайн. каттоо мисалдар

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

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

стол чек ара

CSS стол стили долбоор ар дайым бир чек (рамка) менен оюн билдирет. Бардык демейки үстөл контуру кадр эмес. Башкача айтканда, 0 пиксел барабар. Бирок, бул мүлк чек арасына жанаша, туура болот.

Сиз толугу менен үстөлгө сырткы маанай көрсөтүүгө болот:

стол {чек ара: 3px кара катуу; }

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

чи, ТД {чек ара: 3px катуу кара;}

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

сөз катуу үзгүлтүксүз каттоону билдирет. Сиз башка баалуулуктарды көрсөтүүгө болот.

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

чек мүлк бортунда да көрсөтүлүшү мүмкүн. чек арасы гана жогору, ылдый, солго же оң тарабы үчүн белгилениши мүмкүн. Анткени, кээ бир учурларда ал дароо бүт үстөлгө алкагы менен тандоо эмес.

стол {чек-топ: 1px кызыл катуу; }

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

жадыбал сабы

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

Бул наам ( "1-" сыяктуу) китептеринде стандарттын сыяктуу эле пайда болот.

Аталышы жана мүлктүк коштомо-тараптан (жогорку же төмөнкү) жайгашкан жерин көрсөтүүгө болот. Солго тегиздөө же мүлктүк текстти тегиздөө менен аныкталат.

өбөлгөлөрү үстөл

столдун негизги ар кандай түстө же үлгү боло алат. Түсү мүлк арткы түсүн аныктайт. касиеттери сүйлөгөн колдонуу толугу менен ылайык аттары. Ал көп жолу сактоо түзөт.

түстүү аты, жана ар кандай чечмелөө катары көрсөтүлүшү мүмкүн. Мындан тышкары, сиз төмөнкү көрсөтүүгө болот:

• Ачык-айкын - ачык-айкын.
• Мурасташат - түстүү аталык элемент, бул да ошондой болот.
• Баштапкы - демейки.

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

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

нускага (URL)

делосуна жол салыштырмалуу же абсолюттук болушу мүмкүн.

More татаал толтуруу бир жактарда берилиши мүмкүн:

• сызыктуу-градиент ();
• радиалдык-градиент ();
• кайталануучу-линиялык-градиент () жана кайталанган-радиалдык-градиент () - градиент кайталады.

негизги клетка

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

кезек тышкары, сиз бир рубрикада же катар санын көрсөтүүгө болот. Ушул сыяктуу эле, мисалы:

• TR: чи-бала (да) {...} - илинген көрсөтүү;
• TR: чи-бала (1) {...} - бир катар касиеттерин көрсөтүү;
• ТД: чи-бала (да) {...} - тилке кезектешүү белгиси;
• ТД: чи-бала (1) {...} - бир колонна касиетине көрсөтмө.

ырааттуулугу жана номерлери көрсөтүлүшү мүмкүн тышкары - биринчи (TD: биринчи-бала) же акыркы (TD: акыркы-бала).

клеткалардын ортосундагы ажырым

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

Макул, бул өтө жакшы эмес окшойт, аны окууга ыңгайлуу эмес. Users, анткени бул көз карашты кичине болот. Бул кемчиликтерди стол стилде ушундай жазуу менен болот алып салуу:

чек-ара-жыйноо: кулашы

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

чек-ара-жыйноо: өзүнчө

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

чек-ара-чыгарылбаган: 20px.

Сиз катар жана колонналар ортосунда ар кандай аралыкты көрсөтүү бергиси келсе, анда ал эки нерсени көрсөтөт:

чек-ара-чыгарылбаган: 10px20px.

браузерлерде айырмасы

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

Жогоруда санариптик баалуулуктарын кадр жоондукта бир мисалы болуп саналат.

Бул, мисалы, турактуулуктарынын коп жоондугу.

чек ара стилдери да абдан айырмаланат.

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

CSS-жылы дизайн үстөл браузердин тибин текшерүү сунушталган. Өзгөчө колдонулган чоң көйгөй Internet Explorer аксакалдары түрү менен колдонуучуларга керек.

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

Көп кыйынчылыктар көмүскөдөн чыгат.

CSS: Table жазуусу мисалдар

Каттоо кыйла ар түрдүү болот. Ал бүт сайтына жана анын дизайны көз каранды. Бардык айкалышып кеткен түстөр керек. Ошондой эле зор ролу жана даам иштеп жатат. кооздук сезими ар кандай болот.

Биз ар кандай үстөлдөргө кээ бир мисалдарды келтирели. Жогорудагы сүрөттө огунун колдонууну көрсөтөт жана негизги түсү жана чек ара менен ойнойт.

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

Компаниялар тегеректелген жүргүзүлүшү мүмкүн. Бул абдан жакшы көрүнөт.

жыйынтыктоо

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

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

Андан сырткары, кээ бир көрсөткүчтөр бири-бири менен тоскоол кылышы мүмкүн. Мисалы, тактоо зарылдыгы жок арткы түсүн стол, ал эми көрсөтүлгөн түс дал ошол жерде дагы арткы сүрөттү, коюлган болсо.