CSS: цвет шрифта, стили, фон, размер

Программирование – что зеркало: вначале было слово, а отразился вовсе не ответ. И очень быстро пришлось «поменять»: сначала зеркало, потом слово... В данный момент времени таблицы каскадных стилей – это хорошо, но почему так долго к ним шло сознание разработчика? CSS – это все тот же массив времен начала эры компьютерных программ, но только в другом ракурсе. Даже когда массивы стали ассоциативными, революции это не произвело.

Страница сайта – это теги HTML-разметки, которым может быть приписан определенный стилевой класс или идентификатор стиля. Первое можно определить однажды и приписывать к чему угодно сколько нужно раз, второе принадлежит конкретному элементу.

Общая логика описания стилей

По традиции, стиль помещается в CSS-файл, но может быть приписан к конкретному элементу в его атрибуте style. Стиль можно создать в динамике средствами jаvascript. Особого значения не имеет, как описать, например, посредством CSS цвет шрифта, его размер, гарнитуру, фон под ним и проч. Место описания стиля имеет значение в контексте, обычно двух, идей: чем позже описано, тем оно приоритетнее, а если описано на элементе, то это вовсе !important. Последнее, записанное как есть, явно определяет приоритет.

Применять стиль чтобы, например, некое font color поменяло цвет, можно где угодно и как угодно. Вопрос в том, как к этому отнесется браузер в ходе разборки всех стилей в совокупности. Сколько он на это потратит процессорного времени?

В идеале, font color должно быть обозначено только один раз – это классика. Додумывать к одному простому описанию еще парочку, а потом еще и еще ... конечно, можно. Это модно, но непрактично.

Пример общей логики

Все очень просто: определив посредством CSS color всего для трех элементов, можно получить как минимум три долгоиграющие проблемы:

#Ele1, #Ele2, #Ele3 {
POSITION: absolute-
left : 20px;
top : 14px;
color: red-
}

#Ele2, #Ele3 {
left : 90px; // изменить координату CSS по горизонтали
color: yellow- // изменить цвет шрифта CSS
}

#Ele3 {
top : 114px; // изменить координату CSS по вертикали

color: green- // еще раз изменить цвет шрифта CSS

background-color: lightgrey- // цвет выделения текста CSS изменен, но этого нету в #Ele1 и #Ele2- положение тоже изменено, но оно уже менялось в #Ele2 и не так, как здесь

}

Теперь придется помнить, что все эти три элемента где-то определены, а в случае смены цветовых представлений владельца сайта, разработчику придется вспомнить не только про color, но и про правила left и top, да и об изменении цвета выделения текста следует не забыть.

Далеко не все разработчики чтут требование CSS: стиль идентификатора – только одному элементу, а стиль класса – многим тегам, к тому же последние можно указывать в тегах как прилагательные:

• задать цвет шрифта в CSS – стиль класса groundColor;
• уточнить размер шрифта – класс size15;
• установить положение – класс PlaceUp.

Естественно, использование идентификаторов, особенно когда они принадлежат одному элементу разметки, лучше десятка стилевых классов, расписанных в различном сочетании по сотне элементов страницы. Но во всем есть своя объективная логика.

Разработчик просто должен грамотно учитывать: если даже цвет шрифта HTML, CSS предлагает описать жестко, то гибкость общей структуры описаний – это его работа.

Ожидаемый результат применения общей логики

Современные браузеры спокойно относятся к большому количеству стилевых файлов и их объемам. Однако проектируя, в частности, посредством CSS, color всей страницы, всегда следует думать о разумной достаточности. Не все стилевые правила «дешево» выглядят в применении. Простая лаконичная запись: * {color: white-} – безусловно красива, но относится она ко всем элементам страницы без исключения.

Из всех правил, которыми оснащен CSS, самое важное:

• стиль – класс, и тогда его имя начинается с ".";
• стиль – идентификатор и его имя начинается с символа "#";
• в остальных случаях – это наименование тега или что-то особенное

Остальные идеи в части описания стилей (наследование, перекрытие свойств, приоритеты, положение, порядок и т. д.) следует применять осмысленно и строго по необходимости.

Браузер всегда пропустит, что не разберет в описании, так что особенных неожиданностей не будет. Если чего-то не оказалось в нужном месте или задать цвет шрифта в CSS не удалось, значит, ошибка в стиле.

Неожиданные возможности

Не следует злоупотреблять стилями вроде * { left: 124px; } или

ol ol, ol ul, ul ul, ul ol { margin-bottom: 0- }
a img { border: 0- }

Хотя трудно заставить даже начинающего разработчика использовать правила CSS как есть. Всегда в разработке любого сайта даже идеально простой синтаксис CSS дарит непредвиденные проблемы. Впрочем, если направить усилия в область правильного использования синтаксиса, но применить к нему функционал jаvascript, то новые неожиданные возможности позволят избежать монотонного создания идентификаторов для каждого элемента или следить за многообразием применения стилевых классов.

CSS – это не только файл стилей, подключенный к странице через тег link или вставленный в нее через тег style. Это также возможность создать стиль на лету или изменить уже существующий.

Применяя CSS, цвет шрифта можно сделать программно. Так же как и размер, и положение, отступы. Сайт – это не цель применить знания в CSS, HTML, PHP или блеснуть эффектами jаvascript.

Веб-ресурс – это прежде всего информация, предлагаемая определенным образом. Именно поэтому CSS лучше всего рассматривать в динамике сквозь призму того, как можно сформировать, пока страница еще на сервере (ею занят PHP в момент, когда на сайт пришел посетитель, а не разработчик в то время, когда он разрабатывает сайт), нужный файл стилей под конкретный текст, под актуальный контент или создать стиль класса или идентификатора на лету в процессе работы страницы, когда ее просматривает конкретный посетитель.

Статическая динамика

Не всегда следует писать сложный jаvascript-код, чтобы сделать контент динамичным, а его оформление – адекватным содержанию. Иногда достаточно правильно использовать имеющиеся возможности. В частности, определив посредством CSS цвет шрифта изначально статичным правилом, можно скрыть это правило (hidden) и визуализировать другое (visible).

Здесь динамика не требует алгоритма:

// подсветить кнопку входа на сайт
function scfWelcomeOver() {
document.getElementById(`scDocxNamePiP`).style.visibility = `visible`-
}

// скрыть кнопку входа на сайт
function scfWelcomeOut() {
document.getElementById(`scDocxNamePiP`).style.visibility = `hidden`-
}

CSS предлагает собственные варианты динамики: бегущие строки, прозрачность элементов, различные варианты наложений, проявлений, затуханий цвета. В CSS цвет шрифта можно сделать даже таким, которым ни одним стилевым правилом не предусмотрено.

Динамичное отображение контента

Если бы не было догм, вероятно, не было бы и прогресса. Просто не с чем было бы бороться. Гипертекст принес в мир много догм. Настала пора обратить на них внимание и заняться разработкой сайтов в прагматичном и практичном стиле.

Изначально есть страница (P), на ней размещен контент (K), все теги страницы описаны в таблице стилей (S). Не ново формировать страницу P через PHP или Perl на сервере, выбирая K из базы данных. Имеющаяся таблица стилей S приложится автоматом. Однако K может быть изменен, а в большинстве случаев такое изменение повлечет за собой надобность в других стилях, то есть в S+.

Например, заказчик сказал: «Сайт, описывающий жизнь Москвы, лучше будет смотреться, если новостные статьи оформлены в стиле "ЗаЗавтраком", описания ночной суеты в стиле "ЛасВегас", а статьи о научно-техническом прогрессе в стиле "МодернТехно"». Но если сделать S на три этих варианта, то нет никакой гарантии, что у заказчика не возникнет идеи иметь набор статей «Новости», «Праздники», «Работа», «CSS/HTML» и бонус «ХозяйкеНаЗаметку».

Более практичен другой подход. Вне зависимости от категории статьи в ней всегда есть содержание, которое можно раскрасить в определенный цвет. Вот на этом месте возникает вполне здравая мысль: получив конкретное K, еще на сервере сформировать адекватную S, и когда браузер потребует P, он получит нужное содержание в надлежащем оформлении.

Динамика стиля от jаvascript

Минимальное, хотя и очень эффективное решение, – делать стилевое оформление непосредственно в браузере клиента. Во-первых, это разгружает сервер – не нужно будет тратить время на формирование гипертекста страницы и файлов стилей для нее.

Во-вторых, естественные траты времени внутри браузера создадут эффект, что страница занята делом и активно поддерживает диалог с посетителем: все равно тот не воспринимает контент оптом, следовательно, ему понравится последовательный и продуманный вывод информации.

В-третьих, это дает возможность разработчику предоставить в распоряжение посетителя механизм формирования контента в таком стиле, в котором ему это удобно. Этого нет еще ни у кого.

Для воплощения этой идеи необходимо реализовать механизм создания стилей элементов сразу после загрузки страницы и в процессе ее функционирования. Современный сайт – это AJAX в том или ином варианте. Не составляет труда выполнять формирование стилей непосредственно в процессе формирования дерева страницы. Это просто, доступно и эффективно, потому как контент идет вместе со своим оформлением.

Это не противоречит современной тенденции отделить представление данных от их обработки и выполняется над данными уходящими в отображение.

CSS как активная компонента

Гипертекст принес много хорошего, но только малая толика естественной информации была успешно формализована, появились инструменты и опыт создания качественных HTML, XML, CSS документов. Не проблема формализовывать новые объемы информации и изменять уже сделанное ранее.

В отношении CSS этот процесс уже активизируется в совершенно ином контексте. Встроенные средства в jаvascript, позволяющие «на лету» создавать элементы и стили элементов, не предполагали такую возможность, а создатели PHP, в частности, полагали заниматься формированием только HTML страниц.

И первое, и второе позволяют заняться программированием стилей. Это новое направление в области информационных технологий. Стили значительно более формальная вещь, чем HTML или XML, правила очень просты. Стиль всегда присутствует в информации, какой бы природы она ни была.

Оформлением данных программисты занимаются всегда в гораздо более неформализованных сферах, но вот тема CSS – очень простая задача, но как-то не попадала в поле зрения процесса разработки.

О догмах в области программирования

Как и айсберг, догма не может долго бороздить информационные просторы. Накопленный опыт должен был сконцентрироваться не только в HTML- и CSS-стандартах, инструментах работы с ними, знаниях разработчиков.

Простая задача – сделать посредством CSS цвет шрифта – нашла свое отличное решение. Правила, синтаксис, логика и удобство несомненны. Но даже когда шрифтов на самом деле нужно не много, цветов для практики тоже много не надо, да и вообще для целей виртуализации реальности вовсе не нужна вся накопленная «сила» HTML и CSS, наступает момент, когда ситуативные знания уходят в репродуцирующие, и появляется опыт и инструменты естественного образования стилей от контента.

Как это будет, может и не совсем ясно, но то, что процесс уже идет, очевидно.