Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML.
Как браузер получает веб-страницы?
Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер — это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.
Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.
Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.
Примечание: Браузер (от англ. Web browser — Веб-обозреватель) — программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети — интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся:Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera.
Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.
Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.
Зачем нужен HTML-редактор?
Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор — это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.
Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver, Visual Studio и PHPStorm. В качестве бесплатных редакторов можно использовать notepad++ и geany.
Что из себя представляет HTML-документ?
HTML-документ — это обычный текстовой файл c расширением .html, который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.
Windows:
Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:
В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираемсохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить. Всё, HTML-документ создан.
Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.
Открыть файл, сохраненный с расширением .html, для просмотра в браузере можно двумя способами:
Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
Кликнуть по нему ПКМ → наводим курсор на открыть с помощью… → выбираем нужный вам браузер.
При получении HTML-документа браузер будет отображать его в виде веб-страницы (веб-страницей является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.
HTML-код:
1
2
3
4
5
6
7
8
9
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый абзац</p>
</body>
</html>
Результат данного кода в окне браузера:
Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью… → выбираем нужный вам редактор, если в списке нет нужного редактора, жмемВыбрать программу… и выбираем нужный редактор. Некоторые редакторы (для примера возьмемnotepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверхуEdit with Notepad++ (редактировать с помощью notepad++).
Что такое HTML?
HTML — это язык для описания структуры веб-страниц. Cтраницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.
Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).
Запомните, он не является языком программирования, это язык разметки.
HTML использует теги разметки, чтобы описать структуру веб-страницы.
Что такое теги?
HTML теги — это ключевые слова или символы, заключенные в угловые скобки, например <body>,<p>, <h2> и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ «/» после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. По стандарту HTML5 теги могут быть написаны в любом регистре.
С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов. Без использования тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах ниже.
Так выглядит страница, в которой используются теги для разметки:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<title>Летнее меню</title>
</head>
<body>
<h1>Напитки в нашем кафе</h1>
<h3>Мультифрукт - 100р.</h3>
<p>Фруктовый напиток, содержащий апельсиновый и ананасовый соки.</p>
<h3>Молочный коктель - 150р.</h3>
<p>Сливочное мороженое, перемешанное с мякотью фруктов.</p>
</body>
</html>
То же самое, но без использования тегов:
1
2
3
4
5
6
7
Напитки в нашем кафе
Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктель - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную.
Обязательным параметром у ссылки является только href=»URL», т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки.
Пример. Html код:
<body>
<ahref=«http://zarabotat-na-sajte.ru/»>как заработать на своем сайте</a>
</body>
К открывающему тегу <a> можно прописывать различные атрибуты. Они являются не обязательными, но очень важными. Давайте рассмотрим их.
Атрибуты тега a
1) Атрибут target=»параметр», который может принимать следующие значения:
→ _blank — открывает страницу в новом окне
→ _self — загружает страницу в текущее окно
→ _parent — загружает страницу во фрейм-родитель
→ _top — отменяет все фреймы и загружает страницу в полном окне браузера
Пример
<body>
<atarget=«_blank»href=«http://iboard.kz/»>доска бесплатных объявлений в Казахстане</a>
</body>
В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.
2) Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку.
Пример
<body>
<atitle=«Подсказка для ссылки на главную страницу сайта»href=«http://iboard.kz»>как заработать на своем сайте</a>
</body>
В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки.
3) Атрибут class=»название класса» задает класс для ссылки со стилями. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия.
Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например
изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти
свойства можно определять по-разному, в зависимости от того, посетили уже ссылку,
активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить
интересные эффекты на ваш web-сайт. Для этого используются так называемые
псевдоклассы.
Что такое псевдокласс?
Псевдокласс позволяет учитывать различные условия или события при определении
свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.
В CSS мы также можем использовать a в качестве селектора:
a {
color: blue;
}
Ссылка может иметь разные состояния. Например, её уже посетили/visited или
ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых
и непосещённых ссылок.
a:link {
color: blue;
}
a:visited {
color: red;
}
Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель — над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с
объяснениями.
Псевдокласс: link.
Псевдокласс :link используется для ссылок на страницы, которые
пользователь ещё не посещал.
В примере кода непосещённые ссылки — синие.
a:link {
color:#6699CC;
}
Псевдокласс: visited
Псевдокласс :visited используется для ссылок на страницы,
которые пользователь посетил.
В примере кода посещённые ссылки — фиолетовые.
a:visited {
color:#660099;
}
Псевдокласс: active
Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color:#FFFF00;
}
Псевдокласс: hover
Псевдокласс :hover используется для ссылок, над которыми
находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы
хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении
указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}
Эффект при нахождении указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.
Пример 1a: Расстояние между буквами
Расстояние между
символами можно установить свойством letter-spacing. Это можно
применить для ссылки:
a:hover {
letter-spacing:10px;
font-weight:bold;
color:red;
}
Пример 1b: UPPERCASE и lowercase
Свойство text-transform может переключать символы с верхнего на нижний регистр. Это также можно
использовать для создания эффектов на ссылке:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Эти два примера показывают почти безграничные возможности комбинирования
различных свойств. Вы можете создавать свои собственные эффекты — попробуйте!
Удаление подчёркивания ссылок
Обычный вопрос — как удалить подчёркивание ссылок?Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.
Вообще-то удалить подчёркивание ссылок очень просто. Свойство text-decoration
можно использовать для определения подчёркивания текста. Для удаления
подчёркивания просто установите в text-decoration значение none.
a {
text-decoration:none;
}
Альтернативно можно также установить text-decoration, наряду с
другими свойствами, для всех четырёх псевдоклассов.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Цвет — color
В течение предыдущих уроков мы все время использовали свойство цвета — color. Это свойство задает цвет текста внутри элемента. Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:
Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка красным:
body{
color:green;
}
h1{
color:red;
}
Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего «предка» — элемента body. Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента «предка». Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано. Дерево элементов — структура всех элементов html-страницы, отражающая их вложенность друг в друга. Схематично дерево элементов для нашего примера выглядит так:
В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.
Значениями свойства color могут быть именные цвета (red, blue…), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)). Итак, задать цвет текста для элемента можно тремя способами:
body{
color:green;
}
h1{
color:red;
}
h2{
color:rgb(255,0,0);
}
Фон — background На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:
background: background-color — задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.
Пример:
body{
background-color:#243CED;
color:yellow;
}
Сейчас наша страница в браузере выглядит так:
background-image — задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.
Пример:
body{
background-image:url(picture.gif);
background-color:#243CED;
color:yellow;
}
Сейчас наша страница в браузере выглядит так:
В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif (об относительной адресации читайте на странице абсолютная и относительная адресация). Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.
background-repeat — задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:
repeat — повторять изображение по горизонтали и вертикали. repeat-x — повторять изображение только по горизонтали. repeat-y — повторять изображение только по вертикали. no-repeat — не повторять изображение.
По умолчанию используется значение repeat, как мы и убедились в предыдущем примере.
Давайте посмотрим как ведут себя остальные значения:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
color:yellow;
}
В браузере выглядит так:
body{
background-image:url(picture.gif);
background-repeat:repeat-x;
background-color:#243CED;
color:yellow;
}
В браузере выглядит так:
body{
background-image:url(picture.gif);
background-repeat:repeat-y;
background-color:#243CED;
color:yellow;
}
В браузере выглядит так:
background-attachment — указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:
scroll — фон прокручивается вместе с текстом. Это значение используется по умолчанию.
fixed — фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.
Пример:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#243CED;
color:yellow;
}
Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.
background-position — задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:10%30%;
color:yellow;
}
Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали. Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:
А в Opera так:
Этой проблемы можно избежать, задавая размер в пикселах:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:50px50px;
color:yellow;
}
Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:center top;
color:yellow;
}
Изображение будет выровнено по горизонтали — по центру, а по вертикали — по верхнему краю страницы:
Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю), center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю), center (по центру) и bottom (по нижнему краю).
Сокращенная запись свойства background
В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:
body{
background:url(picture.gif) no-repeat #33CCFF center top;
color:yellow;
}
Вот мы и рассмотрели свойства цвета и фона. Помните, что их можно применять ко всем элементам. Для тренировки задайте фон для заголовка или ссылки.
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100
Адаптивный дизайн представляет собой процесс организации макета сайта таким образом, что в зависимости от типа устройства пользователя или размера экрана вся важная информация подстраивается в удобной для него форме. Большинство дизайнеров выбирают макет на основе сетки, так как с ним проще работать на разных типах устройств.
Право выбора остается за вами: использовать для создания макета фиксированную или плавающую сетку (Fluid Grids). В этом статье мы подробно расскажем о плавающей сетке и ее важности в адаптивном дизайне.
Что такое Fluid Grid?
Прежде чем начинать думать о конкретных проектах, важно для начала понять, что такое плавающая сетка. Думаю, наилучшее определение Fluid (жидкости) приведено в Википедии:
Жидкость представляет собой вещество, которое постоянно изменяется (перетекает) под воздействием приложенного усилия – Википедия.
Я лишь хочу немного уточнить это определение с практической точки зрения. В веб-дизайне, (плавающей) жидкостью будет наш дизайн или макет, а в качестве приложенного усилия будет выступать изменение размера экрана или устройства пользователя.
Независимо от того, какое устройство использует пользователь или какой размер экрана у этого устройства, компоненты плавающего дизайна перетекают и адаптируются к ним.
Важность Fluid Grid
В адаптивных сетках мы определяем размеры на основе пикселей. Поэтому для некоторых видов устройств нам придется корректировать ширину и высоту вручную.
Поскольку плавающая сетка адаптируется естественно в пределах родительского контейнера, ограничения в зависимости от размеров экрана или устройства нужно будет задать именно для внешних границ контейнера.
Мобильные устройства становятся все меньше, и люди предпочитают использовать в работе именно их. С другой стороны, настольные мониторы становятся все больше и имеют все более высокое разрешение. Так что мы не можем разрабатывать адаптивный дизайн только под небольшие устройства.
Преимуществом Fluid Grid является то, что мы можем установить максимальную ширину, и она все равно будет работать на больших экранах, благодаря расчетам на основе процентов.
Как работает Fluid Grid?
Мы используем для разработки внутреннюю фиксированную сетку с системой в 960 пикселей. Затем адаптивность макета достигается, с помощью использования различных размеров пикселя для различных размеров экрана.
Это все, что касается разработки на основе пикселей. Теперь нам нужно создать конструкцию на основе процентных соотношений. Она и известна под названием Fluid Grid (плавающая сетка).
Для плавающей сетки мы задаем максимальный размер структуры. Построение сетки зависит от количества столбцов, при котором можно свободно разместить на конкретном экране содержание страницы, и с ним можно будет нормально работать.
После этого мы задаем высоту и ширину каждого элемента пропорционально к базовому размеру, а с не помощью фиксированного значения в пикселях. Поэтому, когда размер устройства или экрана изменяется, ширина и высота элемента будет корректироваться пропорционально.
Прежде чем мы перейдем к более глубокому рассмотрению Fluid Grid, давайте взглянем на несколько крутых дизайнов, разработанных на основе плавающей сетки. Это позволит нам лучше понимать, как работают плавающие макеты.
Создание плавающей сетки с нуля – это непростая задача, которая потребует много времени и усилий. Поэтому намного мудрее взять за основу для нашего макета существующие CSS Grid Framework или Grid Generator.
Ниже приведен перечень некоторых бесплатных CSS-систем Fluid Grid и генераторов:
Большинство CSS-фреймворков имеют дополнительные встроенные функции и проверены на совместимость со многими из существующих браузеров. Цель этого статьи раскрыть полностью от и до, что такое Fluid Grids и как они работают.
Потому я предлагаю рассмотреть создание плавающей сетки, на примере которой мы сможем понять базовые принципы построения данных элементов.
Чтобы создать плавающую сетку, которая подойдет под наши требования, я буду использовать Variable Grid System. Перейдите по этой ссылке и установите значения переменных. Я буду использовать следующие значения.
Ширина столбца – 60.
Количество столбцов – 12.
Расстояние между столбцами – 20.
Затем загружаем плавающую версию файла CSS. Теперь откройте его в вашем любимом текстовом редакторе и найдите строку Grid >> 12 Columns. Приведенный ниже код отображает содержимое разделаGrid >> 12 Columns:
Как видите, container_12 является основным контейнером. Каждый элемент нашего дизайна должен располагаться внутри этого контейнера, принадлежащего классу container_12.
Тогда различные размеры элементов, определяющиеся в процентном отношении к основному контейнеру, задаются классами .grid_1 , .grid_2 … .grid_n. Плавающая сетка строится с помощью столбцов, которые называются плавающими столбцами.
Когда изменяется размер экрана, ширина этих столбцов также будет регулироваться пропорционально родительскому контейнеру.
В нашей сетке у нас есть 12 плавающих столбцов. Давайте посмотрим, как эти столбцы укладываются в структуру:
Ниже приводится код для описанной в этом разделе сетки. Чтобы получить дополнительную информацию, вы можете ознакомиться с материалами для скачивания по данной статье:
Каждый набор компонентов содержится внутри элемента класса class container_12. Чтобы создавать плавающие колонки определенной ширины, мы можем использовать внутри контейнера класс grid_n. Если мы используем класс grid_1, то получаем 1/12 ширины исходной сетки, если grid_2 — то 2/12.
Вы можете загрузить демо-версию и, изменив масштаб просмотра в браузере, наглядно увидеть, как действует плавающая сетка.
Вложенные плавающие столбцы
Если вы используете CSS-фреймворк, тогда создание сетки с плавающими столбцами не составит большого труда. Но не все структуры так просты в реализации, как рассмотренный выше пример. Вам, возможно, потребуется создавать столбцы внутри других столбцов и строк.
Столбцы, являющиеся частью родительского столбца, называются вложенными. Давайте рассмотрим, как мы можем создавать вложенные плавающие столбцы с помощью файла CSS, который мы сгенерировали ранее.
Приведенный выше макет содержит 2 строки. Первая строка разделена на 2 секции по 6 столбцов, и каждая из их этих двух секций в свою очередь делится на 4 секции по 3 столбца.
Аналогично вторая строка разделена на 3 секции по 4 столбца, и каждая из этих 3-х секций снова делится на 3 секции по 4 столбца. Таким образом, вы создаете вложенные столбцы в сетке. Давайте рассмотрим код описанной выше структуры:
Сначала мы создаем основной контейнер и делим его на столбцы, как мы делали в предыдущем разделе. Внутри столбца нам нужно создать еще один контейнер с классом container_12 для вложенных столбцов. Теперь мы получаем еще 12 столбцов в базовых шести столбцах.
Теперь 12 подстолбцов можно разделить еще, если это необходимо. Это должно дать вам четкое представление, как создавать плавающую сетку и как работать с вложенными столбцами. Давайте двигаться дальше.
Дизайн на основе Fluid Grid
Большинство начинающих дизайнеров думают, что просто использовав адаптивный CSS-фреймворк, они получат адаптивный дизайн. К сожалению, не все так просто. Плавающая сетка будет адаптироваться к изменениям размеров окна браузера или устройства.
Однако если вы тщательно не проработаете дизайн, при использовании плавающей сетки пользователи будут иметь серьезные проблемы с просмотром содержимого вашего сайта на небольших устройствах.
Рассмотрим следующий пример:
Вот так структура плавающей сетки, рассмотренная в предыдущих разделах, будет отображаться на маленьких экранах. Всего лишь столбцы сетки без соответствующих данных. И даже число 1 не отображается, как надо. Когда дело доходит до реального контента, начинается полнейший беспорядок.
В этом случае мы должны отрегулировать ширину столбцов. Это должно обеспечить пользователям удобство работы с сайтом.
Чтобы отрегулировать ширину столбцов для различных размеров экрана, вы можете использовать медиа запросы CSS. В приведенном выше сценарии можно удвоить ширину столбцов и использовать 6 столбцов вместо 12-ти, чтобы улучшить читаемость контента. Так что как видите, адаптивность сайта зависит не только от плавающей сетки.
<!DOCTYPE html>
<head>
<title>Creating a modal window with HTML5 & CSS3</title>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
</head>
<body>
<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</body>
</html>
Задание
Создать простую фотогалерею, которая будет хорошо отображаться на различных экранах устройств.
1. Для начала создать обычное изображение, которое будет растягиваться на всю ширину экрана.
<div>
<img src="../images/1.jpg">
</div>
Предельно просто. Всего лишь обернули изображение в контейнер.
div {
width: 100%;
text-align: center;
}
div img {
width: 100%;
height: auto;
}
Мы задаем ширину изображению, равную ширине контейнера div. Благодаря этому, если уменьшается div, то уменьшается img.
В итоге мы получили изображение, которое растягивается на весь экран, будь-то экран 320*240 пикселей или экран с разрешением 1920*1080 пикселей.
Максимальная и минимальная ширина
Как видно в примере, если у нас очень большой экран или наоборот очень маленький, то изображение будет либо слишком сильно растягиваться с потерей качества, либо слишком сильно сжиматься.
Чтобы решить данную проблему зададим изображению определенную максимальную и минимальную ширину.
div {
margin: 0 auto;
width: 1000px;
max-width: 90%; /* контейнер не превышает 90% ширины экрана */
min-width: 500px;
}
div img {
max-width: 100%;
height: auto;
}
Теперь контейнер, а следовательно и изображение будут изменяться в разумных пределах от 500 до 1000 пикселей по ширине.
Фотогалерея
2. Попробуем создать минигалерею.
Будем использовать уже известные нам принципы.
В HTML мы лишь добавили несколько изображений и завернули все в один div.
div.image_gallery {
margin: 0 auto;
width: 1000px;
text-align: center;
max-width: 90%; /* контейнер не превышает 90% ширины экрана */
min-width: 500px;
}
img {
float: left;
max-width: 48%;
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
Каждое изображение в галерее теперь будет изменять свой размер в зависимости от контейнера. Так же мы добавили небольшой отступ по 1% с каждой стороны для красоты.
Итог
Итак, мы создали маленькую фотогалерею, которая хорошо отображается на различных экранах. Мы добились адаптивности.
Но это еще не все.
В данном примере можно выделить большой минус: на мелких экранах изображения будут либо слишком мелкими, либо появится скролл в браузере.
h1 {
font-size: 24px;
text-align: center;
}
div.image_gallery {
margin: 0 auto;
width: 1000px;
text-align: center;
max-width: 90%; /* контейнер не превышает 90% ширины экрана */
min-width: 500px;
}
img {
float: left;
max-width: 31%;
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
Что получилось? Смотрим:
При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.
Решим нашу проблему!
/* прошлый CSS */
h1 {}
div.image_gallery {}
img {}
@media screen and (max-width: 768px) { /* разрешение планшета */
h1 {
font-size: 20px;
}
div.image_gallery {
min-width: 320px;
}
img {
max-width: 48%; /* 2 изображения в ряд */
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
}
Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).
В результате фотографии на экране планшета стали выглядеть намного лучше!
Теперь разберемся с экраном поменьше.
@media screen and (max-width: 480px) { /* разрешение смартфона */
h1 {
min-width: 320px;
font-size: 16px;
}
div.image_gallery {
width: 320px;
min-width: 320px;
}
img {
max-width: 98%;
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
}
После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.
Итог
Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!
h1 {
font-size: 24px;
text-align: center;
}
div.image_gallery {
margin: 0 auto;
width: 1000px;
text-align: center;
max-width: 90%; /* контейнер не превышает 90% ширины экрана */
min-width: 500px;
}
img {
float: left;
max-width: 31%;
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
Что получилось? Смотрим:
При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.
Решим нашу проблему!
/* прошлый CSS */
h1 {}
div.image_gallery {}
img {}
@media screen and (max-width: 768px) { /* разрешение планшета */
h1 {
font-size: 20px;
}
div.image_gallery {
min-width: 320px;
}
img {
max-width: 48%; /* 2 изображения в ряд */
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
}
Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).
В результате фотографии на экране планшета стали выглядеть намного лучше!
Теперь разберемся с экраном поменьше.
@media screen and (max-width: 480px) { /* разрешение смартфона */
h1 {
min-width: 320px;
font-size: 16px;
}
div.image_gallery {
width: 320px;
min-width: 320px;
}
img {
max-width: 98%;
height: auto;
padding: 1%; /* небольшие оступы для изображений */
}
}
После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.
Итог
Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!
«Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.»
Зачем нужен адаптивный веб-дизайн?
1) Большое разнообразие устройств, с которых можно выходить в Интернет. В настоящее время существует множество устройств, которыми люди пользуются, в том числе, и для того, чтобы выходить в Интернет. Все эти устройства различаются размером экрана, разрешением и, соответственно, тем, как может отображаться на них веб-сайт. Поэтому важно, чтобы ваш сайт хорошо смотрелся и правильно отображался у любого из пользователей, независимо от того, какое устройство он использует.
2) Популярность мобильных устройств с выходом в Интернет и увеличение мобильного Интернет-трафика. С ростом популярности мобильных устройств количества пользователей, которые заходят с них на сайты, заметно увеличилось, поэтому просто игнорировать их уже нельзя – это не один-два человека в полгода, это значительная часть вашей аудитории, и им должно быть удобно пользоваться вашим сайтом (иначе они не будут этого делать).
3) Срочная информация. Если ваш ресурс содержит новостную / срочную информацию, и высока вероятность, что пользователю может понадобится прочитать эту информацию именно с телефона (потому что других устройств у него под рукой нет) в данный момент времени, нужно позаботиться о том, чтобы у него была возможность это сделать.
Это значит, что один и тот же сайт можно просматривать на самых разных устройствах, независимо от разрешения и формата экрана, – смартфонах, планшетах, ноутбуках и т.д. При этом просмотр будет одинаково удобен для всех форматов – пользователям мобильных устройств, например, не нужно будет расширять отдельные области сайта, чтобы не промахнуться мимо нужной ссылки.
Адаптивный дизайн призван сделать веб-страницы и отображение их содержимого соответствующими тому устройству, с которого они просматриваются.
Отличие адаптивного сайта от мобильной версии (приложения) сайта
Мобильные версии сайтов и мобильные приложения, специально разработанные для различных мобильных устройств, также решают проблему с удобством просмотра сайта, но имеют некоторые недостатки.
1) Под каждый тип операционной системы нужно свое приложение / версия сайта. Это требует дополнительных ресурсов, как временных, так и денежных.
2) Необходимость загрузки приложения. Для того, чтобы пользоваться вашим приложением, пользователям необходимо его загрузить. Это требует каких-то дополнительных усилий от пользователей, и многие не будут этого делать, если точно не уверены, что приложение им очень нужно и они планируют регулярно его использовать.
3) Разделение траффика. С точки зрения продвижения сайта мобильное приложение не удобно тем, что разделяет весь траффик ресурса на траффик сайта и траффик приложения, что будет выглядеть, как меньшая посещаемость сайта.
4) Необходимость интеграции материалов сайта. В случае с мобильным приложением необходимо либо синхронизировать сайт с приложением (дополнительные ресурсы), либо делать двойную работу по наполнению сайта и приложения материалами.
В отличие от мобильных приложений, адаптивный дизайн – это один адрес сайта, один дизайн, одна система управления и содержание сайта.
Безусловно, адаптивный дизайн также имеет свои минусы, главным из которых является относительная новизна технологии и, как следствие, недостаток хороших специалистов и знаний о проектировании адаптивных сайтов.
Принципы адаптивного дизайна
Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное.
• Проектирование для мобильных устройств с самых ранних этапов («mobile first»);
• Применение гибкого макета на основе сетки (flexible, grid-based layout);
• Использование гибких изображений (flexible images);
• Работа с медиазапросами (media queries);
• Применение постепенного улучшения.
Типы адаптивных макетов
1) Резиновый
Простой в реализации и очевидный для пользователя тип представления сайта. Основные блоки сжимаются до ширины экрана мобильного устройства, где такое невозможно — перестраиваются в одну длинную ленту.
2) Перенос блоков
Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана дополнительные блоки (сайдбары) переносятся в нижнюю часть макета.
3) Переключение макетов
Этот способ наиболее удобен при чтении сайта с различных устройств: под каждое разрешение экрана разрабатывается отдельный макет. Способ трудоемок, поэтому менее популярен, чем предыдущие два.
4) Адаптивность «малой кровью»
Очень простой способ, который подходит для несложных сайтов. Достигается элементарным масштабированием изображений и типографики. Не очень популярен, т.к. не обладает гибкостью.
5) Панели
Способ, пришедший из мобильных приложений, где дополнительное меню может появляться при горизонтальном или вертикальном тапе. Главный недостаток — неочевидность действий для пользователя: очень непривычно видеть мобильную навигацию на веб-сайта. Но со временем способ может стать достаточно популярным.
Нужно помнить, что представленные выше макеты не являются универсальными решениями — для каждого проекта необходимо выбирать наиболее подходящий под нужды и возможности способ.
Благодаря адаптивной верстке сайт будет качественно и удобно отображаться на разных устройствах, таких как:
персональные компьютеры
ноутбуки
планшеты
смартфоны и других.
С каждым днем адаптивная верстка становится все популярней. Адаптивных сайтов появляется все больше и больше.
Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.
Мы стремимся повысить доступность наших продуктов, то есть предоставить всем пользователям оптимальные возможности для работы с ними. Перед нами стояла дилемма: создать специальные мобильные версии сайтов или адаптировать существующие сайты и новые проекты для просмотра как на настольных компьютерах, так и на мобильных устройствах. Создание двух версий сайта позволило бы нам оптимизировать каждую из них для конкретного оборудования, но использование одного общего сайта дает возможность сохранить канонический URL. При этом исключаются сложные переадресации и упрощается совместное использование веб-адресов. Удобство обслуживания является важным фактором, поэтому мы решили не создавать разные версии страниц, а начали обдумывать, как обеспечить выполнение следующих условий:
четкое отображение страниц на экране с любым разрешением;
возможность просмотра группы контента на любом устройстве;
отсутствие горизонтальной полосы прокрутки независимо от размера окна.
Изменяется расположение контента, навигация и масштаб изображений – Хромбуки
Реализация
Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет. Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width. Атрибут height был заменен атрибутом min-height, чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:
img{ max-width:100%; }
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью,медиа-запросы теперь поддерживаются всеми современными браузерами, в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.
Области просмотра
Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения.Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.
Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:
Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.
Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:
@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ }
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается.
@media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ }
Изменяется расположение контента и масштаб изображений – Институт культуры
Пример использования медиа-запросов
Недавно мы запустили новую версию страницы О Google. Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.
Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.
Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:
@media screen and (max-width: 800px) { /* specific CSS */ }
Последний медиа-запрос предназначен для смартфонов:
@media screen and (max-width: 479px) { /* specific CSS */ }
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.
Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств. Изменяется расположение контента, удалено большое изображение – О Google
Заключение
Важно понимать, что не существует простого решения, которое бы позволило сделать сайты удобными для просмотра на мобильных устройствах и устройствах с узкими экранами. Резиновые макеты хороши в качестве отправной точки, но их использование накладывает некоторые ограничения. Медиа-запросы также помогают оптимизировать сайты, но не следует забывать, что в 25% случаев при посещении сайтов используются компьютерные браузеры, которые еще не поддерживают данную технологию. Наличие таких запросов влияет на эффективность их работы. А если на сайте есть виджет, с которым удобно работать с помощью мыши, вовсе не факт, что он будет столь же удобен на сенсорном экране, где сложнее выполнять точные действия.
Крайне важно начинать тестирование на ранних этапах разработки и не прекращать его в дальнейшем. Просматривая свои сайты на смартфоне или планшете, вы не тратите время впустую. Если у вас нет возможности протестировать сайт на реальных устройствах, используйте Android SDK или iOS Simulator. Попросите знакомых и коллег зайти на сайт со своих устройств и понаблюдайте за его работой.
Оптимизация сайта для мобильных устройств позволит привлечь на него еще больше посетителей. Кроме того, изучение и разработка наилучших методов такой оптимизации открывает новые возможности для профессионального развития.
Как решить проблему? Media Queries!
Данную проблему можно решить благодаря новой возможности CSS: media queries.
С их помощью мы можем отслеживать разрешение экрана пользователя и отображать необходимые стили для каждого разрешения или устройства.
Рассмотрим пример:
В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса .class будет красным.
Таким образом мы может подстраивать наши стили под каждый экран в отдельности.
Условия для Media Queries
Условия можно задать следующие условия:
@media screen and (max-width: XXXpx) { }
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }
Способы подключения CSS-таблиц
Так же можно добавлять условия, для каких экранов будет подключаться та или иная таблица стилей:
<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" />
<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Медиа-запросы
Синтаксис
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.
Типы носителей и их описание
all — Все типы. Это значение используется по умолчанию. braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. embossed — Принтеры, использующие для печати систему Брайля. handheld — Смартфоны и аналогичные им аппараты. print — Принтеры и другие печатающие устройства. projection — Проекторы. screen — Экран монитора. speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). tv — Телевизоры.
Логические операторы, применяемые в медиа-запросах
and
Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств
@media all and (color) { ... }
not
Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме смартфонов
@media all and (not handheld) { ... }
Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение
@media not all and (color) { ... }
следует понимать как
@media not (all and (color)) { ... }
а не
@media (not all) and (color) { ... }
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.
Пример 1. Стиль для цветных устройств
@media screen and (color) { /* Для цветных экранов */
body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
body { background: #ccc; }
}
color-index (min-color-index, max-color-index)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.
Пример 2. Цветной дисплей
@media all and (min-color-index: 256) {...}
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.
Пример 3. «Киношное» соотношение
@media screen and (min-device-aspect-ratio: 16/9) {...}
device-height (min-device-height, max-device-height)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную высоту экрана устройства или печатной страницы.
device-width (min-device-width, max-device-width)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.
Пример 4. Ширина макета
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина макета</title>
<style>
div {
padding: 10px;
background: #e8bfad;
margin: auto;
}
@media screen and (min-device-width: 1600px) {
div {width: 1500px;}
}
@media screen and (device-width: 1280px) {
div {width: 1100px;}
}
@media screen and (device-width: 1024px) {
div {width: 980px;}
}
</style>
</head>
<body>
<div>
Диабаз, формируя аномальные геохимические ряды, сменяет известняк,
образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
</div>
</body>
</html>
grid
Тип носителя: all
Значение: нет
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).
Пример 5. Размер букв
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стиль для бабушкофона</title>
<style>
@media handheld and (grid) and (max-width: 15em) {
body { font-size: 2em; }
}
</style>
</head>
<body>
<p>Привет! Как дела? Как сажа бела?</p>
</body>
</html>
height (min-height, max-height)
Тип носителя: все кроме speech
Значение: размер
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.
Пример 6. Стиль для принтера
@media print and (monochrome) {
body { font-family: Times, 'Times New Roman', serif; }
h1, h2, p { color: black; }
}
@media print and (color) {
body { font-family: Arial, Verdana, sans-serif; }
h1, h2, p { color: #556b2f; }
}
orientation
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).
Пример 7. Использование ориентации устройства
resolution (min-resolution, max-resolution)
Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)
Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
Пример 8. Разрешение принтера
@media print and (min-resolution: 300dpi) {...}
scan
Тип носителя: tv
Значение: interlace | progressive
Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.
width (min-width, max-width)
Тип носителя: все кроме speech
Значение: размер
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.
Пример 9. Использование max-width
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина страницы</title>
<style>
body { background: #f0f0f0; }
@media screen and (max-width: 600px) {
body { background: #fc0; }
}
</style>
</head>
<body>
<p>Пока магма остается в камере, мусковит сингонально поднимает шток,
в то время как значения максимумов изменяются в широких пределах. </p>
</body>
В блоке сайдбар создайте выпадающий список используя свойства display,position, Псевдоклассы :first-child :last-child, псевдоэлементы ::before и ::after. Пример страницыурок 10
<ul class="pleft">
<h6>Страна Казахстан </h6>
<h6>Статус областной центр </h6>
<h6>Область Карагандинская область </h6>
<h6>Координаты Координаты: 49°48′00″ с. ш. 73°07′00″ в. д. </h6>
<h6>Аким (чин) Серик Ахметов </h6>
<h6>Основан 1931 </h6>
<h6>Город с 1934 </h6>
<h6>Площадь 550 км² </h6>
<h6>Высота центра 553 м </h6>
<h6>Тип климата резко-континентальный </h6>
<h6>Население 457,800 тыс. человек (2010) </h6>
<h6>Плотность 846 чел./км² </h6>
<h6>Национальный состав казахи, русские, узбеки, украинцы </h6>
<h6>Конфессиональный состав мусульмане, христиане и др. </h6>
<h6>Часовой пояс UTC+6 </h6>
<h6>Телефонный код +7 7212 </h6>
<h6>Почтовый индекс 100000 (старый 470000) </h6>
<h6>10 февраля 1934 года Караганда получила статус города.
</ul>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.block{
width:200px;
height:200px;
background:#ff0;
border-top:5px red solid;
border-left:5px green solid;
border-right:5px blue solid;
border-bottom:5px orange solid;
text-align:center;
line-height:200px;
}
Добавьте анимацию к своей странице как на примере урок8
Задание для восьмого урока
Создать страницу istoriya.html задать для нее фон
Оформить текст «история города» используя стили приведенные в уроке 8.
— Первые четыре абзаца с выравниванием по левому краю, по правому краю, по центру и по обоим краям. — Добавить три заголовка используя свойста text-decoration, а также применить его в тексте. — Сделать чтобы все абзацы начинались с красной строки. — Применить в тексте свойства text-transform. — использовать свойсто вертикальное выравнивание. — изменить растояние между символами и словами для первого абзаца. — изменить расстояние между строками второго абзаца и третьего. — изменить стили шрифта и font-family для заголовков.
1. Код страницы со стилями для фона, заголовка и ссылок:
10. Изменим межсимвольное расстояние для первого абзаца. Добавим в класс pleft строки:
word-spacing: 10px;
letter-spacing: 5px;
результат:
11. Добавим в классы pright строку line-height: 25px; и pcenter строку line-height: 10px;
12. Добавим в стиль заголовка строки font-style: italic; font-family: Comic Sans MS; и в класс texta строку font-style: oblique; font-family: Monotype Corsiva, Verdana;
Смотрим результат:
Тот же стиль можно добавить и на остальные страницы убрав или закоментировав имеющийся, тогда при увеличении длины страницы и прокрутки ее в низ до размеров в 3000px фон будет становится темнее. Длину можно сделать больше или меньше. Плюс поменять цвета для остальных стилей например так:
2.Перед тем как приступить работать с изображениями в стилях зададим базовые правила для них. Код:
border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden
3.Рассмотрим применение фильтров изображений. Чтобы обеспечить максимальную совместимость браузера, в фильтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.
Эффект размытия:
/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}
5. Еще один эффект перевод цветного изображения в тональность сепия.
Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию. То же относится и к предыдущему стилю.
/*SEPIA*/
.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.sepia img:hover {
-webkit-filter: sepia(100%);
}
6. Теперь контрастность. Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.
/*CONTRAST*/
.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.contrast img:hover {
-webkit-filter: contrast(185%);
}
9. Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже. Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.
/*OPACITY*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.opacity img:hover {
-webkit-filter: opacity(25%);
}
