margin: 0 0 10px 0;
}
#thing-alerts label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
}
Глядя на рис. 6.03, можно увидеть, что мы добавили отступ в 10px
под каждой строкой fieldset
и задали подписям свойство display: block
, чтобы они отображались на отдельной строке. Мы также выставили черному тексту непрозрачность в 60% и указали запасной серый цвет для тех браузеров, которые пока не поддерживают RGBA. Мы также добавили небольшую белую подсветку свойством text-shadow
, чтобы текст выглядел так, будто бы он вставлен на фон.
Рис. 6.03.К элементам fieldset и label применены стили
Теперь у нас есть хороший интервал в 10px между элементами fieldset
, но из-за поля внутри серого блока нам не нужен отступ в 10px под последней строкой (содержащей кнопку «подписаться»).
Это часто встречающаяся ситуация: есть список элементов, к каждому из которых применяется один и тот же стиль, но нужно применить другой стиль к последнему элементу списка.
Вместо добавления class="last"
к последнему элементу почему бы не воспользоваться CSS3-псевдоклассом: last-child, чтобы убрать отступ снизу, не трогая разметку:
#thing-alerts fieldset {
margin: 0 0 10px 0;
}
#thing-alerts fieldset label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
}
#thing-alerts fieldset: last-child {
margin: 0;
}
Помните, что :last-child
не поддерживается в IE8 и ниже, но для небольших визуальных изменений, подобных этому, такое решение намного лучше, чем дополнительный класс в разметке.
На рис. 6.04показано, что мы успели сделать: теперь нижний отступ на последнем элементе fieldset
убран с помощью псевдокласса :last-child
.
Рис. 6.04.Форма выглядит лучше, когда у последнего элемента fieldset нет отступа снизу
Теперь, когда мы успешно воспользовались :last-child
, пора отметить, что в CSS3 есть много других чрезвычайно удобных селекторов.
Я очень рекомендую прочитать статью Роджера Йоханссона на эту тему – CSS selectors explained (http://bkaprt.com/css3/11/) [14], – в которой он показывает, что они представляют собой и как работают. Поддержка этих селекторов различается между браузерами, так что обязательно сверьтесь с доскональными таблицами CSS contents and browser compatibility Питера-Пола Коха (http://bkaprt.com/css3/12/) [15]и CSS Compatibility and Internet Explorer от Microsoft (http:// bkaprt.com/css3/13/) [16], чтобы узнать, что где поддерживается.
Начнем добавлять стили, которые превращают поля ввода по умолчанию во что-то особенное. На этот раз мы воспользуемся селектором по параметру из CSS2.1, чтобы обратиться исключительно к элементам input type="text"
(не затрагивая кнопку input type="submit"
).
Если бы в объявлении мы просто написали:
#thing-alerts
input
то стиль бы применился ко всем объектам типа input
(и к полям ввода, и к кнопкам). Но если мы исправим это на:
#thing-alerts input[type="text"]
то будут затронуты исключительно поля ввода.
Повторюсь: грамотное использование селекторов в стилевых файлах позволяет уменьшать количество дополнительных классов в разметке, которые вводятся исключительно для того, чтобы применять какие-то стили лишь к определенным элементам. Такое упрощение прекрасно.
Помните, что селекторы по параметру поддерживаются в IE7 и выше, но не поддерживаются в IE6. Впрочем, это нормально, поскольку мы изменяем некритический слой – вид элементов формы. IE6 проигнорирует эти правила, что вполне допустимо в этом случае.
Следующий код объявляет подходящие width
, padding
и font-size
, отключает выставленный по умолчанию border
, добавляет background-color
и скругляет углы свойством border-radius
.
#thing-alerts fieldset input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
background-color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
На рис. 6.05показан результат – так, как он отображается в Safari (с аналогичным видом в Firefox и Opera). Теперь у нас есть плоские поля ввода со скругленными углами, которые выглядят хорошо; но давайте добавим немного объема, чтобы они больше походили на привычные редактируемые поля.
Читать дальше
Конец ознакомительного отрывка
Купить книгу