HTML и CSS. Введение

ЧТО ТАКОЕ CSS

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы.
Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML.
Синтаксис CSS представляет собой плоский список CSS-правил (в чистом CSS правила нельзя вкладывать друг в друга).
Помимо CSS-правил (rule sets) в языке существуют так называемые «эт-правила» (at-rules), они начинаются с символа @, например, @font-face. «Эт-правила» ещё называют CSS-директивами.

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

ТИПЫ СТИЛЕЙ

Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом
, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.

ДОБАВЛЕНИЕ СТИЛЕЙ НА СТРАНИЦУ

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

ИНСТРУМЕНТЫ РАЗРАБОТЧИКА

Панель разработки можно отрыть следующими способами
Ctrl + Shift + I (⌘ + ⌥ + I для Mac OS X) (в Internet Explorer клавиша F12)
Firefox. Открыть меню > Инструменты разработки, или Инструменты > Веб-разработка > Инструменты разработки
Chrome. Дополнительные инструменты > Инструменты разработчика
Safari. Разработка > Показать Web Inspector . Если Вы не видите меню "Разработка", зайдите в Safari > Настройки > Дополнительно, и проверьте стоит ли галочка напротив "Показать меню разработки".
Opera. Меню > Разработка > Инструменты разработчика. Если Вы не видите меню "Разработка", включите его отображение, перейдя в Меню > Другие инструменты > Показать меню разработчика.
Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором нужно выбрать пункт Исследовать Элемент. (этот способ отобразит код того элемента, на котором щёлкнули правой кнопкой).

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

СЕЛЕКТОРЫ

Селектор элемента (селектор тега или типа)
Выбирает все HTML элементы указанного типа. Содержит имя тега без символов < и >.
h1 { color: red; } /* выберет все заголовки 1 уровня */
ID селектор
Выбирает элемент на странице с указанным ID. Содержит имя идентификатора с префиксом #. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
#my-id { font-size: 15px; } /* выберет
или
*/
P#opa { color: red; } /* выберет
, но не
*/
Селектор класса
Выбирает все теги с подходящим атрибутом class. Начинается с точки, за которой идёт имя класса.
.info { color: blue; } /* выберет только элементы с классом info */

Итак сегодня мы изучили:
ДЗ:
Что такое css
Из каких частей состоит css-правило
Какие бывают типы стилей
Каким есть способы добавления стилей на страницу
Что такое инструменты разработчика и как ими пользоваться
Селекторы по тегу (типу)
Селекторы по идентификатору
Селекторы классов
Контекстные селекторы