Группировка объявлений

2016-09-17

348

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 4 5 6 7 89

Селекторы возможно группировать в одно правило, а следовательно, также можно группировать и объявления. Предположим, необходимо, чтобы текст всех элементов H1 был представлен шрифтом Helvetica фиолетового цвета высотой в 18 пикселов на фоне цвета морской волны. Данные стили возможно написать следующим образом:

H1 {font: 18px Helvetica;}

H1 {color: purple;}

H1 {background: aqua;}

Представленный выше способ не совсем эффективен, если подобный список создается для элемента, у которого будет 10 или 15 стилей. В таком случае объявления можно сгруппировать следующим образом:

H1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

Селекторы классов

Самый распространенный способ применения стилей без учета элементов состоит в том, чтобы обратиться к селекторам классов (class selectors), позволяющих назначать стили независимо от элементов документа. Однако сначала придется изменить разметку документа так, чтобы обеспечить возможность работы селекторов класса. Для этого необходимо ввести атрибут Class. Чтобы связать стили селектора класса с элементом, необходимо присвоить соответствующее значение атрибуту Classданного элемента. В представленном ниже примере, значение warning было присвоено двум элементам: первому абзацу и элементу spanво втором абзаце.

<P Class="warning"> CSS (Cascading Style Sheets)</P>

Пример.

<P>Технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в форматах: <SPAN Class="warning">HTML, XHTML, XML. </SPAN> CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа… </P>

Допустим необходимо выделить полужирным шрифтом текст только в том случае, если предупреждением является весь абзац:

p.warning {font-weight: bold;}

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

Универсальные селекторы

Универсальные селекторы выбирают каждый элемент на странице для применения к ним стилей оформления. В HTML - документе возможна очень краткая запись, в которой имени класса предшествует точка (.), и оно может быть объединено с простым селектором:

*.warning {font-weight: bold;}

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

* {

border: 1px solid #000000;

}

Комментарии в CSS

Комментарии помещаются между символами /* и */. Комментарии можно добавлять либо между правилами, либо внутри блока свойств - например, в следующем коде CSS второе и третье свойства помещены между ограничителями комментария, так что они будут игнорироваться браузером.

Комментарии могут охватывать несколько строк, и браузер будет игнорировать эти строки:

/* Это комментарий CSS */

/* Это комментарий CSS, и он может занимать несколько строк */

Объединение CSS и HTML. Тег <LINK>

Рассмотрим применение тега <LINK>. На Рис. 3 показана общая структура ссылки на внешнюю таблицу стилей.

Рисунок 3. Общая структура ссылки на внешнюю таблицу стилей

Чтобы внешняя таблица стилей была успешно загружена, тег <LINK> должен быть размещен внутри элемента <HEAD>. Атрибут Rel отвечает за установку взаимосвязи и имеет значение stylesheet. Атрибут Typeописывает тип данных, которые будут загружаться с помощью тега <LINK>.

Далее расположен атрибут Href, значением этого атрибута является URL (Uniform Resource Locator) таблицы стилей. URL может быть абсолютным (http://www.stylesheet.com/filename.css) или относительным (filename.css).

С документом может быть ассоциирована не одна связанная таблица стилей:

<LINK Rel ="stylesheet" Type="text/css" Href="sheet1.css" />

<LINK Rel ="stylesheet” Type="text/css" Href="sheet2.css" />

Альтернативная таблица стилей

Одной из наиболее весомых причин в пользу использования связанных через тег <LINK> таблиц стилей является возможность использования альтернативных стилей для клиентов. Такие браузеры, как Firefox и Opera поддерживают атрибут Rel="alternate stylesheet" и, когда есть возможность, позволяют пользователям переключаться между таблицами стилей.

Элемент <STYLE>

Элемент <STYLE> – это единственный способ включение таблиц стилей, которые располагаются в самом документе:

<STYLE Type="text/css">

Далее следуют один или несколько стилей, и все завершается закрывающим тегом </STYLE>.

Директива @import

Данная директива находится внутри тега <STYLE>. На Рис.4 показана общая структура команды @import.

Рисунок 4. Общий синтаксис импортирования внешней таблицы стилей

Единственное основное отличие заключается в синтаксисе и размещении команды. Директива @import должна располагаться в контейнере <STYLE> и перед всеми остальными правилами CSS:

<STYLE Type="text/css">

@import url(sheet2.css);

@import url(http://www.stylesheet.com/sheet.css);

H1 {color: green;}

</STYLE>

С точки зрения стандартов нет разницы между ссылкой на внешние таблицы стилей или их импортом.

Свойства цвета и фона

Обозначение	Описание	Возможные значения
color	цвет текста	любое соответствующее стандарту значение цвета (название цвета или с помощью цветовой модели RGB)
background-color	цвет фона	любое соответствующее стандарту значение
background-image	рисунок в качестве фона	указывается имя файла background-image: url(имя файла)
background-repeat	повторяемость для фона заданного изображением	по горизонтали:repeat-x по вертикали:repeat-y не повторяется: no-repeat по умолчанию повторение и по горизонтали и по вертикали
background-attachment	неподвижность фона при прокрутке	Fixed(неподвижность фона) по умолчанию фон прокручивается
background-position	положение изображения относительно верхнего левого угла элемента	задается в процентах от размера элемента (первое число – смещение по горизонтали, второе по вертикали)

2016-09-17

348

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 4 5 6 7 89

Обсуждение в статье: Группировка объявлений

Обсуждений еще не было, будьте первым... ↓↓↓