Рецепты CSS

Вёрстка

• Как выровнять слой по центру веб-страницы?
• Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
• Как разместить два слоя с заданной шириной рядом по горизонтали?
• Как сделать слой полупрозрачным?
• Как убрать полосы прокрутки?
• Почему max-width не работает для таблицы?

Изображения

• Как убрать панель на изображениях в Internet Explorer 6?

Добавление картинок

• Как добавить картинку на веб-страницу?
• Почему изображение не показывается на сайте?
• Почему изображения на странице видны только на моем компьютере и не отображаются на другом?
• Установил путь к рисунку как /images/pic.gif, но рисунок не отображается на веб-странице. Почему?

Рамка вокруг изображений

• Как добавить рамку к изображению?
• Как изменить цвет рамки вокруг изображения-ссылки?
• Как сделать паспарту?
• Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
• Как убрать рамку вокруг изображений-ссылок?

Альтернативный текст и всплывающая подсказка

• Для чего нужен альтернативный текст?
• Добавил к рисунку альтернативный текст, но его не видно в браузере. Почему?
• Как добавить всплывающую подсказку к изображению?
• Можно ли изменить вид всплывающей подсказки?

Форматирование изображений

• Как выровнять фотографию по центру веб-страницы?
• Как добавить подпись под фотографией?
• Как разместить несколько картинок рядом по горизонтали?
• Как разместить слитно два изображения друг под другом?
• Как сделать изображение на всю ширину окна браузера?
• Как сделать обтекание картинки текстом?
• Как сделать, чтобы фотография располагалась по правому краю окна браузера?

Эффекты с изображениями

• Как заменить текст изображением?
• Как отразить изображение?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как установить изображение полупрозрачным?

Линии и рамки

• Как добавить линию возле текста?
• Как добавить рамку вокруг кнопки?
• Как сделать горизонтальную пунктирную линию с рисунком?
• Как сделать цветную горизонтальную линию?

Отступы и поля

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

Сайт

• Как добавить иконку сайта в адресную строку браузера?
• Как сделать страницу с ошибкой 404?

Скруглённые уголки

• Как выделить строку с помощью блока с закруглениями?
• Как добавить скругленные уголки у фотографии фиксированного размера?
• Как сделать блок со скругленными уголками без рисунков?
• Как сделать блок со скруглёнными уголками через CSS3?
• Как сделать круглые изображения?
• Как сделать рамку со скругленными уголками?
• Как создать рамку со скругленными уголками без изображений?

Списки

• Как изменить цвет текста в списке?
• Как разместить элементы списка горизонтально?
• Как сделать вложенный список?
• Как сделать горизонтальное меню с наклоном?
• Как убрать отступ сверху и снизу от списка?

Маркированный список

• Как вместо символа маркера использовать картинку?
• Как изменить отступ слева от маркеров списка?
• Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
• Как убрать маркеры в маркированном списке?
• Как увеличить расстояние от маркера до текста?
• Хочу изменить вид маркера на другой символ. Как это сделать?

Нумерованный список

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

Список определений

• Как вывести термин и определение в одну строку?

Ссылки

• Как добавить пунктирное подчеркивание к ссылкам?
• Как добавить рисунок к внешним ссылкам?
• Как заголовок сделать ссылкой?
• Как изменить вид ссылки при наведении на нее курсора мыши?
• Как изменить цвет ссылки и фона под ней?
• Как на странице сделать ссылки разных цветов?
• Как открыть ссылку в новом окне?
• Как плавно изменить цвет ссылки?
• Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?
• Как сделать, чтобы слой целиком был ссылкой?
• Как убрать подчеркивание у ссылок?
• Как убрать пунктирную рамку вокруг ссылок?
• Как установить цвет посещённой ссылки?

Таблицы

• Как выделить другим цветом первую строку таблицы?
• Как выровнять содержимое ячеек таблицы по верхнему краю?
• Как выровнять таблицу по центру окна браузера?
• Как сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши?
• Как создать таблицу в HTML5 и указать её параметры через стили?
• Как установить таблицу полупрозрачной, а часть ячеек нет?
• Как установить ширину таблицы через стили?
• Каким стилевым свойством заменить атрибут cellpadding тега <table>?
• Каким стилевым свойством заменить атрибут cellspacing тега <table>?

Текст

• Как выровнять текст одновременно по правому и левому краю?
• Как выровнять текст по центру?
• Как добавить вокруг текста рамку определенного цвета?
• Как добавить подчеркивание к заголовку?
• Как изменить расстояние между строками текста?
• Как мне обойтись без тега <font>
• Как отобразить теги на веб-странице?
• Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому?
• Как сделать пунктирное подчеркивание текста?

Фоновая картинка

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

Формы

• Как запретить изменение размеров <textarea>?
• Как изменить вид тега <optgroup> через стили?
• Как изменить цвет кнопки в форме?
• Как изменить цвет текста и фона в текстовом поле?
• Как к кнопке добавить градиентную заливку?
• Как сделать кнопку внутри поля для поиска?
• Как сделать свою кнопку для отправки формы?
• Как сделать, чтобы в текстовом поле заранее выводился определенный текст?
• Как сделать, чтобы текстовое поле при получении фокуса меняло цвет рамки?
• Как убрать свечение вокруг текстового поля в Safari?
• Как установить ширину текстового поля в пикселах?
• Как установить ширину поля со списком?

Цвет

• Как выделить другим цветом фрагмент текста?
• Как добавить цвет фона к заголовку текста?
• Как изменить цвет фона и текста веб-страницы?
• Как с помощью стилей задать цвет линии, созданной с помощью тега <hr>
• Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?
• Что означает запись #fc0?