Введение. История HTML.
Практически каждая современная интернет-страница состоит из нескольких основных языков, результат интерпретации которых браузерами видит пользователь и каждый из которых играет огромную роль в её функционировании. Это:
- (X)HTML-код;
- CSS-код (каскадные таблицы стилей);
- JavaScript-код.
К каждому из них существует соответствующий стандарт, который определяется всемирной организацией "w3c" (World Wide Web Consorcium) и касаются кросс-браузерности.
Первые два из них (HTML и CSS) мы и будем изучать в течение первого семестра. JavaScript - это второй семестр.
HTML (Hyper Text Markup Language) - стандартный язык разметки документов во Всемирной паутине.
Начало HTML было положено Тимом Бернерс-Ли, выпускником Оксфордского университета. В 1989 году он выдвинул предложение о создании "Системы гипертекстовых документов", которая должна была использоваться внутри CERN. В 1990 году он назвал эту систему World Wide Web (Всемирная Паутина). Одной из составляющих системы был язык разметки гипертекста. Его основы были заложены в 1990 году, когда Бернерс-Ли разрабатывал первый веб-браузер. Наконец, в 1993 году появилась первая версия языка — HTML 1.0. Но он не был стандартом. И только в 1994 году, когда закончилась разработка языка HTML 2.0, он стал таковым. К тому времени вторую версию языка HTML полностью поддерживало большинство браузеров.Именно этот язык стал базисом, который потом усложнялся и дополнялся.Дальнейшим развитием языка стала версия HTML 3.0.(1995). В ней были реализованы таблицы, обтекание текста вокруг фигур и многие другие идеи. Несмотря на обратную совместимость, отличия между версиями 2.0 и 3.0 были огромными, по этой причине браузеры очень медленно и достаточно вяло включали поддержку новых возможностей. Версия 3.0 так и не стала стандартом. Зато им стала версия HTML 3.2. Она создавалась с учетом мнений производителей браузеров (Microsoft и Netscape), что естественным образом привело к положительным результатам. Примечателен тот факт, что еще до официального утверждения данного стандарта (это произошло в 1997 году), уже в 1996 году практически все браузеры полностью поддерживали его.
Во многом благодаря стандарту HTML 3.2 веб-дизайн испытал небывалый взлет. Появилась возможность проектировать и отображать на экране сложные композиции, ничем не уступающие журналам, газетам и другим печатным изданиям (это стало возможным благодаря табличной верстке). Но из-за медленных каналов связи приходилось значительно ограничивать применение графики, а многие мониторы отображали не более 256 цветов, так что и богатство красок оставляло желать лучшего.
Несмотря на то, что язык HTML 3.2 включал в себя многие расширения, внедренные разработчиками браузеров, он все еще оставался достаточно ограниченным, поэтому и новый стандарт не заставил себя долго ждать. Уже в том же 1997 году появилась спецификация HTML 4.0. В нее включили фреймы, унифицировали процедуру вставки различных объектов в документ, реализовали поддержку каскадных таблиц стилей. Кроме того, были значительно усовершенствованы формы и таблицы, а некоторые элементы помечены как нежелательные для использования.
Версия HTML 4.01 была стандартизирована 24 декабря 1999 года. Приход четвертой версии разделил форматирования текста и его структуру. Теперь в HTML странице сохраняем только структуру документа (разноуровневые заголовки, абзацы, таблицы, списки, формы), а все что относится к форматированию пишется в CSS (каскадных таблицах стилей), которые подключаются к HTML-документу. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем и уменьшает длину кода. Кроме того HTML 4.01 позволяет быстро переходить к XHTML (официально стандартизирован W3C 26 января 2000 года) - HTML совместимому с XML. XHTML отличается от HTML строгостью написания кода, что позволяют избежать многих ошибок ещё на стадии написания и отладки. XML (англ. eXtensible Markup Language — расширяемый язык разметки) - рекомендованный Консорциумом Всемирной паутины язык разметки, фактически представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных (взамен существующих файлов баз данных), для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки (например, XHTML). В последние годы начал использоваться HTML5 (находится в стадии разработки) — это новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое. HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).
Учебные материалы и ресурсы.
В процессе обучения мы будем использовать, во-первых, основной сайт IT ACADEMY, во-вторых, эту учебную страничку, на которую можно зайти из раздела "Учёба" основного сайта, нажав на "PS (Полина)" под заголовком "Страницы преподавателей курсов". На ней в разделе "Полезные ресурсы" находятся сайты и книги, которые могут Вам пригодиться в учебе и работе, а в разделе "Контакты" контактные данные мои и IT ACADEMY.
Также мы будем постоянно пользоваться сайтом "w3schools" (для удобства использования ссылки на него расположены в правой колонке).
Для написания HTML и CSS будем использовать редактор Notepad++. На основном сайте в разделе "Учёба" под заголовком "Программы и утилиты", нажав на ссылку Portable, скачиваем и устанавливаем себе на флэшку или же скачиваем и устанавливаем на флэшку свежую версию программы отсюда. Сразу нужно установить правильную кодировку текстов по умолчанию:
Settings -> Preferences -> New Document/Default Directory -> Encoding -> UTF-8
Можно также в General -> Localization установить русский язык программы, если это Вам удобнее.
Также нужно держать у себя на компьютере набор браузеров: IE, Firefox, Opera, Chrome, Safari и просматривать создаваемые страницы во всех них.
Полезные инструменты.
Для учебы и создания сайтов хорошо пользоваться плагинами Web develоper и Firebug + Firepicker, написанными для браузера Mozilla Firefox. В частности, с помощью кнопки "Контуры" плагина Web develоper в верхнем панели Firefox можно выделить контуры элементов, расположенных на странице.
HTML. Структура HTML документа.
Каждая веб-страница состоит из обязательных элементов "head" и "body", находящиеся внутри тега <html>. Пример:
<html> <head> <!-- информация, которая не отображается браузером на странице, например:--> <title>Название страницы (отображается в строке заголовка браузера)</title> </head> <body> <h1> Заголовок </h1> <p> Содержимое страницы </p> </body> </html>
Тэги HTML.
Тег - элемент языка разметки гипертекста, т.е. все что находится между коренными скобками. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трех видов:
- открывающие- элемент языка разметки гипертекста, указывающий начало действия команды и имеющий вид <html>;
- закрывающие- отличаются от открывающего тем, что после знака меньше < стоит знак слэш (или деления) "/", то есть </html>.
- одинарные- немногочисленные элементы языка разметки гипертекста, состоящие только из одного тега вида <img> и не имеющие содержимого.
Открывающие и закрывающие теги всегда парные. Пара закрывающего и открывающего тега выглядит так: <html> </html>. Начиная с версии 4.01 все теги должны быть написаны маленькими буквами. Элемент гипертекста - это все что находится между открывающим и закрывающим тегом.
Так выглядят комментарии: <!-- комментарий --> . Они не отображаются браузером. Комментарии писать очень полезно как во время учебы, так и в дальнейшем. Особенно полезны комментарии при закрывающих тегах (это считается очень хорошим тоном).
Все теги HTML на сайте w3c
Первый тег (декларирование DOCTYPE) на сайте w3c
Теги, находящиеся внутри <head>, на сайте w3c
Заголовки.
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность расположенной после секции. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня. По умолчанию, он отображается самым крупным шрифтом жирного начертания, последующего уровня - каждый на единицу шрифта меньше. <h4> равен шрифту основного документа. Теги <h1>,..., <h6> относятся к блочным элементам: начинаются с новой строки, после них другие элементы на следующей строке, перед и после заголовка добавляется пустое пространство. Нежелательно использовать заголовок более высокого уровня после заголовка более низкого уровня. Использование заголовков, особенно <h1> и <h2>, необходимо для хорошей поисковой оптимизации сайта.
Атрибуты: align="left / center / right"
Заголовки на сайте w3c
Текст.
Заключается в тег <p>, имеет атрибуты: align="left / center / right".
Теги, форматирующие текст:
<b>, <strong>, <i>, <em> (emphasized - выделенный, подчеркнутый), <tt> (teletype), <big>, <small>, <sub> (subscript), <sup> (superscript) Попробуйте сами на сайте w3c
<br> - перевод строки в том месте, где этот тег находится. Имеет атрибуты: clear="left / right / all" (сообщение браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент).
<del>, <ins> Попробуйте сами на сайте w3c
<pre> - задает текст, который сохраняет все символы форматирования, такие как табуляции, пробелы и переносы строк. Попробуйте сами на сайте w3c
<abbr> - задает текст аббревиатуры. В атрибуте title можно записать расшифровки. Попробуйте сами на сайте w3c
<blockquote> - задает текст большой цитаты. Выделяет цитату отступами слева и справа. Попробуйте сами на сайте w3c
<address> - задает текст адреса. Отображается курсивом. Попробуйте сами на сайте w3c
Горизонтальная линия.
Одиночный тег <hr> рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера, относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Aтрибуты <hr>: noshade (линия закрашивается целиком одним цветом), align="left / center / right", color="цвет", size="2", width="число" (значение в пикселях или процентах). Пример: <hr noshade size="4" width="60%" color="red">. Они были устаревшими уже в спецификации HTML 4.01, в спецификации HTML 5 вообще не поддерживаются. Вместо них при оформлении горизонтальной линии используются таблицы стилей.Списки.
Списки в HTML бывают трех видов:
- упорядоченные (ordered list) - <ol> - на сайте w3c
- неупорядоченные (unordered list) - <ul> - на сайте w3c
- списки определений (definition list) - <dl> - на сайте w3c
Домашнее задание: написать код веб-страницы с использованием любого текста и всех тегов и атрибутов, которые рассматривались в этом уроке, а также вложенных (один в другой) списков согласно картинке.
Цвет в HTML.
Механизм, как цвет задается, хорошо описан в этой статье про цвет.
На сайте w3c есть Сolornames, Сolorpicker и Сolormixer.
Ссылки в HTML.
Все страницы в интернете связанны ссылками. Это его важнейшая составляющая. Тег гиперссылки в HTML <а> (Anchor - якорь) служит для создания ссылки или якоря. По своей структуре тег <а> является тегом-контейнером. Внутри этого тега может содержатся текст, а также следующие строчные элементы, как ABBR, ACRONYM, B, BDO, BIG, BR, BUTTON, CITE, CODE, DFN, EM, I, IMG, INPUT, KBD, LABEL, MAP, OBJECT, Q, SAMP, SELECT, SCRIPT, SMALL, SPAN, STRONG, SUB, SUP, TEXTAREA, TT, VAR, DEL и INS. Тег <а> не может быть вложеным, т.е. находиться внутри тега <а>. Ни один из атрибутов тега <а> не является обязательным. Ссылка может указывать на любой документ, находящийся в Интернете (html, avi, jepg, doc и т.д.). Синтаксис тега <а>:
<a href="URL">...</a> Попробуйте сами на сайте w3c
<a name="идентификатор">...</a> Попробуйте сами на сайте w3c и поменяйте на возврат наверх страницы
Если в теге <а> используется атрибут HREF, то тег устанавливает ссылку, т.е. адрес (URL-Universal Resource Location, Универсальный указатель рессурсов), на документ, к которому мы можем перейти. Адрес ссылки может быть абсолютным ("http://htmlbook.ru/") или относительным ("resource.html"). file:// - доступ к файлу на локальном диске. ftp:// - создает ссылку на ftp-сайт или расположенный на нем файл. mailto: - запускает почтовую программу-клиент с заполненным полем имени получателя.
Если в теге <а> применяется атрибут NAME, то этот тег служит для задания имени якоря, установленного внутри веб-страницы. Вместо атрибута NAME может использоваться атрибут ID. Если вы хотите использовать оба эти атрибуты, то значение их должно быть идентичным. При использовании этого атрибута стоит помнить, что тег <а> с таким атрибутом может не пройти валидацию по стандарту XHTML 1.1. В спецификации HTML 5 атрибут NAME отсутствует, а поэтому тег <а> всегда ссылка.
Атрибут TARGET используется для указания окна или фрейма для загрузки страницы:
_SELF загружает страницу в текущее окно браузера,
_BLANK загружает страницу в новое окно,
_PARENT загружает страницу во фрейм-родитель,
_TOP отменяет все фреймы и загружает страницу в полном окне браузера.
Атрибут является необязательным. По умолчанию _SELF.
Использование этого параметра осуждается спецификацией HTML 4.01. В ХHTML использование этого атрибута запрещено.
С помощью элемента BASE внутри <head>(попробуйте сами на сайте w3c) можно указать значение TARGET для всех гиперссылок в текущем документе.
Атрибут TITLE добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Попробуйте сами на сайте w3c
В различных браузерах ссылки отображаются следующим образом:
- Непосещенные ссылки подчеркнуты и окрашены синим цветом.
- Посещенные ссылки подчеркнуты и окрашены пурпурным цветом.
- Активные ссылки подчеркнуты и окрашены красным цветом.
Задание: написать код с использованием тегa <a> и его атрибутов (href, name, title) согласно картинке. Якорь должен стоять на заголовке.
Таблицы.
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Попробуйте сами на сайте w3c Атрибуты: align - определяет выравнивание таблицы, background - задает фоновый рисунок в таблице, bgcolor - цвет фона таблицы, border - толщина рамки в пикселах, bordercolor - цвет рамки, cellpadding - отступ от рамки до содержимого ячейки, cellspacing - расстояние между ячейками, cols - число колонок в таблице, frame="void / border / above / below / hsides / vsides / rhs / lhs" - сообщает браузеру, как отображать границы вокруг таблицы, height - высота таблицы, width - ширина таблицы, rules="all / groups / cols / none / rows" - сообщает браузеру, где отображать границы между ячейками, summary - краткое описание таблицы.
Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> (table row) и <td> (table date).
Атрибуты <tr>: align="left / center / right / justify" - определяет выравнивание содержимого ячеек по горизонтали, bgcolor - цвет фона ячеек, bordercolor - цвет рамки, char - выравнивание содержимого ячеек относительно заданного символа, charoff - смещение содержимого ячеек относительно указанного символа, valign="top / middle / bottom" - выравнивание содержимого ячеек по вертикали.
Атрибуты <td>: abbr - краткое описание содержимого ячейки, align, axis - группирует ячейки связанные между собой похожей информацией, background - задает фоновый рисунок в ячейке, bgcolor, bordercolor, char, charoff, colspan - объединяет горизонтальные ячейки, headers - позволяет связать ячейки с заголовком, height - высота ячейки, nowrap запрещает перенос строк, rowspan - объединяет вертикальные ячейки, scope - позволяет связать ячейки простой таблицы с заголовками в речевых браузерах, valign, width - ширина ячейки.
Внутри <table> можно использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
<caption> - после открывающего тега table вставляются открывающий и закрывающий теги caption с текстом заголовка.
<th> - создает ячейку-заголовок, текст в такой ячейке отображается жирным шрифтом и выравнивается по центру.
Тег <col> задает ширину и другие характеристики одной или нескольких колонок таблицы, закрывающий тег не требуется.
Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок. Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы. При добавлении атрибута rules="groups" к тегу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>.
<tbody>, <thead>, <tfoot> - служат для хранения одной или нескольких строк таблицы, они не должны перекрываться. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты. Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент <thead> и <tfoot>.
Пример кода таблицы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Table</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" > </head> <body> <table width="600" cellpadding="2" cellspacing="0" border="1" rules="groups"> <caption style="background: #FF0000">Изменение по годам<caption> <colgroup width="150" style="background: #B0B28E"> <colgroup span="9" align="center" width="50"> <col span="5" style="background: #FFF8DC"> <col span="4" style="background: #F5F5DC"> </colgroup> <tr> <th> </th><th>1995</th><th>1996</th><th>1997</th> <th>1998</th><th>1999</th><th>2000</th><th>2001</th> <th>2002</th><th>2003</th> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> <tr style="background: #CF9"> <td>Выводы:</td> <td colspan="9" align="center">алгоритм изменений плохо предсказуем</td> </tr> </table> </body> </html>Homework here!
Границы ячейки отображаются только в том случае, когда в ней что-нибудь записано. Чтобы получить пустую ячейку с границами, нужно поместить в нее специальный символ (пробел - ) или маленькую прозрачную gif-картинку.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока на смену не пришел современный способ верстки с помощью блоков. Статья про преимущества и недостатки табличной верстки.
Домашнее задание: написать код веб-страницы с таблицей согласно картинке. В теге <table> пишем style="border-collapse: separate", чтобы расстояние между ячейками отображалось во всех браузерах.
Если что-то не будет получаться, можете прислать мне файл по э-мейлу, указанному в контактах.
Встраивание графики.
Элемент <img> применяется для вставки картинки как элемента (объекта) в Html код страницы. Img является строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента — Img, Iframe, Object и Embed. Ведет себя он в точности как строчный элемент, но внутри него отображается посторонний внешний контент (картинка в случае Img или видео и флеш в случае Object и Embed).
Атрибуты: src - служит для указания пути до файла картинки (<img src="images/img1.png">);
width, height - чтобы браузер сразу же выделял для элемента Img область нужного размера, а не изменял ее при получении данных о размере загружаемого изображения (браузер пользователя при разборе Html кода страницы сайта, как только встретит в нем тег Img, сразу же создает область для строчного элемента, в которую затем загружается картинка). Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузер автоматически при загрузке изображения выполняет его перемасштабирование (неаккуратное задание параметров может привести к изменению пропорций рисунка и его искажению). Попробуйте сами на сайте w3c
Содержимое атрибута alt (обязателен в XHTML) будет выводиться в области неподгрузившейся картинки. Title (всплывающая подсказка) можно использовать в Img также как и для всех видимых на странице Html элементов. Ключевые слова в Alt и Title тэга Img (особенно в Alt) могут заметно улучшить ранжирование сайта в поисковых системах и в сервисах Яндекс и Гугл картинок.
align - определяет расположение относительно текста или других элементов страницы. Возможные значения:
bottom выравнивание нижней границы изображения по окружающему тексту;
middle - выравнивание середины изображение по базовой линии текущей строки;
top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки;
left - изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны;
right - изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.
hspace, vspace - определяют отступы от изображения, оставляемые пустыми, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.
border - по умолчанию рамка не отображается кроме случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или атрибута link тега body. Чтобы убрать рамку, следует задать атрибут border="0".
ismap - говорит браузеру, что картинка является серверной картой-изображением. Попробуйте сами на сайте w3c
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения.
usemap - связывает между собой картинку и клиентскую карту-изображение, задаваемую с помощью контейнера <map>. В качестве такой связи выступает имя идентификатора, указанное в значении атрибута usemap, и то же имя, заданное у атрибута name тега <map>. В- теге <img> идентификатор должен начинаться с символа решетки (#). Попробуйте сами на сайте w3c
Статья про карты-изображения
Для прекращения обтекания картинки текстом можно использовать тег BR (знакомый из форматирования текста в html). У тега BR есть атрибут clear, который может принимать три значения:
left — прекращение обтекания текстом картинок, выровненных по левому краю;
right — прекращение обтекания текстом картинок, выровненных по правому краю;
all — прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
Задание: написать код с использованием тегa <img> и его атрибутов (в том числе атрибутов тега <img> align, vspace, hspace) согласно картинке(в <p> align="justify"). Эти атрибуты являются нежелательными, начиная с HTML 4.01 strict.
Можно сделать изображение ссылкой, заключив элемент Img внутрь тега гиперссылки. В некоторых браузерах вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать нужно добавить в тэг Img атрибут Border со значением ноль: <a href="http://abc.com">< img border="0" src="images/img1.gif">< /a>
Домашнее задание: написать код веб-страницы с изображениями, в том числе в виде фона страницы, согласно картинке. Картинки на ваш выбор, для фона можно использовать фактуру, повторяющуюся во всех направлениях.
Если что-то не будет получаться, можете прислать мне файл по э-мейлу, указанному в контактах.
Элементы форм.
Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Другая программа под названием Common Gateway Interface (CGI) обрабатывает ее. Таким образом пользователь может интерактивно взаимодействовать с сервером Web через Internet. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов также можно получить доступ к элементам формы. Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <input>.
Элемент <FORM> определяется последовательностью элементов <INPUT>, <TEXTAREA>, <LABEL>, <FIELDSET>,
<LEGEND>, <SELECT>, <OPTGROUP>, <OPTION>, <BUTTON>, размещенных внутри пары <FORM> и </FORM>.
Элемент формы использует как метод, так и действие для описания обработки формой данных, вводимых пользователем: method (GET или POST) - определяет, как должны обрабатываться данные из формы;
action - указывает на URL программы, ответственной за обработку данных.
Формы на сайте w3c
Формы.
Атрибуты <FORM>:
accept-charset - устанавливает кодировку, в которой сервер может принимать и обрабатывать данные;
action (обязательный) - адрес программы или документа, который обрабатывает данные формы;
autocomplete (HTML 5) - включает автозаполнение полей формы;
enctype - способ кодирования данных формы;
method - метод протокола HTTP;
name - имя формы (нужен для JavaScript);
novalidate (HTML 5) - отменяет встроенную проверку данных формы на корректность ввода;
target (нежелательный) - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
Атрибуты элемента <INPUT>:
type - основной атрибут, определяющий вид элемента. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики.
Кроме того, в HTML5 добавлено еще более десятка новых элементов: виджет для выбора цвета (color), поле для выбора календарной даты (date), указание даты и времени (datetime), указание местной даты и времени (datetime-local), для адресов электронной почты (email), ввод чисел (number), ползунок для выбора чисел в указанном диапазоне (range), поле для поиска (search), для телефонных номеров (tel), для времени (time), для веб-адресов (url), выбор месяца (month), выбор недели (week).
autocomplete (HTML 5) - включает и отключает автозаполнение полей формы;
checked - этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель (XHTML: checked="checked");
disabled - блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем (XHTML: disabled="disabled");
formaction (HTML 5) - аналог атрибута action тега <form>;
formenctype (HTML 5) - указывается в случае, когда используется поле для отправки файла: <input type="file" name="file">< input type="submit" formenctype="multipart/form-data" value="Отправить"> - данные не кодируются;
maxlength - устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле, дальнейший ввод становится невозможным;
name - уникальное имя элемента формы (используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты);
pattern (HTML 5) - указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы, при этом форма не будет отправляться, пока поле не будет заполнено правильно;
placeholder (HTML 5) - выводит текст внутри поля формы, который исчезает при получении фокуса; readonly - текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий, но состояние и содержимое поля можно менять с помощью скриптов (XHTML: readonly="readonly");
required (HTML 5) - устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если это поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может;
size - ширина текстового поля, которое определяется числом символов моноширинного шрифта;
src - адрес графического файла (GIF и JPEG), который будет отображаться на веб-странице в поле с изображением;
value - определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. В зависимости от типа элемента атрибут value выступает в следующей роли:
• для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
• для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании кнопки Reset пользовательский текст очищается и восстанавливается введенный в атрибуте value;
• для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
Задание: написать код с использованием тегов <form> и <input> и атрибутов (в том числе type, size, placeholder (HTML5) или value (HTML4)) согласно картинке. С HTML5 просматривайте результат в Firefox, IE placeholder не отображает.
Элемент <LABEL>:
устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>,
<select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки.
Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>.
<input id="идентификатор">< label for="идентификатор">Текст</label>
При втором способе элемент формы помещается внутрь контейнера <label>.
<label><input type="..."> Текст</label>
Атрибуты: accesskey - определяет горячую клавишу, с помощью которой происходит переход фокуса к элементу формы, браузеры при этом используют различные комбинации клавиш; for - задает уникальный идентификатор, определяемый с помощью атрибута id элемента <input>, с которым следует установить связь, атрибут for необходимо задавать в том случае, когда элемент формы и текст разделены.
Элемент <TEXTAREA>
для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Атрибуты:
autofocus (HTML 5) - Автоматически устанавливает фокус в текстовое поле;
cols (обязателен в HTML4, не обязателен в HTML5, там по умолчанию 20) - ширина текстового поля, которое определяется числом символов моноширинного шрифта. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется;
disabled - Блокирует доступ и изменение текстового поля (серое и недоступное для активации пользователем), этот текст не передается на сервер (XHTML: <textarea disabled="disabled">< /textarea>);
form (HTML 5) - если поле по каким-либо причинам располагается за пределами <form>, связывает текстовое поле с формой по её идентификатору;
maxlength (HTML 5);
name - уникальное имя, используемое при отправке данных на сервер или для доступа к полю через скрипты;
placeholder (HTML 5);
readonly - текстовое поле с белым фоном не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий, передается на сервер (XHTML: <textarea readonly="readonly"></textarea>);
required (HTML 5);
rows (обязателен в HTML4, не обязателен в HTML5, там по умолчанию 2) - высота текстового поля, которая определяется количеством отображаемых строк без прокрутки содержимого, меняется с изменением размера шрифта;
wrap (HTML 5) - говорит браузеру, как осуществлять перенос текста в поле <textarea> и в каком виде отправлять данные на сервер.
Элемент <SELECT>
для организации списков с прокруткой и выпадающим меню. Для определения списка пунктов используются элементы <OPTION> внутри <SELECT>. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей.
Атрибуты <SELECT>:
accesskey; autofocus (HTML 5); disabled; form (HTML 5); multiple - список множественного выбора, конечный вид списка зависит от используемого атрибута size и браузера (XHTML: <select multiple="multiple"></select>); name - уникальное имя элемента <select> для доступа к данным через скрипты или для получения выбранного значения списка на сервере; required (HTML 5); size - устанавливает высоту списка, если значение атрибута size равно единице, то список превращается в раскрывающийся, при добавлении атрибута multiple к тегу <select> при size="1" список отображается как «крутилка», во всех остальных случаях получается список с одним или множественным выбором.
Атрибуты <OPTION>:
disabled; label - для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если есть label , то текст внутри тега <option> игнорируется и в списке выводится значение label;
selected - делает текущий пункт списка выделенным, если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта (XHTML: <option selected="selected">...</option>);
value - определяет значение пункта списка, которое будет отправлено на сервер (в паре «имя=значение» имя задается атрибутом name тега <select>), значение может совпадать с текстом пункта или быть самостоятельным, также атрибут value применяется для получения значений данных через скрипты.
Тег <optgroup>
представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу. Особенностью тега
<optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.
Атрибуты <optgroup>:
disabled - блокирует доступ к группе списка, группа отображается другим цветом (обычно серым) и недоступна для выбора (XHTML: <optgroup disabled="disabled">...</optgroup>);
label (обязательный) - текст, который будет входить в список в виде заголовка группы.
Попробуйте сами на сайте w3c
Задание: написать код с использованием тегов <select>, <option> и <optgroup> и их атрибутов (в том числе size, disabled) согласно картинке. Проверьте, как атрибут multiple работает в разных браузерах (Firefox, IE), попробуйте selected.
Элемент <BUTTON>
создает на веб-странице кнопки и по действию напоминает результат тега <input type="button | reset | submit">, но <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров. Если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.
Атрибуты <BUTTON>:
HTML 5: autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget;
disabled - блокирует доступ и изменение кнопки; name; value;
type - устанавливает ее поведение в форме <button type="button | reset | submit">...</button> (по умолчанию submit).
Элемент <FIELDSET>
предназначен для группирования элементов формы, содержащей большое число данных. Браузеры отображают результат использования тега <fieldset> в виде рамки.
Атрибуты <FIELDSET>: disabled (HTML 5); form (HTML 5); title.
Тег <legend> применяется для создания заголовка группы элементов формы, которая определяется с помощью тега <fieldset>. Текст, находящийся внутри контейнера <legend>, встраивается в рамку.
Атрибуты <legend>: accesskey; align (<legend align="left | center | right">); title.
Домашнее задание: написать код страницы с формой согласно картинке. Использовать в нужных местах: style="width:400px;", style="background-color:green; color:#ffffff;". Картинки: галочка, крестик.
Если что-то не будет получаться, можете прислать мне файл по э-мейлу, указанному в контактах.
CSS.
Позиционирование компонентов на странице является одним из самых слабых мест в HTML. К компонентам страницы относятся: блоки текста, графика и встроенные приложения. Размер и границы каждого из этих компонентов в рамках HTML-разметки задаются с разной степенью точности. Размер графики и приложений можно задать с точностью до пикселя. Размеры текстовых блоков в HTML задать нельзя: они вычисляются браузером исходя из относительного размера шрифта по умолчанию. Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и полностью контролировать форму представления элементов HTML-разметки.
Что представляют из себя таблицы стилей CSS? По сути это набор параметров, которые объединены в правила. С помощью этих правил форматируется (отображается и оформляется) контент. Таблицы стилей также позволяют определить цвет и начертание текстового фрагмента, изменять эти параметры внутри текстового блока, выполнять выравнивание текстового блока относительно других блоков и компонентов страницы.
Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.
Появление таблиц стилей позволило решить некоторые проблемы:
- самое существенное, появилась возможность отделить текст от представления и веб-страничка получила универсальность. Одно и то же содержание адекватно выводится на мониторы и мобильные телефоны.
- появилась гибкость. Теперь достаточно изменить некоторые строки кода и изменения вносятся на сотни, даже тысячи страниц, одновременно изменится цвет, шрифт и его размер. Упрощается разработка и эксплуатация сайтов.
- разработчики получили увеличенные возможности по оформлению контента.
Стили можно не только задавать во время написания текста, ими можно управлять программным образом при помощи скриптов, что не маловажно при создании интерактивных страниц.
В настоящее время существует три версии стандарта CSS: CSS1, CSS2.1 и CSS3. Свойства CSS 3 еще не носят окончательный характер, но валидация производится.
Встраивание CSS в HTML.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.
Внешние таблицы стилей.
Oписание селекторов и их значений располагается в отдельном файле с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>. Файл со стилем не хранит никаких данных, кроме синтаксиса CSS. HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Пример:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Styles</title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Внутренние таблицы стилей.
Свойства CSS описываются в самом документе и располагаются с помощью контейнера <style> в контейнере <head>. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Styles</title>
<style type="text/css"><!--
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
--></style>
</head>
Инлайн (Inline) стили.
Являются по существу расширением для одиночного тега, используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.
Пример: <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
Сочетание разных методов подключения стилей.
Необходимо помнить об их иерархии. Первым всегда применяется инлайн стиль, затем внутренний стиль и в последнюю очередь внешний стиль.
Встраивание CSS в HTML на сайте w3c
Синтаксис языка CSS.
Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид:
Селектор { свойство1: значение; свойство2: значение; }
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
• Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, но лучше писать все свойства для каждого селектора вместе.
• Если для селектора вначале задается свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже.
• Комментарии (внутри /* ... */) обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают. Вложенные комментарии недопустимы.
Синтаксис CSS на сайте w3c
Для задания размеров различных элементов, в CSS используются абсолютные (применяются реже) и относительные (обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами) единицы измерения. Единицы не добавляются только при нулевом значении (margin: 0).
Относительные единицы: em - размер шрифта текущего элемента (font-size); ex - высота символа x; px - пиксел; % - процент (1em=100%).
Абсолютные единицы: in - дюйм (1 дюйм равен 2,54 см); cm - сантиметр; mm - миллиметр; pt - пункт (1 пункт равен 1/72 дюйма); pc - пика (1 пика равна 12 пунктам).
Box-модель.
Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные"). Блочные (block) элементы занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
Inline- ("инлайн"-) элементы имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой HTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и рамки, стиль и ширину рамки, ширину полей и отступов и др. Изменение block на inline на сайте w3c
Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
Практически любой элемент браузер воспринимает как прямоугольную область. Это поведение браузера называется Box Model ("блочная" или "коробочная" модель): 
Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока. Html элемент всегда лежит внутри какой-то области (внешняя рамка на рисунке). Эту область в CSS принято называть контейнер и обычно контейнером для элемента является область контента его родительского элемента. Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
• Собственно, содержимое элемента (content)
• Пространство между содержимым элемента и рамкой (англ. "padding") Попробуйте сами на сайте w3c
• Pамка (англ. "border") Попробуйте сами на сайте w3c
• Внешнее пространство между рамкой и невидимой границей прямоугольника (англ. "margin"), всегда прозрачное. margin со значением Auto предполагает самостоятельный расчет этих значений браузером. В качестве значений для правил margin-top, margin-right, margin-bottom и margin-left можно использовать размерные величины Em, Ex, Px или проценты от ширины контейнера (для margin-top и margin-bottom проценты будут рассчитываться именно от ширины, а не высоты контейнера). Margin может быть еще и отрицательным.
Правило может быть написано отдельно для каждой из сторон блочной модели.
Cборное CSS правило для margin и padding (сокращает размер кода):
• начинается с верхнего (top) и продолжается по часовой стрелке вплоть до завершения круга левым отступом. Выглядеть это может примерно так:
margin:20px 30px 40px 30px;
• Если значение внешних отступов слева и справа будет одинаковыми, то последнее значение в сборном правиле можно будет опустить:
margin:20px 30px 40px;
• Если кроме равенства внешних отступов слева и справа есть равенство отступов сверху и снизу:
margin:20px 30px 20px 30px;
То такое сборное правило можно записать всего с двумя значениями, отбросив последнее, которое совпадает с первым:
margin:20px 30px;
Допустимо использовать в сборном правиле и четыре, и три, и два и даже всего одно значение.
Попробуйте сами на сайте w3c
«Margin-collapse» или по другому «схлопывание марджинов».
Если у нас есть два элемента расположенные друг под другом (схлопывание марджинов может происходить только по вертикали, по горизонтали встречные значения Margin будут просто плюсоваться друг к дружке) и для них обоих заданы встречные внешние отступы (например, нижний отступ для верхнего элемента и верхний отступ для нижнего), то большее значение Margin поглотит в себе меньшее.
Например, если для верхнего Html элемента задано следующее CSS правило: margin:20px 20px 200px 20px;
А для нижнего: margin:100px 20px 20px 20px;
То нижний марджин верхнего элемента (200px) поглотит в себе верхний марджин нижнего (100px) и результирующий внешний отступ между этими двумя элементами все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю марджин.
Если значения марджинов будут с разными знаками, то их числа просто сложатся и Html элементы будут отстоять друг от друга на результирующую величину. Например, в этом случае:
Верхний margin:20px 20px -20px 20px;
Нижний margin:10px 20px 20px 20px;
Результирующий отступ между элементами будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.
Схлопывание не срабатывает:
• на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
• на плавающих элементах (для них свойство float задано как left или right);
• для строчных элементов;
Задание: написать код с использованием тегов <p>, <span> внутренней таблицы стилей и свойств padding, border, margin, background-color согласно картинке. Для первой пары параграфов установить для верхних и нижних margin близкие значения, отследить схлопывание. Для второй пары - для одного из margin отрицательное значение. Селекторы вида:
p span, p.p1 (<p class="p1">)
Плагин Firefox Firebug при просмотре информации о любом Html элементе веб страницы на вкладке «Макет» позволяет увидеть наглядное представление отступов и границ данного элемента относительно родительского элемента и тех элементов (или же содержимого), которые заключены внутри него.
Наследование в CSS.
Это процесс при котором свойства родительского элемента передаются к дочерним элементам, даже если эти свойства не были чётко определены. Некоторые свойства наследуются автоматически, элемент получает свойства своего предка. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.
Цвет наследуется по умолчанию, но фон никогда. Значение background-color по умолчанию transparent, а цвет родительского фона виден через прозрачный фон дочерних элементов. Но передавать свойства фона по наследству возможно. Для этого нужно использовать значение inherit для свойств фона.
Наследование является механизмом отделённым от каскада: наследование относится к дереву DOM (Document Object Model). С использованием наследования, мы просто должны установить свойство font-size у родительского элемента и все дочерние элементы наследуют его автоматически. Именно поэтому вам нужно лишь установить, например, font-size для элемента body, чтобы получить целую страницу с указанным размером шрифта, конечно если он не был переопределён в другом месте.
Нужно соблюдать осторожность, когда указываете размер шрифта в процентах или em для вложенных элементов.
div {font-size: 130%;} - Элемент p унаследует фактический размер шрифта, а не 130% коэффициент размера шрифта родительского элемента, и поэтому будет такого же размера как и родительский элемент.
div, p, a {font-size: 130%;} - В этом коде, элемент p будет на 130% больше, чем его родительский элемент div, вложенный элемент a будет на 130% больше чем его родительский элемент p.
Селекторы в CSS.
Селекторы по идентификатору
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя:
<p id="pink"> p#pink {color:pink;}
Селекторы по классу
Для нескольких элементов в HTML существует параметр class, в качестве значения которого указывается его имя:
<p class="pink"> p.pink {color:pink;}
Унифицированные селекторы
В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак класса или идентификатора и имя:
.red {color:red;}
#yellow {color:yellow;}
Какому бы элементу мы не задали class="red" (заголовку, параграфу или ссылке), цвет текста у него станет красным. Любому элементу на странице мы можем задать id="yellow" и цвет текста этого элемента станет желтым.
Контекстный селектор
i {color:green;} - любой курсив выделен зеленым цветом
p i {color:green;} - выделяется зеленым только тот курсив, который находится в параграфах
Группировка селекторов
Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были зеленого цвета), то их можно сгруппировать. Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую. Пример:
h1, h2, h3 {color:green;}
Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают.
Цвет и фон.
Цвет в стилях можно задавать тремя способами: по шестнадцатеричному значению, по названию и в формате RGB. В формате RGB можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 0, 0) или rgb(100%, 20%, 20%).
Цвет переднего плана: свойство color.
Свойство background-color описывает цвет фона элемента. Для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.
CSS-свойство background-image используется для вставки фонового изображения.
background-image:url("../images/image.gif");
Свойство background-repeat управляет повторением фонового изображения. Имеет четыре значения:
background-repeat:repeat-x - рисунок повторяется по горизонтали
background-repeat:repeat-y - рисунок повторяется по вертикали
background-repeat:repeat - рисунок повторяется и по горизонтали, и по вертикали
background-repeat:no-repeat - рисунок не повторяется
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы. Есть два значения background-attachment:
background-attachment:scroll - изображение прокручивается вместе со страницей - разблокировано
background-attachment:fixed - изображение блокировано
Свойство background-position позволяет изменять значение по умолчанию (фоновый рисунок позиционируется в левом верхнем углу экрана), и фоновый рисунок может располагаться в любом месте экрана. Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right.
Сокращённая запись [background]
Порядок свойств этого элемента таков:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет, то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.
Задание: написать код с использованием таблицы стилей и свойств padding, margin, background-color, background-image и др. согласно картинке. Сделать фоновую картинку фиксированной. Картинка Селекторы вида: p.p1 (<p class="p1">)
Задание рамки.
Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы:
border-width - ширина границы, задается значением в пикселях (em или ex) или с помощью зарезервированных слов thin (тонкая - 2px), medium (средняя - 4px), thick (толстая - 6px).
border-color - цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
border-style - задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
Спецификация CSS2 позволяет задать стили для каждой из сторон границы: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Пример: {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Cборное CSS правило для border (сокращает размер кода):
border:border-width border-style border-color; (border:1px solid red;)
Попробуйте сами на сайте w3c
Домашнее задание: написать код страницы согласно картинке. Тег <hr> не используйте. Сделать фоновую картинку фиксированной. Картинка.
Если что-то не будет получаться, можете прислать мне файл по э-мейлу, указанному в контактах.
Css свойства Font - Weight, Family, Size, Style и Line Height.
Все CSS свойства, используемые для оформления шрифтов (Font Weight, Family, Size, Style, Variant и Line Height) в Html коде, наследуются. С помощью Css свойства font-family можно задать гарнитуру и тип шрифта, который требуется применить к какому-то конкретному элементу Html кода. Синтаксис Css свойства font-family. В font-family нужно перечислить гарнитуры шрифтов в порядке убывания их приоритета (если на компьютере пользователя не будет установлен первый шрифт, то применен будет второй из списка в font family, и т.д.), а в конце нужно будет дописать желаемый тип шрифта, например, sans-serif (если ни одного из перечисленных в font-family шрифтов на компьютере пользователя не обнаружится, то будет применен один из имеющихся у него шрифтов указанного типа). Все это в точности повторяет задание шрифтов в Html теге Font через атрибут Face, который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font-family. Существует проблема задания в Css и Html абсолютно любых шрифтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка шрифтов (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS) и именно их можно без опаски использовать в Css правилах с Font-family.
Довольно интересный выход из этой ситуации предложил Google (красивые Html и CSS шрифты для вашего сайта). Суть состоит в том, что браузер будет искать данные красивые шрифты (не входящих в десятку универсальных) не на компьютере пользователя, а на серверах Google. Полученный с сайта Google линк нужно подключить внутрь тега head. Выглядеть он будет примерно так:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com css?family=Dancing+Script:regular|Cardo:italic">
Также нужно будет добавить в файл стилей, сгенерированные визуальным редактором Google web font CSS свойства для того, чтобы нужные участки текста на сайта отображались так, как вы задали в этом визуальном редакторе. Можно прописать эти CSS свойства для body или любого другого селектора, тем самым выбрав начертание для нужного текстового элемента сайта (например, заголовка).
Если в названии гарнитуры шрифта (который вы хотите использовать на сайте и прописываете в font family) имеются пробельные символы, то это название обязательно нужно будет заключить в двойные кавычки.
Следующее Css свойство Font-size служит для задания размера шрифта для какого-либо Html элемента (все те же абзацы, заголовки и т.п.). У этого Css свойства есть свои особенности. Размер шрифта в Font-size можно задавать как в абсолютных (px), так и в относительных единицах (em, ex, %) от размера шрифта, который данный Html элемент получил по наследству.
Можно так же в качестве значений для Css свойства font-size использовать одно из семи обозначений: xx-small, x-small, small, medium, large, x-large или xx-large. Это полный аналог того, как задаются размеры шрифта в чистом Html с помощью тега Font и атрибута Size. Но только там используются числа от 1 до 7, а здесь - названия размеров.
И последний способ задания относительных размеров через Css свойство «font size» заключается в использовании larger и smaller, которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного (примерно на 17 процентов, но зависит от конкретного браузера). Этот способ тоже имеет аналог в чистом Html, т.к. ранее для этого использовались теги Small и Big.
У свойства Font-weight могут быть четыре буквенных значения плюс цифровая шкала:
В CSS для font-weight можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder так же даст просто жирное начертание).
Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт может использовать много начертаний разной степени жирности. Значению normal соответствовует 400, а значению bold для свойства font-weight — 700.
По умолчанию, свойство font weight имеет значение normal.
Line-height, что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб странице друг от друга по высоте. В полиграфии это называется интерлиньяж.
С помощью Line-height можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом. Расстояние от текста (его размер задается через font-size) откладывается симметрично вверх и вниз одновременно. По умолчанию Css свойство line height для всех Html элементов с текстом будет иметь значение Normal, которое зависит от типа используемого шрифта и вычисляется браузером автоматически. Например, для шрифта Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (шрифт плюс свободное пространство над и под ним) будет на 120% больше высоты шрифта (заданной в font-size). А для шрифта Times New Roman значение Css свойства Line-height по умолчанию будет уже примерно 125%.
Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для Line-height в виде процентов или Em (line-height:200%; = line-height:2em;).
В качестве значений для Css свойства Line-height можно так же использовать и абсолютные значения — пикселы (px), дюймы (in), пункты (pt).
Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так: line-height: 1.5;
Следующее Css свойство — это font-style, с помощью которого можно задать наклонный шрифт (курсив). Для этого свойства по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Значением по умолчанию является normal.
Когда задается для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру шрифта помеченную как italic. Если зайти через панель управления на своем компьютере в «шрифты» , то можно увидеть, что многие шрифты имеют вариант с italic или «курсив» в названии.
Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если в Css свойстве font-style для такого шрифта прописан italic)? Браузер будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет конечно же хуже.
А значение oblique для Css свойства font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение oblique с этим свойством практически не используется.
Font-variant. По умолчанию в шрифтах начертание строчных букв отличается от заглавных внешним видом самих литер. А font-variant позволяет не изменяя размера строчных букв сделать их начертание таким же, как и у заглавных в этом шрифте. Соответственно, у Css свойства font-variant имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется редко.
Сборное правило Font, как и другие сборные правила в CSS, позволяет указать в нем значения отдельных элементарных свойств через пробелы. Здесь важен порядок следования значений и он должен быть именно таким:
font: font-style font-variant font-weight font-size/line-height font-family;
Например: font:italic small-caps bold 12px/12px verdana; Попробуйте сами на сайте w3c
В сборном CSS правиле Font обязательны только два последних значения (font-family и font-size - они не имеют как таковых значений по умолчанию, эти значения берутся из настроек браузера пользователя). Для не указанных в Font свойств браузер будет использовать значения, принятые для них по умолчанию. Сборное правило Font, как правило, используют для тега Html или Body, а для внутренних элементов, у которых гарнитура и размер шрифта должны будут наследоваться, чаще всего используют отдельные Css свойства (font-weight, font-size, font-style).
Пример: font:bold 4em/3em arial, "comic sans ms", sans-serif;
Пример минимально возможной формы написания: font:10px arial, sans-serif;
Свойства CSS text-decoration, vertical-align, text-align, text-indent.
Css правило text-align является фактически заменой атрибута align (использовавшегося в чистом Html для выравнивания содержимого, например, абзацев P или заголовков H1-H6). Css правило text-align это горизонтальное выравнивание строк. Применяется исключительно для блочных Html элементов. Имеет всего четыре возможных значения: left, right, center и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Значение Justify стоит использовать для Html элементов хотя бы с несколькими строками текста, иначе видимого эффекта не будет.
text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Применяется только для блочных элементов. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус используя размеры, допустимые в CSS) или с помощью процентов. Проценты в text-indent считаются от ширины области, которая отведена под текст. Примеры: text-indent:40px; text-indent:-5em; text-indent:10%;
text-decoration (оформление с помощью горизонтальной линии) применяется уже ко всем Html элементам (и строчным, и блочным). Css правило Text decoration может иметь всего четыре значения: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (они по умолчанию подчеркиваются). Поэтому выделять в тексте что-то еще подчеркиванием кроме гиперссылок не очень хорошо. Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используется для text decoration элемента гиперссылки значение none. Возможно прописать сразу три (иди два) значения для любого Html элемента (кроме none) - text-decoration:underline overline line-through; Попробуйте сами на сайте w3c
vertical-align. Практически для всех Html элементов выравнивание с помощью vertical-align означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Но для тегов Html таблицы Td и Th это означает немного другое — выравниваться по вертикали будет весь контент, который находится в этих ячейках.
Для Css правила vertical-align можно использовать следующие значения: vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | % | величина.
В качестве значений для Css правила vertical-align можно использовать и числа, а значение vertical-align:0 будет означать тоже самое, что и vertical-align:baseline. Если нужно указать какой-либо сдвиг в вертикальном выравнивании, то этот сдвиг нужно указывать относительно базовой линии, то есть нуля (vertical-align:10px; или vertical-align:-10px;). Сдвиг можно так же задавать в Em, Ex и в процентах, которые будут считаться от высоты линии этого элемента. Для вертикального выравнивания содержимого ячеек таблиц в vertical-align следует использовать значения Top и Bottom для получения, соответственно, выравнивания содержимого по верхней и нижней границе ячейки (middle в ячейке таблицы используется как значение вертикального выравнивания по умолчанию). А для шрифтовых Html элементов можно использовать text-top, text-bottom, middle. Значения Css свойства vertical-align sub и super соответствуют под- и надиндексу в чистом Html. Попробуйте сами на сайте w3c
Text-transform, letter-spacing и другие CSS свойства для оформления текста.
Text-transform — трансформация символов текста, применяется к любым Html элементам (и блочным, и строчным) и может иметь всего четыре значения. None используется по умолчанию и означает, что как написано в Html, так и будет отображаться. Значение Uppercase позволит трансформировать все буквы фрагмента текста в заглавные (пример показан в этом предложении). Значение lowercase позволит вам трансформировать все символы фрагмента текста в строчные, ну, а значение capitalize сделает все первые буквы слова заглавными (пример в этом предложении). Т.е. с помощью text-transform можно сделать все что угодно с обычным текстом, а потом быстро все вернуть обратно. Попробуйте сами на сайте w3c
CSS правила, которые позволят нам изменять расстояния между символами и словами текста — letter-spacing и word-spacing. Оба эти правила могут иметь два типа значений: Normal (по умолчанию) или величина в пикселах, Em или Ex, но не в процентах. Можно использовать как положительные (разрежение символов или слов), так и отрицательные значения (сближение символов или слов текста). Например: letter-spacing:0.4em; или letter-spacing:-1px; или word-spacing:4em; Попробуйте сами на сайте w3c
white-space отвечает за отображение пробельных символов на веб странице. Браузер при разборе кода объединяет все пробелы, символы переноса строк и табуляции в один единственный пробел и осуществляет перенос строк именно по пробельным символам. Css правило white space может принимать одно из трех значений: Normal (по умолчанию), Pre (полная аналогия с использованием Html тега Pre) - текст будет отображен со всеми лишними пробельными символами и переносы браузер уже по этим пробельным символам сделать не сможет, и nowrap - запретит браузеру переносить текст по тем пробельным символам, которые внутри фрагмента текста с CSS правилом white-space:nowrap. Попробуйте сами на сайте w3c
CSS селекторы псевдоклассов link, visited, active, hover, focus, first-child.
Модуль, отвечающий в браузере за разбор кода, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево. Результат работы парсера можно увидеть с помощью плагинов для браузеров, например, Firebug. Отношения между собой отдельных узлов этого дерева может быть трех видов:
1. Предки и потомки. Все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.
Само по себе название «псевдоклассы» обозначает то, что специально в Html коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы css селекторы псевдоклассов.
Селекторы псевдоклассов link и visited во всех браузерах могут использоваться только для гиперссылок: a:link {color:blue;} и a:visited {color:blue;} Селектор псевдокласса link подразумевает под собой не посещенную гиперссылку, а visited — посещенную. Так можно задать визуальное состояние для всех посещенных ссылок.
Следующие три селектора псевдокласса active, hover и focus могут использоваться для любых Html тегов (например, для контейнеров Div, p, и т.п.).
Селектор псевдокласса active соответствует клику левой кнопки мыши по тому Html элементу, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег p). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет: p:active {color:red} (при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши цвет этого абзаца изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию).
Псевдокласс hover — позволяет изменять визуальное оформление любого Html элемента при наведении на него курсора мыши, при отведении курсора визуальное оформление элемента вернется к используемому по умолчанию: p:hover {color:red}
Псевдокласс focus — позволяет изменять визуальное оформление Html элементам находящимся сейчас в фокусе. Фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: Html ссылки и элементы Html форм. Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а псевдокласс focus не работает вообще ни в IE 6, ни в IE 7. Попробуйте сами на сайте w3c
Последний псевдокласс называется first-child (в IE 6 не работает).
:first-child {color:red} - эта запись будет означать, что все элементы Html кода, которые являются первыми детьми своих родителей, будут покрашены в красный цвет.
CSS селекторы псевдоэлементов first-line, first-letter, after и before.
По самому слову «псевдоэлементы» понятно, что таких элементов в Html коде нет. На данный момент псевдоэлементов всего четыре.
first-line указывает на первую линию, а first-letter — на первую букву (применяются только к блочным Html тегам, в браузере IE 6 не работают). Пример: p:first-line {color:red} и p:first-letter {font-size:5em; float:left; color:red} Попробуйте сами на сайте w3c
Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Пример:
p:after {content: "text"; color:red;}
В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (это свойство используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет. Попробуйте сами на сайте w3c
Hа практике псевдоэлемент before можно использовать, чтобы создать сложную нумерацию вида «5.2.13».
Задание: написать код с использованием таблицы стилей и свойств font-, text-, letter-, padding, margin и псевдоэлементa :first-letter согласно картинке для селекторов: body, h1, h2, p, p.p1 (<p class="p1">).
CSS правила для настройки внешнего вида списков.
Существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков. Если прописать это CSS правило только для конкретного элемента списка LI, то, соответственно, оно только для него и применится (либо вообще для всех элементов LI). А если аналогичное правило прописать для контейнеров UL или OL, то оно применится для всех элементов LI заключенных в этих контейнерах (маркированных или нумерованных списков). Т.е. оно перейдет к элементу LI по наследству.
CSS свойствo list-style-type позволяет задать тип маркирации для отдельных элементов Html списка. Шрифты и цвет шрифта для маркирования цифрами или буквами используется точно такой же, какой определен для списков (элементов LI). Для этого правила допустимы следующие значения:
- None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта списка)
- Disc — закрашенный кружок (для этого элемента списка применено list-style-type:disc;)
- Circle — окружность в качестве маркера
- Square — квадратик в качестве маркера
- Decimal — арабские цифры (list-style-type:decimal;)
- lower-alpha — латинские буквы в нижнем регистре
- upper-alpha — латинские буквы в верхнем регистре
- lower-roman — римские цифры в нижнем регистре
- upper-roman — римские цифры в верхнем регистре
С помощью list-style-position можно задать где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы элемента LI, т.е. используется значение outside.
List-style-image позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но можно прописать функционал url(путь до изображения). Картинки относятся к строчным элементам, поэтому картинка встает на место маркера. При этом высота строки с элементом списка будет увеличена, если вставить в качестве маркера большую картинку. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого Html списка.
List-style является сборным правилом для оформления списков (list-style:inside upper-roman url("image.png");). Можно использовать значения правил в любом порядке и любом количестве (начиная от одного). Те значения, которые не заданы в List-style в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию. С помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню (list-style:none). Попробуйте сами на сайте w3c
CSS правило Display (block, none, inline).
CSS правило Display позволяет задавать и при необходимости менять способы отображения тех или иных элементов Html кода. С помощью него блочные элементы при желании можно будет сделать строчными или даже элементами списка, а так же используя CSS правило display: none можно реализовывать динамику на вебстранице, например, создавать выпадающие меню без использования скриптов на чистом CSS.
Узнать, к каким именно Html элементам относится тег — строчным или же блочным, можно в валидаторе W3C на ссылке Default style sheet for HTML 4. Например, в самом начале списка CSS свойств, принятых по умолчанию для Html тегов, перечислены все элементы, которые относятся к блочным и происходит это из-за того, что на них действует CSS правило display:block.
Если посмотреть на список CSS свойств и допустимых для них значений на W3C, то для CSS правила display видно: 
Если не указано другого, то по умолчанию будет использоваться вариант display:inline (т.к. именно это значение прописано для CSS правила Display в столбце Initial value), что будет соответствовать формированию строчных элементов. Поэтому в приведенной на странице CSS спецификации Default style sheet for HTML 4 те Html теги, которые должны отображаться как строчные (например, span) вообще не описаны или для них не указано значение Display, ибо по умолчанию они и так будут строчными.
CSS правило Display отвечает за то, как данный Html элемент надо строить и отображать браузеру. Имеется возможность показывать как элемент строки (display: inline) или как блок (display: block), показывать как таблицу (display: table) или как часть таблицы (display: inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption). Это CSS правило очень важное.
Всегда можно сделать блочный элемент (для которого по умолчанию браузер использовал display: block) строчным (с помощью добавления к нему CSS правила display:inline) и, соответственно, наоборот.
С помощью CSS свойства Display можно сделать ряд блочных элементов элементами списка - правило display: list-item. То есть создать элементы Html списка (UL, OL, LI) без использования тегов LI (получился маркированный список аналогичный тегу UL). При желании, для настройки вида используемого маркера можно использовать CSS правило list-style. Но область маркера добавляется перед областью блочного тега, и чтобы ее увидеть нужно с момощью правила Margin отодвинуть блочный элемент слева от края родительского контейнера. Можно сделать и обратное, т.е. прописать для тегов LI CSS правило display:block и сделать из списка обычные абзацы. Попробуйте сами на сайте w3c
CSS правило display: none. Если посмотреть на все те же умолчательные стили для Html элементов на странице Default style sheet for HTML 4, то видно, что display: none прописано по умолчанию для тега Head. Это означает то, что если у элемента прописан display: none, то он никак не отображается на вебстранице и никаким образом не участвует в построении этого документа (под него даже не резервируется место). Именно так и должен вести себя тег Head, который предназначен исключительно для размещения внутри себя служебных Html тегов.
Так же правило display: none можно использовать, например, для создания выпадающего меню с помощью псевдокласса hover. Можно сделать выпадание содержимого Html списка при наведении на него мышкой. Для обычной ситуации для выпадающего содержимого списка будет прописано CSS правило display: none, ну, а с помощью псевдокласса hover можно будет приписать для этого же содержимого display: block и тогда меню будет раскрываться при наведении на него курсора мыши. Значение display: none имеет смысл использовать только для реализации какой-то динамики на вебстранице (видно — невидно).
Статья о простом и необременительном способе создания горизонтальных и вертикальных выпадающих меню на CSS
Шаблоны выпадающих меню на CSS (zip)
Пример галереи на чистом CSS (zip)
Значение display: inline-block позволяет придать Html тегу одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним элементам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него элементам он будет вести себя как блочный (т.е. можно будет задавать его размеры, как по ширине, так и по высоте, а также задавать отступы с помощью марджинов и паддингов). Но он не поддерживается IE7. Статья про inline-block.
Сравнение display: inline-block и float: left
Правило display: inline-block позволяет выстроить блочные элементы рядами (годится для галерей, лент превью и анонсов). Для той же цели нередко применяют правило float: left — плавающие блоки, но с ними возникает ряд проблем.
• Float-элементы, имеющие разную высоту, при переходе на новую строку, «затекают» друг за друга; вместо ровных строк получается нагромождение блоков.
• Для лечения этой проблемы блокам обычно назначают фиксированную высоту с запасом, но, во-первых, у какого-нибудь блока содержание может оказаться выше ожидаемого, во-вторых, у блоков с малым содержанием внизу образуются лишние пустоты.
• Правило display: inline-block выстраивает блоки ровными строками, высота строки определяется по самому высокому из них.
• Плавающие элементы всегда прижаты к верху строки. Элементы со значением display: inline-block можно выровнять по высоте вверх, вниз и посередине с помощью свойства vertical-align (по умолчанию выравнивание идёт по базовой линии).
• Плавающие блоки невозможно центрировать: они всегда прижаты к краю контейнера (левому или правому, в зависимости от значения float: left или float: right). Строчно-блочные элементы можно выравнивать влево, вправо или посередине, задав их контейнеру горизонтальное выравнивание text-align.
Float в CSS — создание плавающих элементов.
Когда вставляем в Html документ несколько элементов подряд, то ожидаем их появление на вебстранице примерно в том же порядке, в котором они и были прописаны в коде. Но в CSS имеются два правила, которые могут это изменить. Речь идет о правилах float и position. Когда к элементам Html кода не применяются эти два правила, то такой вариант называется кодом в нормальном потоке. С помощью CSS правила float создаются так называемые плавающие элементы. Кстати, даже в чистом языке Html мы уже сталкивались с плавающими элементами, когда для картинок прописывали атрибут Align со значениями Left или Right.
У правила float имеется три возможных значения (по спецификации CSS на сайте консорциума W3C), причем по умолчанию используется значение None: float:none | left | right. Значения Left и Right как раз и позволяют создавать плавающие элементы. При этом свойства такого элемента поменяются и он по другому будет взаимодействовать с другими элементами.
Попробуйте сами на сайте w3c
• Вне зависимости от того, каким он был до этого, элемент становится блочным (соответствует display:block).
• Несмотря на то, что элемент с прописанным CSS правилом float становится блочным, его размер будет определяться объемом заключенного в него контента (проявляется некоторая специфика).
• Плавающий элемент (с float left или right) в Margin-collapse не участвует, т.е. не делится с соседними элементами своими отступами.
• Плавающие элементы (с float left или right) не замечают соседние блочные элементы (с display: block), т.е. они с ними не взаимодействуют.
• А строчные элементы (с display: inline) обтекают плавающие блоки.
Основное предназначение CSS правила Float это создание колонок при использовании блочной верстки.
Clear (both, left, right)
Чтобы заставить блоки, стоящие в коде ниже плавающего элемента (с float:left или right), с ним взаимодействовать (т.е. выстраивать свое положение в зависимости от размеров плавающих блоков) в CSS предусмотрено специальное правило Clear. Это правило имеет четыре допустимых значения (none используется по умолчанию): clear: none | left | right | both.
Когда для какого-либо Html тега прописано CSS правило Clear, то это означает, что этот элемент должен будет учесть все плавающие и стоящие перед ним в Html коде элементы:
• Слева, если для тега прописан clear:left
• Справа при clear:right
• Везде при clear:both (both — означает с обеих сторон) Попробуйте сами на сайте w3c
Задание: написать код с использованием таблицы стилей согласно картинке. Используйте class, img, div, margin, правила float и clear.
Домашнее задание: написать код страницы согласно картинке. Используйте float, clear, margin, width, height, display, hover. В горизонтальном меню при наведении курсора меняется фон и цвет, в вертикальном - меняется цвет и убирается подчеркивание. Если что-то не будет получаться, можете прислать мне файл по э-мейлу, указанному в контактах.
CSS идентификаторы class и id.
CSS класс (class) прописывается в качестве атрибута любого тега в Html коде. В атрибуте class можно использовать произвольное имя, используя символы [0-9],[a-z],[A-Z],[_],[-]. Но кроме атрибута class в языке стилевой разметки используется еще и атрибут Id. Чем отличается class от Id? Значение атрибута Id должно быть уникальным, т.е. название этого Id может использоваться в коде только один раз. А значение атрибута class не является уникальным и может использоваться для сколь угодно большого количества Html тегов в коде. Т.е. разные элементы Html кода (Div, P, H1 и т.д) могут иметь одинаковое значение атрибута class: CSS - .red {color:red;} HTML - <p class="red"> <div class="red"> <span class="red">
Обычно селектор Id пишут без упоминания тега, к которому он относится. Связано это с тем, что в Html коде не может быть двух элементов с одинаковыми значениями атрибута Id, а значит упоминание тега в селекторе Id является излишеством, хотя и не запрещенным. Поэтому обычно просто пишут хеш (решетку), а сразу за ним значение атрибута Id.
CSS селекторы атрибутов
В CSS возможно использовать в качестве селекторов не только названия тегов, class и id, но и названия атрибутов. CSS селектор атрибута заключается в квадратные скобки: [title] {color:green} (любой тег, имеющий внутри атрибут title будет иметь цвет текста зеленый). Причем не важно, имеет ли атрибут, указанный в селекторе, какое-либо значение или же он пустой.
Более того, можно в селекторе указывать не только название атрибута, но и его значение: [title="Первый параграф"] {color:green}.
Этот пример представлял из себя строгое равенство, но можно написать этот селектор и так: [title~="параграф"] {color:green}.
В этом случае данное CSS правило применится только к тем Html элементам, у которых в атрибуте title содержится слово «параграф».
Но можно вместо «~=» поставить «*=» и тогда будут учитываться не только отдельные слова, указанные в селекторе, но и части слов (любой кусок текста, содержащийся в любом месте атрибута): [title*="параграф"] {color:green}.
Есть еще такой оператор как «^=» (все что начинается с указанного в скобках значения), который помогает создать подобный селектор атрибута: [href^="http"] {color:red} Что позволит окрасить все внешние ссылки на сайте (все абсолютные ссылки) в красный цвет, а относительные ссылки, не содержащие «http», останутся того цвета, который был принят для них.
Есть еще один оператор «$=» — все, что заканчивается на указанное в кавычках значение: [title$="раф"] {color:green}.
В браузере IE 6 и ниже эти селекторы не работают вообще или же работают только частично.
Каскадирование в CSS.
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета.
• Наиболее низким приоритетом обладает стиль браузера;
• Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
• И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
• Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
• Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
• Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:
• количество идентификаторов (#id) в селекторе —- ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);
• количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе —- ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS );
• количество тегов в селекторе —- ((0,0,1) за каждый объявленный тег в селекторе правила CSS). (Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.)
• Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;
• И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей./p>
Если какое-то свойство в стиле не приводится явно, то браузер, тем не менее, самостоятельно применяет его со значением, которое установлено по умолчанию. Подобные значения не всегда являются оптимальными, поэтому их можно переназначить, если напрямую указать свойство с желаемым значением.
Графика.
Для создания, обработки и подготовки к верстке графических изображений в рамках нашего курса будем применять Artweaver - небольшой бесплатный графический редактор для работы с файлами большинства популярных графических форматов (BMP, PNG, GIF, JPEG, PCX, TGA, TIFF и PSD). В частности ее portable версию, которая распаковывается в папку на флэшке и без установки запускается файлом Artweaver.exe. Скачать программу (zip)
Несмотря на свои скромные возможности, Artweaver Free умеет работать со слоями, может преобразовывать форматы, в него встроено с десяток фильтров, среди которых фильтр световых эффектов, генераторы текстур и шума, эффекты стилизации, размытия, искажения и др. Также есть выбор инструментальных кистей и возможности по их настройке.
Интерфейс и инструменты Artweaver.
Верхняя панель программы Artweaver
Содержит основные вкладки: File, Edit, Image, Layer, Select, Filter, View, Window, Help.
File: В меню File можно создавать новые и открывать уже имеющиеся проекты (New,Open), клонировать открытые проекты в новую рабочую область (Clone). Close закрывает проект. Save as позволяет сохранить изображение в одном из выбранных форматов (BMP, JPEG, PNG, PSD, TARGA, GIF, TIFF, PCX, AWD-собственный формат Artweaver). Так же во вкладке File есть функция импорта и экспорта проектов и настройки печати (Import, Export, Print). Exit - выход из программы.
Edit: Вкладка Edit дает возможность отменить или повторить предыдущее действие (Undo, Redo). При помощи Cut, Copy, Paste можно вырезать, копировать и вставить выделенную область проекта. В подменю Preset Manager верхней панели программы Artweaver удобно управлять наборами кистей, градиентов, текстур и т.д. В Preferences можно настроить способ увеличения размера изображения, выбрать отбражение курсора для инструмента "Кисть" и т.д.
Image: В меню Image расположены инструменты для изменения различных параметров изображения. Fill и Set Paper Color отвечают за настройки фона проекта. Duplicate дублирует изображение в новой рабочей области. При помощи Image Size можно изменить размер фото, а Canvas Size расширяет рабочее пространство вокруг изображения. Crop обрезает выделенную область, а Rotate Canvas поворачивает ее на нужный градус. Вкладка Adjustments содержит инструменты для редактирования насыщенности и цвета фото. Параметры Auto Levels, Brightness/Contrast, Curves, Levels изменяют насыщенность, контраст, освещение изображения. Color Balance, Colorize, Hue/Saturation служат для настройки цветового баланса. Desaturate - обесцвечивание проекта. Grayscale - обесцвечивание с дополнительными параметрами. Invert - инверсия цвета. Posterize уменьшает количество тонов, придает изображению плакатный вид. Threshold - изогелия.
Layer: Вкладка Layer программы Artweaver предназначена для управления слоями проекта. Пункты New, Duplicate Layer, Delete позволяют соответственно создать новый слой, дублировать выбранный или удалить слой. Во вкладке Layer Properties можно изменить название слоя и присвоить ему цвет для удобства работы. Rasterize Layer растрирует слой, полезен при работе с текстом. Опции Transform и Free Transform используются для изменения размера и угла наклона выбранного слоя. Send и Bring служат для перемещения слоя относительно других слоев. Например, Bring Forward помещает слой поверх всех остальных. Merge Down - объединить слой с предыдущим, а Merge Visible - объединить видимые слои. Flatten Image - сведение всех слоев. Группирование слоев: Layer>New>New Layer Group - новая группа слоев. После этого можно создать необходимое количество новых слоев для этой группы. Ungroup Layers - разгруппировать слои. Lock All Layers in Group - заблокировать все слои, принадлежащие выбранной группе.
Select: Пункт Select отвечает за выделение всего слоя или отдельных элементов. All - выделить все, Deselect - отменить выделение. Inverse инвертирует выделенную область. При помощи функций Auto Select и Color Range можно выполнить авто выделение, например, по цвету фона. Инструмент Feather выполняет растушевку выделенной области. Modify>Expand - расширение выделенной области, а Modify>Contract - сжатие. Пункт Grow выделяет смежные пикселы. Функция Save Selection сохраняет месторасположение выделенной области, позже ее можно восстановить - Load Selection.
Filter: При помощи элементов вкладки Filter к изображению или выделенной области можно применять различные графические эффекты. Blur - размытие, есть несколько вариантов настроек. Distort - искажение, деформация. Пункт Render позволяет использовать световые эффекты. Увеличить резкость фото можно при помощи Sharpen. Storungsfilter добавляет различные виды шума. В подпункте Stylize можно выбрать разную стилизацию проекта, присутствует широкий выбор настроек. Используя Texture, можно превратить фото, например, в мозаику.
View: Используя вкладку View верхней панели Artweaver, можно производить масштабирование проекта для удобства работы (приближение, полноразмерный вид и т.д.). Параметры Grid и Guides добавляют в рабочую область сетку и направляющие соответственно. Perspective Grid позволяет работать с изображением в перспективе.
Window: Пункт Window не содержит инструментов и служит для настройки программы "под себя". Например, открытые проекты можно расположить каскадом или убрать редко используемые окна из рабочей области.
Основные инструменты в Artweaver
По умолчанию слева в редакторе находится панель с основными инструментами. Это Brush Tool, Move Tool, Shape Selection Tool, Magic Wand Tool, Lasso Tool, Crop Tool, Perspective Grid Tool, Text Tool, Shape Tool, Gradient Tool, Eraser Tool, Stamp Tool, Dropper Tool, Paint Bucket Tool, Zoom Tool и Hand Tool.
Brush Tool (Кисть): При выборе инструмента Brush Tool под верхней панелью программы появляются возможные параметры настройки кисти. Можно выбрать эффект акриловой кисти, мясляных красок, пастели, угля, пера, карандаша, фломастера и т.д. Форму кисти можно подобрать в соседнем окне. Size - настройка размера кисти. Прозрачность можно подобрать во вкладке Opacity. Остальные настройки так же модифицируют кисть.
Move Tool (Перемещение): Позволяет двигать любой незакрепленный слой.
Shape Selection Tool (Выделение): В настройках можно выбрать форму выделения, добавить растушевку и настроить размеры выделенной области
Magic Wand Tool (Волшебная палочка): создает выделенную область путем выбора похожих точек на изображении. Параметры регулируются при помощи пункта Tolerance.
Lasso Tool (Лассо): еще один инструмент для выделения. Позволяет выделять более сложные области. Можно выбрать свободное Лассо или магнитное.
Crop Tool (Кадрирование): можно выполнить кадрирование выбранного документа (обрезать). Возможно использование свободного кадрирования или по четким размерам.
Perspective Grid Tool (Сетка перспективы): удобен для работы с перспективой и создания правильных пропорций. Для активации этого инструмента надо выбрать Viev>Show Perspective Grid.
Text Tool (Текст): инструмент для добавления текста в проект. После набора текста надо нажать Apply, а для дальнейшей работы со слоем его надо растрировать Layer>Rasterize Layer.
Shape Tool (Инструмент формы): предназначен для создания различных геометрических фигур. В меню доступны: линия, овал, прямоугольник и т.д.
Gradient Tool (Градиентная заливка): может применяться ко всему слою или к выделенной области. В верхней панели можно настроить цвет, вид и прозрачность для Gradient Tool.
Eraser Tool (Ластик): применяется для полного или частичного стирания слоя. Можно использовать в ограниченной выделенной области. Mожно настроить размер инструмента и прозрачность.
Stamp Tool (Штамп): позволяет клонировать выбранную область проекта. На образце для клонирования надо нажать Alt+Stamp Tool. Очень полезный инструмент для ретуширования фотографии.
Dropper Tool (Пипетка): позволяет определить цвет конкретного пиксела. В настройках можно выбрать объединение цвета 3-х или 5-ти соседних точек.
Paint Bucket Tool (Заливка): используется для изменения цвета всего изображения или выделенной области. Можно настроить различные варианты заливки и ее прозрачность.
Zoom Tool (Масштабирование): инструмент масштабирования документа. "+" - приближает изображение, "-" - отдаляет.
Hand Tool (Рука): позволяет перемещать изображение в рабочей области. Его удобно использовать при работе с большими изображениями.
В нижней части панели инструментов находится окно выбора цвета (основной и фоновый). Двойной щелчок мыши на окне с цветом открывает блок для изменения оттенка. При помощи угловой стрелки можно менять местами основной и фоновый цвет.
В самом низу расположена вкладка управления текстурами. Выбрав кисть и одну из текстур можно имитировать рисование на шелке, мокрой бумаге, холсте и т.д. В верхнем меню настроек кисти есть пункт Grain, который служит для уменьшения или усиления эффекта текстуры.
Блоки в рабочей области Artweaver
Brush: В верхней части блока Brush находится окно выбора инструмента (карандаш, кисть, пастель, перо и т.д.), а рядом окно выбора его формы. Вкладка General показывает результат выше выбранных параметров. Справа от превью есть окно для настройки наконечника инструмента. Здесь же расположены опции для выбора размера кисти, минимального мазмера и расстояния между отображением рисунка кисти на рабочей поверхности. Ниже расположены дефолтные параметры для выбранного инструмента: Type, Method и Category. Изменяя эти парамертры, можно создать собственный инструмент, а затем сохранить его для дальнейшнй работы (стрелка в верхнем правом углу>Save Variant). Новый инструмент можно найти в окне выбора размера кисти. В самом низу блока Brush находится окно выбора бумаги. Рядом окно Imagestamp, которое активируется выбором Type>Imagestamp. Далее расположен Captured (выбор формы кисти), для работы с ним надо выбрать Type>Captured. Рядом настройки заливки. При выборе инструмента "Заливка" в основных инструментах Artweaver (Fill>Gradient), в этом окне можно выбрать тип заливки и градус поворота. Вкладка Advanced также служит для настроек кисти. Например Color Variability>from Gradient применяет к рисунку кисти настройки градиента.
Задание: нарисовать в Artweaver прямоугольную плашку, задать ей градиентную заливку (сначала создайте New Layer). Направление заливки можно задать на рабочем блоке Brush (Window > Brush).
Задание: нарисуйте кнопку с градиентной заливкой как на картинке, используя инструмент Rounded tool и инструмент текста (сначала New Layer). Чтобы выделить, щелкните по слою с нажатым Ctrl. Файл кнопки для примера
Нарезка макета страницы.
Независимо от способа нарезки, первое, что нужно сделать - это отключить на макете все ненужные слои, в том числе Background.
Нарезка через Export.
Открываем Viev > New Guide, выбираем Orientation гайдлинии (Vertical или Horizontal), если нужно расстояние от края - Position, жмем Ok. Вручную гайдлинию можно подвинуть на нужное место. Повторяя эту проседуру, устанавливаем столько гайдов, сколько нужно.
Открываем File > Export > Slices. Здесь можно выделить нужную зону (или же отметить Select All Slices), а также выбрать формат файла для экспорта - png, gif, jpg. Жмем Ok. В окне Save Slices выбираем папку (лучше использовать специально для этой цели заведенную отдельную папку, так при этом способе нарезки образуется очень много "мусора"), называем файл, жмем "сохранить". Смотрим в папке. Внутри нее появилась папка Images. В ней можно найти нужную картинку и переместить в папку с изображениями своего сайта.
Задание: вырезать этим способом из своей нарисованной в Artweaver прямоугольной плашки с градиентной заливкой узкую полоску по направлению заливки (по идее ее ширина 1px) для верстки. Вырезать свою кнопку.
Нарезка с помощью Crop.
С помощью нструмента Shape Selection Tool (Magic Wand Tool, Lasso Tool) выделить нужную область, обрезать макет до выделенного элемента с помощью меню Image > Crop. Или с помощью нструмента Crop Tool выделить нужную область, щелчок правой клавишей мыши внутри этой области, Crop. После чего сохранить результат в папку с изображениями своего сайта.
Задание: вырезать этим способом из своей нарисованной в Artweaver прямоугольной плашки с градиентной заливкой узкую полоску по направлению заливки (по идее ее ширина 1px) для верстки. Вырезать свою кнопку.
Задание: нарезать psd файл - отдельно крыша с тенью, отдельно стена с окном и дверью, отдельно надпись OPEN, отдельно крыльцо с травой.
Домашнее задание: нарезать psd файл для верстки (лого, кнопки верхнего меню вместе с текстом, плашки под левое меню и т.д.). Задание (zip). Для самопроверки можете использовать папку images (находится там же). Если что-то не будет получаться, можете прислать мне файл по э-мейлу, указанному в контактах.
Спрайты (sprites).
CSS спрайты — это представление большого количества мелких картинок, путем создания одной большой картинки, что существенно экономит время загрузки и ресурсы хостинга (запрос идет всего-лишь на одну картинку, вместо всех). А также дает мгновенное появление изображения (изначально скрытого), потому что картинка загружена в самом начале.
По существу, вы берете несколько изображений и складываете их в одно (иногда его называют "главное изображение"). Изображение устанавливается как фоновое (background), как правило через class, для div-блока или любого другого элемента с заданной высотой и шириной (например span, которому задан display:block).
Затем вы можете использовать параметр CSS background-position (в том числе часто и отрицательные значения), чтобы указать браузеру, куда поместить изображение в поле просмотра (viewport) элемента.
Статья с примерами про разные аспекты, преимущества и недостатки использования спрайтов.
Попробуйте сами на сайте w3c
Пример варианта использования спрайта:
<style type="text/css">
ul li i{
display:block;
width:45px;
height:45px;
background:url(images/sprite.jpg);
}
</style>
<ul>
...
<li><a href="#"><i style="background-position:0px 0px"></i> Холодильные машины</a></li>
<li><a href="#"><i style="background-position:-45px 0px"></i> Выносной холод</a></li>
<li><a href="#"><i style="background-position:-90px 0px"></i> Встроенный холод</a></li>
...
</ul>
В случае IE может понадобиться замена неработающего для PNG параметра background-position на клиппинг фона с помощью CSS атрибута clip. Для XHTML документов формат записи clip не должен содержать запятых в указании области, т.е. вместо clip:rect(0, 100px, 100px, 0), для XHTML IE нужен clip:rect(0 100px 100px 0).
Есть сервисы, например "SpriteMe", для создания спрайтов. Ссылку с этой страницы с названием "SpriteMe" нужно мышкой перетащить в закладки своего браузера. Затем, открыв в браузере любую страницу своего ресурса, просто щелкаете в панели закладок по только что созданной закладке сервиса "SpriteMe". На фоне страницы вашего ресурса в правом верхнем углу откроется окно "SpriteMe", где вы сможете осуществить создание CSS спрайта именно для вашего проекта, щелкнув по кнопке "make sprite", а затем его скачать. Левой кнопкой мыши можно перетаскивать изображения между областями. В самом низу окна генератора css sprites в области "Non-Sprited Images" приведены фоновые изображения, которые не представляется возможности объединить в спрайты.
Вычислять background-position совсем не обязательно вручную. Для этого есть специальные сервисы, например spritecow.com.
Подробная статья про спрайты с примерами кода и практическими заданиями.
Короткая статья про использование спрайтов для кнопок.
Изображения с горизонтальным или вертикальным повторением и другие более сложные случаи использования спрайтов.
Графика и оптимизация сайта.
Поисковые системы с недавних пор стали учитывать еще и скорость загрузки. Во всяком случае, в инструментах для вебмастеров от Google, появился пункт «Эффективность сайта», где отображается график среднего времени загрузки страниц вашего сайта. Там же даются советы по уменьшению времени загрузки страниц сайта. Скорость загрузки своего сайта вы, может проверить в плагине Firebug для браузера FireFox или же в специализирующихся на этом онлайн сервисах по проверке скорости загрузки сайта.
Самой распространенной причиной большого времени загрузки страниц сайта являются неоптимизированные изображения, используемые на этих страницах.
Oнлайн сервис по оптимизации изображений предоставлен известной в мире интернета компанией — Yahoo. Сервис этот называется Smush.it и находится по следующему адресу. Для удобства скачивания уже оптимизированных (сжатых) изображений можно поставить галочку в поле "Keep directory structure in zip file" для того, чтобы все сжатые картинки были помещены в один ZIP архив, затем нажать на кнопку "Download Smushed Images".
Еще один онлайн сервис, позволяющий существенно оптимизировать изображение, при этом практически не потеряв ничего в качестве - сервис PunyPNG. Все оптимизированные с его помощью изображения можно скачать в одном архиве, нажав на кнопку "Download" в строке "Total Savings".
Если на сайте для изображений не прописаны атрибуты ALT и Title, то изображения не будут участвовать в поиске по картинкам. Учитываются и другие факторы. Онлайн сервис по проверки SEO оптимизации изображений на сайте для их участия в поиске по картинкам.
В идеальном случае любое изображение на сайте должно быть оптимизировано следующим образом:
• Общие правила, не относящиеся к html тегам, гласят, что для полноценного участия в поиске по картинкам, изображение должно быть в определенной степени уникально (так же как и при обычном поиске, поисковики ратуют за уникальность контента, чтобы не засорять свою индексную базу дублями), иметь не слишком маленький размер и содержаться в файле формата JPEG, GIF, PNG и BMP. Если изображение соответствует этим требованиям, то можно переходить к SEO оптимизации изображений.
• Продвигаемое изображение должно иметь ключевые слова в названии файла, т.к. некоторые поисковые системы это учитывают. Кроме этого изображение, претендующее на трафик с поиска по картинкам, должно содержать в своем теге IMG атрибуты ALT и TITLE заполненные ключевыми словами, по которым продвигается данное изображение.
• Желательно чтобы содержимое атрибутов ALT и TITLE отличалось друг от друга и состояло из более чем одного слова, но не более чем из 15 слов. При этих условиях снижается вероятность того, что содержимое атрибутов ALT и TITLE будет расценено поисковыми системами как спам.
• Желательно, чтобы в каждом теге IMG были бы прописаны атрибуты WIDTH и HEIGHT для задания ширины и высоты этой картинки и для ускорения загрузки вебстраницы с этими изображениями (скорость загрузки страницы с недавних пор тоже влияет на посещаемость сайта).
• Поисковиками так же учитывается текстовое окружение изображения (текст, расположенный до и после картинки).
Иконка Фавикон для сайта
Название фавикон произошло от английского словосочетания FAVorites ICON. Иконку можно видеть в адресной строке браузеров перед URL адресом открытой страницы и в закладках браузеров перед названием закладки. С позиций пользователя и поисковых систем лучше, если у сайта есть Фавикон. По определению это должен быть графический файл формата ICO и размера 16 на 16 пикселей. Для ее создания можно воспользоваться одним из многочисленных сервисов.
Первый онлайн генератор Фавикон — это Faviсon.cc. Используя данный online generator, можно создать иконку с нуля, нарисовав ее попиксельно, а можно и загрузить на сервис и редактировать уже имеющееся изображение любого размера, из которого вы хотели бы создать иконку для сайта. Плюс огромная коллекция и галерея на 55 тысяч различных фавиконов на все случаи жизни. Имеются также анимированные фавиконы, которые, правда, будут видны только в браузере FireFox.
Сервис Favicon.ru проще описанного выше онлайн генератора. Русскоязычный сервис позволяет только создавать из любого имеющегося у вас изображения иконку фавикон и редактировать ее.
Онлайн генератор текстовых фавикон для сайта - antifavicon.com.
Достаточно мощный ресурс по созданию фавиков - degraeve.com. Здесь тоже можно сделать свою иконку фавикон либо с нуля, либо загрузить изображение, которое впоследствии можно будет подкорректировать и скачать уже в формате ICO.
Этот ресурс - favicon-generator.org - позволяет как генерировать фавикон иконку в онлайн режиме из загруженного изображения, так и создать ее с нуля в специальном редакторе.
Page Speed — как ускорить сайт.
Kак увеличить скорость загрузки? Поисковая система Google предлагает воспользоваться инструментом, который поможет понять, что нужно предпринять, чтобы ускорить сайт - Page Speed, расширениe для браузера FireFox (это расширение интегрируется в FireBug). Чтобы его установить, нужно зайти через FireFox на страницу Page Speed и нажать на синюю кнопку "Install Page Speed", дождиться окончания установки Page Speed и перезапустить браузер.
Теперь, активировав жука, на последней вкладке окна плагина Firebug вы увидите надпись "Page Speed".
Откройте страницу вашего ресурса в окне браузера FireFox, активируйте Firebug, перейдите в его окне на последнюю вкладку "Page Speed" и нажмите на кнопку "Analyze Performance". В результате вы увидите список претензий, которые имеет Page Speed к вашему ресурсу, а именно к скорости его загрузки. Page Speed даст вам указания по оптимизации скорости работы Web сервера в купе с используемым вами движком сайта. В самом верху окна Page Speed будут расположены замечания и рекомендации (помеченные красным кружочком с восклицательным знаком), которые нужно будет посмотреть и изменить в первую очередь, так как это даст наибольший эффект в плане увеличения скорости загрузки сайта и потребует от вас не слишком больших усилий.
Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS.
CSS правило Position также как и Float помогает разорвать нормальный поток идущих друг за другом в Html коде элементов и таким образом осуществлять блочную Div верстку.
У этого правила имеется четыре возможных значения (static | relative | absolute | fixed).
По умолчанию используется значение position: static. Т.е. в нормальном потоке два CSS правила, способных его разорвать, имеют значения по умолчанию position:static и float:none. Как только одно из этих значений изменится — нормальный поток Html кода в этом месте будет нарушен, потому что теперь этот элемент может совершенно по другому взаимодействовать со своими соседями или вообще даже не взаимодействовать.
position: relative.
После того, как мы пропишем для какого-либо элемента CSS правило position: relative, то у нас появится возможность задавать смещение (осуществлять позиционирование) для этого элемента с помощью дополнительных CSS правил Left, right, top и bottom (влево, вправо, вверх и вниз соответственно). По умолчанию для CSS правил Left, right, top и bottom используется значение Auto. Когда прописывается для Html элемента правило position: relative, то значения отступов со всех сторон сбрасываются в ноль и предоставляется возможность самим задать требуемые отступы. При этом left: 400px означает отступ от левой стороны вправо, а top: 100px — от верхней стороны вниз. Если указать отрицательные значения для CSS правил Left, right, top и bottom, то элемент будет двигаться в противоположную сторону (например, top — наверх, а Left — влево).
Использование position: relative для плавающего элемента. Пусть у нас имеются два Div контейнера, которые мы подкрасим для наглядности разным цветом фона с помощью background. Первый контейнер мы изначально заставим плавать влево с помощью соответствующего CSS правила, а т.к. первый контейнер будет пустой, то мы зададим ему высоту и ширину с помощью width и height (и отступы с помощью margin):
<div style="float:left; width:100px; height:100px; margin:10px; background:#FFC0C0;"></div> <div style="background:#C0FFC0;">text text ...</div>
Первый Div контейнер, как и ожидалось, плавает влево. При этом, сам по себе второй Div контейнер этого как бы и не замечает (ибо он блочный элемент — display: block), но зато это замечает строчный элемент текста, который обтекает наш плавающий элемент. Теперь давайте добавим к CSS правилам для первого контейнера position: relative и зададим отступы слева и сверху с помощью CSS правил Left и top:
<div style="float:left; width:100px; height:100px; margin:10px; position: relative; left: 150px; top: 150px; background:#FFC0C0;"></div> <div style="background:#C0FFC0;">text text ...</div>
В результате мы увидим, что наш плавающий элемент сдвинулся с первоначального положения в соответствии с заданными отступами, а текст по прежнему продолжает обтекать плавающий элемент так, как будто бы он все еще стоит на своем месте. Т.е. многие Html элементы при своем построении считают, что он находится на своем законном месте (без учета заданных нами в CSS правилах Left и top сдвигов). Но так будут делать не все элементы Html кода, иначе бы мы не увидели никаких изменений. Ближайший предок с прокруткой (в нашем случае это будет элемент Html, т.е. фактически область просмотра) эти изменения заметит. Попробуйте сами на сайте w3c
Рosition relative используется, как правило, в связке с position absolute и в таком виде это CSS правило находит большое применение при верстке сайтов.
position: absolute
Начнем рассмотрение с примера.
<head>
<style type="text/css">
#abс{
background:#FFC0C0;
margin-left: 100px;
}
#abс span{
background:#C0FFC0;
height:100px;
}
</style>
</head>
<body>
<div id="abс">Первое <span>второе</span> и третье</div>
</body>
А теперь зададим строчному элементу Span абсолютное позиционирование путем добавления CSS правила position: absolute. И увидим, что у элемента Span применилось CSS правило height:100px — он перестал быть строчным элементом, а фрагменты "первое" и "третье" состыковались друг с другом, как будто бы элемента со словом "второе" между ними уже не существует. Именно так и работает абсолютное позиционирование в CSS.
Следовательно, при задании элементу "position: absolute":
• Элемент Html кода, для которого прописывается CSS правило "position: absolute" становится блочным.
• Размеры этого элемента будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью width и height).
• Так же, как и для плавающих элементов (с прописанных Float), в случае применения к элементу "position: absolute" эффект Margin-collapse для таких элементов проявляться не будет. Т.е. ему никто не сможет передать свои вертикальные отступы и он никому передать их не сможет (ни с кем не делится вертикальными отступами).
Все эти три пункта наблюдались и при создании плавающих элементов с помощью Float. Поэтому, если для какого-либо элемента Html кода уже было задано CSS свойство Float, но затем для него же прописали "position: absolute", то значение Float браузером (именно он отвечает за разбор кода) сбрасывается в None (значение по умолчанию), ибо нет смысла реализовывать две одинаковых модели.
• Элемент с прописанным "position: absolute" не взаимодействует ни с какими другими элементами Html кода, кроме ближайшего родителя с прокруткой. Все остальные теги в коде элемент с абсолютным позиционированием просто-напросто не замечают (и это видно из нашего примера).
Попробуйте сами на сайте w3c
Вместе с "position: absolute" можно использовать все те же четыре CSS правила: Left, right, top и bottom. Они по прежнему будут задавать смещение, но смещение уже не относительно текущего положения элемента, а относительно границ его контейнера. А если задано только абсолютное позиционирование, но не прописаны никакие значения для CSS правил Left, right, top и bottom, то для них будет использоваться умолчательное значение Auto и такой элемент останется стоять на своем месте. А само понятие контейнера для абсолютно спозиционированных элементов будет отличаться от общепринятого. Контейнером для элемента (тега) Html является область просмотра, а для всех остальных элементов — область контента родительского элемента. У тега с прописанным CSS правилом position absolute это не так. Контейнер при абсолютном позиционировании мы сможем назначать сами (им будет первый из предков, у которого значение position отличается от static, используемого по умолчанию). В предыдущем примере ни одному из предков тега Span не была прописывана position, поэтому мы остановимся только дойдя до самого верха (тега Html). В этом можно убедиться, если задать нулевые отступы (left:0; top:0;). В результате абсолютно спозиционированный тег прижался к нулевой точке отсчета области просмотра. Но мы вольны сами выбирать контейнер для элемента с абсолютным позиционированием. Как это можно сделать?
Связка position absolute и relative в Div верстке.
Пропишем "position: relative" в теге нужного предка, а значения Left, right, top или bottom прописывать не будем (фактически положение предка не меняется, он останется в нормальном потоке), но мы назначаем его контейнером и началом отчета для нашего абсолютного позиционирования. Если в нашем примере пропишем "position: relative" для Html тега Body, то наша картинка меняется: появились характерные отступы говорящие о том, что теперь за точку отсчета берется левый верхний угол тега Body (в умолчательных значениях CSS правил для Body прописаны margin в 8 пикселей). А теперь давайте пропишем "position: relative" и для контейнера Div (#abс). Картина поменялась. Несмотря на то, что CSS правило "position: relative" прописано и для Body и для Div, контейнером для абсолютно спозиционированного тега Span стал именно Div, т.к. он является первым предком, у которого значение position отлично от static. Теперь пропишем для нашего тега Div border и padding (border:12px dotted #ccf; padding:20px;) и видим, что в качестве контейнера при абсолютном позиционировании используется область контента вместе с внутренними отступами (в обычных элементах это будет лишь область контента): точка отсчета расположена в левом верхнем углу по внутренней границе рамки.
Смещение Left, right, top и bottom можно задавать не только в абсолютных единицах, но и в процентах, которые будут браться от ширины (left и right) и высоты (top и bottom) полученного контейнера.
Для чего же на практике используют эту связку?
Для реализации задачи похожей на выпадающее меню, например, или же так называемые Lightbox для показа полноразмерного фото могут использовать этот принцип. Т.е. если вам нужно на странице сформировать появление и скрытие элемента, который при своем появлении не будет затрагивать все остальные элементы (взаимодействовать с ними). В этом случае появление абсолютно спозиционированного элемента не повлечет за собой дергание и перестройку всей веб страницы.
Для выпадающего меню делают примерно следующее. При наведении курсора мыши (задается в CSS с помощью селектора псевдокласса hover) на корневой элемент меню появляется абсолютно спозиционилованный с помощью "position: absolute" элемент (вложенные пункты меню, созданные на основе Html списка). Появляется этот выпадающий список рядом с корневым пунктом меню по той причине, что в нем прописан position: relative.
Position fixed — привязка к области просмотра.
При прокручивании страницы ее элементы (даже имеющие абсолютное или относительное позиционирование) перемещаются вверх (или вниз). А вот при использовании position: fixed такого уже происходить не будет. Спозиционированный таким образом элемент всегда будет находиться в одном и том же положении в области просмотра вне зависимости от прокрутки веб страницы. Для элемента с position: fixed контейнер не ищется, поскольку им является сама область просмотра. Именно в этом заключается отличие от "position: absolute", а все остальное совпадает. Элементы с фиксированным позиционированием при прокрутке страницы ведут себя так, как будто они элементы интерфейса окна вашего браузера (всегда под рукой). Таким образом реализуются, например, панели инструментов, выпадающие панели с возможностью оставить отзыв и т.п. вещи.
Попробуйте сами на сайте w3c
Z-index.
Правило z-index позволяет задавать порядок расположения элементов Html кода с position отличной от умолчательного значения (position: static). Это возможность управлять расположением этих элементов друг относительно друга на оси Z. Эта ось направлена от экрана компьютера к вашим глазам. Точкой отсчета на оси Z является ноль. Именно в этой точке и располагаются все статичные элементы Html кода. Но и для них существовует порядок отображения - элемент, находящийся ниже в Html коде документа, будет расположен ближе к нашим глазам. А вот если у Html тега прописано значение для position — relative, absolute или fixed, то такие элементы будут автоматически располагаться выше (ближе к нашим глазам) по отношению ко всем статическим элементам веб документа. Относительно же друг друга они подчиняются все тому же правилу — элемент находящийся ниже в Html коде документа будет расположен ближе к нашим глазам. Но их положение на оси Z можно изменять с помощью CSS правила z-index (можно использовать положительные и отрицательные цифровые значения).
Попробуйте сами на сайте w3c
Пример. У нас один большой контейнер Div с текстом (контентом) и относительным позиционированием (position:relative), а внутри него заключены два других контейнера Div с фиксированным размером и абсолютным позиционированием (position:absolute относительно левого верхнего угла внешнего контейнера):
<div style="position:relative; margin:50px; padding:50px; background:#C0FFC0;"> <div style="position:absolute; width:150px; height:150px; background:#FFC0C0; left:-25px; top:-25px;"></div> <div style="position:absolute; width:150px; height:150px; background:#E8E8FF; left:25px; top:25px;"></div> text text text text text text text text text text text... </div>
Пропишем для красного блока z-index:1 (по умолчанию z-index имеет значение ноль). Он выдвинулся на первый план.
Чтобы фиолетовый блок опять выдвинулся вперед красного, можно прописать ему z-index:2.
Если значения z-index у спозиционированных элементов будут одинаковыми, то выше будет стоять тот элемент, который в коде веб-страницы расположен ниже.
Теперь пропишем z-index:-1 для красного блока. Видим, что теперь он сзади контейнера.
Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index, например 9999. Это гарантирует, что даже если в стилях и применяется z-index, он будет меньше указанного. Также через псевдокласс :hover можно менять z-index на другое значение при наведении курсора на элемент.
Задание: написать код с использованием "position: relative" и z-index согласно картинке. Используйте class, div, margin, можно использовать правилo float.
Overflow.
Overflow означает "сверхпоток" или, другими словами, "переполнение контента". Применяется, если жестко заданы размеры контейнера. Это правило определяет отображение контента (hidden, visible) или прокрутку контента (scroll, auto) при его выходе за пределы контейнера. По умолчанию используется visible (показывать контент не уместившийся в контейнер).
hidden - все, что не поместилось внутри контейнера, не показывается на вебстранице.
overflow:scroll отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если контент умещается в отведенном для него контейнере. При использование значения Auto браузер сам будет рассчитывать, когда нужно отображать полосы прокрутки и по каким именно осям. Попробуйте сами на сайте w3c
Есть еще варианты написания правила overflow относящиеся к CSS3, но которые поддерживаются всеми браузерами, и их можно смело использовать. Это правила overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная прокрутка, y — вертикальная).
Если, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали она появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно прописать overflow-x:hidden и overflow-y:auto. Попробуйте сами на сайте w3c
Вёрстка, простая и таблицами.
Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).
Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.
Табличная верстка остается наиболее удобной и простой в освоении, потому многие веб-разработчики продолжают ею пользоваться. Этот метод верстки зарекомендовал себя, как наиболее стабильный и надежный, в то время как блочная верстка сложна в реализации, имеет проблемы с совместимостью с разными браузерами и т.п.
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа (табличная верстка). Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа (блочная верстка). За счёт этого нововведения стало возможным применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
W3C рекомендует верстать исключительно слоями (в HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление). А таблицы применять только для табличного контента.
Ещё одна характерная особенность слоёв по сравнению с таблицами. Это множество решений одной и той же задачи. С одной стороны это даёт большую гибкость при вёрстке, но с другой порождает сомнение и поиск оптимального решения. Которого по разным причинам вполне может и не быть.
Вёрстка блоками.
При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую "навешиваются" стили. Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы из-за этого его лучше индексируют.
Типовые элементы вроде заголовка, навигации, контента, контактной информации, размещенные на одной странице, в совокупности называются её макетом. Макет это способ организации материалов на веб-странице.
Для того, чтобы создать простой макет сайта, основанный на блочной DIV верстке, достаточно будет двух файлов, в одном из которых будет HTML код макета (index.html), а в другом — стилевое оформление CSS макета (style.css).
Браузер ищет по указанному в адресной строке пути (физически файлы сайта находятся на сервере хостинга, в папке public_html, корневой папке вашего сайта, которая ассоциирована с доменным именем ресурса) файл под названием index.html или index.php и, найдя соответствующий файл, открывает его:
• в случае index.html, браузер сразу же преобразует HTML код этого файл в видимую нам страницу сайта
• в случае index.php, на сервере хостинга начнет выполняться в реальном времени код PHP, который прописан в этом файле. В результате этого, на выходе будет сформирована страничка в формате HTML, которую браузер уже преобразует в видимую нам страницу сайта.
А что произойдет, если по указанному в адресной строке пути браузер не найдет ни файла index.html, ни файла index.php? Тут все зависит от настроек сервера хостинга. Если настроено все правильно, то браузер отобразит станицу ошибки 404. Если у вашего хостинга сервер настроен неправильно, то при отсутствии index.html или index.php по указанному пути, в окне браузера можно будет увидеть содержимое директории сайта.
Фиксированный макет сайта в 2 колонки на основе блочной верстки.
В файле index.html будут сами DIV-контейнеры, на которых и строится макет, а в файле style.css — описание положения и внешнего вида этих DIV-контейнеров. Все элементы макета мы поместим в один большой Div-контейнер, для того, чтобы можно менять размеры и выравнивание всего макета на основе блочной верстки через свойства этого контейнера. Внутри основного Div-контейнера будут находиться контейнеры, отвечающие за формирование отдельных блоков 2 колоночного макета (шапки, левой колонки, области для контента, футера). Мы зададим им размеры и настроим позиционирование на странице с помощью CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (DIV верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div id="footer">Подвал</div> </div> </body> </html>
Если сейчас открыть файл index.html в браузере FireFox с установленным плагином Web Developer и выбрать из меню этого плагина пункты "Контуры" — "Контур элементов уровня блоков", то можно увидеть примерно следующую картину:
четыре Div контейнера заключены в одном основном Div контейнере.
C помощью свойств CSS расставим все Div контейнеры по своим местам.
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
Если после левой колонки добавить в index.html:
<div id="right">Правая колонка Меню Меню Меню Меню</div>
в style.css добавить:
#right {width:200px; background-color:#FFFF00; float:right;}
а для #content добавить margin-right:202px;
то мы получим трехколоночный фиксированный макет сайта, сверстанный на Div.
Резиновый макет для сайта на основе блочной верстки.
Макет этого типа будет занимать всю ширину экрана пользователя, открывшего вебсайт. Чтобы из обычного макета фиксированной ширины на основе блочной верстки сделать резиновый, нужно лишь для Div контейнера, в котором заключен весь макет сайта (#maket), задать в style.css не фиксированный размер (width:800px;), а относительный размер по ширине - width:100%;. В резиновом макете сайта при уменьшении окна браузера в определенный момент произойдет наезд одних Div блоков на другие и полный развал дизайна. Чтобы этого не происходило достаточно задать для Div контейнера, в котором находится резиновый макет сайта (#maket), с помощью специального CSS свойства - min-width, минимально возможную ширину, до которой можно уменьшать размер макета (min-width:600px). После достижения этой минимальной ширины макет перестанет быть резиновым и не будет изменяться по ширине при дальнейшем уменьшении окна браузера.
Но Internet Explorer 6 не будет замечать ограничения минимальной ширины. Для того, чтобы побороть этот недостаток резинового сайта в Internet Explorer 6, существует целый ряд так называемых хаков. Один из хаков заключается в том, что CSS свойство width:100% для блока с #maket мы заменим специальным кодом:
width:expression( (document.compatMode && document.compatMode == 'CSS1Compat') ? ( document.documentElement.clientWidth < 600 ? "600px" : "auto" ) : ( document.body.clientWidth < 600 ? "600px" : "auto" ) );
Здесь можно скачать типовые шаблоны фиксированных и резиновых макетов.
Как прижать подвал (footer) к нижней части экрана браузера.
При просмотре сайта на больших мониторах при отображении страницы с малым количеством информации может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на середине экрана по высоте, что зачастую может выглядеть некрасиво. Что делать, если в макете сайта нужно обязательно прижать футер к низу экрана? Возьмем за основу трехколоночный макет сайта (все тоже самое можно применить и для двухколоночного макета, и для резинового макета сайта).
Нам нужно будет в файле style.css дописать для тега Body еще одно CSS свойство, задающее высоту страницы макета: height:100%;
Зададим для Div контейнера, в котором заключен макет сайта (#maket), минимальную высоту равную 100%: min-height:100%; и border:solid 3px black; (для наглядности). Но браузер Internet Explorer 6 не понимает CSS свойство min-height: 100%, которое мы использовали для задания минимальной высоты Div контейнера с макетом сайта, равной высоте экрана. Для решения этой проблемы придется применить хак: перед списком CSS свойств для Div контейнера (#maket) нужно будет вставить следующую комбинацию CSS свойств:
* html #maket {height: 100%;}
Теперь нам нужно будет вынести Div контейнер футера из общего контейнера (#maket) и разместить сразу же после него. Но теперь футер находится ниже края экрана. Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером, чтобы он сместился вверх на расстояние, равное его высоте. При этом контейнер с футером наедет на основной Div контейнер и впишется в высоту экрана браузера. Поэтому сначала зададим Div контейнеру (#footer) высоту - height:50px;, а затем отрицательный отступ сверху на эту высоту - margin-top:-50px; (теперь можно убрать CSS свойство border: solid 3px black из правила для Div контейнера maket, чтобы толщина рамки не мешала всему макету вместе с футером поместиться в экране по высоте). А также зададим ширину футера и выровняем его посередине экрана по ширине:
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
Чтобы избежать перекрывания контента добавим новый пустой Div контейнер (так называемую распорку) в основной контейнер нашего макета (#maket), в то место, где раньше располагался Div контейнер с футером (<div id="rasporka"></div>), задав для этого нового Div контейнера высоту равную высоте футера (#rasporka {height:50px;}).
Окончательный вид файла index.html трехколоночного макета с прижатым к низу экрана футером.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (DIV верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="right">Правая колонка Меню Меню Меню Меню</div> <div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div id="rasporka"></div> </div> <div id="footer">Подвал</div> </body> </html>
Окончательный вид файла style.css трехколоночного макета с прижатым к низу экрана футером.
body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header {
background-color:#C0C000;
}
#left {
background-color:#00C0C0;
width:200px;
float:left;
}
#right {
width:200px;
background-color:#FFFF00;
float:right;
}
#content {
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer {
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}
Другой способ верстки сайта на основе Div элементов.
Сначала зададим один внешний контейнер, в котором будут находиться все остальные элементы нашего макета (#cont) и пропишем CSS правила для этого контейнера. Теперь добавим внутрь элемента Div с #cont еще четыре пары тегов Div с уже другими ID и другим функциональным назначением — верхняя - header, средние (внешняя - outer и внутренняя - inner) и нижняя - footer. Пропишем CSS правила для этих тегов, зададим им цвет фона. Для наглядности зададим высоту блоку inner.
Следующим этапом верстки сайта станет создание колонок внутри средней области. Наша задача состоит в том, чтобы получить три колонки одинаковой высоты с использованием в боковых колонках фоновых картинок (небольших по высоте цветных полосок нужной ширины, которые с помощью стилей мы будем повторять по вертикали). В той папке, где находится index.html, необходимо создать папку images и поместить в нее полоски для левой и правой колонок. Фоновые картинки не являются колонками для будущего контента, колонки нам еще предстоит создать.
Для этого в файле index.html добавляем три блока Div внутрь уже имеющего блока с ID inner. Присвоим им говорящие ID — left, right и center, добавим еще один блок с ID podporka. Добавим в колонки условный текст для наглядности и уберем высоту из блока inner. Пропишем CSS правила для этих тегов с использованием width, float, margin. Для ID podporka пропишем clear:both;, чтобы учитывался контент плавающих элементов.
Окончательный вид файла index.html трехколоночного макета с фоновыми картинками.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Другой вариант блочной верстки</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="cont"> <div id="header"> </div> <div id="outer"> <div id="inner"> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="right">Правая колонка Меню Меню Меню Меню</div> <div id="center">Содержимое страницы Содержимое страницы </div> <div id="podporka"></div> </div> </div> <div id="footer"></div> </div> </body> </html>
Окончательный вид файла style.css трехколоночного макета с фоновыми картинками.
body, html {
margin:0px;
padding:0px;
background:#E5EFF4;
color:#555;
font:12px Verdana, Arial;
}
#cont {
width:960px;
background:#ffffff;
margin: auto;
padding: 10px;
}
#header {
height:100px;
background:#C0C000;
}
#outer {
margin:10px 0;
background:url(images/right.png) repeat-y 100%;
}
#inner {
background:url(images/left.png) repeat-y;
}
#left {
width:200px;
float:left;
}
#right {
width:200px;
float:right;
}
#center {
margin:0 210px;
}
#podporka {
clear:both;
}
#footer {
height:100px;
background:#FFC0FF;
}
А если на каких-то страницах нам будет нужен такой макет только в две колонки? Тогда для этой страницы нужно задать
(или во внутренней таблице стилей, или в отдельном стилевом файле для этой страницы, в котором в самом начале будет @import url(style.css);):
#right {display:none;}
#center {margin-right:0;}
#outer {background-image: none;}
Перенос сайта на хостинг.
Нужно будет сначала подключиться к серверу с помощью клиента WinSCP скачать программу. Устанавливаем программу на флэшку, запускаем клиент и создадим новое подключение. Для этого нажимаем кнопку "New", в поле "Host name" пишем "it.academy.lv", "Port number" 22, вводим свои User и Password, в поле "Protocol" выбираем SFTP, нажимаем "Login". Мы оказались в каталоге home/users/w1205u... Файлы нужно копировать (перемещая их мышкой) не в самую верхнюю папку (каталог) доступную вам, а в корневую папку, которая называется PUBLIC_HTML. Можно создать в корневой папке папку TEST (щелчок правой клавишей мышки), в которую и положить два основных файла своего сайта: index.html и style.css. После этого сайт будет доступен в интернете по адресу: http://it.academy.lv/~w1205u../TEST/
Тестирование сайта на соответствие стандартам W3C.
Проверка сайта включает в себя:
Просмотр сайта на мониторах с различной разрешающей способностью.
Проверку времени загрузки всех страниц сайта при заданной скорости соединения с Интернет.
Проверку возможности просмотра сайта и правильности отображения цветов при различном количестве цветов, установленных на мониторе.
Проверку сайта при просмотре его на различных браузерах и их версиях.
Проверку гиперссылок, поиск и устранение сломанных гиперссылок.
Проверку загрузки всех графических материалов сайта (рисунки, фотографии и т.д.).
Проверку замещающих надписей графических материалов.
Проверку работоспособности счётчиков, установленных на страницах сайта.
Проверку описания, содержания, свойств страниц сайта и мета-тэгов каждой страницы.
Проверку орфографии на страницах сайта.
Проверка сайта на его программно-аппаратную совместимость с сервером включает закачку полной версии сайта на сервер, тестирование и проверку на наличие ошибок.
Материал про тестирование и отладку кода
Домашнее задание: сверстать макет (html и css) по картинке 1 и картинке 2. Некоторые мелкие детали можно пропустить. Для самопроверки: файлы (zip) Файлы верстки могут отличаться от образца, главное - чтобы работали во всех браузерах и нормально масштабировались (в блочной верстке всегда возможны варианты).
HTML5.
Cовременный сайт, не говоря уже о соц. сетях, изобилует медийной составляющей, а также интерактивен. Устаревший HTML4 и всевозможные Java-примочки уже практически исчерпали свои возможности. Для отображения сайта приходится использовать сторонние программы и сервисы. HTML5 призван устранить все проблемы и сделать сайты легче, проще и, самое важное, семантически правильными. Что это значит?
Исследование огромного количества современных сайтов выявило в их структуре следующие характерные черты:
1. Подавляющее большинство имеет типичную структуру: шапка, навигация, контент, подвал.
2. Подавляющее большинство также имеет в названиях этих блоков соответствующие слова: header, nav, article, footer.
Теперь эти теги официально входят в состав HTML5.
Для HTML5 слово семантика является практически ключевым. А все из-за расплодившихся разнокалиберных PDA-устройств. Экранчики и возможности у каждого разные. Как сделать так, чтобы все они хорошо отображали сайт? Нужна какая-то стандартная схема. Ведь невозможно прописывать в стилях все возможные варианты размеров. Семантика — это и есть схема. Она однозначно закрепляет за шапкой конкретное обозначение, и за навигацией тоже, и за всеми остальными блоками также. И любоое устройство будет решать, где и что оно будет показывать именно на основе данной четкой схемы. Также семантика помогает поисковым системам быстрее и точнее находить на сайте полезное содержимое, т.е. контент. Причем, простейшим методом исключения: не шапка, не подвал, не навигация.
Более того, HTML5 допускает даже такие "невинные шалости", как полное отсутствие привычных и незыблемых столпов <html>, <head> и<body>. Легко проверить - наберите в текстовике следующий код, сохраните страницу и проверьте ее валидатором:
<!DOCTYPE html>
<meta charset=utf-8>
<title>Правильный сайт</title>
<p>Проще некуда</p>
Этим, конечно, увлекаться не стоит. Однако данный опыт показывает, что новые браузеры и так прекрасно осведомлены, что перед ними веб-страница, и данные обязательные теги есть по-умолчанию.
Новшество, помимо DOCTYPE и указания кодировки — это упрощенное определение языка страницы: <html lang=ru>
HTML5 новые теги header, footer, nav, aside, section, article, hgroup.
Большинство браузеров пока еще не знают, что эти новые теги являются блочными элементами и считают их строковыми как теги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тегов необходимо принудительно прописывать их блочный характер: header, footer, nav, article {display: block;}.
nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.
aside — является объединяющим тегом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными.
section — также объединяющий тег. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции непосредственно статью на странице.
article — служит для разбивки страницы на отдельные статьи.
Оба тега section и article обладают рядом интересных особенностей. Например, теперь можно смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо. Кроме того, тег section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:
<section> <article> <section></section> <section></section> </article> <article> <section></section> <section></section> </article> </section>
hgroup — тег призван группировать заголовки страницы в одну логическую единицу. Например, главный заголовок всей страницы H1 и описание к ней, оформленное тегом H3. На странице в дальнейшем еще несколько раз могут использоваться теги H3 для других целей. Чтобы логически отделить описание страницы от других тегов H3, мы его объединяем с главным тегом H1 в группу, которая и обозначается тегом hgroup:
<hgroup>
<h1>Сам сайт</h1>
<h3>Описание Самого сайта</h3>
</hgroup>
HTML5 новые теги time, figure, video, audio, canvas
time — позволяет однозначно кодировать время и дату по грегорианскому календарю с учетом всех возможных смещений часовых поясов. Состоит данный тег из т.н. "считываемой" части и контентной. Рассмотрим пример:
<time datetime=2012-02-20>20 февраля 2012</time>
Здесь атрибут datetime со значением 2012-02-20 и является считываемой частью, которую считывает как браузер, так и всевозможные агрегаторы. На основе этих данных они могут, например, занести в календарь пользователя определенную дату или создавать временные шкалы с указанием точек-событий. А вторая часть (контентная) — это то, что видит пользователь на экране. Если запись и там и там должна быть одинаковая (например, время в формате 24-часовом), то можно ограничиться вот такой записью:
<time>11:00</time>
Данный тег может иметь расширенный вариант, в котором указана как дата и время, так и часовой пояс. Чтобы показать одновременно дату и время необходимо между ними вставить префикс в виде латинской буквы Т. При этом необходимо указывать часовой пояс: либо буквой Z (всемирное время), либо смещением относительно всемирного времени на нужное число с соответствующим знаком + или -
<time datetime=2012-02-20Т11:00Z>
или <time datetime=2012-02-20Т11:00+02:00>
Есть у этого тега еще один дополнительный параметр, который выглядит как pubdate и прописывается после атрибута datetime таким образом:
<time datetime=2012-02-20Т11:00Z pubdate>
Данная запись однозначно определяет дату и время публикации статьи. Зачем это нужно? Например, в статье есть другая дата, означающая анонс какого-нибудь события, и автору нужно, чтобы эту дату тоже считывали агрегаторы или встроенный в браузер календарь. Как определить, какая из этих двух дат является датой публикации? А вот как раз при помощи дополнительного параметра pubdate.
figure — теперь для подписи и заголовков к картинкам не нужно городить кучу блочных и строковых тегов, а достаточно воспользоваться тегами figure и figcaption. Выглядеть это может так:
<figure> <img src=kartinka.jpg alt=""> <figcaption> Красивая картинка <small>неизвестный художник</small> </figcaption> <figure>
Здесь figure означает блок с картинкой и текстом к нему, а figcaption служит одновременно и заголовком и описанием. Чтобы отделить описание от заголовка, его поместили в тег small, который в HTML5 теперь просто означает "мелкий текст" и нужен для служебной инфы, не являющейся по сути контентом.
video — служит для простой вставки видео на страницы сайта. То есть, код вставки может быть очень простым:
<video src=kinoshka.ogv></video>
Без всяких сторонних плееров, object и embed. В этот код можно добавить либо автозапуск (autoplay), либо элементы управления (controls). В первом случае ролик запустится сам при открытии страницы (не очень хорошо), а во втором браузер предоставит собственные элементы управления воспроизведением. Также можно добавить размеры окна проигрывателя в пикселах и картинку-заставку (poster). Попробуйте сами на сайте w3c Выглядеть это может так:
<video src=kinoshka.ogv width=600 height=400 poster=kinoshka.jpg controls></video>
audio — также предназначен для простой вставки медиа-контента на страницы сайта. На этот раз речь идет об аудио. Все похоже на работу с видео. Также просто добавляется аудио-файл, к которому можно пристегнуть элементы управления controls. Попробуйте сами на сайте w3c
<audio src=pestnya.ogg controls></audio>
Все это замечательно, конечно, но на данный момент времени все упирается в кодеки. Разные браузеры поддерживают разные кодеки: Opera и FF — ogv и ogg, Safari и IE — H.246 и MP3, а Google Chrom — и тех и других. Поэтому сейчас приходится на сайте прописывать несколько вариантов файлов и использовать для этого специальный тег source. Пример:
<video controls>
<source src=kinoshka.ogv type='video/ogg; codecs="theora, vorbis"'>
<source src=kinoshka.mp4 type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
</video>
Элемент canvas предоставляет посетителям сайта интерфейс для двумерного рисования: линии, заливки, формы, текст и пр. Вот пример — Harmony. По умолчанию тег canvas создает на странице невидимую область размерами 300 на 150 пикселей. Размеры, разумеется, можно переопределить. Чтобы начать рисовать, недостаточно просто прописать этот тэг. Нужен еще специальный JavaScript.
Если <!DOCTYPE html> понимают практически все используемые в настоящее время браузеры, этого нельзя сказать про новые теги - "abbr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video" - (IE старше 9 версии просто не знает, что с ними делать). Для того, чтобы старые браузеры начали понимать любые новые теги, которых нет в HTML4, их – эти теги надо как-то для начала объявить.
Тут на помощь новым стандартам приходит JavaScript. Если создать новый элемент с помощью JavaScript (document.createElement("article");), старые браузеры начинают относиться к ним как полноценным тегам. Подключите скрипт в тег HEAD и Ваша страница преобразится в старых браузерах:
<!--[if IE lt 9]>
<script src="http://remysharp.com/downloads/html5.js"></script>
<![endif]-->
CSS3.
Cпецификации CSS 3 имеет целый ряд интересных свойств, не вошедших в предыдущую версию спецификации. В данный момент официально спецификация CSS 3 ещё находится в разработке – то есть этот документ ещё не утверждён и пока имеет лишь черновой вариант, однако, несмотря на этот факт CSS 3 уже широко используется вебмастерами и поддерживается современными браузерами (IE9+, Opera 10+, Firefox 3.6+, Chrome 12+, Safari 5+ конечно не без нюансов). Помимо того что спецификация CSS 3 может скруглять углы она позволяет делать ещё целый ряд вещей: создавать градиенты, тени, анимацию на страницах сайта, задавать степень прозрачности тех или иных элементов, также значительно расширяет набор инструментов при работе с фоном, цветом, текстом.
Фоновые изображения в CSS3.
в CSS3 можно устанавливать размер фоновых изображений с помощью свойства background-size (в пикселях или в процентах). Попробуйте сами на сайте w3c
CSS3 расширяет возможности свойства background-image, теперь один элемент может иметь несколько фоновых изображений одновременно (путь к ним перечисляется через запятую). Для того, чтобы применить к фоновым картинкам свойства оформления, нужно перечислить необходимые значения в том же порядке через запятую. Попробуйте сами на сайте w3c
С помощью нового CSS3 свойства background-origin Вы можете установить как должно вычисляться положение элемента относительно границ его родительского элемента.
Данное свойство может иметь 3 различных значения:
• border-box положение элемента вычисляется относительно верхнего левого угла границы элемента;
• padding-box положение элемента вычисляется относительно верхнего левого угла блока padding;
• content-box положение элемента вычисляется относительно верхнего левого угла содержимого.
Попробуйте сами на сайте w3c
Создание элементов со сглаженными углами.
С помощью нового CSS3 свойства border-radius можно делать углы элементов сглаженными. Данное свойство также может применяться только к нужным углам:
border-top-left-radius делает сглаженным только верхний левый угол элемента;
border-top-right-radius делает сглаженным только верхний правый угол элемента;
border-bottom-left-radius делает сглаженным только нижний левый угол элемента;
border-bottom-right-radius делает сглаженным только нижний правый угол элемента.
-moz-border-radius:25px; - для Firefox 3.6 и более ранних версий. Попробуйте сами на сайте w3c
Добавление к элементам тени
С помощью свойства box-shadow Вы можете добавлять к элементам страницы тени.
Этим Вы делаете дизайн страницы имитирующим реальный мир, так как объекты в нем отбрасывают тени. Внешние тени создают эффект приподнятости элемента над остальным содержимым, а внутренние создают эффект вдавленности элемента. Первые два значения свойства box-shadow задают величину смещения тени по горизонтали и вертикали в пикселях, а последнее значение задает цвет тени. Также данное свойство может иметь значения указывающие радиус разброса тени (третье значение) и размер тени (четвертое значение).
box-shadow:6px 6px 6px 2px black;
С помощью значения inset Вы можете указать, что тень должна быть не внешней, а внутренней.
box-shadow:0px 0px 6px 2px black inset;
Попробуйте сами на сайте w3c
Подключая к страницам сайта в используемый класс pie.htc (behavior: url(/PIE.htc);) в Internet Explorer можно сделать не только скругленные уголки у блока, но и градиентный фон, и тень. Также нужно добавить position: relative; в используемый класс. HTC - это аббревиатура от HTML Components (HTML компоненты, которые поддерживаются во всех IE с версии 5 и старше). В него входит скрипт и определенные элементы, определяющие этот компонент.
Установка цвета границы.
Обратите внимание: данное свойство на данный момент поддерживается только браузером Mozilla Firefox.
С помощью нового CSS3 свойства border-colors Вы можете регулировать цвет каждого пикселя границы. Если толщина границы превышает количество пикселей, для которых задан цвет, то оставшиеся пиксели будут заполняться последним заданным цветом.
#abc {
border:8px solid;
-moz-border-top-colors: #FF0000 #EB1010 #D22E2E #B03E3E;
-moz-border-right-colors: #FF0000 #EB1010 #D22E2E #B03E3E;
-moz-border-bottom-colors: #FF0000 #EB1010 #D22E2E #B03E3E;
-moz-border-left-colors: #FF0000 #EB1010 #D22E2E #B03E3E;
}
Вставка изображений в качестве границы
В CSS3 было добавлено новое свойство border-image позволяющее вставлять произвольные изображения в качестве границы элемента.
border-image:путь(1) отступ от каждого края изображения для того, чтобы разрезать его на 9 частей (2) ширина границы в пикселях(3) повторение (repeat), округление (round) или растягивание (stretch)(4);
IE не поддерживает, FF префикс -moz-, Chrome и Safari префикс -webkit-, Opera префикс -o-. Попробуйте сами на сайте w3c
Создание прозрачных элементов и картинок.
Для создания прозрачных элементов во всех браузерах кроме Internet Explorer используется свойство opacity:x, где x значение которое может изменяться от 0.0 (полностью прозрачный элемент) до 1.0 (полностью непрозрачный элемент).
Для создания прозрачных элементов в Internet Explorer используется свойство filter:alpha(opacity=x), где x значение которое может изменяться от 0 (полностью прозрачный элемент) до 100 (полностью непрозрачный элемент). Попробуйте сами на сайте w3c
Смена прозрачности при наведении курсора на сайте w3c
Прозрачная плашка на фоне изображения на сайте w3c
.op1 {
opacity:0.8;
filter:alpha(opacity=80);
}
CSS3 трансформирование.
Эти свойства работают во всех современных браузерах (IE9+, Safari, Chrome, Firefox, Opera), но требуют добавления специальных префиксов. Для браузеров Chrome и Safari требуется префикс -webkit, для браузера Firefox требуется префикс -moz, для браузера Opera требуется префикс -o, для браузера IE требуется префикс -ms. Попробуйте сами на сайте w3c
| CSS3 функции трансформирования | |
|---|---|
| Функция | Описание |
| translate(x,y) | Смещает элемент от изначальной позиции по горизонтали и вертикали. |
| translateX(x) | Смещает элемент по горизонтали. |
| translateY(y) | Смещает элемент по вертикали. |
| scale(x,y) | Растягивает элемент по вертикали и горизонтали. |
| scaleX(x) | Растягивает элемент по горизонтали. |
| scaleY(y) | Растягивает элемент по вертикали. |
| rotate(градусы) | Поворачивает элемент по часовой стрелке. |
| skew(x,y) | Скашивает элемент по горизонтали и вертикали. |
| skewX(x) | Скашивает элемент по горизонтали. |
| skewY(y) | Скашивает элемент по вертикали. |
| matrix(x,x,x,x,x,x) | Трансформирует элемент с помощью матрицы из 6 значений. |
CSS3 градиенты.
Линейные градиенты.
Градиенты поддерживается во всех современных браузерах, но требует добавления специального префикса. Для браузера IE10+ требуется префикс -ms, для Chrome и Safari префикс -webkit, для Opera префикс -o и для Firefox префикс -moz.
Линейные градиенты создаются с помощью CSS3 метода linear-gradient, который должен указываться в значение свойства background.
Для того, чтобы создать линейный градиент необходимо указать его направление (может задаваться с помощью ключевых слов или градусов) и цвета перехода.
#abc {background:linear-gradient(270deg,white,black);}
Вы можете указывать координаты местоположения цветов с помощью % (0% подразумевает начало градиента, 100% конец).
#abc {background:linear-gradient(left,white 0%,green 50%,black 100%);}
IE - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='white', endColorstr='green');
Сферические градиенты.
С помощью метода radial-gradient можно создавать сферические градиенты.
Синтаксис определения сферических градиентов очень похож на синтаксис линейных, но требует также задания формы градиента (может быть сферической или эллипсоидной).
#abc {background:radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);}
Повторяющиеся градиенты.
Повторяющиеся градиенты задаются с помощью CSS3 методов repeating-linear-gradient (создает повторяющийся линейный градиент) и repeating-radial-gradient (создает повторяющийся сферический градиент).
Для того, чтобы создать повторяющийся градиент нужно указать направление градиента, а также цвета перехода и расстояние, которое они должны занимать.
#abc {background:repeating-radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);}
CSS3 переходы.
На данный момент не поддерживается браузером Internet Explorer, для браузеров Chrome и Safari перед свойством требуется добавить префикс -webkit, для Firefox префикс -moz, а для Opera префикс -o.
С помощью нового CSS3 свойства transition можно создавать эффекты перехода.
Для создания переходов необходимо указать какое CSS свойство будет изменятся и скорость выполнения этих изменений в секундах.
Пример:
#abc {
background-color:#E869AA;
color:#000;
width:200px;
transition: color 4s, width 4s, background-color 4s;
}
#abc:hover {
color:#FFFFFF;
width:400px;
background-color:#880045;
}
Свойства текста.
Тень текста.
CSS 3 позволяет без труда имитировать тень падающую от того или иного текста. Для того что бы текст начал отбрасывать тень к нему необходимо применить свойство text-shadow с группой нужных нам значений, определяющих параметры этой самой тени.
Значений в группе может быть всего четыре, причём два из них обязательны где:
• Первое значение - определяет сдвиг тени относительно текста по горизонтали, указывается в пикселях или любых других единицах измерения CSS, может иметь как положительное, так и отрицательное значение, является обязательным параметром.
• Второе значение - на сей раз определяет смещение тени относительно текста уже по вертикали тоже может быть как положительным, так и отрицательным и так же является обязательным параметром.
• Третье значение - делает тень тенью, а не просто сдвинутой копией текста - оно определяет радиус сглаживания тени, делая её более чёткой или же наоборот размытой. Чем большее значение имеет данный параметр, тем больше расфокусируется отбрасываемая от текста тень. Данный параметр не является обязательным и его можно не указывать в этом случае размытость тени по умолчанию примет 0.
• Четвёртое значение - задаёт цвет тени, тоже необязательный параметр и в случае если он не указан тень будет того же цвета что и сам тест.
Также свойство text-shadow может принимать одно единственное значение none, которое отменяет добавление тени. Ещё одной интересной особенностью свойства text-shadow является тот факт, что текст с этим свойством может одновременно отбрасывать не одну, а сразу несколько теней с разными параметрами (Попробуйте сами на сайте w3c):
.shadow {
text-shadow: 10px 12px 3px green, 10px -8px 3px blue, -8px 4px 3px red;
font-size: 22px;
font-weight: bolder;
}
Так же нужно добавить, что свойство text-shadow нормально уживается с псевдоэлементами :first-letter и :first-line - p:first-letter {text-shadow: 0px 0px 5px green;}.
Браузер Internet Explorer воспринемает свойство text-shadow начиная только с 10.0 версии, однако, для создания эффекта тени текста может использовать один из своих собственных фильтров - свойство: filter: Shadow() (невалидно!), например:
filter: Shadow(Color=#ff0000, Direction=45, Strength=3);
где: Color - цвет тени, Direction - направление тени в градусах, Strength - величина смещения тени в пикселях.
Так что специально для старых IE можно дополнительно указывать подобную строчку.
Задание: прописать кнопку, задать ей градиентную заливку, закругленные углы и наружную тень. Внутрь ее поместить надпись с тенью от шрифта.
Перенос длинных слов.
Свойство word-wrap позволяет переносить длинные слова и прочие группы символов, неразделённые пробелами на следующую строку, если такое слово не помещается в блок с фиксированно заданной шириной.
Свойство word-wrap имеет следующие значения:
• normal - перенос строки не происходит там, где нет пробелов или переносов строк.
• break-word - перенос строки происходит в тех местах, где это становится необходимо.
• inherit - наследует значение от блока родителя.
Видимость текста.
Свойство text-overflow позволяет указать браузеру, что делать с длинным текстом, если области, в которой он находится, присвоено свойство overflow и установлено одно из его значений: auto, scroll или hidden.
Делать собственно это свойство может следующее:
• clip - обрезает текст по размеру области.
• ellipsis - обрезает текст по размеру области и добавляет к концу строки многоточие.
Разбивка текста на столбцы.
На данный момент не поддерживаются браузером Internet Explorer, для браузеров Chrome и Safari перед свойством требуется добавить префикс -webkit, а для Firefox префикс -moz.
С помощью CSS3 свойства column-count можно указать количество столбцов, на которые необходимо разбить текст выбранного элемента Попробуйте сами на сайте w3c, а
с помощью CSS3 свойство column-gap можно установить величину отступа между столбцами текста Попробуйте сами на сайте w3c:
div {column-count:4; column-gap:50px;}.
С помощью свойства column-rule можно задать ширину, цвет и стиль оформления пространства между столбцами Попробуйте сами на сайте w3c:
div {column-count:4; column-rule:2px dotted #7F0055;}.
CSS3 свойство column-width позволяет указывать ширину столбцов текста: div {column-width:150px;}.
Свойства шрифта.
Весь Интернет по большей своей части, обходится весьма ограниченным набором безопасных шрифтов: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Но можно использовать нестандартные экзотические шрифты, которых обычно нет на компьютере пользователя. Для этого нужно, во-первых, загрузить на компьютер пользователя этот шрифт, указав путь к файлу, а во-вторых, присвоить ему имя, к которому впоследствии мы будем обращаться. Делается это с помощью правила @font-face, а вся конструкция вместе будет выглядеть так:
@font-face {
font-family:My Font; /* Присваиваем имя шрифту */
src:url('font/font.ttf') /* Путь к шрифту в формате TTF */
}
Обращаемся к нему: <p style="font-family:My Font;"> K сожалению, такой код не будет работать в Internet Explorer и, может быть, в Опере. Поэтому специально для IE нужно дополнительно прописывать желаемый шрифт в формате EOT. Такие пары не так уж просто найти в Интернете, как и вообще шрифты в формате EOT. Однако достаточно иметь шрифт в распространенном формате TTF, а потом специально для браузера IE создать дубликат, переконвертировав шрифт в формат EOT например вот здесь.
Аналогичным способом можно подключить шрифты для жирного и курсивного начертания, добавив в правило @font-face свойства font-style:italic или font-weight:bold. Попробуйте сами на сайте w3c
Пример:
@font-face {
font-family:Graffiti;
font-weight:bold;
src:url('font/graffiti_bold.ttf');
}
Зачёт.
Разбираем макет и верстку: Скачать (7z/zip), Скачать (7z/zip)
Различные макеты и верстка: Скачать (7z/zip).
Разбираем макет и верстку 17.12.14: Скачать (7z/zip)
Зачетное задание является итогом Вашей работы в течение всего первого семестра и позволит оценить уровень знания html и css и навыков верстки.
Задание: сверстать страницу (html и css), чтобы результат был идентичен картинке как в папке.