Стили CSS - шрифты
Я пытаюсь копировать дизайн в HTML / CSS. Проблема состоит в том, что текст на сайте изменяется между двумя различными цветами, несколькими размерами шрифта и различными толщинами шрифта. Также текст может быть одиноким или несколько типов на одной строке.
Я включаю образец ниже.. Эти стили шрифтов используются на всем протяжении сайта.
Так мой вопрос. Каков был бы "корректный" способ разработать их в CSS/HTML? В настоящее время я использую несколько классов для цветов, размеров и весов.. Это, кажется, повсеместно. Второй проблемой являются некоторые элементы, должен быть на их собственных строках. Каков корректный метод окончания строки?
или превращение его в элемент блока?
Заранее спасибо..
2 ответа
Итак, мой вопрос. Что было бы "правильный" способ стилизовать их в CSS / HTML? В настоящее время я использую несколько классы для цветов, размеров и веса ..
Ага. Не так.
Проблема с этим подходом состоит в том, чтобы изменить стиль одного элемента, вам нужно изменить разметку, а не свой CSS. Кроме того, как вы уже заметили, разметка быстро становится беспорядочной.
«Правильный» способ - иметь класс для каждого обычного блока, даже если он во многих отношениях выглядит так же, как другой блок.
Блок, содержащий «Апартаменты Royal Kostas, Майорка», может иметь тот же шрифт и размер, что и блок, содержащий «Из Манчестера», но это не означает, что вам следует попытаться удалить дублированный код из CSS. Многие пытались найти способы создания СУХИХ файлов CSS, и это вызывает боль только тогда, когда отдел маркетинга / дизайна решает уменьшить размер шрифта «Из Манчестера», но не все остальное.
Более сложный выбор - это когда стили полностью идентичны, например, «Апартаменты Royal Kostas, Майорка» и «Самообслуживание 3 * на 7 ночей при проживании 4 человек». Я все равно считаю, что это должны быть разные классы с одинаковым стилем, но это личный выбор.
Я склоняюсь к этому руководству: если изменение дизайна сайта с использованием тех же данных требует изменения разметки, вы делаете это неправильно.
Вы не хотите называть свои классы CSS на основе визуального стиля. Создайте свой CSS вокруг функции или области, для которой используется стиль. В прикрепленном визуальном элементе вы можете создать стиль TabHeader, стиль цены (для левого столбца), стиль деталей, стиль MoreInfo. Вы уловили идею.
Поскольку все шрифты явно разные, вы, очевидно, определите свойство шрифта, а также его толщину, цвет, стиль и т. Д. Сохраняйте его автономным, и у вас будет меньше головной боли в дальнейшем.