CSS-стили - шрифты - PullRequest
       25

CSS-стили - шрифты

0 голосов
/ 01 августа 2010

Я пытаюсь скопировать дизайн в HTML / CSS.Проблема в том, что текст на сайте изменяется между двумя разными цветами, разными размерами шрифта и разным весом шрифта.Также текст может быть отдельным или несколькими типами в одной строке.

Я включил пример ниже .. Эти стили шрифта используются по всему сайту.

Итак, мой вопрос.Каков будет «правильный» способ их стилизовать в CSS / HTML?В настоящее время я использую несколько классов для цветов, размеров и веса. Кажется, это повсеместно.Вторая проблема - некоторые элементы должны быть на своих линиях.Какой правильный способ окончания строки?или превращая его в блочный элемент?

Заранее спасибо ..

альтернативный текст http://213.40.100.100/random/01.jpg

Ответы [ 2 ]

5 голосов
/ 01 августа 2010

Итак, мой вопрос.Каков будет «правильный» способ их стилизовать в CSS / HTML?В настоящее время я использую несколько классов для цветов, размеров и веса ..

Да.Не так.

Проблема этого подхода состоит в том, чтобы изменить стиль одного элемента, вам нужно изменить разметку, а не CSS.Кроме того, как вы уже обнаружили, ваша разметка быстро запутывается.

"Правильный" способ - создать класс для каждого обычного блока, даже если он во многих отношениях выглядит так же, как и другой блок..

Блок, содержащий «Апартаменты Royal Kostas, Майорка», может иметь тот же шрифт и размер, что и блок, содержащий «Из Манчестера», но это не значит, что вы должны попытаться удалить дублированный код из CSS.Многие пытались найти способы создания DRY CSS-файлов, и это только приводит к боли, когда отдел маркетинга / дизайна решает уменьшить размер шрифта «Из Манчестера», но не остальное.

Более сложный выбор - это гдестили полностью идентичны, такие как «Royal Kostas Apartments, Майорка» и «Для 7 ночей 3 * самообслуживания на основе 4 обмена».Я бы все еще утверждал, что это должны быть разные классы с одинаковым стилем, но это личный выбор.

Я склонен сильно склоняться к этому руководству: если изменение дизайна сайта с использованием тех же данных требует измененияк разметке, вы делаете это неправильно.

1 голос
/ 01 августа 2010

Вы не хотите называть свои классы CSS на основе визуального стиля.Создайте свой CSS вокруг функции или области, для которой используется стиль.В прикрепленном вами изображении вы можете создать стиль TabHeader, стиль цены (для левой колонки), стиль деталей, стиль MoreInfo.Вы поняли идею.

Поскольку все шрифты явно различаются, вы, очевидно, определите свойство шрифта, а также вес шрифта, цвет, стиль и т. Д. Держите его автономным, и в дальнейшем у вас будет меньше головной боли.

...