ЦСС табела - Различита својства са синтаксом, кодовима и излазом

Преглед садржаја:

Anonim

Увод у ЦСС таблирање

Зашто користимо ЦСС, иако можемо да користимо и ХТМЛ табеле, је зато што се у ХТМЛ табели изглед странице на бази табеле често успорава од еквивалентног изгледа заснованог на ЦСС-у; ово се посебно односи на странице са много садржаја. Табеле се не смију користити као помоћна средства за обликовање. А ако у прегледачу направимо ХТМЛ табеле без икаквих стилова или атрибута, биће приказане без икаквих обруба. Стварање табеле са ЦСС-ом може побољшати њен изглед.

ЦСС табеле су прилично једноставне за разумевање и коришћење. То је само питање памћења одговарајућих вриједности својстава приказа ЦСС-а за основне елементе ХТМЛ таблице. Уз помоћ ЦСС-а, способни смо да направимо неколико стилских столова.

Шта је ЦСС табела?

Табела ЦСС (Цасцадинг Стиле Схеетс) описује како положити скуп елемената у редове и ступце. Подразумевани ЦСС примењен на ХТМЛ табели је ЦСС табела.

  • ЦСС је дизајнирао и редизајнирао флексибилност.
  • То значи да ЦСС-ов дизајн омогућава да све своје стилове (тј. Од малих промена до главних правила) поставите на једну локацију.
  • Промјеном правила изгледа поставите у том листу стилова и утјечете на сваку страницу која се на њега односи.
  • Изглед странице на бази ЦСС-а обично ће се појавити брже на екрану, па ће и преузимање бити брже од изгледа заснованог на табели.

Својства ЦСС табеле

Испод су различита својства стилова табеле ЦСС:

1. Рушење граница

Користи се за означавање да ли границе око ћелија табеле треба раздвојити или урушити.

Синтакса: border-collapse: separate|collapse|initial|inherit;

  • Урушавање границе: одвојено: Користи се тако да суседне ћелије имају своје и независне границе које се не деле.

Синтакса

border-collapse: separate;

Задана вредност која је постављена за својство бордер-цоллапс је одвојена. Када се раздвоје, прегледачи стављају размак од пар пиксела између сваке ћелије користећи својство размака граница.

Код

Излаз:

  • Срушавање границе: колапс: сваки пут када поставимо својство границе-колапс тако да се урушава, уклања се простор између ћелија.

Синтакса

border-collapse: collapse;

Код

Излаз:

Чак и ако уклоните овај простор постављањем атрибута ћелије простора за ХТМЛ ознаку на 0, прегледачи и даље приказују двоструке обрубе. То јест, доња граница једне ћелије ће се појавити изнад горње границе ћелије испод, изазивајући удвостручење граничних линија. Постављање својства границе-колапс на урушавање елиминира и простор између ћелија и удвостручавање граница.