Книги по CSS
Это популярное и доступное пособие поможет вам уверенно освоить динамическое веб-программирование с применением самых современных языков и технологий: PHP, MySQL, Javascript, CSS и HTML5. С каждой из упомянутых технологий вы познакомитесь отдельно, научитесь применять их в комбинации друг с другом, а по ходу изложения освоите ценные практические приемы веб-программирования. • Изучите важнейшие аспекты языка PHP
Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков. Полностью переработанное четвертое издание этой книги поможет вам поднять навыки работы с HTML и CSS на новый уровень; оно содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства. Веб-дизайнеры, как начинающие,
Книги по CSS, Книги по HTML
Устали от чтения книг по HTML, которые понятны только специалистам в этой области? Тогда самое время взять в руки новое издание «Изучаем HTML, XHTML и CSS. 2-е изд.». Хотите изучить HTML, чтобы уметь создавать веб-страницы, о которых вы всегда мечтали? Так, чтобы более эффективно общаться с друзьями, семьей и привередливыми клиентами? Тогда эта книга для
Научитесь создавать современные динамические веб-сайты, даже если у вас нет опыта в программировании. Если вы умеете писать статические сайты на HTML, то с помощью этого руководства вы освоите динамическое веб-программирование и изучите современные технологии с открытым кодом: PHP, MySQL, Javascript и CSS. В данном руководстве каждая технология рассматривается отдельно и показывается, как их объединить в
Книжная полка на HTML Academy
Для того чтобы научиться делать хорошие сайты, необходимо не только много практиковаться, но и читать хорошие книги по веб-разработке.
В этом разделе будут собраны лучшие, на наш взгляд, книги, которые должен прочитать каждый профессионал.
Издательство «A Book Apart» выпускает отличную серию книг, которую они называют «короткие книги для тех, кто создаёт веб-сайты». Книга для веб-разработчика, по мнению издательства, должна быть небольшой, сфокусированной на одной теме. Раскрывать эту тему она должна наилучшим образом: кратко, ёмко и по делу. У них действительно получаются маленькие шедевры. Сейчас в серии уже больше 12 книг, лучшие из которых представлены здесь.
«HTML5 для веб-дизайнеров»
Кит Джереми
Даже когда HTML5 ещё был далёк от статуса стандарта, многие разработчики его использовали. Сейчас полный переход на HTML5 уже очень близко. Эта книга — отличное руководство для тех, кто хочет начать работать с HTML5.
ЭлектроннаяБумажная
«CSS3 для веб-дизайнеров»
Дэн Сидерхолм
В этой книге рассказывается, как можно использовать новые возможности CSS3 в реальных проектах. Действительно хорошие примеры, построенные с использованием прогрессивного улучшения, подробное и понятное объяснение, красивый код.
ЭлектроннаяБумажная
«Отзывчивый веб-дизайн»
Итан Маркотт
Адаптивный веб-дизайн врывается в нашу нелёгкую разработческую жизнь. Встречать его надо во всеоружии. Лучшая книга для знакомства с этим подходом, рискующая стать легендарной. Код, примеры, разъяснение технических тонкостей — всё на высоте.
ЭлектроннаяБумажная
«Сначала мобильные!»
Люк Вроблевски
Если вы серьёзно задумались о разработке веб-сайтов под мобильные, то с этой книгой познакомиться надо обязательно. Она не такая техническая, как три предыдущих. Скорее, это сборник типовых проблем мобильной разработки и вариантов их решения.
ЭлектроннаяБумажная
Html/css | Библиотека программиста — книги по программированию
Опубликовал(а): programmer в: 06.04.2016Название: HTML5 для веб-дизайнеров
Автор: Кит Джереми
Год: 2013
Издательство: Питер
ISBN 978-5-91657-596-5
Страниц: 80
Язык: Русский
Формат: PDF
Размер: 2 Mb
Описание книги: В HTML5 появилось много интересных тэгов, в том числе поддержка аудио– и видеофайлов. Теперь вам не надо тратить время на установку плагинов для проигрывания музыки или видео – просто воспользуйтесь одним из новых тегов.
Читать далее
Опубликовал(а): programmer в: 06.03.2016 Название: HTML5. Недостающее руководствоАвтор: Мэтью Мак-Дональд
Год: 2012
Издательство: БХВ-Петербург
ISBN 978-5-9775-0805-6
Страниц: 480
Язык: Русский
Формат: PDF
Размер: 14 Mb
Описание книги: Доступно и в занимательной форме рассказано, как HTML превратился в HTML5. Рассмотрены семантические элементы и новые стандарты языка. Описано, как создавать современные веб-страницы, в том числе улучшенные веб-формы, поддерживать аудио и видео, рисовать на холсте, совершенствовать оформление веб-страниц с помощью CSS3.
Читать далее
Опубликовал(а): programmer в: 06.03.2016Название: HTML и XHTML. Подробное руководство, 6-е издание
Автор: Чак Муссиано, Билл Кеннеди
Год: 2008
Издательство: Символ-Плюс
ISBN-10: 5-93286-104-5
Страниц: 752
Язык: Русский
Формат: PDF
Описание: Данная книга это самая полная и современная книга оп HTML и XHTML в которой разъясняется работа и взаимодействия каждого их элемента. Книга адресована как начинающим так и для опытных веб-разработчиков.
Читать далее
Опубликовал(а): programmer в: 05.03.2016Название: HTML5. Разработка приложений для мобильных устройств
Автор: Эстель Вейл
Год: 2015
Издательство: Питер
ISBN 978-5-496-01125-9
Страниц: 480
Язык: Русский
Формат: PDF
Размер: 7 Mb
Описание книги: Книга содержит множество примеров кода и разметки. Она поможет вам освоить работу с разнообразными инструментами HTML5 — в частности, с новыми веб-формами, масштабируемой векторной графикой (SVG), холстом (Canvas), localStorage и другими родственными API. Кроме того, в этом издании подробно рассмотрены таблицы стилей CSS3.
Читать далее
Опубликовал(а): programmer в: 05.03.2016 Название: Большая книга CSS3. 3-е изд.Автор: Дэвид Макфарланд
Год: 2014
Издательство: Питер
ISBN 978-5-496-00428-2
Страниц: 608
Язык: Русский
Формат: PDF
Размер: 19 Mb
Описание книги: В книге рассмотрены следующие темы: написание HTML5-, CSS3-тегов, которые распознаются во всех браузерах; форматирование текста, добавление на страницы навигации; создание таблиц и форм; приемы веб-дизайна для создания уникального оформления сайтов; создание сайтов для любых устройств с помощью адаптивного дизайна.
Читать далее
Опубликовал(а): programmer в: 05.03.2016Название: HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств
Автор: Бен Фрейн
Год: 2014
Издательство: Питер
ISBN 978-5-496-00185-4
Страниц: 304
Язык: Русский
Формат: PDF
Описание книги: Сейчас все больше планшетных компьютеров, смартфонов и даже телевизоров используется для выхода в Интернет. Разработчикам веб-страниц требуется принимать во внимание огромное разнообразие размеров экранов, а также учитывать особенности соответствующего пользовательского взаимодействия. Адаптивный веб-дизайн позволяет наилучшим образом отобразить содержимое сайтов на экранах устройств, используемых для просмотра.
Читать далее
Опубликовал(а): programmer в: 05.03.2016Название: Изучаем программирование на HTML5
Автор: Эрик Фримен, Элизабет Робсон
Год: 2013
Издательство: Питер
ISBN 978-5-459-00952-1
Страниц: 640
Язык: Русский
Формат: PDF
Размер: 16 Mb
Описание книги: С помощью данной книги вы научитесь создавать веб-приложения с использованием современных стандартов и нередовых методик завтрашнего дня. Вы изучите основы новых API-интерфейсов HTML5 и узнаете, как они взаимодействуют со страницами и приводятся в движение JavaScript-кодом, а также как использовать их для создания веб-приложений, которые впечатлят ваше начальство и изумят друзей.
Читать далее
Книга «CSS для профи» / Издательский дом «Питер» corporate blog / Habr
Мир каскадных таблиц стилей непрерывно совершенствуется. Все больше и больше веб-разработчиков осознают, что, хотя они, как им кажется, знают CSS, до полного понимания им далеко. В последние годы язык сильно развился, поэтому даже те разработчики, которые когда-то были искусны в CSS, сегодня могут получить абсолютно новые навыки, чтобы наверстать упущенное. Данная книга призвана удовлетворить эти потребности: обеспечить глубокое владение языком и привести к успеху в новых разработках и применении новейших возможностей CSS.Эта книга называется «CSS для профи», но это также всеобъемлющая книга. В тех случаях, когда какие-то понятия или принципы трудны либо, как правило, трактуются неправильно, автор подробно объясняет, что они обозначают или как работают и почему именно так. Другие главы, возможно, не настолько исчерпывающи, но Кит Грант дает достаточно сведений, чтобы вы могли эффективно работать и двигаться в правильном направлении, если захотите расширить свои знания. В целом эта книга заполнит пробелы в ваших теоретических познаниях.
Некоторые темы: анимация, типографика, гибкие контейнеры и даже CSS-стек — достойны отдельных книг. Цели автора — конкретизировать ваши знания, помочь ликвидировать пробелы в них и привить вам любовь к языку CSS.
Отрывок. 4.1. Предназначение плавающих элементов
Несмотря на то что плавающие элементы не были предназначены для конструирования макета страницы, они хорошо справлялись с этой работой. Однако, чтобы понять смысл плавающих элементов, мы должны разобраться в их изначальном предназначении.
Плавающий элемент — объект (зачастую изображение), выровненный по одной из сторон контейнера, что позволяет потоку документа обтекать его (рис. 4.1). Такая компоновка часто встречается в газетах и журналах, поэтому для достижения описанного эффекта плавающие элементы были добавлены и в CSS.
На этой иллюстрации элемент выровнен по левому краю, но вы могли бы разместить его и у правого края. Плавающий элемент извлекается из нормального потока документа и выравнивается по одной из сторон контейнера, после чего поток документа станет обтекать участок, где теперь располагается этот элемент. Если вы выравниваете два плавающих элемента по одной стороне, то они выстраиваются один за другим (рис. 4.2).
Если вы уже какое-то время пишете CSS-код, то такое поведение для вас не новость, однако нужно заметить: не всегда плавающие элементы применяются таким образом, несмотря на то что в этом и есть их первоначальное предназначение.
Уже в первые дни существования CSS разработчики поняли, что могут использовать этот простой инструмент для перемещения разделов страницы при верстке всех видов макетов. Плавающие элементы не были инструментом компоновки страниц, но почти два десятилетия мы задействовали их именно для этих целей.
Мы делали это, потому что это был единственный вариант. В конце концов появилась возможность задействовать свойства display: inline-block или display: table — альтернативные, хотя и весьма ограниченные. До последнего времени, пока не были добавлены flex-контейнеры и CSS-сетки, плавающие элементы оставались козырем при верстке макетов страниц. Посмотрим, как они работают. Для примера создайте страницу, показанную на рис. 4.3.
В примерах из этой главы вы станете использовать плавающие элементы для позиционирования каждого из четырех серых полей. А внутри полей расположите плавающие изображения рядом с текстом. Создайте пустую страницу и подключите ее к созданной ранее таблице стилей, затем добавьте на страницу код, приведенный в листинге 4.1.
Этот листинг дает структуру страницы: шапку и основной элемент, содержащий весь материал страницы. Внутри основного элемента находятся название страницы, а также анонимный контейнер div, то есть элемент div, не имеющий класса или идентификатора. Это позволяет сгруппировать четыре серых медиаобъекта, в элементе тела каждого из которых есть изображение.
Прежде чем начать работать с плавающими элементами, нужно выстроить внешнюю структуру страницы. Добавьте листинг 4.2 в файл таблицы стилей.
Этот код позволяет установить некоторые базовые стили для страницы, в том числе исправление свойства box-sizing и селектор лоботомированной совы (см. главу 3). Далее необходимо ограничить ширину контента страницы (рис. 4.4). Обратите внимание на светло-серые поля по обеим сторонам, а также на то, что шапка и основной контейнер одинаковой ширины.
Такая разметка часто используется для центрирования контента страницы. Вы можете добиться этого, расположив контент внутри двух вложенных контейнеров и настроив поля внутреннего контейнера так, чтобы он не выходил за пределы внешнего (рис. 4.5). Веб-разработчик Брэд Вестфол (Brad Westfall) называет такой подход шаблоном двойного контейнера.
В нашем примере элемент body играет роль внешнего контейнера. По умолчанию данный элемент занимает 100 % ширины страницы, так что вам не придется применять к нему новые стили. Мы упаковали весь контент страницы внутрь этого элемента, в элемент , играющий роль внутреннего контейнера. Добавьте код из листинга 4.3 в свою таблицу стилей.
Благодаря использованию свойства max-width вместо свойства width элемент сжимается до значений менее 1080 пикселов, если разрешение области просмотра ниже этого значения. Иными словами, контейнер заполнит меньшие области просмотра, но в больших областях просмотра он расширится до 1080 пикселов. Это важно для того, чтобы избежать горизонтального прокручивания на устройствах с небольшой областью просмотра.
4.2. Схлопывание контейнера и clearfix
В прошлом ошибки браузеров искажали поведение плавающих элементов, впрочем, это было характерно в основном для Internet Explorer 6 и 7. Я почти убежден, что вам больше не нужно поддерживать эти браузеры, поэтому не следует и переживать по поводу этих ошибок. Теперь вы можете быть уверены в том, что браузеры будут правильно обрабатывать плавающие элементы.
Однако некоторые особенности поведения плавающих элементов могут застать вас врасплох и сегодня. Это не ошибки, плавающие элементы ведут себя именно так, как должны. Рассмотрим, как они работают и как можно настроить их поведение для создания нужной разметки.
4.2.1. Что такое схлопывание контейнера
Выровняем четыре плавающих медиаобъекта на странице по левому краю — и проблемы не заставят себя долго ждать (рис. 4.6).
Что случилось с белым фоном? Мы видим его позади названия страницы («Полезные советы»), однако этим он и ограничивается, вместо того чтобы расширяться вниз и включать все медиаобъекты. Чтобы увидеть это на своей странице, добавьте код из листинга 4.4 в таблицу стилей. Затем рассмотрим, почему так происходит и как это исправить.
Мы установили светло-серый фон для каждого медиаобъекта, ожидая, что белый фон контейнера окажется позади (или, точнее, вокруг) них. Однако вместо этого белый фон исчезает у верхнего края медиаобъектов. Почему так?
Проблема в том, что, в отличие от элементов нормального потока документа, плавающие элементы не добавляют высоту родительским элементам. Это может показаться странным, но данное свойство восходит к изначальному предназначению плавающих элементов.
Как вы узнали в начале этой главы, плавающие элементы предназначены для того, чтобы текст мог обтекать их. Когда вы помещаете плавающее изображение в абзац текста, этот абзац не увеличивается, чтобы уместить изображение. А значит, если высота изображения больше высоты абзаца, то текст следующего абзаца начнется сразу же под текстом первого абзаца, следовательно, текст обоих абзацев будет обтекать данное плавающее изображение. Описанное проиллюстрировано на рис. 4.7.
На вашей странице все расположенное внутри основного элемента, за исключением названия страницы, представляет собой плавающие элементы. Таким образом, только название вносит вклад в высоту контейнера, оставляя все плавающие медиаобъекты расширяться вниз с выходом за границы белого фона основного контейнера. Для нас такое поведение нежелательно, поэтому исправим его. Основной элемент должен расширяться вниз и содержать серые блоки (рис. 4.8).
Один из способов корректировки — использование clear — смежного свойства
плавающего элемента. Если вы поместите элемент в конец основного контейнера
и воспользуетесь свойством clear, это приведет к тому, что контейнер расширится до
нижнего края плавающих элементов. Код в листинге 4.5, в принципе, иллюстрирует
то, что нужно сделать. Вы можете на время добавить его на свою страницу, чтобы
посмотреть, как это работает.
Объявление clear:both приводит к тому, что этот элемент смещается ниже плавающих элементов, вместо того чтобы расположиться рядом с ними. Вы можете присвоить данному свойству одно из значений, left или right, для сброса обтекания только тех плавающих элементов, которые выровнены по левому или правому краю соответственно.
Это позволяет установить нужный размер, однако такой подход немного похож на хакерство, так как добавляет нежелательную разметку в HTML-код, из-за чего тот берет на себя функции CSS. Поэтому следует удалить пустой контейнер div. Рассмотрим способ выполнить это же задание с помощью только CSS-кода.
4.2.2. Что такое clearfix
Вместо добавления еще одного контейнера div в разметку воспользуемся псевдоэлементом. С помощью селектора псевдоэлемента ::after можно эффективно вставить элемент в DOM в конце контейнера без добавления его в разметку.
В листинге 4.6 показан общий подход к решению проблемы умещения плавающих элементов, называемый clearfix. (Некоторые разработчики предпочитают сокращать имя класса до cf, что удобно, так как одновременно это сокращение фразы containing floats — умещение плавающих элементов.) Добавьте следующий код в свою таблицу стилей.
Важно знать, что класс clearfix применяется к элементу, содержащему плавающие элементы. Распространенная ошибка — применение данного класса к неподходящему элементу, например непосредственно к плавающему элементу или контейнеру, стоящему после контейнера с плавающими элементами.
Впрочем, у метода clearfix остается одна неувязка: поля вмещенных плавающих элементов не будут схлопываться вне контейнера с примененным clearfix, а поля неплавающих элементов схлопнутся, как обычно. Вы видите это на своей странице, где заголовок «Полезные советы» плотно прижат к верхнему краю белого элемента main (см. рис. 4.8): его поле схлопнулось вне контейнера.
Иногда разработчики предпочитают использовать модифицированную версию метода clearfix, которая будет вмещать все поля и окажется более предсказуемой. Добавление этой версии на вашу страницу предотвратит схлопывание верхнего поля названия страницы вне элемента main (рис. 4.9), что оставит нужное расстояние над заголовком.
Для использования модифицированной версии обновите код метода clearfix в своей таблице стилей, как показано в листинге 4.7.
В этой версии используется свойство display:table, а не display:block. Применив его к обоим псевдоэлементам, ::before и ::after, вы уместите любые поля дочерних элементов, располагающихся в верхней и нижней частях контейнера. Во врезке «Метод clearfix и свойство display: table» ниже более подробно объясняется, как это работает.
Вам решать, какую версию метода clearfix использовать в своих проектах. Некоторые разработчики приводят такой аргумент: схлопывание полей — это фундаментальная особенность CSS, поэтому они предпочитают не умещать поля в контейнер. Но поскольку ни одна версия не умещает поля плавающих элементов, другие разработчики предпочитают более отлаженное поведение модифицированной версии. У каждого аргумента есть свой резон.
Метод clearfix и свойство display: table
Применение свойства display: table в методе clearfix умещает поля благодаря некоторым особенностям CSS. Создание табличного элемента (или в данном случае псевдоэлемента) неявно создает строку таблицы внутри этого элемента, а также ячейку таблицы в строке. Так как поля не схлопываются через табличные элементы (как упоминалось в главе 3), поля не будут схлопываться и через табличный псевдоэлемент.Может показаться, что при использовании свойства display: table-cell вы получили бы тот же эффект. Однако свойство clear срабатывает только применительно к блочным элементам, коим ячейка таблицы не является. Таким образом, свойство clear нельзя применять со свойством display:table-cell. В общем, чтобы уместить поля, сбросить обтекание всех плавающих элементов и подразумеваемой ячейки, воспользуйтесь свойством display: table.
4.3. Неожиданный «захват» плавающего элемента
Теперь, когда белый контейнер содержит плавающие медиаобъекты, становится очевидной другая проблема: четыре медиаобъекта не образуют две одинаковые строки, как нам нужно. Вместо этого первые два блока («Физкультура» и «Темп») стоят в одной строке, как и ожидалось, но третий блок («Меняйтесь») расположен справа, под вторым блоком. При такой компоновке под первым блоком остается большой промежуток, это происходит из-за того, что браузер размещает плавающие элементы как можно выше.
На рис. 4.10 приведена упрощенная схема.
Так как блок 2 ниже блока 1, для блока 3 попросту нет места под блоком 1. Вместо обхода блока 1 блок 3 «захватывает» его. Иными словами, блок 3 не выравнивается по левому краю, а обтекает нижний угол блока 1.
Нюансы этого поведения зависят от высоты каждого плавающего блока. Даже разница в 1 пиксел может вызвать эту проблему. В то же время если блок 1 короче блока 2, то для блока 3 не будет края, за который он мог бы зацепиться, и вы не встретитесь с описанной проблемой до тех пор, пока не поменяется контент, что приведет к изменению высоты элементов.
Выравнивая несколько плавающих элементов по одному краю, вы можете получить любой из множества вариантов компоновки в зависимости от высоты каждого блока. Даже изменение ширины окна браузера способно все перестроить, поскольку повлияет на обтекание строк текста и, соответственно, изменит высоту элементов. Мы же на странице хотим увидеть по два плавающих блока на строку (рис. 4.11).
Исправить эту проблему просто: третьему плавающему элементу необходимо сбрасывать обтекание плавающих элементов, расположенных над ним. Или, иными словами, первый элемент в каждой строке должен сбрасывать обтекание плавающего элемента, расположенного над ним. Так как у вас по два блока в строке, то потребуется, чтобы каждый нечетный элемент сбрасывал обтекание вышестоящей строки. Вы можете адресно выбрать такие элементы с помощью селектора псевдокласса :nth-child(). Добавьте в таблицу стилей следующий набор правил (листинг 4.8).
Этот код будет работать, даже если позднее вы добавите на страницу новые элементы. Код применяется к первому, третьему, пятому элементам и т. д. Если бы требовалось разместить по три элемента в строке, то вы могли бы нацелить селектор на каждый третий элемент: .media:nth-child(3n+1) (см. приложение А для получения дополнительной информации об использовании селектора :nth-child).
Добавим поля для медиаобъектов, чтобы между ними образовался зазор. Селектор лоботомированной совы также задаст верхнее поле всем элементам, за исключением первого. Это вызовет сбой выравнивания элементов в первой строке, поэтому потребуется сбросить верхнее поле этих элементов. Обновите свою таблицу стилей, как показано в листинге 4.9.
» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок
Для Хаброжителей скидка 25% по купону — CSS
По факту оплаты бумажной версии книги на e-mail высылается электронная версия книги.
Новая большая книга CSS / Издательский дом «Питер» corporate blog / Habr
Привет, Хаброжители! У нас вышла новая обновленная книга Дэвида Макфарланда: Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков. Полностью переработанное четвертое издание этой книги поможет вам поднять навыки работы с HTML и CSS на новый уровень; она содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства. Веб-дизайнеры, как начинающие, так и опытные, при помощи этой книги быстро научатся создавать красивые веб-страницы, которые при этом молниеносно загружаются как на ПК, так и на мобильных устройствах.
Что необходимо знать
Эта книга предполагает, что вы уже знакомы с языком HTML. Подразумевается, что вы создали пару сайтов (или по крайней мере несколько веб-страниц) и знакомы с основными элементами, такими как html, p, h2, table, составляющими основу языка гипертекстовой разметки документов. CSS бесполезен без HTML, поэтому вы должны знать, как создать простейшую веб-страницу с использованием основных HTML-элементов.
Если вы раньше создавали веб-страницы на HTML, но чувствуете, что знания требуется освежить, вам поможет следующий раздел книги.
HTML: структура языка
В языке гипертекстовой разметки HTML используются простые команды, именуемые тегами, для определения различных частей — фрагментов. Ниже приведен HTML-код простой веб-страницы:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Это заголовок веб-страницы</title>
</head>
<body>
<p>А это абзац этой веб-страницы</p>
</body>
</html>
Конечно, пример очень простой, но демонстрирует все основные элементы, необходимые обычной веб-странице. В нем вы заметите то, что называется объявлением типа документа — doctype, за ним следует открывающий тег (со скобками), потом элемент head (голова, раздел заголовка), следом body (тело, раздел тела), а в нем непосредственно содержимое веб-страницы. Все это завершается закрывающим тегом . Открывающий и закрывающий теги образуют HTML-элемент.
Типы документов
Все веб-страницы начинаются с объявления типа документа — строки кода, определяющей разновидность HTML, которой вы пользовались при написании страницы. В течение многих лет использовались два типа документов — HTML 4.01 и XHTML 1.0, и каждый из них имеет два стиля: строгий и переходный. Например, объявление переходного типа документа HTML 4.01 имеет следующий вид (другие объявления типа документа для HTML 4.01 и XHTML 1.0 выглядят примерно так же):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
Если посмотреть на код примера HTML-страницы, показанный в этом разделе, то вы увидите, что в нем используется краткая форма объявления типа документа:
<!doctype html>
Объявление типа документа появилось в языке HTML5. По сравнению с предшественниками, в HTML5 заложена простота и рациональность использования. В этой книге применяется объявление типа документа из HTML5, поддерживаемое любым популярным браузером (даже старым Internet Explorer 6). Применять другие объявления, отличные от простого doctype из HTML5, не имеет смысла.
Независимо от предпочитаемого типа документа, объявляемого с помощью doctype, важно, чтобы использовалось объявление хотя бы одного из них. Без этого ваши страницы будут выглядеть по-разному в зависимости от браузера вашего посетителя, поскольку браузеры, не имеющие в качестве руководства объявления типа документа, по-разному отображают информацию, форматированную с помощью CSS.
Каждое объявление типа документа требует от вас написания HTML-кода определенным образом. Например, элемент для разбиения строк имеет в HTML 4.01 следующий вид:
<br>
Но в XHTML у этого элемента такой вид:
<br />
И здесь проявляется еще одно преимущество HTML5: он допускает применение любого из этих вариантов.
Как работают HTML-элементы
HTML-элементы состоят из тегов. В приведенном выше примере, как и в HTML-коде любой веб-страницы, большинство элементов используют пары тегов, начиная и завершая какой-то фрагмент — блок текста или другие команды. Будучи заключенными в скобки, эти теги представляют собой команды, которые говорят браузеру, каким образом отображать веб-страницу. Теги являются «разметочной» (markup) частью гипертекстового языка разметки — Hypertext Markup Language.
Открывающий тег каждого элемента показывает браузеру, где команда начинается, а заканчивающий — где заканчивается. Закрывающий тег всегда предваряется прямым слешем (/) после первого символа скобки (<).
На любой веб-странице обычно имеются как минимум следующие четыре HTML-элемента.
— Самая первая строка примера содержит объявление типа документа — элемент doctype, рассмотренный в предыдущем разделе.
— Тег требуется в начале веб-страницы и (с добавленным слешем) в конце: . Элемент html сообщает браузеру, что документ является программным кодом на языке HTML. Все содержимое страницы, включая остальные элементы, находится между открывающим и закрывающим тегами элемента html.
Если представить веб-страницу в виде дерева, то элемент html будет его стволом. Две основные части любой веб-страницы — раздел заголовка и тело — представляют собой ветви.
— Раздел заголовка веб-страницы (head) содержит ее название. Здесь также может содержаться другая информация, не отображаемая при просмотре веб-страницы, например описание страницы, которая предназначена для браузеров и поисковых машин. Раздел заголовка заключается в открывающий и закрывающий теги элемента head.
Кроме того, раздел заголовка может содержать информацию, используемую браузером для оформления HTML, имеющегося на странице, и для придания странице интерактивности. Вы увидите, что раздел заголовка может содержать код CSS (вроде того, который вы будете учиться создавать) или ссылку на другой файл, содержащий таблицу стилей.
— Тело веб-страницы, следующее непосредственно за разделом заголовка и заключенное в теги элемента body, содержит все, что должно появиться в окне браузера: заголовки, текст, изображения и т. д.
Внутри тела страницы, как правило, можно найти следующие элементы:
элемент p — открывающий тег
начинает абзац, а закрывающий
завершает;элемент strong — выделяет текст как важный; например, код
<strong>Внимание!</strong>
элемент a, или элемент привязки, — создает гиперссылку, при щелчке на которой можно переместиться в другую позицию веб-страницы или на другую страницу (нужно указать браузеру эту ссылку путем размещения ее внутри открывающего тега
<a>, например <a href="http://www.piter.com/">Щелкните здесь!</a>)
Браузер знает, что при щелчке кнопкой мыши на ссылке со словами Щелкните здесь! посетитель вашей страницы должен перейти на сайт с адресом www.piter.com. Часть тега a — слово href — называют атрибутом, а URL (унифицированный указатель ресурса, или URL-адрес) является его значением. В этом примере
http://www.piter.com — значение атрибута href.
HTML5: больше элементов
HTML5, актуальная версия языка HTML, существует уже несколько лет. Иногда вы будете слышать названия, не относящиеся к HTML-элементам, например локальные хранилища (способ хранения данных с сайта на компьютере посетителя), геолокация (способ определения координат компьютера посетителя) и рисование на веб-странице с помощью библиотеки WebGL. Строго говоря, эти технологии не являются частью HTML, но они относятся к новым возможностям браузера, появившимся вместе с HTML5.
В этой книге термин HTML5 всегда относится к типу документа HTML5, а также к новым элементам, являющимся частью нового стандарта HTML5. HTML5 не несет каких-либо кардинальных отличий от своих предшественников — его целью является забота о том, чтобы Всемирная паутина продолжала работать так же, как и прежде, поддерживая новые потребности дизайнеров. В версии HTML5 были добавлены новые элементы. Например, элемент header может включать в себя содержимое, которое обычно встречается в верхней части страницы, — логотип и общие для всего сайта навигационные ссылки. Новый элемент nav заключает в себе набор ссылок, использующихся для навигации по сайту, а элемент footer размещает в себе все, что обычно помещается в нижней части страницы, например юридическую информацию, контакты по электронной почте и т. д.
Кроме того, в HTML5 добавлены новые элементы, позволяющие внедрять на страницу видео- и аудиоконтент, и новые элементы формы, добавляющие такие сложные компоненты, как ползунковые регуляторы, всплывающие панели выбора даты, а также встроенную браузерную поддержку проверки допустимости данных, введенных в форму (которая гарантирует правильное заполнение ваших форм посетителями). На протяжении всей книги, особенно в следующей главе, вы будете встречать примеры использования языка HTML5.
Об этой книге
Эта книга написана так, чтобы помочь читателям любого уровня. Для извлечения максимальной пользы из материала вы обязательно должны учиться на приведенных примерах HTML и CSS. Если же вы никогда раньше не создавали веб-страницы, то обратитесь к практикуму в конце главы 2. Материал, содержащийся в этих главах, написан для тех, кто уже немного освоился в данной области и имеет средний уровень знаний. Если же вы плохо знаете принципы создания веб-страниц, то для лучшего понимания освещаемой темы должны ознакомиться с текстом врезок «В курс дела!». С другой стороны, если у вас имеется большой опыт создания веб-страниц, обратите внимание на врезки «Для опытных пользователей». Они содержат подсказки, приемы и методы для опытных программистов.
Основные разделы книги. Книга разделена на пять частей. Первые четыре части содержат по несколько глав, а последняя часть состоит из приложений.
Часть I. Основы CSS. Здесь описано создание каскадных таблиц стилей в целом и дан краткий обзор ключевых понятий, таких как наследование, селекторы и каскадность таблиц стилей. Попутно с изучением CSS вы получите основные навыки написания HTML-кода. Практикумы закрепят вводимые в главах основные понятия и позволят вам почувствовать эффективность использования CSS.
Часть II. Применение CSS. Перенесет вас в реальный мир веб-дизайна. Вы изучите наиболее важные свойства CSS и их использование для форматирования текста, попрактикуетесь в создании полезных инструментов навигации и сможете улучшить внешний вид своих экспериментальных веб-страниц, добавив графику. Вы также узнаете о том, как с помощью CSS создавать простую анимацию. Эта часть также содержит рекомендации о том, как создавать красивые таблицы и формы.
Часть III. Верстка страниц с помощью CSS. Поможет вам разобраться с самой запутанной, но очень полезной функцией CSS: с управлением размещением элементов на вашей странице. Вы познакомитесь со схемами дизайна (размещение контента в две и три колонки) и узнаете, как добавить боковые панели. Будет рассказано о двух основных методах позиционирования элементов на странице:
абсолютном и относительном. Вы также научитесь создавать сайты, адаптируемые для лучшего восприятия в браузерах настольных систем, планшетных компьютеров и мобильных устройств, и применять flexbox — новый мощный инструмент для создания макета веб-страниц.
Часть IV. Профессиональные приемы CSS-верстки. Содержит советы от профессионалов по улучшению ваших каскадных таблиц стилей, а также расскажет о Sass — мощном и эффективном способе верстки таблиц стилей.
Часть V. Приложения, включая два справочника. Справочник свойств CSS описывает каждое свойство в отдельности в простой и доступной форме, чтобы вы могли быстро узнать о полезных свойствах CSS, которые раньше вам могли не попадаться, или быстро освежить в памяти уже знакомые свойства. Во втором приложении приводится описание инструментов и средств для создания и применения каскадных таблиц стилей.
Об авторе
Дэвид Макфарланд (David McFarland) — веб-разработчик, преподаватель и автор. Создает сайты с 1995 года: именно тогда он разработал свой первый проект — онлайн-журнал для специалистов в области коммуникаций.
Дэвид преподавал веб-дизайн в Высшей школе журналистики в Беркли, Центре электронного искусства (Electronic Art) и Государственном университете Портленда. В настоящий момент он главный преподаватель на сайте онлайн-образования Treehouse.
О творческой команде
Нэн Барбер (Nan Barber) — редактор серии книг Missing Manuals («Исчерпывающее руководство»). Живет в Массачусетсе вместе со своим мужем. Ее электронный адрес: [email protected].
Мелани Ярброух (Melanie Yarbrough) — литературный редактор и композитор. Проживает и трудится в Кембридже, штат Массачусетс. Увлекается выпечкой и любит совершать прогулки на велосипеде вокруг города. Ее электронный адрес: [email protected].
Молли Ивс Бровер (Molly Ives Brower) — внештатный редактор и корректор. Любит Интернет с тех пор, как в 1990 году получила адрес BITNET. В наше время ее можно найти на сайте mjibrower.com или в социальной сети Twitter, где она известна под ником @vintagereader. Ее электронный адрес: [email protected].
Рон Штраус (Ron Strauss) — составитель алфавитного указателя. Специализируется на составлении указателей для различных книг, посвященных информационным технологиям. Рон также талантливый скрипач. Он живет в Северной Калифорнии со своей женой и по совместительству коллегой Энни и карликовым пинчером Кенгой. Адрес электронной почты: [email protected].
Рич Костер (Rich Koster) — бета-ридер. Купил свой первый компьютер Mac (17-дюймовый MacBook Pro) в 2009 году и больше никогда не переходил на сторону пользователей Windows. В третьем издании книги «iPhone. Исчерпывающее руководство» Рич выступил техническим редактором. Он женат, воспитывает детей и в свободное время поддерживает собственноручно созданный сайт Disney Echo.
Более подробно с книгой можно ознакомиться на сайте издательства
Оглавление
Отрывок
Для Хаброжителей скидка 25% по купону — CSS