![](https://i2.wp.com/idg.net.ua/blog/wp-content/uploads/chapter-02-css-dlya-p.png)
"имя файла" типы носителей.
В первой главе вы узнали, что дизайн сайта создается с помощью CSS. Для лучшего понимания, что и для чего нужно использовать, давайте рассмотрим один наглядный пример. Представьте себе, что HTML – это черно-белый структурированный каркас дома без украшений, а CSS – это то, с помощью чего мы создаем уникальный образ.
Как видите, у дома справа появились цвета, материалы и дополнительные украшения. На веб-странице происходит все то же самое: с помощью правил CSS на ней появляются цвета, отступы, меняется стиль шрифтов и размеры элементов, создается целый, завершенный стиль.
Простая таблица стилей
Давайте же взглянем, как выглядит самая элементарная таблица стилей и из каких элементов она состоит. Это пример CSS-стиля для всех тегов
Которые есть на веб-странице:
Как теперь будет выглядеть текст
В браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере).
![](https://i2.wp.com/idg.net.ua/blog/wp-content/uploads/chapter-02-css-dlya-p.png)
Вышеописанный стиль, как и любой другой, включает в себя набор элементов, у которых есть собственные названия. Запомните их, чтобы при чтении следующих глав вы понимали, о чем идет речь.
Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является 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 . Таким образом вы написали стиль для отдельной строки текста в абзаце. Подробнее о классах мы расскажем в следующей главе.
В конечном итоге у вас должна получиться вот такая страница:
![](https://i1.wp.com/idg.net.ua/blog/wp-content/uploads/chapter-02-lesson-create-first-css-style.png)
В качестве тренировки попробуйте изменить размер текста для
(допустим, 1.1em), а также увеличить отступ между
И левым краем области содержимого еще на 10 пикселей.
Выводы
В данной главе был рассмотрен синтаксис CSS, а также способ создания элементарной таблицы стилей. Вы узнали, как подключить CSS к HTML странице, а также научились создавать простые стили. Выделим главные вещи, которые необходимо запомнить из этой главы:
Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.
Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.
Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно.
Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.
Для удобства и лучшего восприятия кода CSS записывайте каждое свойство в новой строке, а также не скупитесь на пробелы и табуляцию.
Оглавление документаДля добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 1.
Пример 1. Подключение таблицы связанных стилей
Заголовок
Текст
Значения параметров тега - rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла mysite.css подключаемого посредством тега приведено в примере 2.
Пример 2. Файл со стилем
H1 { color: navy ; font-size: 200 % ; font-family: Arial, Verdana, sans-serif ; text-align: center ; } P { padding-left: 20 px ; }
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения содержимого и оформления сайта. Поэтому использование таблицы связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнераHello, world!
В данном примере определен стиль тега
, который затем можно повсеместно использовать на данной веб-странице.
Замечание
Таблица глобальных стилей может размещаться не только внутри контейнера
, но также в любом месте кода HTML-документа.Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей, см. пример 4.
Пример 4. Использование внутренних стилей
Заголовок
В данном примере стиль тега
задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.
Замечание
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 5 применяется сразу два метода добавления таблиц стилей в документ.
Пример 5. Сочетание разных методов подключения стилей
"font-size: 36px; font-family: Times, serif; color: red" > Заголовок 1
Заголовок 2
В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий - зеленым цветом через таблицу глобальных стилей.
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с таблицей связанных или глобальных стилей, но никак не со встроенными стилями. Общий синтаксис следующий.@import url ("имя файла") типы носителей; @import "имя файла" типы носителей;
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов - с помощью директивы url или без нее. В примере 6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.
Пример 6. Импорт CSS в глобальную таблицу стилей
Заголовок 1
Заголовок 2
В данном примере показано подключение файла header.css, который расположен в папке style.
Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей . Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и .
Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.
Представляем внешнюю таблицу
Внешняя таблица стилей — это обычный текстовый файл с расширением css. Вообще говоря, это расширение не обязательное, но очень рекомендуемое, дабы избежать проблем с некоторыми особо старыми браузерами.
Файл с таблицей стилей должен содержать только правила и комментарии CSS. Наличие во внешней таблице стилей, например, HTML-разметки может привести к тому, что некоторые ее части или вообще вся таблица будут проигнорированы.
Тег link для внешних таблиц стилей
Для подключения внешнего CSS используется тег .
Знакомься, тег link:
- устанавливает связь с внешними документами, чаще всего с таблицами стилей;
- должен располагаться в секции ;
- в одном документе может быть несколько тегов link.
Примеры подключения CSS
Как правило, используются три атрибута:
- — отвечает за установку взаимосвязи и в данном случае имеет значение "stylesheet";
- — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип "text/сss";
- — абсолютный или относительный путь к самому CSS-файлу.
Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в .
Пример подключения дополнительной таблицы стилей для устройств печати:
Пример подключения CSS с использованием (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):
Достоинства внешних CSS
Кроме того, что все правила четко погруппированы в отдельном файле и их легко находить и, при необходимости, править, у внешних таблиц есть ряд существенных плюсов, по сравнению с . Например:
- Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
- Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
- Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.
Резюме
Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.
Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней.
Три Способа Вставить CSS
Существует три способа вставки таблицы стилей:
- Внешняя таблица стилей
- Внутренняя таблица стилей
- Встроенный стиль
Внешняя Таблица Стилей
Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей, вы можете изменить вид целого Веб сайта путем редактирования одного файла. Каждая страница должна ссылаться на таблицу стилей, используя тег . Тег находится в head-секции:
Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.
Внутренняя Таблица Стилей
Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы HTML, используя тег
Рассмотрим пример использования таблицы стилей (листинг 12.10).
Листинг 12.10.
Пример использования таблицы стилей
Работа с таблицей стилейТIТLЕ>
<Р>Мой текст
<Н1>Мой заголовок первого уровня/Н1>
<Н2>Мой заголовок второго уровня/Н2>
<НЗ>Мой заголовок третьего уровняНЗ>
<Н4>Мой заголовок четвертого уровняН4>
Как это будет выглядеть в окне браузера, показано на рис. 12.4.
Рис. 12.4. Результат выполнения листинга 12.10
Можно создать подобную таблицу стилей в отдельном файле, а затем встроить ее в HTML- страницу с помощью дескриптора с атрибутами REL (значение "stylesheet"), TYPE (необязательного, как и в дескрипторе