В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.
Осуществить данную задачу можно тремя способами:
- Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
- Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
- Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.
Атрибут style.
Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.
Пишется так:
style="" >
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента
Ну например:
style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках, сейчас же речь идет о том как применить CSS к какому либо HTML тегу.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
style="background-color: #c5ffa0" >
style="color: #0000ff; font-size:18px" >Всё о слонах
Купить слона
style="color: #ff0000; font-size:14px" >
style="color: #0000ff; font-size:16px" >Взять слона на прокат
style="color: #ff0000; font-size:14px" >
Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.
Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.
Взгляните на пример, ниже к нему будут комментарии.
Всё о слонах
На этом сайте Вы найдёте любую информацию о слонах.
Купить слона
У нас Вы можете по выгодным ценам приобрести лучших слонов!!
Взять слона на прокат
Только у нас Вы можете взять любых слонов на прокат!!
Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки ,
- будут синими а параграфы
- красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Теперь обещанные комментарии:
Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
CSS в отдельном внешнем файле.
Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.
Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.
Тег имеет атрибуты:
href - Путь к файлу.rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
- shortcut icon - Определяет, что подключаемый файл является .
- stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
- application/rss+xml - Файл в формате XML для описания ленты новостей.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..
Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Всё о слонах
На этом сайте Вы найдёте любую информацию о слонах.
Файл elephant.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Купить слона
У нас Вы можете по выгодным ценам приобрести лучших слонов!!
Файл elephant1.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Взять слона на прокат
Только у нас Вы можете взять любых слонов на прокат!!
В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?
В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?
- Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
- Используйте тег
Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:
Заголовок
Абзац.
Получим следующий результат:
Атрибуты
Встроенный CSS - атрибут стиля
Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:
<элемент style = "...правила стиля...">
Атрибуты
Пример
Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:
Встроенный CSS
Получим следующий результат:
Внешний CSS стили - элемент
Элемент может использоваться для подключения внешних CSS файлов в ваш HTML-документ.
Внешняя таблица стилей CSS представляет собой отдельный текстовый файл с расширением .css . Вы определяете все правила стиля в этом текстовом файле, а затем можете подключить CSS файл в любой HTML-документ с помощью элемента .
Вот общий синтаксис подключения внешнего файла CSS:
Атрибуты
Атрибуты ассоциируются с элементами или правилах, определенных в любом внешнем файле таблицы стилей.
- Любое правило, определенное в тегах , переопределяет правила, определенные в любом внешнем CSS-файле.
- Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.
Обработка старыми браузерами
Существует множество старых браузеров, которые не поддерживают CSS. Поэтому мы должны позаботиться о написании встроенного CSS в нашем HTML-документе. Следующий фрагмент кода показывает, как можно использовать теги комментариев, чтобы скрыть CSS из старых браузеров:
Подключение CSS происходит несколькими способами, которые используются в зависимости от ситуации. Сейчас мы рассмотрим эти способы поподробнее. Информации будет довольно много, поэтому заучивать ее наизусть даже не пытайтесь, а вот разобраться что к чему, обязательно постарайтесь.
Да, и еще один момент, который уже затрагивался в предыдущем уроке, но я его повторю еще раз. Часто многие новички боятся уже одного словосочетания «Каскадные таблицы стилей» или просто «таблицы стилей», поэтому, когда они встречают подобные выражения в тексте, то подсознательно им кажется, что они не понимают о чем идет речь. Так вот, на самом деле нет никаких таблиц в том виде, к которому вы привыкли - нет. А эти слова описывают только одно - все то, что относится к CSS, то есть различные правила CSS, свойства, значения и так далее. В общем, все то, что мы с вами будем изучать в этом учебнике. Кстати, сюда же можно отнести и просто слова «CSS» и «стили».
Встроенные стили
Подключение встроенных стилей (inline) заключается в применении атрибута style к определенному тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной определенной странице.
Общий синтаксис
<тег style="свойство:значение; свойство:значение; ...">...
Пример подключения в CSS встроенных стилей
Параграф 1
Параграф 2
Результат в браузере
Параграф 1
Параграф 2
Внутренние стили
Внутренние стили указываются в «шапке» документа и подключаются с помощью тега . В этом случае CSS воздействует уже не на один элемент, а на все указанные в стилях элементы, которые имеются на данной странице. Обычно данный способ применяется, когда необходимо изменить стили сразу у нескольких одинаковых элементов в пределах одной HTML-странице.
Пример подключения в CSS внутренних стилей
Параграф 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-страницу, с таким кодом:
Заголовок первого уровня
Здесь просто текст
Заголовок второго уровня
Здесь просто текст
Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:
Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег , который отвечает за подключение внешних файлов. Добавляем в html-страницу:
Заголовок первого уровня
Здесь просто текст
Заголовок второго уровня
Здесь просто текст
Внутренние таблицы стилей
Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style . Вот пример:
Это заголовок красного цвета
Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.
Встроенные таблицы стилей
В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги , с параметром type , он указывает, что подключается таблица стилей CSS. Вот пример:
Этот заголовок будет красного цвета
Этот заголовок будет красного цвета
Все заголовки h1 у нас на странице красного цвета. При желании можно один из них перекрасить в синий цвет, для этого нужно воспользоваться внутренней таблицей стилей:
Этот заголовок будет красного цвета
Этот заголовок будет синего цвета
Этот заголовок будет красного цвета
В данной ситуации применяется принцип каскадирования, он разрешит конфликт. В нашем примере внутренняя таблица имеет выше приоритет и поэтому заголовок станет синим.
Минусы этого способа очевидны... Таблицу стилей нужно создавать для каждой HTML страницы, поэтому мы будем пользоваться внешней таблицей стилей.
Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.
Любой html-документ, сколько бы он элементов не содержал, будет по сути «мертвым» без использования стилей. Стили или лучше сказать каскадные таблицы стилей (Cascading Style Sheets) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.
Стиль в CSS представляет правило, которое указывает веб-браузеру, как надо форматировать элемент. Форматирование может включать установку цвета фона элемента, установку цвета и типа шрифта и так далее.
Определение стиля состоит из двух частей: селектор, который указывает на элемент, и блок объявления стиля — набор команд, которые устанавливают правила форматирования. Например:
Div{ background-color:red; width: 100px; height:60px; }
В данном случае селектором является div . Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.
После селектора в фигурных скобках идет блок объявления стиля. Между открывающей и закрывающей фигурными скобками определяются команды, указывающие, как форматировать элемент.
Каждая команда состоит из свойства и значения. Так, в следующем выражении:
Background-color:red;
background-color представляет свойство, а red — значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red. Иными словами, для фона элемента устанавливается цвет «red», то есть красный.
После каждой команды ставится точка с запятой, которая отделяет данную команду от других.
Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей). Существую различные способы определения стилей.
Атрибут style
Первый способ заключается во встраивании стилей непосредственно в элемент с помощью атрибута style:
Стили
Здесь определены два элемента — заголовок h2 и блок div . У заголовка определен синий цвет текста с помощью свойства color. У блока div определены свойства ширины (width ), высоты (height ), а также цвета фона (background-color ).
Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри являются кодом css, а не html:
Стили
Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:
Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5 .
Использование стилй во внешних файлов позволяет уменьшить нагрузку на веб-сервер с помощью механизма кэширования. Поскольку веб-браузер может кэшировать css-файл и при последующем обращении к веб-странице извлекать нужный css-файл из кэша.
Также возможна ситуация, когда все эти подходы сочетаются, а для одного элемента одни свойства css определены внутри самого элемента, другие свойства css определены внутри элемента style, а третьи находятся во внешнем подключенном файле. Например:
А в файле style.css определен следующий стиль:
Div{ width:50px; height:50px; background-color:red; }
В данном случае в трех местах для элемента div определено свойство width, причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:
- Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей
- Далее в порядке приоритета идут стили, которые определены в элементе style
- Наименее приоритетными стилями являются те, которые определены во внешнем файле.
Атрибуты html и стили css
Многие элементы html позволяют устанавливать стили отображения с помощью атрибутов. Например, у ряда элементов мы можем применять атрибуты width и height для установки ширины и высоты элемента соответственно. Однако подобного подхода следует избегать и вместо встроенных атрибутов следует применять стили CSS. Важно четко понимать, что разметка HTML должна предоставлять только структуру html-документа, а весь его внешний вид, стилизацию должны определять стили CSS.
Валидация кода CSS
В процессе написания стилей CSS могут возникать вопросы, а правильно ли так определять стили, корректны ли они. И в этом случае мы можем воспользоваться валидатором css, который доступен по адресу http://jigsaw.w3.org/css-validator/
.
Вот видеоурок как подключить CSS к HTML
