Учебник по html и css для начинающих – Учебник html, скачать учебник по хтмл, html для начинающих, скачать бесплатно электронный справочник по html

www.webremeslo.ru

Лучший учебник html. Основы html

Учебник html — это очень полезная штука, т.к. не зная этот самый язык html, практически невозможно создать свой сайтв сети. C html начинается путь любого веб-мастера.

Еще совсем недавно, я сам перерыл весь интернет, в поисках толкового, написанного для начинающих, учебника html. Найти хороший обучающий материал, с большим количеством примеров, в котором бы доходчиво объяснялись основы html, оказалось довольно сложно. Поэтому было принято решение написать свой, собственный учебник html, с примерами и объяснениями, расчитанными для начинающих… В нем, я попытался разложить основы html по полочкам.

Ниже, Вы можете наблюдать содержаниe этого самого учебника. В общем, не судите строго, я старался изо всех сил 🙂

Введение

Рад, что вы решили приступить к изучению моего учебника по html. Поверьте мне, в нем нет ничего сложного, и уже через час вы создадите свою первую страничку. HTML – это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф  и.т.д. Этим как раз и занимается язык html. Чтобы увидеть HTML-коды страницы в Internet, кликните правой кнопкой мыши по странице, в выпавшем меню выберите пункт — view source (или «просмотр HTML кода»). Не пугайтесь! Я еще раз повторюсь – на самом деле, все очень просто!

Что понадобится нам для обучения?

Браузер и Блокнот(или аналогичный простой редактор)  — вот всё, что вам необходимо для работы с данным учебником . Раз вы просматриваете эту страничку – значит браузер у вас уже есть , ну а блокнот я думаю найти не составит труда ( Пуск – Программы — Стандартные — Блокнот).

Почему простой текстовый редактор идеально подходит для изучения HTML и CSS? да потому, что он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.

Возможно вы уже слышали, или даже использовали такие программы, как Microsoft FrontPage, Adobe Dreamweaver, которые упрощают работу с кодом. Пока что забудьте об этих программах! пока учимся в блокноте!

Да, без сомнений Мы будем ими пользоваться, но только после того, как пройдем коротенькие курсы по html и css . Потом просто скачаете у меня на сайте специальный видео-курс по Adobe Dreamweaver и будет вам счастье…

Весь ли здесь HTML ?

Я постарался собрать только ту часть языка, которая действительно используется(из личного опыта создания более 10 сайтов), потому как более чем 40% используется очень редко.Тем более, в дальнейшем мы будем пользоваться Adobe Dreamweaver, и весь труднозапоминающийся код он напишет за нас . Главу по фреймам я выкинул полностью, советую Вам вообще никогда ими не пользоваться, т.к. это уже очень устаревшая технология и рейтинга это Вам не добавит!

Если Вам необходима более полная информация по html, скачивайте книги из соответствующего раздела у меня на сайте.

studfiles.net

Учебник css для начинающих.

Версия для печати раздела «Учебник css» сайта www.Webremeslo.Ru

Введение

Что такое css?

Если Вы уже прошли курс обучения по учебнику HTML (http://webremeslo.ru/html/glava0.html) или же хорошо знакомы с HTML почерпнув необходимые знания из других источников, то настало время взяться за изучение CSS.

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

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников «Как убрать подчеркивание ссылки?» или «Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?» с помощью одного HTML этого никак не сделать!! А сколько их еще таких «больных вопросов»? — тьма.. Тут то и приходит на помощь CSS, который решает большинство задач касающихся дизайна сайта.

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки

Ввиду того, что CSS позволяет выносить повторяющиеся стилевые описания одних и тех же элементов в один файл происходит значительная «разгрузка» документов HTML, а это экономия объема, трафика, времени, денег.. HTML код становится лёгким, удобным для чтения и редакции.

Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS (http://webremeslo.ru/spravka/spravka4.html) где собранны и кратко описаны свойства CSS и их возможные значения.

studfiles.net

Основы html для начинающих на понятном языке

Основы html для начинающих, что сейчас должен знать каждый начинающий вебмастер или блогер. Если вы хотите научиться создавать элементарные сайты, понимать сам код, знать, что за чем стоит и должно идти, без знаний основ языка хтмл этого сделать просто невозможно. На своем блоге у меня будет целая цепочка статей, которые я посвящу этой теме от А до Я, опишу каждый тег, который присутствует в документе, что он обозначает и как его правильно использовать.

к оглавлению ↑

Основы хтмл

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

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

Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты.

Html документ это самый простой текстовый документ, язык тегов, с которым вы сталкиваетесь каждый день на просторах интернета. Теги описывают структуру документа. Оформляются теги угловыми <   >скобками, внутри которых пишется название тега. Браузер просматривает структуру документа, выстраивает ее и отображает уже по своим инструкциям на вашем мониторе, если вы конечно все сделали правильно.

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

к оглавлению ↑

Основы для начинающих

Что такое html — если посмотреть, что пишет Википедия — (HyperText Markup Language) язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.

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

Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.

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

<html> <body> <h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3> <p>Добро пожаловать на мой блог, сейчас вы проходите урок по Основам HTML. Если вам понравилась данная статья, можете подписаться на данный блог, чтоб получать новые статьи на свой электронный ящик.</p> <h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3> <p>Из каких тегов состоит любой html документ, что в него входит и где все это нужно прописать.</p> </body> </html>

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

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

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

<strong><i>Текст</strong></i>

к оглавлению ↑

Структура html документа

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

Тег — это компонент, который говорит веб браузеру выполнить ту или иную задачу. Например присутствие абзаца, таблицы, формы или изображения.

Атрибут — изменяет тег. Например можно абзац выровнять по центру или по правому краю, задать так же расположение изображения на странице и так далее.

ВСЕГДА закрывайте теги, если вы его отрыли, обязательно нужно его закрыть. В противном случае будет ошибка и ваш документ будет некорректно отображаться на странице. Так же существуют исключения, про них не следует забывать.

Четко нужно понимать, что существует заголовок документа и его тело. Заголовок это все, что состоит в теге <head>. Тело документа (<body>), в теле документа состоит все содержимое страницы. Если возникает необходимость оставить участок кода для себя, тем самым заключить данные теги в комментарии, для этого используется тег <!>. Все, что находится внутри такого тега, служит в роли комментария и не воспринимается браузерами.

к оглавлению ↑

<html>

Начнем с самого первого. В начале документа я открыл тег <html> и в конце я его закрыл </html>. Данный код присутствует абсолютно в каждом документе, он говорит браузеру, что все, помещенное между этими тегами, является HTML кодом. Является корнем самого документа, все, что в дальнейшем присутствует за этим тегом, уже не включается в документ и не воспринимается браузерами. В самом начале документа тег открывается и в самом конце он обязательно должен быть закрытым.

к оглавлению ↑

<head>

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

<head> Содержание </head>

к оглавлению ↑

<Title>

Данный тег включается в head, он должен быть написан внутри тега head. Данный тег title является обязательным и должен присутствовать в каждом html документе. В добавок к этому он отображается как заголовок окна браузера. Длинна такого заголовка не должна превышать 60 символов. В тексте такого заголовка должна содержаться максимально полная информация, которая характеризует содержание страницы.

Если вы написали в заголовке «Привет Мир», именно эта информация должна отображаться на странице и никакой другой. Не стоит обманывать людей и поисковые машины, они этого не любят, тем самым вы делаете хуже себе. Информация, которая содержится в этом теге, должна соответствовать содержанию вашей страницы.

к оглавлению ↑

<meta>

После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).

<meta name=»keywords» content=»Ключевые слова задаются через запятую»> <meta name=»description» content=»Описание страницы не больше двух предложений»>

Кроме этого, в теге meta могут содержаться данные про автора страницы и другие свойства метаданных. Можно запретить индексацию страницы в целом для поисковых машин. Поставить автоматическое обновление страницы через 20 секунд или через 5 секунд с последующим переходом на другую страницу.

<meta name=»robots» content=»index, follow»> <meta http-equiv=»refresh» content=»20″> <meta http-equiv=»refresh» content=»5; url=http://nesmelov.ru/»>

Таких элементов meta может быть несколько, так как они могут нести абсолютно разную информацию. Остальные пользователи, когда открывают страницу в браузере, не видят все ваши описания, все это остается скрытым от глаз.

к оглавлению ↑

<style>

Тег style так же можно использовать для задания стилей на странице. Если вы используете много разных стилей css, в таком случае желательно задавать их в отдельном файле. Если нужно указать несколько из них, все это можно задать прямо в html документе.

<style type=»text/css»> .base { width: 100px; background-color: #000; height: 150px; color: #fff; }

Или добавить стили конкретно к одному тегу, для этого внутри самого тега нужно добавить элемент style. Данный тег нужно использовать внутри контейнера <head>, который задает стили для страницы. Можно использовать несколько таких тегов, ошибкой это не будет.

<h4>

к оглавлению ↑

<link>

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

Подключать можно больше одного файла, тут ограничений нет. Закрывать такой тег не нужно. Если все сделать правильно, к вашему документу будут подгружаться конкретные стили из отдельного файла. Данный тег можно добавить в основы html и не забывать про его существование. В итоге получается такая картинка:

<link href=»css/style-lg.css» rel=»stylesheet»> <link href=»css/style-md.css» rel=»stylesheet»> <link href=»css/style-sm.css» rel=»stylesheet»>

к оглавлению ↑

<script>

С помощью тега script к документу можно подключить разные сценарии (скрипты). Присутствие закрывающего тега обязательно. Сам скрипт может располагаться в начале документа, внутри и в конце.

<script type=»text/javascript» href=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script>

к оглавлению ↑

<body>

Говорит браузеру, что все помещенное между этими тегами, должно отобразиться в окне вашего браузера. Вот основные теги, которые  могут присутствовать абсолютно в каждом документе. Тег body служит в качестве основного тела страницы, который включает в себя все ее содержимое. Данный тег желательно открывать и в конце документа не забыть закрывать.

к оглавлению ↑

Заголовки страницы h2 h3 h4

Поехали дальше, мы видим тег <h2>, который так же открывается и закрывается. Данный тег обозначает основной заголовок текста, в большинстве случаев под заголовком h2 идет название страницы. На самом деле данных заголовком всего шесть. <h2> <h3> <h4> <h5> <h5> <h6>. Их так же используют в SEO, но это уже немного другая тема. Я обязательно выделю для этого одну статью и дам подробное описание для них, подписывайтесь на обновления блога, чтоб ничего не пропустить.

Наличие таких заголовком в статье сыграет важную роль при продвижении страницы. Кроме этого, ихнее использование дает вам четкую структуру страницы, ее заголовок, подзаголовки, выделения, подпункты и так далее. Всегда пользуйтесь ними и применяйте на практике. На многих CMS, например таких как WordPress, при написании текста, можно заметить «заголовок 1», «заголовок 2», «заголовок 3» и так далее. Именно они и отвечают за h2, h3 и h4.

к оглавлению ↑

<p>

Если вы пишите основной текст с нового абзаца, вы пишите тег <p> в начале и закрываете его в конце </p>. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже.

<!DOCTYPE html> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>HTML документ</title> </head> <body> <p> <b> Этот текст будет полужирным, <i>а этот — ещё и курсивным</i> </b> </p> </body> </html>

к оглавлению ↑

Основные элементы Head и Title

В каждом документе присутствует элемент head и Title. Первый из них <head>, который идет сразу после первого тега <html>. В данном теге идет вся информация о странице, в нем так же заключается элемент <title>. Title –информация о заголовке странице, другими словами название страницы, ее имя. Именно в тайтл вы указываете правильное название страницы, по которому пользователь будет искать вас через поисковую систему, очень важный момент. Оба элемента должны быть открыты и так же закрыты. Закрывается каждый элемент знаком «/». В итоге получается вот такая картинка.

<html> <head> <title>Заголовок&amp</title> </head> <body>\Содержание страницы</body> </head> </html>

Как видите, ничего сложного нет. Перед вами самые основные теги, которые должны присутствовать в каждом html документа. Не забывайте закрывать каждый из них, иначе браузер не сможет воспринять полноценную картину кода. Это нужно знать и помнить всегда. Дальше вы уже начинаете вставлять текст, картинки, видео и так далее. Но это уже будет в других статьях.

к оглавлению ↑

Редактор Notepad++

Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html.

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

к оглавлению ↑

Элемент DOCTYPE

В каждом документе так же должен быть указан вот такой элемента doctype. Для чего он нужен и что в нем должно быть. Обычно народ сильно не увлекается этими строчками, копируют себе в документы и работают спокойно. Данные элементы говорят браузеру, какая версия html используется в документе, какое описание страницы, какая используется кодировка, какие ключевые слова включены, кто автор и как называется страница.

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

<!DOCTYPE html «-//w3c//dtd XHTML 1.0 Transitional//EN» «http://www.w3c.org/TR/xhtml1-transitional.dtd»> <html> <head> <meta http-equiv=»content-type» content=»text/html;charset=windows-1251″ /> <meta name=»Nesmelov.ru» content=»Nesmelov Evgeniy» /> <meta name=»description» content=»полное описание данной страницы, о чем идет речь. 1-2 предложения» /> <meta name=»keywords» content=»джинсы, купить джинсы, зауженные джинсы, крутые джинсы, мужские крутые джинсы» /> <title>Заголовок данной страницы</title> </head> <body> </body> </html>

к оглавлению ↑

Информация для чайников

Коротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251.

Далее часто различные конторы по созданию шаблонов, скриптов и так далее…указывают свое название организации или просто имя фамилию и отчество. Не обязательный meta тег, но встретить его можно часто.

Description — затрагивается тема по SEO, один из трех главных тегов, который должен присутствовать абсолютно в каждом документе, данный тег указывает описание страницы. Что написано на этой странице, короткое описание, не больше двух предложений. Тег keywords, так же затрагивается тема по SEO, данный тег является обязательным. В нем пишутся ключевые слова, по которым пользователи интернета будут находить вас через поисковые системы.

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

Что необходимо запомнить с данного урока про основы html:

1. Почти все теги открываются и закрываются;
2. Начинается документ с тега <html>;
3. Наличие тега <head>;
4. Наличие тега <body>;
5. Четкая структура html документа.

Все главные страницы всегда должны называться словом index. Так принято и так все привыкли, без разницы какое будет расширение у файла, это может быть и html и php. Называется он всегда только так.

Посмотрите видео про основы html от компании Webformyself.

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

Евгений Несмелов

nesmelov.ru

Современный учебник 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