Каков наилучший способ переопределить существующее правило таблицы CSS? - PullRequest
Новая
       6

Каков наилучший способ переопределить существующее правило таблицы CSS?

4 голосов
/ 05 октября 2009

Мы используем шаблон для joomla, где создатели определили правило в constant.css 

table   
{
  border-collapse:collapse; 
  border:0px; 
  width:100%;
}

Когда мне нужен собственный стол с пользовательскими параметрами (ширина, граница и т. Д.), Начинается кошмар. Если я использую общие HTML-параметры, они не работают, так как правила CSS более важны (CMIIW). Если я использую style = param, я полагаю, что не могу контролировать, как таблица выглядит для IE до 7 включительно.

Итак, существует ли общий подход к этому или мне просто нужно прокомментировать правило (как я уже сделал).

А также, прав ли я, если скажу, что создатели шаблонов joomla не должны определять такие общие правила, как width: 100% по умолчанию? Я имею в виду, если они не хотят, чтобы пользователи их шаблона жаловались.

Ответы [ 5 ]

3 голосов
/ 12 октября 2009

Метод 1

Поместите класс во все таблицы, которые вы создаете, и создайте селектор типа table.classname, который переопределяет свойства. Поскольку таблицы следует использовать только для табличных данных, добавление имени класса имеет смысл, поскольку проще применять дополнительные стили (цвета, границы) ко всем таблицам.

  • Чтобы переопределить border-collapse: collapse, используйте border-collapse: separate вместе с border-spacing: 4px (или любым другим значением). Это не работает в IE6 и может не работать в IE7.
  • Для границы вокруг стола просто добавьте правило border. Если вы хотите создать границы для отдельных ячеек, нацельтесь на table.classname td и поместите туда правило border.
  • Чтобы сбросить ширину, используйте width: auto или укажите явную ширину.

Метод 2

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

Это, вероятно, будет довольно сложно реализовать, потому что шаблоны Joomla часто имеют переопределения модулей и компонентов, то есть во многих местах будет много таблиц. Удачи! : Р

Вы правы, установка этих стилей (ну, по крайней мере, width) на элементе общей таблицы - плохая идея для шаблона. Хотя тот факт, что они, вероятно, используют таблицы для разметки, в любом случае не является хорошим знаком.

2 голосов
/ 05 октября 2009

table{ border-collapse:collapse; border:0px; width:100%; }

Следующее должно переопределить вышеуказанное правило css:

.classofyourtable { width:50%; }

#idofyourtable { border:1px; width:20px; }

Обратите внимание также на следующий каскадный приоритет CSS (1 является самым высоким):

  1. встроенный
  2. идентификаторы
  3. класс
  4. тэг

Правила с меньшим приоритетом будут заменены более высокими.

1 голос
/ 05 октября 2009

Есть несколько способов сделать это. Как говорит Мариус, класс или удостоверение личности помогут.

Допустим, вы указали идентификатор элемента body (<body id="foo">), затем вы можете переопределить встроенный стиль таблицы, используя 

#foo table {
    width: auto;
}

Или, если вы хотите изменить стиль только определенных таблиц, попробуйте использовать класс (<table class="foo">): 

table.foo {
    width: 25em;
}

Но да, почему бы просто не отредактировать CSS шаблона, чтобы сделать то, что вы хотите?

1 голос
/ 05 октября 2009

Применение стиля к классу или к идентификатору переопределяет стиль в общем стиле тега.

0 голосов
/ 05 октября 2009

Применить другое правило под существующим: 

table
{
    background-color: Navy;
    width: 100%;
}

/* override existing rule: */

table
{
    width: 960px;
}

Если правило CSS указано дважды, браузер будет использовать последнее.


И да, вы правы - правильный путь для Joomla - реализовать пространство имен с помощью классов. Переопределение правил CSS по умолчанию - плохая практика.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...