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

Но сначала небольшое вступление- что такое CSS (стили), конечно для тех, кто не знает, остальные можете с ходу проскакивать эту страницу.

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

Затем приходят каменщики, и поднимают стены, за ними кровельщики монтируют крышу. Черновой вариант дома готов. В нашем случае это можно сравнить с, написанной на языке HTML, страницей (вспомните index.html который мы написали в предыдущем курсе).

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

Так что теперь все задачи связанные с оформлением нашего сайта (изменение расцветок и форматов текста, размещение картинок, столбцов и многое другое), мы будем выполнять с помощью CSS.

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

Технология эта более совершенна и удобна для решения задач связанных с оформлением. Ну а по-простому могу объяснить, опять же, используя сравнение из моего строительного прошлого.

Любой хороший плотник имеющий, допустим, такой шикарный инструмент как бензопила “Штиль”, режущая и брёвна и рейки с одинаковой лёгкостью и вообще позволяющая выполнить почти любую плотницкую работу (кроме строгания и забивания гвоздей), всегда имеет под рукой обыкновенную ножовку и топор, потому, что всегда может возникнуть момент, когда быстрее и проще будет применить как раз их.

Есть ещё один нюанс, из за которого необходимо знать теги html предыдущих версий. Дело в том, что в интернете существует очень много ресурсов написанных давно, и с использованием именно этих тегов.

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

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

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

Так что давайте приступим к изучению технологии CSS. Делать это будет лучше при помощи редактора .

В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.

Перемена

— Почем стоит доехать до Дерибасовской?
— Пять рублей.
— А если я поеду с Изей?
— С изей, без Изи… Пять рублей.
— Изя, ты слышишь? Я ж говорил, что ты ничего не стоишь!

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

Определение

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

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

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

Сущность

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

И изменить шрифт и цвет символов, которые находятся внутри него. При этом каждому такому элементу документа будет присвоено данное свойство. Нет необходимости присваивать значение всем тегам отдельно. Можно использовать более широкомасштабные цели, например, сразу назначить свойство ко всему документу, определив свойство к элементу "body". Или стилизовать отдельный фрагмент через специальные id-идентификаторы или селекторы.

Применение

Использовать каскадные стили можно тремя способами:

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

  Сейчас я приведу пример того, как это работает. Вот образец кода:

  Привет!

  Заголовок h2!

  Ещё один способ добавления CSS

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

  Заголовок h1 без стилей

  Заголовок h1 с внутренним стилем

  Промежуточные итоги

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

  1. Связывание - хранение таблицы CSS в отдельном файле и происходит подключение его в html-документам. Этот способ позволяет использовать одну таблицу стилей для форматирования многих документов. Стили из таких файлов называют связанные стили.
  2. Внедрение - позволяет задавать все правила таблицы стилей непосредственно в заголовке документа. Такие стили также называют глобальные стили.
  3. Встраивание в тэги документа - позволяет изменять параметры стиля конкретных тегов страницы. Это также называют внутренний или встроенный стиль.

  Есть ещё четвертый способ - импортирование , но его мы пока упустим.

  Сейчас нас интересует следующий вопрос. Как будет вести себя браузер, если тегу

  указаны стили всеми тремя способами.

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

  Наверно именно из-за этой иерархии таблицы стилей назвали каскадными.

  Удобный способ

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

  Подробнее про синтаксис CSS и используемые термины

  Как я написал выше, таблица стилей представляет собой набор правил форматирования тегов HTML. Синтаксис этих следующий:

  тег { свойство: значение }

  Правило CSS - это указание браузеру как отображать тег.

  Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. То есть наш пример синтаксиса можно написать так:

  селектор { определение }

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

  селектор { свойство: значение }

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

  селектор
  {
  свойство: значение;
  свойство: значение
  }

  После последнего определения ставить точку с запятой (;) не обязательно.

  В качестве селектора могут выступать не только теги, но и классы и идентификаторы. Но это тема отдельной статьи.

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

  Заголовок h1

  Заголовок h2

  В этом примере первое правило (для селектора h1 ) записано в одну строку, второе правило (для селектора h2 ) прописано по другому - каждой определение селектора прописано в новой строке. Второй вариант кода более удобен для чтения.

  В CSS допустимо для одного селектора каждое свойство указывать по отдельности, вот пример такого кода:

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

  Может получиться так, что для одного селектора было два раза задано одно стилевое свойство.

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

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

  Очевидная вещь: у каждого свойства может быть только соответствующее ему значение. У свойства color это будет цвет, а не размер.

  CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле, так и быть прописаны непосредственно в HTML-коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки. Можно задать конкретный стиль отображения — размер, цвет, толщину рамок и др.

  При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение .css , название у него, как правило, style.css .

  Подключение CSS файла

  Для подключения CSS файла существует несколько способов. Мы расскажем о двух способах, которые наиболее часто используются при создании сайтов:

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

  Первые два свойства указывают браузеру, что на сайте используется CSS, затем указывается адрес файла со стилями.

  2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:

  Здесь мы прописали стили соответственно для контейнеров

  и . Данные стили будут применяться исключительно для них.

  Приведем пример таблицы стилей — создадим файл style.css и пропишем стили:

  body { font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */ font-size: 12pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #000000; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ }

  Здесь мы задали стили для тела страницы и для заголовка

  . Также можно задать конкретные стили для любых других элементов страницы веб-сайта.

  Теперь подключим нашу таблицу стилей к сайту:

  Привет, Мир!

  Это моя первая страница со стилями CSS

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

  Кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.

  Информация: Что такое CSS

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

  Под документом мы будем понимать набор информации о структуре страницы, описываемый языком разметки .

  А представление документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.

  Примеры

  • Страница сайта, которую вы сейчас читаете - это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (HyperText Markup Language - Язык ГиперТекстовой Разметки)
  • Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (XML User Interface Language - XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.

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

  Подробнее

  Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.

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

  Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:

  Во второй части данного руководства вы встретите примеры этих языков разметки.

  Подробнее

  В терминах CSS программа, которая выводит документ пользователю, так называемому user agent (UA ). Браузер - один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.

  Прочие определения и термины, имеющие отношение к CSS, вы можете найти в Определениях спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.

  К действию: Создание документа

  1. Создайте новую папку на вашем компьютере для упражнений.
  2. Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.
  3. Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем doc1.html.

     Cascading Style Sheets

  4. Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.

     Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:

     C ascading S tyle S heets

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

  Что дальше?

  В документе, который вы создали, CSS пока что не использовался. В следующем разделе вы научитесь использовать CSS для стилизации документа.