Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Здесь можно купить и скачать "Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов" в формате fb2, epub, txt, doc, pdf. Жанр: Прочая справочная литература, издательство БХВ-Петербург, год 2011. Так же Вы можете читать ознакомительный отрывок из книги на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Автор:
Издательство:
неизвестно
Год:
2011
ISBN:
978-5-9775-0596-3
Скачать:
Вы автор?
Книга распространяется на условиях партнёрской программы.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов"
Описание и краткое содержание "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов" читать бесплатно онлайн.
Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.
Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.
Создание стилей CSS
Обычный формат определения стиля CSS иллюстрирует листинг 7.1.
Листинг 7.1
<селектор> {
<атрибут стиля 1>: <значение 1>;
<атрибут стиля 2>: <значение 2>;
.
<атрибут стиля n-1>: <значение n-1>;
<атрибут стиля n>: <значение n>
}
Вот основные правила создания стиля.
— Определение стиля включает селектор и список атрибутов стиля с их значениями.
— Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.
— За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенный в фигурные скобки.
— Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ: (двоеточие). В некоторых случаях значение атрибута стиля заключают в кавычки.
— Пары <атрибут стиля>:<значение> отделяют друг от друга символом; (точка с запятой).
— Между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.
— Определения различных стилей разделяют пробелами или переводами строк.
— Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web-обозреватель их игнорирует. Поэтому мы можем форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.
Но правила — правилами, а главное — практика. Давайте рассмотрим пример небольшого стиля:
P { color: #0000FF }
Разберем его по частям.
— P — это селектор. Он представляет собой имя тега <P>.
— color — это атрибут стиля. Он задает цвет текста.
- #0000FF — это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB. (Подробнее об RGB-коде и его задании мы поговорим в главе 8.)
Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам <P>). Это, кстати, типичный пример неявной привязки стиля.
Стиль, который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.
Рассмотрим еще пару таких стилей. Вот стиль переопределения тега <EM>: EM { color: #00FF00; font-weight: bold }
Любой текст, помещенный в тег <EM>, Web-обозреватель выведет зеленым полужирным шрифтом. Атрибут стиля font-weight задает степень "жирности" шрифта, а его значение bold — полужирный шрифт.
А это стиль переопределения тега <BODY>:
BODY { background-color: #000000; color: #FFFFFF }
Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.
А теперь рассмотрим совсем другой стиль:
redtext { color: #FF0000 }
Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега — HTML-тега <REDTEXT> не существует.
Это другая разновидность стиля CSS — стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
<P CLASS="redtext">Внимание!</P>
Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Внимание!". В результате этот абзац будет набран красным шрифтом.
Листинг 7.2
attention { color: #FF0000;
font-style: italic }
.
<P><STRONG CLASS="attention">Стилевой класс требует явной привязки атрибутом тега CLASS!</STRONG></P>
В листинге 7.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу <STRONG>. В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним "полужирность" текста задает тег <STRONG>, а курсивное начертание и красный цвет — стилевой класс attention.
В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)
Листинг 7.3
attention { color: #FF0000; font-style: italic }
bigtext { font-size: large }
.
<P><STRONG CLASS="attention bigtext">Стилевой класс требует явной привязки атрибутом тега CLASS!</STRONG></P>
В примере из листинга 7.3 мы привязали к тегу <STRONG> сразу два стилевых класса:
attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large — большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)
Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.
— В определении именованного стиля перед его именем ставят символ # ("решетка"). Он сообщает Web-обозревателю, что перед ним именованный стиль.
— Привязку именованного стиля к тегу реализуют через атрибут ID, также поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.
— Значение атрибута тега ID должно быть уникальным в пределах Web-страницы.
Говоря другими словами, в HTML-коде Web-страницы может присутствовать только один тег с заданным значением атрибута ID. Поэтому именованные стили используют, если какой-либо стиль следует привязать к одному-единственному элементу Web-страницы.
В примере:
#bigtext { font-size: large }
.
<P ID="bigtext">Это большой текст.</P>
абзац "Это большой текст" будет набран крупным шрифтом.
Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако CSS позволяет создавать стили с несколькими селекторами — так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.
Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.
— Селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.
— Селекторы перечисляют слева направо и обозначают уровень вложенности соответствующих тегов, который увеличивается при движении слева направо: теги, указанные правее, должны быть вложены в теги, что стоят левее.
— Если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.
— Селекторы разделяют пробелами.
— Стиль привязывают к тегу, обозначенному самым правым селектором. Мудреные правила, не так ли?.. Чтобы их понять, рассмотрим несколько примеров. Начнем с самого простого комбинированного стиля:
P EM { color: #0000FF }
— В качестве селекторов использованы имена тегов <P> и <EM>.
— Сначала идет тег <P>, за ним — тег <EM>. Значит, тег <EM> должен быть вложен в тег <P>.
— Стиль будет привязан к тегу <EM>.
<P><EM>Этот текст</EM> станет синим.</P>
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов"
Книги похожие на "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов"
Отзывы читателей о книге "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов", комментарии и мнения людей о произведении.