Всем доброго времени суток.

Итак, в одной из предыдущих статей мы с Вами познакомились с .

Но мы не рассмотрели один очень важный вопрос. А именно — как привязать CSS стили к HTML коду страниц нашего сайта.

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

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

Давайте начнем.

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

1. Внутренние таблицы стилей CSS.

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

Это конечно немного неудобно, но все же такая возможность существует и я не могу об этом не сказать.

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

Иногда Вам придется самим прописывать css-стили внутри HTML кода .

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

Чтобы этот баннер корректно отображался (не вылезал за отведенные ему границы, возможно ему нужна рамка и т.д.), иногда нужно привязать к нему несколько css-инструкций.

Но вносить при этом изменения в общую таблицу стилей нет смысла. Баннер — явление временное. Сегодня один, завтра другой. Поэтому проще прописать стили для него прямо внутри кода этого баннера.

То есть нам нужно подключить CSS стили только к определенному элементу страницы. Это делается очень просто — при помощи атрибута style .

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

). И ни на какой другой!

2. Внешние таблицы стилей.

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

Так вот, как обещал, рассказываю, почему лучше использовать именно внешние таблицы стилей.

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

Почему это происходит.

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

Присоединить файлы CSS стилей к веб-странице можно двумя способами.

Первый способ самый распространенный — это использовать тег с атрибутами: rel ="stylesheet" type ="text/css" href ="файл стилей.css" внутри кода заголовка страницы (тег ).

Например:

Данные пример присоединяет к странице CSS стили, прописанные в файле style.css. Они действуют на протяжении всего документа.

Есть еще один способ присоединить внешние таблицы стилей к HTML документу. Это использование директивы @import . Она позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.

Можно ее использовать как для добавления одних таблиц стилей к другим, так и для присоединения файла таблиц стилей к HTML документу. Для этого ее нужно прописать внутри тега

Параграф 1

Параграф 2

Результат в браузере

Параграф 1

Параграф 2

Внешние стили

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

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

Пример подключение в CSS внешних стилей

Параграф 1

Параграф 2

Содержимое файла style.css

Body { background: #ccccff; /* цвет фона страницы */ } p { color: red; /* цвет текста параграфов */ font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */ font-size: 150%; /* размер шрифта */ text-align: center; /* текст по центру */ border: 5px green double; /* стили рамки */ }

Результат в браузере

Параграф 1

Параграф 2

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

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

Подключение CSS через правило @import

Еще один способ подключения стилей, находящихся в отдельных файлах заключается в использовании правила . Это правило служит для объединения нескольких таблиц стилей в одну, что иногда бывает достаточно удобно. Подключение происходит во внешние или внутренние таблицы стилей, для этого после имени правила записывается конструкция url(), где в кавычках (" ") указывается адрес файла с CSS. Либо url() вообще не пишется, а сразу идут кавычки и адрес файла. Общий синтаксис следующий.

Во внешней таблице стилей

@import url("адрес файла"); @import "адрес файла"; ...

Во внутренней

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

Пример 1: обычное подключение внешних стилей

Содержимое страницы.

Пример 2: подключение внешних стилей совместно с CSS-правилом @import

Содержимое страницы.

Содержимое файла style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Ниже здесь дополнительно могут идти обычные стили со свойствами, значениями и т.д.

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

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

Пользовательские стили

Во многих браузерах есть возможность для подключения файла с CSS самими пользователями, чтобы они могли менять внешний вид просматриваемых сайтов, как говорится, «под себя». Например, изменить размер и гарнитуру шрифта, цвет текста и фона каких-то элементов и т.д. Естественно в этом случае стили создаются уже самим пользователем. Допустим, в Internet Explorer подключить пользовательские стили можно перейдя в: Сервис → Свойства обозревателя → Общие → Оформление.

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

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

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

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

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

Добавление стилей или как подключить CSS к HTML документу

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

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

Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».

Так примерно будет выглядеть строчка подключения стилей CSS в html коде:

...
.css"/>
...

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

2. Второй способ заключается в написании так называемых глобальных стилей , которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style и обычно помещают в секцию заголовка между тегами head:

...

...

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

3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style , который включает в себя в качестве параметров набор CSS свойств:

Абзац с серым фоном и красным текстом

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

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

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

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

• селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
• пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
• между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
• свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
• пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
• так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

• body — это селектор, который представляет из себя имя тега ;
• background — свойство стиля, с помощью которого задаются параметры фона;
• #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега , потому что в качестве селектора указано имя тега без символов < и >.

Рассмотрим еще пример:

h1 {
font-size: 24px;
color: green;
}

Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги

зеленым цветом и задаст ему размер шрифта 24 пикселя.

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

Yellowtext {color:yellow}

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

В этом абзаце оранжевый текст

В примере мы привязали к тегу

Css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

Cursivtext {font-style: italic}

желтый текст курсивом

В этом примере к тегу

Мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

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

• в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
• привязка к html элементу осуществляется через атрибут id , в качестве значения которого устанавливают имя стиля без знака решетки;
• значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

#textcenter{text-align: center;}

Текст по центру

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:

h1.redtext, p strong {color: red}

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:

Этот заголовок отображается красным цветом

обычный текст, красный текст

Внешние таблицы стилей

Создаем обычную html-страницу, с таким кодом:

Заголовок первого уровня

Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:

Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег , который отвечает за подключение внешних файлов. Добавляем в html-страницу:

Заголовок первого уровня

Внутренние таблицы стилей

Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style . Вот пример:

Это заголовок красного цвета

Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.

Встроенные таблицы стилей

В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги , с параметром type , он указывает, что подключается таблица стилей CSS. Вот пример:

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

Этот заголовок будет красного цвета

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

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

Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.

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

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

Простая таблица стилей

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

Которые есть на веб-странице:

Как теперь будет выглядеть текст

В браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере).

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

Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является p . Блок объявлений Так называется всё содержимое, находящееся между фигурными скобками {} после селектора. Стилевое свойство Это команда, с помощью которой указывается желаемый вариант форматирования (например, вы хотите изменить начертание шрифта font-weight , цвет color , размер шрифта font-size и т. д.). После имени свойства необходимо ставить двоеточие. В дальнейшем вы познакомитесь с большим количеством свойств CSS. Значение свойства После двоеточия записывается само значение свойства, которое вы определяете самостоятельно, создавая таким образом собственный стиль. В зависимости от свойства необходимо указывать подходящее ему значение.

Например, начертание шрифта задается ключевыми словами bold , bolder и т. д., цвет – шестнадцатеричным значением, RGB(A), HSL(A) или ключевыми словами red , orange , white и т. д., размер шрифта – единицами измерения CSS (процентами% , пикселямиpx , пунктамиpt , высотой шрифтаem ) или константами small , medium , large и т. д. После указания значения свойства ставится точка с запятой.

Поскольку CSS не чувствителен к переносу строк, пробелам, символам табуляции и регистру, вы можете оформлять ваш код так, чтобы в дальнейшем его было удобно читать и править. К примеру, мы могли бы написать вышеприведенный код в одной строке:

P {font-weight:bold;color:#1E824C;font-size:1em;}

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

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

P { font-weight: bold; color: #1E824C; font-size: 1em; }

А такая форма записи весьма громоздка, хоть и работает:

P {font-weight: bold;} p {color: #1E824C;} p {font-size: 1em;}

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

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

Комментарии в CSS записываются между символами /* и */ . Они не отображаются на веб-странице в браузере и видны исключительно в коде. Разработчики также часто используют комментарии для того чтобы скрыть временно ненужный участок кода CSS. Выглядят комментарии таким образом:

/* Стиль для основного текста */ p { font-weight: bold; color: #1E824C; font-size: 1em; }

Внутренние и внешние таблицы стилей

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

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

Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:

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

Урок: создаем таблицу стилей

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

В папке вы найдете HTML-документ с примером простой страницы и изображение (будет использоваться в уроке). Откройте HTML-документ в браузере. Вы увидите, что страница выглядит совершенно обычно. Чтобы придать ей более привлекательный вид, давайте напишем для нее стиль.

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

Подключение CSS к HTML

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

Откройте HTML-документ в текстовом редакторе, а также в браузере (чтобы было удобно просматривать изменения во внешнем виде страницы). Добавьте между тегами следующий код:

Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

• указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);
• подключили свою внешнюю таблицу стилей style.css (пока что пустую).

Пишем стиль CSS

Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:

Html { padding-top: 5px; background-image: url(background.jpg); }

Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; }

Сохраните изменения в файле. Сейчас вы:

• задали область для содержимого тега , которая равна 75% от ширины окна браузера;
• обеспечили отступ в 40 пикселей от всех сторон области содержимого;
• расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
• задали цвет фона #EBEBEB для области содержимого;
• скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5 ).

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

Изменяем шрифт с помощью CSS

Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; }

Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

Emphasis { font-weight: bold; }

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

В конечном итоге у вас должна получиться вот такая страница:

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

(допустим, 1.1em), а также увеличить отступ между

И левым краем области содержимого еще на 10 пикселей.

Выводы

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

Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.

Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно.

Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.

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