Css внешняя таблица стилей заканчивается со строкой: CSS: Внешняя таблица стилей

Leave a Comment / Css / By /

Внешние таблицы стилей в CSS: понятие и характеристика

Вы здесь

Главная → Блог → CSS → Внешние таблицы стилей в CSS: понятие и характеристика

Раздел: 

Таблицы внешних стилей обеспечивают наиболее рациональный и удобный способ привязки страницы CSS к HTML-документу. Сущность данной операции главным образом заключается в собрании CSS стилей в отдельном файле.

Представление внешней таблицы стилей

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

Документ css включает в себя только кодировку стилей веб ресурса и комментарии к ним (комментарии оставляют программисты для удобства работы с кодом). Если в файле будет прописана некоторая html-кодировка, которая отвечает за структуру сайта, то считывание документа css может быть нарушено.

Подключение с link

Оператор link обеспечивает привязку css-документа, а именно таблицы внешних стилей с html-документом. Также стоит отметить, что принципиально важно размещение тега link. Он располагается в родительском теге head. Также допускается присутствие двух и более тегов link на странице.

Пример:

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

В данной строке присутствуют 3 атрибута, присущих тегу link. Первый из них — rel. Он обеспечивает связь между файлами и чаще всего имеет значение stylesheet. Следом идет атрибут type, который присваивает определенный тип документу связи. Для таблиц стилей используется тип text/css. Ну и в конце следует оператор относительной или абсолютной ссылки к CSS-документу —

href.

Также стоит отметить существование атрибута media. Данный атрибут позволяет подключать индивидуальные таблицы стилей к документу. К примеру особая таблица стилей для печатного устройства выводв подключается так:

<link rel="stylesheet" type="text/css" href="css/style. css" /> <!--ведущий CSS-->
<link rel="stylesheet" type="text/css" href="css/printing.css" media="print" />
<!--вспомогательный CSS для вывода особых стилей на устройствах печати-->

Подключение условного комментирования с помощью вспомогательного файла CSS:

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/comment.css"/>
<![endif]-->

Положительные стороны использования внешнего CSS

  • Использование внешних таблиц стилей значительно упрощает и оптимизирует работу робота с интернет ресурсом.
  • Первое, что следует отметить — значительное сокращение объема команд CSS. Также несомненным плюсом вложенного файла CSS является возможность использования одного файла с правилами для неограниченного количество файлов html. Это облегчает работу программиста в случае внесения каких-либо изменений в оформление сайта.
  • Также использование внешних таблицей стилей позволяет разбить правила на логические блоки, которые будут присваиваться для определенных частей контента. При чем файлов CSS может быть несколько. С одной стороны это уменьшает объем файла с правилами, однако с другой стороны это увеличивает количество обращений сервера к данным файлом. Это приводит к ухудшению показателя быстродействие интернет ресурса.
  • Еще одно достоинство вложенных CSS-файлов заключается в том, что можно создавать индивидуальный комплекс правил для определенных браузеров. Для этого и существует операция подключения условного комментирования. Это обычно используется при создании кросбраузерной верстки под старые версии IE.

Ключевые слова: 

Подключение CSS в документ

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

Селекторы CSS | Pro jQuery

Pro jQuery

Адам Фриман

3.4. Определение внешней таблицы стилей

Обратите внимание, что селекторы в CSS для цветочного магазина различны по своей природе. Некоторые из них являются именами элементов (как h2 и input), другие начинаются с точки (такие как . dtable и .row), а остальные начинаются с решетки (

#butonDiv и #oblock). Если вы очень внимательный читатель, вы заметили, что один из селекторов состоит из нескольких компонентов: .dcell > *. Каждый селектор CSS выбирает элементы в документе, а различные по своей сути селекторы говорят браузеру, каким именно образом нужно искать определенный элемент. В этом разделе я опишу различные виды селекторов, которые используются в CSS. Мы начнем с базовых селекторов (называемых также универсальными селекторами), которые собраны в таблице 3-3.

Таблица 3-3: Базовые селекторы
Селектор Описание
* выбирает все элементы
<type> выбирает элементы определенного типа
.<class> выбирает элементы определенного класса (независимо от типа элемента)
<type>. <class> выбирает элементы определенного типа, которые являются членами определенного класса
#<id> выбирает элементы с конкретным значением атрибута id

Эти селекторы очень широко используются (к примеру, они покрывают практически все стили, которые я определил в нашем примере).

Выбор по атрибуту

Несмотря на то, что базовые селекторы работают над атрибутами id и class (которые я описал в главе 2), существуют также селекторы, которые позволяют работать с любыми атрибутами. Они описаны в таблице 3-4.

Таблица 3-4: Селекторы атрибутов
Селектор Описание
[attr]
выбирает элементы с атрибутом attr, независимо от значения, данного атрибуту
[attr="val"] выбирает элементы с атрибутом attr, значение этого атрибута = val
[attr^="val"] выбирает элементы с атрибутом attr, значение этого атрибута начинается со строки val
[attr$="val"] выбирает элементы с атрибутом attr, значение этого атрибута заканчивается строкой val
[attr*="val"] выбирает элементы с атрибутом attr, значение этого атрибута содержит строку val
[attr~="val"] выбирает элементы с атрибутом attr, значение этого атрибута содержит много значений, одно из которых = val
[attr|="val"] выбирает элементы с атрибутом attr, значение этого атрибута – это разделенный дефисами список значений, первое из которых = val

В листинге 3-7 показан простой документ со встроенным стилем, чей селектор основан на атрибутах.

Листинг 3-7: Использование селекторов атрибутов

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		[lang] { background-color: grey; color: white; }
		[lang="es"] { font-size: 14px; }
	</style>
</head>
<body>
	<h2 lang="en">New Delivery Service</h2>
	<h3 lang="en">Color and Beauty to Your Door</h3>
	<h3 lang="es">(Color y belleza a tu puerta)</h3>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Первый селектор соответствует любому элементу, у которого есть атрибут lang, второй селектор подойдет элементу, значение атрибута lang которого равно es. Применение этих стилей отражено на рисунке 3-6.

Рисунок 3-6: Применение стилей с использованием атрибутивных селекторов

Примечание

На этом рисунке можно отметить одну важную вещь. Стоит обратить внимание, как эти стили повлияли на внешний вид элемента h3. Первый стиль применялся ко всем элементам с атрибутом lang. Второй стиль применялся ко всем элементам с атрибутом lang, значение которого равно es. Второй элемент h3 в нашем документе соответствует обоим этим критериям и поэтому значения для свойств background-color, color, и font-size изменились. Более подробно я расскажу об этом далее в этой главе в разделе «Каскадность стилей».

Выбор по виду отношений

В главе 2 я рассказывал, что элементы (а также объекты, представляющие их в DOM) имеют иерархию, что приводит к различному виду отношений между ними. В CSS есть селекторы, которые позволяют выбрать элементы, основываясь на этих отношениях, см. таблицу 3-5.

Таблица 3-5: Селекторы по виду отношений
Селектор Описание
<selector> <selector> выбирает элементы, которые соответствуют второму селектору и которые являются потомками элементов, соответствующих первому селектору
<selector> > <selector> выбирает элементы, которые соответствуют второму селектору и которые являются дочерними элементами для элементов, соответствующих первому селектору
<selector> + <selector> выбирает элементы, которые соответствуют второму селектору и которые являются следующими сестринскими элементами для элемента, соответствующего первому селектору
<selector> ~ <selector> выбирает элементы, которые соответствуют второму селектору и которые являются сестринскими элементами для элемента (и появляются после), соответствующего первому селектору

Один из этих селекторов я использовал в примере документа цветочного магазина:


. dcell > * {vertical-align: middle}

Этот селектор соответствует всем дочерним элементам тех элементов, которые принадлежат классу dcell. А для свойства vertical-align устанавливается значение middle. В листинге 3-8 показаны некоторые другие использующиеся селекторы по виду отношений.

Листинг 3-8: Использование селекторов по виду отношений

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		h2 ~ [lang]
		{
			background-color: grey;
			color: white;
		}
		h2 + [lang]
		{
			font-size: 12px;
		}
	</style>
</head>
<body>
	<h2 lang="en">New Delivery Service</h2>
	<h3 lang="en">Color and Beauty to Your Door</h3>
	<h3 lang="es">(Color y belleza a tu puerta)</h3>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs.  We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Оба селектора, которые я использовал в данном примере, являются сестринскими. Первый селектор, тот, в котором использован знак тильды (~) , соответствует любому элементу, у которого есть атрибут lang, который появляется после и является сестринским элементом для элемента h2. Для нашего примера это обозначает, что будут выбраны оба элемента h3 (поскольку у них есть нужный атрибут, они являются сестринскими и появляются после элемента

h2). Второй селектор, в котором использован знак плюса, схож с первым, но соответствует только ближайшему последующему сестринскому элементу элемента h2. Это обозначает, что будет выбран только первый элемент h3. Результат можно увидеть на рисунке 3-7.

Рисунок 3-7: Использование сестринских селекторов

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

CSS поддерживает целый набор селекторов псевдоэлементов и псевдоклассов. Они обеспечивают нужную функциональность, которая напрямую не соотносится с конкретным элементом или классам в документе. Эти селекторы описаны в таблице 3-6.

Таблица 3-6: Псевдоселекторы
Селектор Описание
:active
выбирает элементы, которые на текущий момент активированы пользователем. Как правило, имеются ввиду те элементы, которые находятся под курсором мыши при нажатой кнопке мыши
:checked определяет выбранные элементы (чекбоксы и радиобаттоны)
:default выбирает элементы по умолчанию
:disabled выбирает элементы в отключенном состоянии
:empty выбирает элементы без дочерних элементов
:enabled выбирает элементы, когда они находятся во включенном состоянии
:first-child выбирает элементы, которые являются первыми дочерними элементами у своего родительского элемента
:first-letter выбирает первую букву блока текста
:first-line
 выбирает первую строку блока текста
:focus выбирает элемент, находящийся в фокусе
:hover выбирает элемент, находящийся на экране под курсором мыши (элемент с наведенной мышью)
:in-range
:out-of-range		 выбирает элементы input, если их значения находятся в заданной границе либо за пределами заданной границы соответственно
:lang(<language>) выбирает элемент на основание значения атрибута lang
:last-child выбирает элемент, являющийся последним дочерним элементом у родителя
:link выбирает элементы link
:nth-child(n) выбирает определенный по счету от начала дочерний элемент определенного родительского элемента
:nth-last-child(n) выбирает определенный по счету с конца дочерний элемент определенного родительского элемента
:nth-last-of-type(n) выбирает определенный по счету с конца элемент, начиная от последнего элемента данного типа
:nth-of-type(n) выбирает определенный по счету от начала элемент этого типа
:only-child выбирает элементы, если они являются единственными дочерними элементами у родителя
:only-of-type выбирает элемент, если это элемент уникального типа внутри родительского элемента
:required
:optional		 выбирает элементы input в зависимости от наличия атрибута required
:root
выбирает корневой элемент документа
:target выбирает элемент, идентификатор (id) которого ссылается на фрагмент URL
:valid
:invalid		 выбирает input элемент, валидный или не валидный, основываясь на валидации введенных данных в форму
:visited выбирает элементы link, посещенные пользователем

В листинге 3-9 показано использование некоторых псевдоселекторов.

Листинг 3-9: Использование псевдоселекторов.
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		:nth-of-type(2)
		{
			background-color: grey;
			color: white;
		}
		p:first-letter
		{
			font-size: 40px;
		}
	</style>
</head>
<body>
	<h2 lang="en">New Delivery Service</h2>
	<h3 lang="en">Color and Beauty to Your Door</h3>
	<h3 lang="es">(Color y belleza a tu puerta)</h3>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter. </p>
</body>
</html>

Псевдоселекторы можно использовать самостоятельно или в качестве модификаций к другим селекторам. В примере я использовал оба этих варианта. Первый селектор подходит любому элементу, который является вторым элементом своего типа. Второй селектор применим к первой букве содержания любого элемента p. Применение этих стилей можно увидеть на рисунке 3-8.

Рисунок 3-8: Использование псевдоселекторов для применения стилей

Группировка селекторов и селектор отрицания

Можно сделать код более гибким, объединяя селекторы. А конкретнее, можно создавать группировки селекторов, объединяя их, а также менять порядок выборки при помощи отрицания. Оба этих метода описаны в таблице 3-7.

Таблица 3-7: Объединенные селекторы
Селектор Описание
<selector>, <selector> выбирает группу элементов, соответствующих первому селектору, и группу элементов, соответствующих второму селектору
:not(<selector>) выбирает элементы, которые не соответствуют указанному селектору

В листинге 3-10 показано, как можно создавать группировки селекторов и пользоваться селектором отрицания.

Листинг 3-10: Использование объединенных селекторов и селектора отрицания

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		h2, h3
		{
			background-color: grey;
			color: white;
		}
		:not(html):not(body):not(:first-child)
		{
			border: medium double black;
		}
	</style>
</head>
<body>
	<h2 lang="en">
		New Delivery Service</h2>
	<h3 lang="en">
		Color and Beauty to Your Door</h3>
	<p>
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter. </p>
</body>
</html>

Первый селектор в этом примере – это группировка селекторов h2 и h3. Как вы догадались, он относится ко всем элементам h2 и h3 в документе. Второй селектор более сложный. Я показал вам, как можно использовать псевдоселекторы для модификации других псевдоселекторов, включая селектор отрицания:


:not(html):not(body):not(:first-child) {border: medium double black;}

Этот селектор подходит любому элементу, который не является html элементом, не является body элементом и не является первым дочерним элементом у своего родителя. На рисунке 3-9 видно, каким образом были применены стили в нашем примере.

Рисунок 3-9: Создание группировки селекторов и использование селектора отрицания

3.6. Каскадирование стилей

или RSS канал:

Советы по CSS: Расположение таблиц стилей

К тому времени, когда вы опубликуете свой первый многостраничный сайт (например, ваш промежуточный обзор сайта в coms326), вы должны знать три основных места для стилей CSS: встроенные стили, встроенные таблицы стилей и внешние таблицы стилей.

  • Встроенный : Да, если вы хотите иметь один поворот заголовка красный, вы можете встроенный стиль, добавив стиль="цвет:красный;" по один элемент HTML, например:

    Вторичный заголовок
    Заголовки с тегом H, по умолчанию, появляться более крупным шрифтом и с новой строки.
    Если вам нужно всего одно слово или фраза в средней линии чтобы иметь особый стиль, вы можете использовать встроенный HTML-тег с атрибутом стиля или с именем класса:
    Студентам рекомендуется Дать Кровь
  • Встроенный : Если вы хотите все страницы заголовки должны быть красными, это мощнее встроить всю таблицу стилей в заголовке вашего документа и изменить стиль всех h3 элементы оттуда… Вы также можете создавать новые классы стилей с любым именем: