Каскадные таблицы стилей (англ. Cascading Style Sheets) — технология описания внешнего вида документа, использующаяся как средство оформления веб-страниц. Эта технология знакома каждому разработчику, ведь без нее не обойдется ни один современный сайт, но порой разработка CSS может оказаться настоящей проблемой, чтобы этих проблем не было нужно всего лишь знать несколько типовых конструкций CSS, которые постоянно используются..

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

1. Скругленные углы: популярные браузеры на сегодняшний день поддерживают скругление углов, добится их у себя на сайте можно так:

2. Исправление ошибки Internet Explorer 6/7 с двойным отступом/полем: известная ошибка проявляется, когда выровненный вправо/влево плавающий элемент имеет значение для свойства margin/padding. Для исправления нужно добавить display: inline .

3. Определения свойств шрифта: весьма упрощает жизнь когда свойства шрифта собраны в одну строку:

4. Изменение цвета выделенного текста: 

В коде можно изменять цвет выделения текста на красный, а цвет шрифта выделенного текста остается белым:

5. Центрирование элемента div неизвестной ширины: 

Так как IE6 и IE7 не поддерживают свойство display: table, то можно использовать альтернативный метод:

CSS

6. Преимущество использования атрибута min-height:

IE6 воспринимает последнее свойство так же, как остальные браузеры воспринимают свойство min-height:

7. Сброс стилей CSS:

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

8. Свойства CSS3 для теней текста и элемента, градиентов и трансформации:

Тени поддерживающие различные браузеры:

Тень текста как обводка белого цвета шириной в один пиксель:

Хороший градиент для фона:

Трансформация для совместного использования с псевдо-классом hover:

9. Замещение текста изображением:

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

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

На главную