Как сделать текст резиновым css
CSS макеты: фиксированные, резиновые, эластичные
Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться.
Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.
Макеты с фиксированной шириной
Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800;600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.
Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.
Плюсы такого макета
Советы по макету с фиксированной шириной:
Пример блока фиксированной ширины
Все примеры «вживую» можно посмотреть в авторской статье.
Резиновые макеты
Резиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.
Примером такого макета можут служить GrayBit.com. Он уменьшается по ширине до 755 пикселей до того, как появляется горизонтальная полоса прокрутки, но и при этом она не требуется для просмотра основного содержимого страниц. Фактически, сайт замечательно смотрится вплоть до ширины в 560 пикселей, дальше элементы дизайна уже начинают перекрываться, пропадать или сваливаться вниз. Большинство резиновых макетов имеют такие ограничения и, как я видел, некорректно ведут себя на мобильных устройствах, пока не отключены стили вообще или не применена специальная таблица стилей для мобильных устройств.
Плюсы резинового макета
Рассмотрим минусы такого макета
Некоторые советы по использованию этого макета
И, собственно, пример:
Эластичный макет
При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.
Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).
Плюсы эластичного макета
Минусы эластичного макета
Немного советов по эластичному макету
Пример эластичной верстки:
В заключении
Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям.
Оформление текста в CSS
Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.
Существует вероятность, что человек не станет читать даже очень грамотно и хорошо написанный, но не оформленный или плохо оформленный текст, поэтому следует уделить особое внимание вопросу удобочитаемости.
CSS предоставляет довольно обширные возможности, позволяющие кардинально изменить внешний вид вашего текста с помощью различных цветовых решений, размера строки и т.д.
Визуальное оформление текста в CSS
В окне браузера данный пример будет выглядеть следующим образом:
Цвет текста в CSS
Способы задания могут быть следующими:
Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:
Размер текста в CSS
CSS свойство font-size позволяет задать размер текста.
Единицами измерения могут быть:
Визуальное представление приведенного выше кода выглядит следующим образом:
Отступ текста в CSS
Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.
Визуальное отображение кода:
Жирный и наклонный текст в CSS
С помощью атрибута CSS font-weight определяется жирность шрифта.
Данный атрибут может принимать следующие значения:
В браузере данный код выглядит следующим образом:
Тень текста в CSS
CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.
В том случае, если цвет тени не задан, используется цвет текста.
Представленный выше код в браузере выглядит следующим образом:
Выравнивание текста в CSS
С помощью свойства vertical-align выполняется выравнивание текста по вертикали.
Данное свойство может принимать следующие значения:
Работа с текстом в CSS
CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.
Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.
Каждое правило CSS состоит из селектора и определения. Селектор – обычно это тег, к которому мы применяем наш стиль, а определение – это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство – цвет, значение – красный.
Синтаксис CSS следующий:
Пример правила CSS:
В этом примере задано правило тегу
отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство : значение).
В этом примере задано правило тегу
отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство : значение) применённые к одному селектору, в данном случае к тегу абзаца
В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS.
Свойства шрифта
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Устанавливает шрифт из списка | P |
Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.
Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.
Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.
Универсальные семейства шрифтов:
Пример с использованием:
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-style | normal italic oblique | Нормальный шрифт Курсив Наклонный шрифт | P |
Пример кода, в этом примере встроим стили в тег при помощи атрибута style.
Видно, что курсив от наклонного шрифта внешне не отличается.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-variant | normal small-caps | Устанавливает капитель (особые прописные буквы) | P |
— так в типографике называется текст, в котором строчные знаки выглядят, как уменьшенные прописные. Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-weight | normal lighter bold bolder 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P |
Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold — полужирное начертание, normal — нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, — значению 700.
Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.
Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 11pt font-size: 11px font-size: 110% |
Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.
Свойства текста
Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.
Рассмотрим первое свойство:
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель значение % | Межстрочный интервал (интерлиньяж) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.
При процентной записи за 100% берется высота шрифта.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| text-decoration | none underline overline line-through blink | Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста | text-decoration: line-through |
При помощи определения < text-decoration : none >можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.
В примере ссылка не имеет линии подчёркивания.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные | text-transform: uppercase |
Сравните текст который содержится в html-коде с текстом в окне браузера.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| text-align | left right center justify | Выравнивание текста | text-align: right |
Подробное описание значений:
Пример использования этого свойства будет совмещён с примером работы следующего свойства.
Свойство text-indent — служит для создания величины отступа первой строки блока текста (например, для абзаца
Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.
Этот текст стилизован под некоторые свойства форматирования текста. Заголовок использует свойства выравнивания текста, преобразования текста и цвета. Абзац имеет отступ, выравнивается, и задается пробел между символами. Подчеркивание удаляется из этого цветного.
Цвет текста
Свойство color используется для задания цвета текста. Цвет задается:
Посмотрите на значения цвета CSS для полного списка возможных значений цвета.
Цвет текста по умолчанию для страницы определяется в селекторе Body.
Пример
Выравнивание текста
Свойство text-align используется для задания выравнивания текста по горизонтали.
Текст может быть выровнен по левому или правому краю, центрирован или выровнен.
Следующий пример показывает выравнивание по центру, а левый и правый выровненный текст (выравнивание по левому краю по умолчанию, если направление текста слева направо, а выравнивание по правому краю по умолчанию, если направление текста справа налево):
Пример
Если свойство text-align имеет значение «выравнивание», каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были прямыми (как в журналах и газетах):
Пример
Оформление текста
Свойство text-decoration используется для задания или удаления элементов оформления из текста.
Значение text-decoration: none; часто используется для удаления подстрочных ссылок:
Пример
Другие значения text-decoration используются для декорирования текста:
Пример
h1 <
text-decoration: overline;
>
h2 <
text-decoration: line-through;
>
h3 <
text-decoration: underline;
>
Примечание: Не рекомендуется подчеркивание текста, который не является ссылкой, так как это часто путает читателя.
Преобразование текста
Свойство text-transform используется для указания прописных и строчных букв в тексте.
Его можно использовать для того чтобы превратить все в прописные или строчные буквы, или прописную букву первой буквы каждого слова:
Пример
p.uppercase <
text-transform: uppercase;
>
p.lowercase <
text-transform: lowercase;
>
p.capitalize <
text-transform: capitalize;
>
Отступ текста
Свойство text-indent используется для указания отступа первой строки текста:
Пример
Интервал между буквами
Свойство letter-spacing используется для указания пробела между символами в тексте.
В следующем примере показано, как увеличить или уменьшить пространство между символами:
Пример
Высота линии
Свойство line-height используется для задания промежутка между строками:
Пример
Направление текста
Свойство direction используется для изменения направления текста элемента:
Пример
Интервал между словами
Свойство word-spacing используется для указания промежутка между словами в тексте.
В следующем примере показано, как увеличить или уменьшить интервал между словами:
Пример
Тень текста
Свойство text-shadow добавляет тень к тексту.
В следующем примере указывается положение горизонтальной тени (3px), положение вертикальной тени (2px) и цвет тени (красный):
Пример
Другие примеры
Отключение переноса текста внутри элемента
В этом примере демонстрируется отключение переноса текста внутри элемента.
Вертикальное выравнивание изображения
В этом примере показано, как задать вертикальное выравнивание изображения в тексте.
Совет: Перейдите в раздел «шрифты CSS», чтобы узнать, как изменить шрифты, размер текста и стиль текста.