Офигенный сегодня день. Мало того, что пятница (кстати всех с пятницей), так еще и работалось сегодня потрясно. Начал на днях новый интересный проект. Обещает быть большим и серьёзным.

Началась разработка прототипа. И вот случилось то, что собственно давно должно было случиться. Мне мой CSS окончательно перестал нравится. Дело в том, что стили для написания небольших проектиков и прототипов уже давно кочевали у меня из проекта в проект и успели обрости мхом...))) Т.е. весь CSS и HTML стали убогими-убогими... В большинстве тегов в коде страницы постоянно употребляется style="" и погнали... Весь код просто усеян вставками стилей. Нехорошо...

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

Очень часто сталкиваюсь с проблемой, когда описываю тег INPUT в CSS. Дело в том, что это и text, и checkbox, и submit (плюс схожий с ним button), и radio, и image и т.д. Короче говоря, масса совершенно не похожих элементов, но с одинаковым назначением - передача данных из формы на скрипт.

А вот теперь рассмотрим ситуацию - я хочу, к примеру, описать бордер для текстового инпута и делаю так:

INPUT {
border:1px solid #CCCCCC;
}

в итоге у меня получается такая лажа, при которой все чекбоксы и радиобатоны получают бордюр. Смотрится ужасно. Что делать в такой ситуации...? Есть вариант посоздавать кучу классов для каждого типа тега INPUT и использовать их. Кстати, не самый плохой вариант. Пиши себе спокойно, выноси стили в style.css и будет тебе счастье. Но не хочется этого. Поминаешь себя не хорошим словом каждый раз, когда верстаешь огромнейший прототип или немеряную админку.

Эврика!!! Сегодня нашёл решение.

Есть такая штука - называется селекторы (selectors)...

Пишем:

input[type=submit] { border:1px solid #CCCCCC; color:#999999;}
input[type=text] { border:1px solid #CCCCCC;}

и вуаля теперь мы можем разделять тег INPUT на типы. Как видно выше, я не описывал для тега INPUT никаких общих объявлений, а просто описал их для нужных мне типов отдельно. Может быть есть какие-нибудь и аргументы против такого метода, но в моём случае это помогло. Причём помогло в браузерах IE, FireFox, Opera...

Параллельно я использовал еще кое-какие фишки для совершенствования своего CSS, но о них расскажу в следующей статье.

За сим откланяюсь...

Хотите почитать позже? Добавьте в социальные сети или закладки

Запись опубликована 16.11.2007 at 16.11.2007 в следующих рубриках HTML/CSS. Вы можете отслеживать обсуждение записи, используя ленту RSS 2.0. Вы можете оставить комментарий, либо трекбэк с вашего сайта.