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

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

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

Да, конечно в CSS есть несколько свойств (свойства - это такие параметры похожие на атрибуты тегов), которые могут показаться немного сложными для новичка, но таких единицы. Да и то вы с легкостью их «раскусите», уделив каждому чуть-чуть времени. Главное, чтобы вам самому (или самой) этого хотелось. Хочется? Тогда читаем дальше.

Ну и по традиции я выскажу свое мнение о том, как пользоваться данным учебником CSS. Рекомендую вам изучать за один раз от одного до трех уроков и тратить на это в день не более трех часов, иначе вы можете просто ничего не усвоить. Если же вы все-таки хотите заниматься дольше, то не увеличивайте количество уроков, а лучше возьмитесь за практику. Хотя в этом учебнике и есть «домашние задания», но ведь всегда можно придумать еще и что-то свое. А поможет вам в этом хороший , которым вы в полной мере сможете пользоваться уже с середины учебника.

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

HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - <тег>, чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.

Визуальные редакторы

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

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

Теги

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

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

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

Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.

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

Head

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

Link

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

Body

Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:

• - применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
• - создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;
• - один из популярнейших тегов современности; каждый, кто решил изучить основы языка HTMLl, должен уделить ему особое внимание, поскольку это блочный элемент, на основе которого сделана львиная доля современных сайтов (параметры для блоков

  задаются в css, и внутри этого тега могут располагаться другие блоки);

• Выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;

• - нумерованный список, элементы которого заключаются в парный тег
  1. - маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом

     • -

       - заголовки документа (цифра обозначает уровень заголовка, то есть

       - главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней

       ,

       почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок

       ;

     • - жирный текст;
     • - курсив;
     • - вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);

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

     CSS

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

     

     Применение CSS

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

     Или , написав лишь одно правило. Учитывая современные требования к внешнему виду веб-страниц, использование каскадных таблиц стилей является обязательным.

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

     Пример

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

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

     Пример

     css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.

     4. Самый распространенный способ применений каскадной таблицы стилей - это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.

     Пример

     css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.

     Виды селекторов в CSS

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

     С селекторами элементов (тегов ) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:

     P { color: red; }

     p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.

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

     Текст CSS будет таким:

     #idred { color: red; } .black { color: black; }

     Текст документа будет таким:

     Пример красного абзаца

     Пример черного абзаца

     Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.

     Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).

     В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.

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

     Текст CSS:

     Текст HTML документа:

     Теперь рассмотрим тоже популярный вид селекторов это - селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:

     Текст CSS:

     P { color: red; } div p { color: green; }

     Текст HTML документа:

     Пример красного абзаца

     Пример абзаца, который имеет потомка элемент div

     Вы здесь видите что абзац, который находится в элементе div стал зеленым, а все абзацы, которые не находятся в элементе div, станут красным.

     Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).

     Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих , где более подробно описаны все возможности CSS и как их применять на практике.

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

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

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

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

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

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

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

     делать красным цветом, параграфы

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

     и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента

     на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

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

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

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

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

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

     Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.