Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






Создание каскадных таблиц стилей





Нами было достаточно сказано о причинах возникновения CSS и его возможностях. Рассмотрим формат каскадных таблиц стилей, правила их создания и способах установления связей с html - документом.

В общем виде CSS задается следующим образом:

<селектор> { <атрибут стиля №1>: <значение атрибута>; <атрибут стиля №2>: <значение атрибута>;... <атрибут стиля №N>: <значение атрибута>; }

Селектором называется формальное описание элемента, или их группы, к которому должны быть применены описанные правила стиля.

Атрибутом_стиля называется один из параметров элемента веб - страницы (в частных случаях схожи с атрибутами тегов, но следует помнить, что это разные вещи).

CSS стили отделяются друг от друга пробелами, либо символами переноса строк. Не должно быть символов ';' между различными стилями!

В описании селекторов и имен стилей не должно быть пробелов или переводов строк.

Рассмотрим возможные виды селекторов, способы их описания и представление в html - документе.

Таблица 6.2.
Селектор Оформление в CSS Оформление элемента, к которому применяется стиль в HTML Пояснения
Селектор элементов (переопределениетега) P { color: red } <p>...</p> Стиль будет применен ко всем абзацам документа. Т.е. весь текст, находящийся в рамках парного тега <p>будет выделен красным цветом.
Селектор классов (стилевой класс) .classname { color: red } <p class="classname">...</p> Стиль может быть применен к любому тегу, содержащему атрибут class, значение которого совпадает с наименованием селектора стиля.
Селектор идентификаторов (именованный стиль) #clrRed { color: red } <p id="clrRed">...</p> Стиль будет применен к любому тегу, содержащему атрибут id, значение которого совпадает с наименованием селектора стиля. В рамках одной веб страницы значение атрибута id должно быть уникальным. Т.е., фактически, данный стиль может быть применен единовременно только к одному элементу веб - страницы.
Селектор дочерних элементов #clrRed>strong { color: red } <p id="clrRed"> <strong>...</strong> </p> Стиль будет применен ко всем элементам <strong>,находящимся в дочерних отношениях с <p id="clrRed">и только к ним.
Контекстный селектор (комбинированный стиль) p strong { color: red } <p><strong>...</strong></p> Стиль будет применен к тексту, в рамках тега <strong>следующего за тегом <p>. Фактически стиль привязывается к тегу <strong>.
p.classname { color: red } <p class="classname">...</p> Стиль будет применен ко всем тегам <p>, содержащим атрибут class, значение которого равно classname.
p.classname <strong> { color: red } <p class = "classname"> <strong>...</strong></p> Стиль будет применен к содержимому тега <strong>, находящемуся внутри тега <p>. Атрибут class тега <p>, при этом, должен принимать значение classname.

Допускается создание одинаковых стилей, путем последовательного перечисления их селекторов. К примеру:

p,.classname, td strong { color: red }

В приведенном примере создается три одинаковых стиля: переопределение тега <p>, стилевой класс classname и комбинованный стиль для тега <strong>, находящегося в рамках тега <td>.

Date: 2015-07-22; view: 454; Нарушение авторских прав; Помощь в написании работы --> СЮДА...



mydocx.ru - 2015-2024 year. (0.006 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию