belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

1.3. Подключение CSS к html-документу

Для того, чтобы правила CSS могли быть применены к требуемым элементам html-документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе изучения языка HTML мы уже касались этого вопроса при изучении элементов 'style' и 'link', а также атрибутов style, class и id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим подробнее понятие таблицы стилей.

Таблица стилей CSS – это свод правил CSS, собранных в одном месте. Если таблица стилей находится в отдельном файле, который обычно имеет расширение .css, то этот файл называют внешней таблицей стилей, а в случае нахождения таблицы внутри элемента 'style', ее называют внутренней таблицей стилей. Имеется возможность указывать свойства CSS в качестве значения атрибута style конкретного элемента разметки, в этом случае говорят о встроенном стиле CSS.

Подключение таблиц стилей к 'html'-документу показано в примере 1.3.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
  <title>Подключение таблиц стилей к документу</title>

  <!-- Подключаем к странице две внешние таблицы стилей -->
  <link href="http://localhost/test/css/style_1.css" rel="stylesheet">
  <link href="http://localhost/test/css/style_2.css" rel="stylesheet">

	<!-- Первая внутренняя таблица стилей (для всех устройств) -->
	<style type="text/css">
		/* Подключаем еще одну внешнюю таблицу стилей */
		@import "http://localhost/test/css/style_3.css";
		
		p{
		background-color: yellow;
		color: blue;
		}
	</style>
	
	<!-- Вторая внутренняя таблица стилей для распечатки документа -->
	<style type="text/css" media="print">
		p{
		background-color: white;
		color: black;
		}
	</style>
</head>
<body>
  <!-- А здесь использован встроенный стиль -->
  <p>
	К данному <span style="color: red; font-weight: bold;">абацу</span> 
	применяется одна из встроенных таблиц стилей в зависимости от 
	устройства вывода информации.
  </p>

 <!-- Подключили класс (правило) из какой-то внешней таблицы стилей -->
 <a href="http://localhost/test/index.html" class="my_links">Домой</a>

</body>
</html>

Пример 1.3. Подключение таблиц стилей CSS к html-документу

Внешняя таблица стилей представляет собой обычный текстовый файл, в котором перечисляются все необходимые правила CSS. Для того чтобы подключить ее к требуемому html-документу, следует указать путь к файлу в качестве значения атрибута href служебного элемента 'link'. Также можно воспользоваться правилом @import, которое должно располагаться внутри контейнера 'style' или во внешней таблице стилей. Оно служит для импорта содержимого css-файла, указанного в значении данного свойства, в текущую таблицу стилей. Путь к файлу, содержащему внешнюю таблицу стилей, в этом случае указывается в формате '@import url ("path");' (кавычки разрешается опускать) или же просто в кавычках после имени свойства: '@import "path";'. При этом все правило, как и положено, должно заканчиваться точкой с запятой ';' (см. пример 1.3). После подключения к документу, внешняя таблица стилей становится доступна в пределах всего документа.

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

Стоит отдельно отметить, что внутри элемента 'style' действует синтаксис CSS, поэтому применение тегов и комментариев HTML в этой части документа запрещены.

Также не рекомендуется частое использование встроенных стилей, хотя такая возможность и предусмотрена в HTML, т.к. при этом ухудшается читабельность кода, а также усложняется поиск и правка самих стилей. Кроме того, вместо них вполне можно воспользоваться атрибутами class или id, расположив необходимое правило CSS в таблице стилей.

Контрольные вопросы и задания

  1. Что такое таблица стилей CSS?
  2. Какие бывают виды таблиц CSS? В чем их отличие?
  3. Перечислите способы подключения стилей CSS к документу.

Словарь новых английских слов

property ['prɔpəti] – свойство.
import [ˈɪmpɔːt] – импорт, импортировать.
selector [si'lektə] – искатель, отборщик.
visited [ˈvɪzɪtɪd] – посещенный.
active ['æktiv] – активный, действующий.
target [ˈtɑːɡɪt] – цель, мишень.
enabled [ɪˈneɪbl̩d] – разрешенный.
disabled [dɪsˈeɪbld] – заблокированный.
checked [tʃɛkt] – выбранный, проверенный.
empty [ˈɛm(p)ti] – пустой.
root [ruːt] – корень, основание.
odd [ɒd] – нечетный, непарный.
even [ˈiːvn] – четный.
child [tʃʌɪld] – дочерний элемент.
first [fəːst] – первый.
last [lɑːst] – последний.
only [ˈəʊnli] – только, единственный.
type [taɪp] – тип.
not [nɒt] – не, ни.
letter [ˈletər] – буква, литера.
line [laɪn] – линия, строка.
before [bɪˈfɔː] – впереди, перед.
after [ˈɑːftə] – потом, после, позади.
content [kənˈtɛnt] – содержимое.
hover [ˈhɒvə] – нависать.
strong [strɔːŋ] – сильный, крепкий.
important [ɪmˈpɔːt(ə)nt] – важный.
centimeter ['senti,mi:tə] – сантиметр.
inch [int∫] – дюйм (2,54 см).
point [pɔint] – пункт, точка.
pica [ˈpʌɪkə] – шрифт 'пика'.
percent [pəˈsent] – процент.
font [fɒnt] – комплект шрифта.
view [vjuː] – вид, смотреть.
hue [hjuː] – цвет, оттенок, тон.
saturation [satʃəˈreɪʃ(ə)n] – насыщенность.
lightness [ˈlʌɪtnəs] – освещенность, светлота.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх