Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 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 и комбинованный стиль для тега <strong>, находящегося в рамках тега <td>.
Date: 2015-07-22; view: 494; Нарушение авторских прав