В этой главе речь пойдет о том, как внедрить 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 для описания ленты новостей.

type - MIME тип данных подключаемого файла.

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

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту 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 для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
• Используйте тег

  Заголовок

  В данном примере задан стиль элемента

  , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

  Заголовок 1

  Заголовок 2

  В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка - зелёный цвет через элемент

  Заголовок 1

  Заголовок 2

  В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

  У каждого тега можно задать индивидуальный, цвет, фон, окантовку и прочие свойства. Формат визуального оформления называется css (Cascading Style Sheets), что в переводе означает: «каскадные таблицы стилей».

  В данной статье рассмотрим 3 способа как подключить css стили в html код страницы сайта для изменения внешнего вида.

  1 Способ. Подключить отдельный файл css в html коде страницы

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

  Как установить файл стилей css на html

  Установить css стили в html код страницы сайта из файла можно с помощью тега , который должен располагаться между тегами и . Общепринятое расширение файла: .css .

  Пример подключения файла(код страницы.html)

  
  
  

  
  

  
  
  

  
  
  

  Текстовое содержание

  
  

  
  

  
  

  Пример кода самого файла стилей(код страницы.css)

  P {color:green;}
  

  В примере выше, файл называется my_style.css и располагается в папке /my_css .

  В данном файле написано свойство для тега

  Код p {color:green;} означает: сделать цвет текста внутри тега

  Зеленым. В данном примере подключен только один файл, но при необходимости вы можете подключать их неограниченное количество.

  2 Способ. Написать вначале самой страницы

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

  У вас одностраничный сайт;

  Данное визуально оформление предназначено только для текущей страницы. Например, для визуального оформления элементов, которых нет на других страницах.

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

  Как добавить css стили в html код страницы сайта

  Добавить стили сcs на html страницу сайта, можно так же как и у файла, а именно между и . Только вместо ссылки на файл прописываются теги , внутри, которых пишутся сами стили.

  Пример добавления свойств тегов вначале(код страницы.html)

  
  
  

  
  

  
  
  

  
  
  

  Текстовое содержание

  
  

  
  

  
  

  
  

  3 Способ. Написать стиль в атрибуте style для каждого тега отдельно

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

  По сути, логика следующая: общие и наиболее часто используемые стили, мы прописываем в файле(1 способ), а детальные корректировки в самих элементах. Например, если у вас на странице 5 заголовков, отличающихся цветом, то лучше прописать общие свойства в файле, определяющие размеры и отступы этих заголовков, а цвет в самих элементах, по данному способу. у тега

  3 способ обладает наивысшим приоритетом, поэтому тег получит свойства, указанные в атрибуте style="" , даже если они ранее были указаны с помощью другого метода.