Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

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}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега <link> (связь). Тег <link> многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head></head> и не выводится браузерами на экран.

Тег <link> имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

  • shortcut icon - Определяет, что подключаемый файл является иконкой.
  • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml - Файл в формате XML для описания ленты новостей.

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

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

<link rel="stylesheet" href="mystyle.css" type="text/css">

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>каскадная таблица стилей</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h2>Меню:</h2>
<a href="index.html">Всё о слонах.</a>
<a href="elephant.html">Купить слона.</a>
<a href="elephant1.html">Взять слона на прокат.</a>
<hr>
<h1>Всё о слонах</h1>
<p>На этом сайте Вы найдёте любую информацию о слонах.</p>
</body>
</html>

Файл elephant.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>каскадная таблица стилей</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h2>Меню:</h2>
<a href="index.html">Всё о слонах.</a>
<a href="elephant.html">Купить слона.</a>
<a href="elephant1.html">Взять слона на прокат.</a>
<hr>
<h1>Купить слона</h1>
<p>У нас Вы можете по выгодным ценам приобрести лучших слонов!!</p>
</body>
</html>

Файл elephant1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>каскадная таблица стилей</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h2>Меню:</h2>
<a href="index.html">Всё о слонах.</a>
<a href="elephant.html">Купить слона.</a>
<a href="elephant1.html">Взять слона на прокат.</a>
<hr>
<h1>Взять слона на прокат</h1>
<p>Только у нас Вы можете взять любых слонов на прокат!!</p>
</body>
</html>

Смотреть пример

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

О том как присвоить какой либо группе идентичных элементов стиль отличающийся от основного стиля данного элемента, сделать отдельный класс элементов, читайте в главе Классы и идентификаторы.

Полезные советы:

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

  • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
  • Используйте тег <style> со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.
  • В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.

Глава 2

Свойства текста.

В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.

Ну поехали..

Поделиться:





Читайте также:

Важно сосредоточиться на внешнем
Вопрос 12. Понятие, научные основы и значение криминалистической идентификации человека по внешнему облику.
Депозитарий с первым типом депозитарного учета, когда один из филиалов депозитария является “головным” по отдельному выпуску ценных бумаг
Депозитарий с распределенным учетом, где один из филиалов является «головным» по отдельному выпуску ценных бумаг
Именно это делали и делают все мастера. Они судят не по внешнему виду, они поступают согласно тому, что они знают.
Кипение жидкости происходит при одинаковой температуре всей жидкости, когда давление насыщенного пара этой жидкости равно внешнему давлению.
ЛУЧЕВАЯ БОЛЕЗНЬ ПРИ ВНЕШНЕМ И ВНУТРЕННЕМ ОБЛУЧЕНИИ
О внешнем виде лиц, о супружестве, одеянии, жилищах и имуществе их
Общие требования к внешнему виду линейного персонала и стажеров






Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...