Издательский дом «Питер». Css книга html


Учебник HTML и CSS для новичков

Для того, чтобы сделать сайт, нужно знать много разных веб языков.

Языки HTML и CSS предназначены для верстки сайтов (верстка - это размещение элементов сайта по нужным местам). Язык PHP нужен для программирования сайта (с его помощью можно, к примеру, сделать регистрацию пользователей). Язык JavaScript нужен для того, чтобы 'оживить' сайт: к примеру, сделать меняющиеся картинки (слайдер).

Язык HTML

Язык HTML - это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.

Если сравнивать страницу сайта и обычную бумажную книгу, то на сайте, как и в книге, есть абзацы и заголовки. В книге есть название всей книги (по сути самый главный заголовок), есть названия глав, параграфов в этих главах и так далее.

Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью HTML тегов.

Что такое HTML теги?

HTML теги - это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.

Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >, вот так: <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов: <h2>, <p>, <b>.

Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.

К примеру, <p> - так я открыл тег p, а так - </p> - я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.

Бывают теги, которые не нужно закрывать, например, <br> или <img>.

Атрибуты

В тегах также могут размещаться атрибуты - специальные команды, которые расширяют действие тега.

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1="значение" атрибут2="значение">.

Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще их не ставить, если значение атрибута состоит из одного слова (но это не желательно).

Язык CSS

Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

Итак, вооружившись некоторыми предварительными теоретическими знаниями, приступим к подробному изучению языка HTML на практике.

code.mu

Современный учебник CSS: ваш онлайн-самоучитель

Учимся создавать веб-страницы, отвечающие современным требованиям.

 Современный учебник CSS — это онлайн-книга, призванная ознакомить веб-разработчиков с современными способами создания сайтов, в том числе и адаптивных. В ней рассматриваются новейшие методы применения CSS и HTML. Материал рассчитан на тех, кто уже знаком с HTML хотя бы на начальном уровне.

Немного о таблицах стилей

Веб-страница создается и структурируется с помощью стандартного языка разметки — HTML. Раньше, в середине 90-х годов, этот язык использовался и для стилевого оформления документа, но сейчас всё, что касается дизайна страниц, решается с помощью каскадных таблиц стилей (Cascading Style Sheets — англ.). У CSS есть множество достоинств и возможностей, о которых вы узнаете по ходу чтения книги.

Главными плюсами CSS являются компактность и удобство. Во-первых, отказываясь от создания дизайна прямо в HTML-документе, вы делаете веб-страницу более аккуратной и чистой — нет длинного кода и неразберихи, страница грузится быстрее, а поисковому роботу становится легче сканировать содержимое. Все стили загружаются из внешнего файла, где хранятся исключительно правила CSS для оформления страницы. Во-вторых, появляется отличная возможность мгновенно править что-либо в оформлении всего сайта. Достаточно подкорректировать файл CSS и изменения станут видны на всех страницах, к которым подключен этот файл.

Сегодня благодаря широким возможностям CSS вы можете научиться разрабатывать сайты, которые будут корректно отображаться на любых устройствах, и таким образом выйти на новый, современный уровень.

Для кого эта книга

Если вы желаете научиться не просто создавать веб-страницы, а создавать их правильно и красиво, этот учебник по CSS для вас. Мы стараемся преподносить информацию доходчиво, простым языком, поэтому материал будет понятен новичкам, для которых в каждой главе самоучителя найдутся ценные рекомендации и примеры.

Желаем вам успехов в обучении!

 

СОДЕРЖАНИЕ

Часть I. Азы CSS

  1. Подготовка почвы: поговорим об HTML
  2. Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль
  3. Изучение селекторов:
    1. Селекторы CSS. Теги, классы, ID, группы
    2. Селекторы потомков. Псевдоклассы и псевдоэлементы CSS
    3. Дочерние селекторы CSS. Дополнительные псевдоклассы
    4. Соседние и родственные селекторы
    5. Селекторы атрибутов
    6. Урок: тренируемся применять селекторы
  4. Наследование в CSS: что это и как работает
  5. Каскадность CSS. Приоритеты стилей

Часть II. Использование CSS

  1. Работа с текстом:
    1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
    2. Установка цвета для текста в CSS. Способы представления цветов
    3. Размер шрифта в CSS. Единицы измерения px, %, em
    4. Жирный шрифт и курсив CSS
    5. Прописные и строчные буквы в CSS: свойство text-transform
    6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
    7. Тень для текста: свойство CSS text-shadow
    8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
    9. Выравнивание текста в CSS: свойство text-align
    10. CSS для списков: свойство list-style и его производные
  2. Работа с блоками:
    1. Вступление. Блоки
    2. Поля и отступы CSS: отличия свойств margin и padding
    3. Блочные и строчные элементы
    4. Свойство border: границы для блоков
    5. Border-radius: закругленные углы в CSS
    6. Box-shadow: тень для элемента
    7. Width и height: определяем размеры элемента
    8. Box-sizing: управляем вычислением ширины и высоты
    9. Overflow: управление переполненными элементами
    10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
    11. Поток документа. Свойства float и clear
    12. Практика: делаем адаптивную посадочную страницу
  3. Работа с графикой:
    1. CSS для тега img
    2. Background-image: установка фонового изображения
    3. Относительный и абсолютный путь к файлу
    4. Background-repeat: повторение фоновой картинки
    5. Background-position: позиционирование фона
    6. Background-attachment: фиксация фона
    7. Свойства CSS3 background-origin и background-clip
    8. Background-size: масштабирование фонового рисунка
    9. Свойство background: все настройки фона в одном месте
    10. Несколько фоновых рисунков для одного элемента
    11. Linear-gradient(): линейный градиент в фоне
    12. Repeating-linear-gradient(): градиент с повторением
    13. Radial-gradient(): радиальный градиент
    14. Repeating-radial-gradient(): повторяющийся радиальный градиент
    15. Практика: создаем фотогалерею на CSS
    16. Практика: работаем с фоновыми рисунками
  4. Ссылки и навигация:
    1. Состояния ссылок в CSS. Псевдоклассы
    2. Варианты стилизации ссылок в CSS
    3. Навигационные панели с помощью CSS
    4. Стили для особых ссылок
    5. CSS-спрайты
  5. Трансформирование и анимация:
    1. Свойство transform: трансформация элементов
      1. Функция rotate()
      2. Функция scale()
      3. Функция skew()
      4. Функция translate()
      5. Несколько значений свойства transform
      6. 3D-трансформации в CSS
    2. CSS3 transition: плавные переходы
      1. Свойство transition-property
      2. Свойство transition-duration
      3. Свойство transition-timing-function
      4. Свойство transition-delay
      5. Сокращенная запись transition
    3. CSS3-анимация
      1. Правило @keyframes
      2. Запуск анимации: аnimation-name и animation-duration
      3. Свойства animation-timing-function и animation-delay
      4. Свойство animation-iteration-count
      5. Свойство animation-direction
      6. Свойство animation-fill-mode
      7. Свойство animation-play-state
      8. Сокращенная запись animation
    4. Практика: создание CSS-анимации
  6. Таблицы и формы:
    1. Стилизация таблиц с помощью CSS
    2. CSS-стили для форм

Часть III. Разметка CSS

  1. Ширина веб-страницы
  2. Блочная верстка
  3. Создание разметки: основные правила
  4. Разметка с помощью float
    1. Проблемы float и их решения
  5. Верстка адаптивных веб-страниц
    1. Медиа-запросы CSS
    2. Гибкие сетки в CSS
    3. Адаптивные изображения и видео
  6. Знакомство с Flexbox
    1. CSS-свойства для flex-контейнера
    2. CSS-свойства для flex-элементов
  7. Позиционирование CSS. Свойство position
    1. Свойства top, left, bottom, right
    2. Z-index: наслаивание элементов
    3. Скрытие элементов средствами CSS
  8. Кратко о CSS Grid Layout
    1. CSS-свойства для grid-контейнера
    2. CSS-свойства для grid-элементов

Заключение. Рекомендации по CSS

idg.net.ua

web master | Учебники по CSS

Главная » Учебники по CSS

Эти учебники для начинающих, основная задача которого — объяснить новичку язык программирования С++ — классы, их основные концепции, такие как полиморфизм, инкапсуляция, наследование.  Особенностей ANSI-C++, в том числе такие понятия, как: массивы, структуры, списки, файлы, строки, функции, шаблоны. 

Р.Эндрю |CSS. 100 и 1 совет [2010]
  

Эта книга предназначена для тех веб-дизайнеров и разработчиков, не имеющих много времени на изучение большого количества теории при создании собственных сайтов. Здесь собраны готовые решения самых распространенных проблем, и эти решения уже можно применять на практике. Вы найдете ответы на самые сложные вопросы и практические способы использования CSS. Вы научитесь создавать сложные макеты страниц, элементы навигации и форм, будете легко решать проблемы, связанные со всеми особенностями современных браузеров.

Чтобы изучать книгу, не нужно иметь специальную подготовку: в первой главе идет речь об основных особенностях CSS, но по ходу изучения сложность приводимых способов постепенно растет, поэтому читатель с базовыми знаниями CSS намного быстрее будет воспринимать материал.

Страниц: 333

Формат: PDF

                                                                                
Седерхольм Д.|CSS ручной работы, pdf, [2011]
  

Книга посвящена современным технологиям веб-дизайна на основе CSS - каскадных таблиц стилей, использующихся при создании большинства современных интернет-сайтов. Издание затрагивает такие вопросы как использование в веб-дизайне новых свойств CSS3, гибкая работа с цветом при помощи RGBA, работа с "плавающими" элементами, использование "резиновой" верстки и гибких элементов дизайна, искусство работы с типографикой, jQuery, фоновыми элементами, а также массу других аспектов по совершенствованию веб-дизайна с помощью технологий CSS. В дизайне нет мелочей; есть детали, которые оказываются наиболее важными. "CSS ручной работы" - это книга о таких деталях, которые отличают хороший веб-дизайн от первоклассного.

Формат: PDF

                                                                                

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!

profwebsit.ru

Книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.» / Блог компании Издательский дом «Питер» / Хабр

Привет, Хаброжители! У нас вышло второе издание книги Бена Фрэйна:

Книга охватывает все важные особенности адаптивного веб-дизайна. Методология адаптивного веб-дизайна расширяется в ней за счет применения новейших, наиболее полезных технологий, предоставляемых HTML5 и CSS3, как никогда ранее повышающих компактность и облегчающих сопровождение создаваемых конструкций. В книге также даются объяснения самым востребованным и передовым методам написания и предоставления кода, изображений и файлов.

Если вы в состоянии разобраться в коде HTML и CSS, значит, вам также под силу освоить создание конструкций на основе адаптивного веб-дизайна.

О чем эта книга

Глава 1 «Основы адаптивного веб-дизайна» представляет собой краткий обзор ключевых составляющих в создании программных продуктов, отвечающих требованиям адаптивного веб-дизайна. Глава 2 «Медиазапросы — поддержка различных окон просмотра» охватывает все, что нужно знать о медиазапросах CSS: их возможности, варианты синтаксиса и различные способы применения.

Глава 3 «Динамически изменяемые разметки и адаптивные изображения» показывает, как создавать код пропорциональных разметок и адаптивных изображений, и содержит детальное исследование разметок, создаваемых с помощью Flexbox.

Глава 4 «Использование HTML5 в целях разработки адаптивного веб-дизайна» охватывает все семантические элементы HTML5, семантику текстового уровня и вопросы обеспечения доступности веб-продуктов. В ней также рассматриваются методы вставки видео и аудио в ваши страницы с использованием средств HTML5.

Глава 5 «CSS3. Селекторы, разметка, цветовые режимы и новые возможности» позволяет разобраться с безграничными возможностями CSS: селекторами, установками цветовых решений в форматах HSLA и RGBA, веб-оформлением, относительными единицами измерений окон просмотра и многим другим.

Глава 6 «Создание эстетически привлекательных эффектов средствами CSS3» охватывает CSS-фильтры, блоковые тени, линейные и радиальные градиенты, множественные фоновые изображения и способы нацеливания фоновых изображений на устройства с высоким разрешением экрана.

Глава 7 «Использование SVG для достижения независимости от разрешения» содержит все необходимые объяснения по использованию SVG-графики внутри документов и в качестве фоновых изображений, а также дает описания способов взаимодействия с ними с помощью JavaScript.

Глава 8 «Переходы, преобразования и анимация» дает информацию, как привести все в движение с помощью CSS, и содержит исследование способов организации взаимодействия и анимации элементов с использованием CSS.

Глава 9 «Обуздание форм с помощью HTML5 и CSS3» показывает, что такой нелегкий во все времена вопрос, как работа с формами, существенно упростился с появлением самых последних свойств HTML5 и CSS3.

Глава 10 «Подходы к адаптивному веб-дизайну» содержит исследование основных вопросов, требующих разрешения, прежде чем можно будет приступать к непосредственной разработке адаптивного веб-дизайна, а также целую подборку самых актуальных мудрых мыслей, призванных вдохновить вас на увлекательнейшее занятие — создание адаптивных веб-конструкций.

Для кого написана эта книга

Приходилось ли вам создавать два сайта: один для мобильных, а другой — для более крупных устройств? Или, может быть, у вас уже есть первый продукт в стиле адаптивного веб-дизайна, но вы пока не можете собрать в нем все в единое целое? Если так, то второе издание этой книги даст вам все, что нужно для перевода ваших сайтов на следующий, более высокий уровень.

Чтобы следовать за авторской мыслью, нужны лишь некоторые познания в HTML и CSS, а все, что требуется знать об адаптивном веб-дизайне и создании качественных сайтов, включено в эту книгу!

Об авторе

Бен Фрэйн (Ben Frain) занимается веб-дизайном и разработкой веб-приложений с 1996 года. В настоящее время он работает ведущим разработчиком пользовательского интерфейса в компании Bet365.

До того как заняться веб-технологиями, работал скромным, не получившим должного признания актером на телевидении и техническим писателем. Окончил Салфордский университет, получив высшее образование в области театрального искусства. Написал четыре так и не оцененных по достоинству (по его мнению) киносценария и до сих пор вынашивает, правда уже с угасающим энтузиазмом, планы продать хотя бы один из них. Вне работы предается весьма простым увлечениям. Играет в мини-футбол, пока его физическое состояние и жена не препятствуют этому занятию, и занимается воспитанием двух сыновей.

О рецензентах

Эстебан С. Эбэйт (Esteban S. Abait) — разработчик архитектуры программных продуктов и бывший аспирант. Имеет опыт разработки архитектуры сложных программных продуктов и планирования работы по их созданию. Был штатным и внештатным работником в компаниях Cisco, Intuit и Southwest. Работал с различными технологиями, в частности Java, PHP, Ruby и Node.js. В последние годы проявлял особый интерес к разработке веб-приложений, приложений для мобильных устройств и к REST API-интерфейсам. Разработал несколько довольно объемных веб-приложений с использованием JavaScript. Кроме того, он создавал методические рекомендации по REST-технологиям на основе оценок клиентов. Разрабатывал сайты с высоким объемом трафика, в которых использовал такие ключевые для масштабирования технологии, как репликация, сегментирование и распределенное кэширование данных.

В настоящее время Эстебан работает главным инженером компании Globant. В этой должности он добивается сдачи проектов в срок с обеспечением наивысшего качества конечного продукта. Он также занимается разработкой обучающих курсов по созданию программных продуктов и проводит совещания с разработчиками программных средств. Кроме того, Эстебан работает выездным консультантом по вопросам веб-технологий.

Компания Globant относится к новому поколению поставщиков технологических услуг, нацеленных на выработку инновационных программных решений с использованием новых технологий и тенденций. Globant сочетает в своей деятельности жесткость в вопросах проектирования и технических решений, характерную для поставщиков сервисов информационных технологий, с творческим и культурным подходом, присущим агентствам по внедрению цифровых технологий. В компании Globant выдерживаются четкие пропорции инженерных наработок, дизайна и инноваций.

Кристофер Скотт Эрнандес (Christopher Scott Hernandez), будучи по профессии дизайнером, стал разработчиком веб-технологий, начав с того, что в 1996 году создал для своего отца первый в Интернете сайт по обивке катеров. После этого он стал передавать свой опыт мелким и крупным компаниям, поработав над наиболее посещаемыми в мире сайтами, включая eBay, LinkedIn и Apple.

Был техническим редактором книги HTML5 Multimedia Development Cookbook, вышедшей в Packt Publishing. Является заядлым читателем и любителем книг. Когда не занимается расстановкой пикселов и написанием кода, любит проводить время с женой и дочерью, знакомясь с парками и пешеходными тропами красивого города Остина в штате Техас.

Мовис Ледфорд (Mauvis Ledford) занимается комплексным созданием и техническим руководством компаний, специализирующихся в области веб-технологий, мобильных веб-технологий и создания приложений, масштабируемых в облачных сервисах.

Работал в компаниях Disney Mobile, Skype, Netflix, и многих других молодых компаниях в Сан-Франциско, Нью-Йорке и их окрестностях. В настоящее время он является техническим директором в недавно созданной компании Pathbrite, занимающейся разработкой образовательных технологий и специализирующейся на создании бесплатных адаптивных мультимедийных электронных портфолио и цифровых резюме для всех желающих. Вы также можете воспользоваться ее услугами, если зайдете на сайт.

Мовис также был техническим редактором первого издания книги Responsive Web Design with HTML5 and CSS3, вышедшей в Packt Publishing, и книги Building Hybrid Android Apps with Java and JavaScript, вышедшей в O’Reilly Media.

Софи Уильямс (Sophie Williams) — весьма взыскательный человек, увлекающийся дизайном. Имеет ученую степень в области графического дизайна и в настоящее время работает веб-дизайнером и разработчиком пользовательского интерфейса в компании www.bet365.com. Несмотря на любовь к созданию дизайна веб-приложений, в ее сердце всегда остается особый уголок для печатных изданий. В свободное время она любит выпекать небольшие кексы, экспериментировать в области декоративно-прикладного искусства и склонна к раздаче указаний (тем, кто к ней прислушивается), когда что-нибудь в реальном мире идет не так, как ей нравится.

» Более подробно с книгой можно ознакомиться на сайте издательства » Оглавление » Отрывок

Для Хаброжителей скидка 25% по купону — Фрэйн.

habr.com

СSS Учебник

CSS - язык, который описывает стиль документа HTML.

CSS описывает то, как элементы HTML должны быть отображены.

Этот учебник научит Вас от начального до продвинутого.

Примеры в каждой главе

Учебник CSS содержит сотни примеров в CSS.

С помощью нашего редактора онлайн, Вы можете редактировать CSS и нажать на кнопку, чтобы посмотреть результат.

Пример CSS

body{    background-color: lightblue;}

h2{   color: white;   text-align: center;}

p{   font-family: verdana;   font-size: 20px;}

Редактор кода »

Нажмите на кнопку "Редактор кода", чтобы увидеть, как это работает.

Начать изучение CSS сейчас!

Примеры CSS

Смотреть еще 300 примеров! С помощью редактора, вы можете редактировать CSS, при нажатии на кнопку, увидете результат.

Перейти к примерам CSS!

Бесплатные Шаблоны CSS

Мы создали несколько отзывчивые W3.CSS шаблоны для вас, чтобы использовать.

Вы можете свободно изменять, сохранять, использовать и делать, что угодно с ними.

Бесплатные шаблоны CSS!

Упражнения и викторина CSS

Проверьте свои навыки CSS в SchoolsW3!

Начать CSS викторину!

Начать CSS упражнения!

Справочник CSS

На SchoolsW3 вы найдете полный справочник CSS всех свойств и селекторов с синтаксисов, с примерами, поддержкой браузером и многое другое.

CSS Экзамен - получить диплом!

SchoolsW3 Онлайн Сертификация

Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и карьерный рост.

Уже выдано более 10 000 сертификатов!

Получите Ваш Сертификат »

HTML Сертификат документы на ваши знания HTML.

CSS Сертификат документы на ваши знания новейших CSS.

JavaScript Сертификат документы на ваши знания JavaScript и HTML DOM.

jQuery Сертификат документы на ваши знания jQuery.

PHP Сертификат документы на ваши знания PHP и SQL (MySQL).

XML Сертификат документы на ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документы на ваши знания Bootstrap фреймворк.

schoolsw3.com

Новая большая книга CSS / Блог компании Издательский дом «Питер» / Хабр

Привет, Хаброжители! У нас вышла новая обновленная книга Дэвида Макфарланда:

Технология 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

habr.com