Переопределение размера шрифта

[jpka]

Здравствуйте!

Наблюдается непонятное поведение html тегов <h1>, <h2> но правильная работа <big>.

Существует движок MediaWiki, одной из принципиальных возможностей которого является загрузка собственного файла CSS и соответственно показ общего содержимого в нужном мне оформлении. (как? регимся на например википедии, заходим на свою страницу участника, дописываем в URL в конец (слеш)common.css, правим, обновляем. Это работает.) При этом, существует системный файл (точнее их набор) CSS, который нельзя отменить (как посмотреть? разлогиниваемся и от анонимуса заходим к примеру на http://ru.wikipedia.org/wiki/MediaWiki:Common.css), а можно только переопределить необходимые участки. Проблема начинается, когда я переопределяю размер шрифта. Мне необходимо, чтобы весь шрифт был 16px, но заголовки другого размера.

Если я пишу

p, td, th, ul, ol,  * {
font-size: 16px;
} 
h1
{font-size: 24px;}
h2
{font-size: 20px;}

то работает (к счастью!) и везде переопределяется основной шрифт на 16px, но заголовки имеют неправильный размер 16px. (Если убрать первый font-size, то заголовки нормальные). Теги <h1> и т.п., содержащиеся в какой-нибудь созданной мной тестовой странице, движок медиавики не портит, что видно по просмотру исходника страницы. Однако, тег <big> работает нормально. Но мне нужны и заголовки бОльшего размера. Где может быть ошибка?

Спасибо!

[Иришка]

Лично у меня приведенный Вами код работает нормально, т.е. заголовки отображаются соответственно прописанным стилям h1 и h2.

На счет конкретного движка ничего не могу сказать, но возможные проблемы можно устранить 2 способами:

1. Убрать из кода звездочку, которая является главенствующей и по идее она должна бы перебивать стили для заголовков (т.е. все должно быть 16 шрифтом)

2. Прописать принудительную важность к стилям заголовка - !important, т.е.

p, td, th, ul, ol, * {
font-size: 16px;
}
h1
{font-size: 24px !important;}
h2
{font-size: 20px !important;}

[psywalker]

Здравствуйте!

Наблюдается непонятное поведение html тегов <h1>, <h2> но правильная работа <big>.

Существует движок MediaWiki, одной из принципиальных возможностей которого является загрузка собственного файла CSS и соответственно показ общего содержимого в нужном мне оформлении. (как? регимся на например википедии, заходим на свою страницу участника, дописываем в URL в конец (слеш)common.css, правим, обновляем. Это работает.) При этом, существует системный файл (точнее их набор) CSS, который нельзя отменить (как посмотреть? разлогиниваемся и от анонимуса заходим к примеру на http://ru.wikipedia.org/wiki/MediaWiki:Common.css), а можно только переопределить необходимые участки. Проблема начинается, когда я переопределяю размер шрифта. Мне необходимо, чтобы весь шрифт был 16px, но заголовки другого размера.

Если я пишу

Код

p, td, th, ul, ol, * {

font-size: 16px;

}

h1

{font-size: 24px;}

h2

{font-size: 20px;}

то работает (к счастью!) и везде переопределяется основной шрифт на 16px, но заголовки имеют неправильный размер 16px. (Если убрать первый font-size, то заголовки нормальные). Теги <h1> и т.п., содержащиеся в какой-нибудь созданной мной тестовой странице, движок медиавики не портит, что видно по просмотру исходника страницы. Однако, тег <big> работает нормально. Но мне нужны и заголовки бОльшего размера. Где может быть ошибка?

Спасибо!

Ты ошибаешься, такого просто не может быть, потому что Звёздочка по дефолту не имеет специфичности, а h1 имеет специфичность "0001", поэтому как бы и где бы в коде ты не написал эти стили, всё равно h1 {font-size: 24px;} будет главнее. Единственное исключение может составлять то, что если бы в Заголовке слова находились в каком нибудь другом теге, например в <em></em>, вот тогда бы шрифт звёздочки имел бы полное право стать таковым (в твоём случае 16рх), так как с точки зрения h1 {font-size: 24px;} - это уже будет считаться "Унаследованным значением" - которое в свою очередь не имеет даже Нулевую специфичность в отличии от звёздочки

{font-size: 24px !important;}

Кстати !important не рекомендуется вешать на право и на лево, так как во первых его не понимает ИЕ6, а во вторых это тяжёлая вещь, которую надо ставить с умом, дабы в последствии не заработать проблем

[Иришка]

Кстати !important не рекомендуется вешать на право и на лево, так как во первых его не понимает ИЕ6, а во вторых это тяжёлая вещь, которую надо ставить с умом, дабы в последствии не заработать проблем

Да соглашусь, что !important не следует применять где попало, и здесь это было бы лишним.

Приведенный код рабочий, но видимо чем-то перекрывается всё-таки, раз у автора возник вопрос... Вероятнее надо просто прописать:

h1 * {font-size:24px;}

А вот на счет IE6 не помню, что бы он не понимал !important... может ошибаюсь, конечно, но даже тут написано, что IE6 это поддерживает - http://www.htmlbook.ru/css/!important.html.

Но тем не менее, уже есть IE8 и равняться под IE6 становится просто глупо... а когда css3 станет полностью поддерживаться большинством браузеров неужели всё-равно надо будет равняться под IE6? Прогресс не стоит на месте, надо двигаться и пользоваться новыми возможностями.

[psywalker]

А вот на счет IE6 не помню, что бы он не понимал !important... может ошибаюсь, конечно, но даже тут написано, что IE6 это поддерживает - http://www.htmlbook.ru/css/!important.html.

Но тем не менее, уже есть IE8 и равняться под IE6 становится просто глупо... а когда css3 станет полностью поддерживаться большинством браузеров неужели всё-равно надо будет равняться под IE6? Прогресс не стоит на месте, надо двигаться и пользоваться новыми возможностями.

хм..вообще странно, я проверил, действительно работает в ИЕ6, я удивлён, ведь раньше вроде не работало. Может кто нибудь поможет разобраться?

[jpka]

Спасибо всем,

h1 * {font-size:24px;}

работает.

А вот насчёт приоритетов, думал, что максимальный приоритет имеет последнее переопределение. Т.е. если

* {font-size:16px;}
h1 {font-size:24px;}

то h1 будет 24px, а

если

h1 {font-size:24px;}
* {font-size:16px;}

то h1 будет 16px, независимо от иных приоритетов, или не так?

[Justnewone]

h1 {font-size:24px;}
* {font-size:16px;}

то h1 будет 16px, независимо от иных приоритетов, или не так?

Именно в данном случае не так. Почитайте.

[psywalker]

А вот насчёт приоритетов, думал, что максимальный приоритет имеет последнее переопределение. Т.е. если

Код

* {font-size:16px;}

h1 {font-size:24px;}

то h1 будет 24px, а

если

Код

h1 {font-size:24px;}

* {font-size:16px;}

то h1 будет 16px, независимо от иных приоритетов, или не так?

Я вверху всё разъяснил же

[jpka]

Я вверху всё разъяснил же

Именно в данном случае не так. Почитайте.

В обоих случаях получается что звёздочка самый слабый элемент, но практически, это не так - если убрать только звёздочку из кода первого поста, то часть текста, заведомо переопределённого, становится другого (неправильного) размера, то есть почему-то звёздочка переопределяет более сильное определение. Я объяснял для себя это тем, что просто она идёт позже, а оказывается, всё гораздо более непонятно...

Edited August 13, 2009 by jpka

[jpka]

Кстати.

Как написано здесь про important, И авторы сайта и его посетители могут использовать свою собственную таблицу стилей. Я очень удивился, что якобы я могу сделать css не только для wiki (где он предусмотрен, однако тег important там работать не будет - ведь мой css уже мне выдаётся обратно сервером, а не браузером), но и вообще применить его к любому сайту! Но радость была недолгой: IE и Windows у меня нет, а в FF простые попытки подключить свой CSS ни к чему не привели, нашлось только это, но это специальная панель и каждый ставить её себе не будет. Так есть ли простая возможность в браузере использовать свой css и я её просто не вижу, или её всё же нет?

(add) Вот здесь написано, что якобы где-то есть

Пользовательские стили

* Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.

Edited August 13, 2009 by jpka