Внедрение CSS, тег link
Внедряем CSS-код, с помощью тега <link>
Внедряем CSS-код, с помощью тега <link>
Рассмотрим третий способ внедрения CSS-кода в HTML-документ: Внедрение с помощью тега <link>
Итак, мы узнали что с помощью тегов <style> </style> можно изменять внешний вид тегов на одной странице, с помощью глобального атрибута style=" ", можно изменить внешний вид конкретного тега.
Но что делать, если нужно изменить внешний вид тегов на всех страницах сайта одновременно? Для этого, нам понадобится тег <link>, его нужно поместить в голову каждого HTML-документа. Тег <link> должен ссылаться на CSS-файл, для этого у него имеется атрибут href=" ".
Создайте на рабочем столе папку Мой сайт, в папке создайте три HTML-файла:
index.html
polyarnyi-volk.html
polyarnaya-sova.html
и один CSS-файл:
style.css
В HTML-файлах, разместите следующий HTML-код:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Страница о снежном барсе</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Снежный барс</h1>
<p>
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии,
Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом,
относительно короткими лапами, небольшой головой и очень длинным хвостом.
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными
пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по
приблизительным оценкам их количество варьируется в районе около 10 тысяч
особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
запрещена.</p>
<a href="index.html">Снежный барс</a>
<a href="polyarnyi-volk.html">Полярный волк</a>
<a href="polyarnaya-sova.html">Полярная сова</a>
</body>
</html>
polyarnyi-volk.html
<!DOCTYPE html>
<html>
<head>
<title>Страница о полярном волке</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Полярный волк</h1>
<p>
Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
обширных пространствах северных регионов, которые пять месяцев в году,
погружены в темноту. Чтобы выжить, волк приспособился есть практически
любой корм, который только попадается ему на пути.</p>
<p>
Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
жить при минусовой температуре, месяцами не видеть солнечного света и
неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
леминги, зайцы, овцебыки, олени и птицы.</p>
<a href="index.html">Снежный барс</a>
<a href="polyarnyi-volk.html">Полярный волк</a>
<a href="polyarnaya-sova.html">Полярная сова</a>
</body>
</html>
polyarnaya-sova.html
<!DOCTYPE html>
<html>
<head>
<title>Страница о полярной сове</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Полярная сова</h1>
<p>
Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица,
из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые,
длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал
распространения - территория тундры: Евразия, Северная Америка,
Гренландия.</p>
<p>
Полярная сова обитает обычно в открытой местности, в лесах встречается
редко. Питается в основном, мелкими грызунами: леммингами, в год может
съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие
хищники, птицы, рыба и даже падаль.</p>
<a href="index.html">Снежный барс</a>
<a href="polyarnyi-volk.html">Полярный волк</a>
<a href="polyarnaya-sova.html">Полярная сова</a>
</body>
</html>
CSS-документ файла style.css, должен содержать следующий код:
h1 {
color: red;
}
p {
color: blue;
}
Ваш сайт, состоящий из трёх страниц, должен выглядеть следующим образом.
Теперь, для того чтобы изменить цвет заголовка, абзаца, ссылки и т.д., сразу на всех страницах сайта, достаточно лишь внести изменения в одном файле: style.css
Давайте сделаем текст в абзацах p всех страниц, зелёным. Для этого в style.css, вместо значения blue, впишем значение green
p {
color: green;
}
Теперь цвет текста в абзацах, всех страниц сайта, между тегами <p> </p> стал зелёным.
Задание: сделайте цвет ссылок а, оранжевым orange
Атрибут rel=" " и его значение stylesheet
Aтрибут rel=" " тега link указывает браузеру на то, какой тип файла будет загружаться в HTML-страницу, значение stylesheet указывает на то, что будет загружаться CSS-файл.
<link rel="stylesheet" href="style.css">
За три предыдущих урока, мы изучили три способа внедрения CSS-кода в HTML-документ:
- Внедрение с помощью атрибута style=" ", влияет на один тег, данный способ также еще называют встроенным
- Внедрение с помощью тегов <style> </style>, влияет на целую страницу, данный способ также еще называют внутренним
- Внедрение с помощью тега <lihk>, влияет на весь сайт, данный способ также еще называют внешним
Читать далее: Селекторы CSS основы
http://gabdrahimov.ru/css-slovar отсутствует
http://gabdrahimov.ru/slovar-css
спасибо, исправил