23.01.2017
Всем привет!
В этом уроке я расскажу о способах подключения CSS файла к HTML
. Существует 3 способа подключения CSS файла. Спросите, зачем вам знать именно 3 способа? Отвечу, что нужно, потому что бывают случаи, когда необходимо использовать как раз все эти 3 способа подключения.
○ Способ №1 – «Таблица связанных стилей»
Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:
Чтобы связать HTML документ с CSS файлом, добавьте между тегами
специальный тег .* Закрывающий тег не нужен
href
– прописываем путь к css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в .
Разберём способ №1 поэтапно и практично от «а» до «я»:
1 этап - создать файл « style. css»
Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот»
:
В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» :
В поле «Имя файла » напишите «style.css », а не просто style (это важно! ). Таким способом мы создаем файл с расширением «*.css ». Далее нажмите на кнопку «Сохранить »:
Вот такая должна получиться общая картина:
Вот и все, файл «style.css
» был создан.
Можете вставить в файл «style.css
» вот это правило для тега
и сохранить:
H1 { font-size: 150px; /* Размер шрифта */ color: #cc0000 /* Цвет текста */ }
В HTML файле вставьте вот этот код:
Заголовок
В результате должно получиться вот такое:
Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css ». Припустим, меняем цвет и размер для заголовка в «style.css », то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!!
○ Способ №2 – «Таблицы глобальных стилей»
Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами
Можно и так:
Между тегами
прописываются необходимые CSS правила для веб-страницы.
Минус такого способа в том, что эти стили будут только для одной страницы, где размещены эти стили.
Заголовок H2
Результат:
В примере выше я изменил размер и цвет Заголовка H2, используя таблицу стилей CSS.
○ Способ №3 – «Внутренние стили»
Способ №3 я использую в редких случаях, например, для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style .
Style="тут будут CSS правила"
Заголовок H2
Результат:
В примере выше я изменил размер и цвет Заголовка H2, используя стили CSS.
○ Комбинированный метод подключения стилей
Все эти три способа можно комбинировать.
Заголовок
Заголовок
На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!
Предыдущая запись
В этой главе речь пойдет о том, как внедрить 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 для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
- Используйте тег
Подключенные таким способом стили действуют по всему документу , но что делать, если нужно указать их только для одного блока? Описать стили внутри определённого блока (тега) можно с помощью атрибута данного тега – style . Пример подключения стилей для одного тега:
Случайный текст 15 размера и красного цвета
Стили, описанные таким способом, не влияют на другие теги документа .
2. Способ, который позволяет подключить стили из другого файла или подключение внешних стилей оформления.
Если у Вас стили в отдельном файле, то их нужно подключить специальной строкой. Для того, чтобы указать стили для всего HTML – документа, мы воспользуемся тегом , который должен быть расположен внутри тега , о котором я говорил во . Пример такого подключения:
Путь к файлу, содержащему стили, указывается в этой части тега: href="style.css" в кавычках. В примере подключен файл стилей, который ежит в одной папке с HTML документом.
Также можно подключить внешние стили и другим способом – специальной директивой @import, которая заключена внутри тега . Пример подключение с помощью директивы @import:
.....
Файл стилей css , а точнее путь к нему, в данном способе указывается в скобках.
Подключения стилей, которые были описаны во втором способе, должны быть обязательно расположены между тегами .
Если CSS стили нужно подключить для XML-документа, то нужно воспользоваться следующей строкой:
В данном способе подключения путь к файлу со стилями указан в кавычках.
На сегодня урок окончен! Удачной верстки и новых знаний!
Хотите поехать в Европу? Вам нужен
Внешние таблицы стилей
Создаем обычную html-страницу, с таким кодом:
Подключение CSS к HTML
Заголовок первого уровня
Здесь просто текст
Заголовок второго уровня
Здесь просто текст
Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:
Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег , который отвечает за подключение внешних файлов. Добавляем в html-страницу:
Подключение CSS к HTML
Заголовок первого уровня
Здесь просто текст
Заголовок второго уровня
Здесь просто текст
Внутренние таблицы стилей
Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style . Вот пример:
Это заголовок красного цвета
Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.
Встроенные таблицы стилей
В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги , с параметром type , он указывает, что подключается таблица стилей CSS. Вот пример:
Подключение CSS к HTML
Этот заголовок будет красного цвета
Этот заголовок будет красного цвета
Все заголовки h1 у нас на странице красного цвета. При желании можно один из них перекрасить в синий цвет, для этого нужно воспользоваться внутренней таблицей стилей:
Подключение CSS к HTML
Этот заголовок будет красного цвета
Этот заголовок будет синего цвета
Этот заголовок будет красного цвета
В данной ситуации применяется принцип каскадирования, он разрешит конфликт. В нашем примере внутренняя таблица имеет выше приоритет и поэтому заголовок станет синим.
Минусы этого способа очевидны... Таблицу стилей нужно создавать для каждой HTML страницы, поэтому мы будем пользоваться внешней таблицей стилей.
Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.
