Инструкции - Советы по CSS - Изменение вида элементов формы с помощью CSS. СSS формы Относительное изменение размера через проценты
Перевод: Влад Мержевич
В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.
Есть несколько способов определения размеров - взгляните на демонстрационную страницу background-size .
Абсолютное изменение размераМогут применяться единицы измерения.
Background-size: ширина высота;
По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.
Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:
Background-size: 100px 200px;
Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
Background-size: 100px; /* аналогично */ background-size: 100px auto;
Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Относительное изменение размера через процентыЕсли применяются проценты, размеры основываются на элементе, а НЕ изображении:
Background-size: 50% auto;
Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна. Поменяйте ширину демонстрационной страницы чтобы понять, как изменяются размеры.
Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:
Background-size: contain;
Заполнение фономСвойство background-size также понимает ключевое слово cover . Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.
Background-size: cover;
Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.
Background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;
Работа в браузерахПоследние версии всех браузеров поддерживают background-size без префиксов.
IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover , но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.
Лабораторная работа № 4
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ (CSS)
Цель работы
Знакомство с понятием каскадных таблиц стилей CSS, а также получение практических навыков их использования.
Теоретические сведения.
Internet Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять различные атрибуты напрямую. Даже если одинаковых по значению объектов и много, вы уже умеете применять классы. Но существует еще одна возможность. Для задания всего стиля документа целиком применяются так называемые Иерархические Стилевые Таблицы (Cascade Style Sheets - CSS), которые представляют собой набор установок свойств различных объектов. Чем-то они напоминают классы, но если класс создается внутри документа и может быть применен, а может быть и нет, то CSS, если он подключен, то установки в нем влияют непосредственно на все объекты в документе.
Введение в CSS
CSS очень похожи на классы, только с той разницей, что в них описывается стиль для уже известного объекта. Для наглядного примера, осмотрите сейчас свой комнату (офис, зал...) в которой вы находитесь. Наверняка, вы увидите множество различных предметов (стол, кресло, окно, компьютер). У каждого из этих предметов-объектов есть характеристики, и вам надо составить список этих предметов и их характеристик. Может быть у вас получится нечто следующее:
стол:
цвет - коричневый
материал - деревянный
компьютер:
цвет - белый
материал - пластмасса
назначение - для работы
Конечно, вы можете пойти другим путем, но только CSS составляются именно так, где вместо предметов выступают объекты, да и их характеристики немножко другие. Для примера, вот вам отрывок такого документа:
body
{
background-color: rgb(255,255,153);
color: rgb(51,51,153);
}
h3
{
color: rgb(255,0,0);
font-family: arial, helvetica;
}
Здесь задается каким будет стиль элемента BODY и h3. Те параметры, которые не заданы, остаются по умолчанию.
Создание CSS не требует особых усилий и может быть выполнено в простом блокноте, хотя для этих целей и существуют специальные программы, облегчающие работу и наглядно показывающие, каким будет выглядеть будущий документ с применением этого стиля. Поищите такие программы у себя на диске или у знакомых.
2.2.Создание стилевой таблицы в документе
Существует два способа подключения CSS. Первый - задать ее в элементе STYLE в начале документа, как класс. Это делается так (пример 1):
h3 {color: red}
h3 {color: red; font-style: italic}
Этот документ
использует стилевые таблицы
В данном примере, на экране вы увидите две строки, состоящие из двух объектов: h3 и h3. Посмотрите, во что превратился стиль по умолчанию Internet Explorer. А ведь мы не делали никаких указаний в самом объекте насчет его стиля. Таким образом, сколько бы вы ни наделали объектов h3 и h3, их стиль всегда будет таким, каким вы его указали в стилевой таблице.
2. 3. Стилевая таблица в отдельном файле
Если вам нравится стиль, который вы создали, и вы хотите использовать его во всех своих документах. Или ваш документ состоит из множества HTML страниц и у всех них должен быть одинаковый стиль, вам необязательно каждый раз вколачивать строки стилевой таблицы в начале документа.
Второй способ подключения CSS к Web-странице - это создание CSS в отдельном файле, а в самой странице делается ссылка на этот файл. Тогда, вы можете написать в странице только одну строчку и все равно стиль ее будет таким, каким он определен в стилевой таблице во внешнем файле. Думаю не надо долго говорить о преимуществах такого способа.
Итак, сперва вы создаете таблицу, следуя указанным выше правилам. Затем, вы добавляете в элемент для включения таблицы стилей строку подобную следующей:
LINK означает, что к текущей странице подключается элемент, REL и TYPE описывают элемент, как стилевую таблицу, ну а HREF содержит адрес, по которому находится файл с вашей CSS.
Динамическое изменение CSS
Вы можете динамически изменять имя подключаемого файла со стилевой таблицей, соответственно изменяя сам стиль. Вот функция, на языке JScript, которая при ее вызове, если уже применен какой-либо стиль, убирает его и подключает новый.
function change_style()
{ if (document.styleSheets.href != null)
document.styleSheets.href = "newStyle.css";
}
Если стилевая таблица определена внутри HTML-страницы, вы можете добавлять новые определения с помощью функции addRule (object, style). Где object - объект, а style, соответственно, стилевые установки. Вот пример, в котором после щелчка на кнопку, происходит изменение стилевой таблицы (пример 2):
function newRule()
document.styleSheets.MyStyles.addRule("P","color:blue");}
h3 {color:red}
h3 {color:red;font-style:italic}
Этот документ использует таблицы стилей
Это абзац. Щелкни на кнопку для изменения его стиля
Нажми меня
Просмотрев страничку с таким кодом, вы увидите, как происходит изменение стиля, путем добавления установки в таблицу стилей.
Классы
Класс - это еще один способ установить, как должен выглядеть текст на странице. По существу, вы определяете набор стилей, таких, как цвет, толщина шрифта, его размер и так далее, но не назначаете его конкретному тегу. Класс выглядит следующим образом:
#text
{ position:absolute;
top:400 px;
left: 10px;}
A {text-decoration:none;}
.regular
{color:red;}
.superBig
{ font-size:16pt;
font-weight:bold;
color: red;
}
.copyright
{ font-size:9pt;
font-style:italic;
text-transform:capitalize;
}
В этом примере созданы три класса: regular, superBig, copyright. Ниже показано, как применить эти классы в слое навигации text.
Класс superBig
Класс regular
Класс copyright
Можно также специально привязать класс тегу. Например:
P
{
font-size:16pt;
font-weight:bold;
}
P.small
{ font-size:9pt;
margin-left:5em;
margin-right:5em;
}
Ниже показано, как применить класс
{ font-size:16pt;
font-weight:bold;
font-family:verdana, sans-serif;
{ font-size:9pt;
margin-left:5em;
margin-right:5em;
cool{ color: blue; font-style; italic;}
Этот документ использует стилевые таблицы
Жесткий контроль с помощью тега
Тег - это удобный универсальный инструмент для применения стиля в любом месте, где он необходим.
Этот документ использует стилевые таблицы
Этот документ
= width) fontSize = Math.floor(fontSize * multiplier);
Теперь полученный скорректированный размер шрифта применяем к тегу :
$("body").css({fontSize: fontSize+"px"});
Все вышеописанные строки помещаем в функцию function fontSize() {} , затем запускаем эту функцию после загрузки хтмл-документа, а также после изменения размера окна браузера:
$(function() { fontSize(); }); $(window).resize(function() { fontSize(); });
Вот целиком код jQuery-скрипта, который получился у нас в итоге:
Function fontSize() { var width = 1000; // ширина, от которой идет отсчет var fontSize = 12; // минимальный размер шрифта var bodyWidth = $("html").width(); var multiplier = bodyWidth / width; if ($("html").width() >= width) fontSize = Math.floor(fontSize * multiplier); $("body").css({fontSize: fontSize+"px"}); } $(function() { fontSize(); }); $(window).resize(function() { fontSize(); });
HTMLРассмотрим применение вышеуказанного скрипта на примере 3-колоночного макета страницы, имеющего следующую структуру HTML-кода:
CSS
Теперь осталось только использовать динамический размер шрифта для тех блоков, к которым мы хотим его применить. Давайте, для примера, сделаем так, чтобы он менялся у всей страницы, за исключение правой колонки, а у левой колонки сделаем его чуть меньше основного.
Все очень просто.
Во-первых , правой колонке мы просто-напросто устанавливаем свой фиксированный размер шрифта и высоту строки, и скрипт его не затронет:
#right { font-size: 12px; line-height: 18px; }
Во-вторых , левой колонке ставим чуть меньший размер шрифта:
#left { font-size: 0.9em; }
В-третьих , нужно либо у тега , либо у соответствующего блока указать высоту строки в em, чтобы она тоже изменялась динамически.
Если вы хотите менять размер шрифта только у конкретного блока, допустим, у #content , тогда будет логичнее в скрипте поменять body (в строке $("body").css({fontSize: fontSize+"px"});) на нужный идентификатор или класс.
Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки Вёрстку загоняют в горизонтальный габарит 960-980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко - тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.«Резиновая» макетная сетка по ширине окна Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.Ещё одна распространённая проблема этого решения - боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.
Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.
Создаём контейнер макета:
... ...
Оформляем его незатейливым кодом стиля:
div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400-1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.
Дополняем HTML:
...
...
И немного меняем CSS:
div.page-container {
max-width: 75%;
min-width: 960px;
margin: 0 auto;
padding: 0;
}
div.page-container-inner {
min-width: 960px;
max-width: 1600px;
margin: 0 auto;
padding: 0;
}
Как видите - решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
Внешний вид HTML-формы может быть значительно улучшена с помощью CSS:
Стилизация поля вводаИспользуйте width свойство, чтобы определить ширину поля ввода:
Приведенный выше пример относится ко всем элементов. Если вы хотите, чтобы стиль определенный тип входного сигнала, можно использовать атрибут селекторы:
- input - будет выбирать только текстовые поля
- input - будет только выбрать поля паролей
- input - будет только выбрать номер поля
- и т.д..
Используйте padding свойство, чтобы добавить пространство внутри текстового поля.
Совет: Если у вас есть много входов после того, как друг с другом, вы также можете добавить margin , чтобы добавить больше пространства за их пределами:
Граничит ВходыИспользуйте border собственности, чтобы изменить размер и цвет границы, а также использовать border-radius свойство, чтобы добавить закругленные углы:
Если вы хотите только нижнюю границу, используйте border-bottom свойство:
Цветные входыИспользуйте background-color свойство, чтобы добавить цвет фона на вход, и color свойство изменять цвет текста:
Входы ФокусированныеПо умолчанию некоторые браузеры будут добавлять синий контур вокруг входа, когда он получает фокус (нажал на). Вы можете удалить это поведение путем добавления outline: none; на вход.
Используйте:focus селектор, чтобы сделать что - то с полем ввода, когда он получает фокус:
Ввод с помощью значка / изображенияЕсли вы хотите иконку внутри входа используйте background-image свойства и поместить его с background-position собственности. Также обратите внимание, что мы добавим большой левый отступ резервировать пространство иконы:
примерinput
{
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
В этом примере мы используем CSS3 transition свойство анимировать ширину поля поиска, когда он получает фокус. Вы узнаете больше о transition собственности позже, в нашем
