 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Синтаксис стиля
Использование CSS в HTML
Ранее для форматирования HTML документов мы использовали атрибуты, которые определяли цвет, выравнивание, шрифты, размеры и т.п. Например, для того, чтобы представить любой отрывок текста жирным выделением, красного цвета, большого размера необходимо было прибегнуть к конструкции типа:
<B><FONT color="red" size="5">текст</FONT></B>
при создании документов большого объема, такое форматирование требует вставлять такую конструкцию всякий раз, когда необходимо выделить текст. Обилие форматирующих тэгов значительно увеличивает размер файла, а следовательно увеличивает длительность загрузки документа.
Решение – использовать таблицы стилей. Суть метода заключается в предварительном задании стиля для любого из элементов документа. Например, назначив один раз, приведенный в примере стиль для тэга <B>, он будет представлен в заданном виде. Сокращается размер кода, смена дизайна сводится к изменению только параметров стиля. Кроме того, в CSS реализована возможность задавать стиль в отдельном файле, подключаемом ко многим страницам сайта одновременно, и изменять их внешний вид редактированием одного лишь этого файла.
Синтаксис стиля
Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:
Синтаксис: селектор {атрибут: значение}
Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=". Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:
H2 {color: red}
| тэги | Пример: P {color: red} стиль применяется к тэгу <P> |
| тэги потомков | Пример: H1 B {color: red} стиль применяется к тэгу <B>, находящемуся внутри заголовка первого уровня, т.е. являющимся его потомком |
| дочерние тэги | Пример: OL>LI {color: red} стиль применяется к тэгу <LI>, который является дочерним элементом для тэга <OL>, т.е. на тэги <LI>, которые являются дочерними элементами для тэга <UL> стиль не распространяется |
| сестринские тэги | Пример: H1+H2 {margin-top: -5mm} стиль применяется к сестринским тэгам <H1> и <H2>, которые являются дочерними по отношению к одному и тому же родительскому тэгу, например <BODY>, в данном случае уменьшает разрыв между ними |
| атрибуты тэгов | Пример: DIV[class=red] {color: red } стиль применяется ко всем элементам, включенным в <DIV>, у которых атрибут class равен red |
| ID | Пример: P#12 {color: red } стиль применяется к тэгу <P>, у которого идентификатор ID равен 12 |
| классы | Пример:.red {color: red} стиль применяется к любомым тэгам, у которых атрибут class равен red |
| псевдоклассы | Пример: A:visited {color: red } стиль применяется к посещенному тэгу <A>. |
В том случае, если свойств у тэга предположительно много, то их разделяют точкой с запятой:
H2 {color: red; font-size: 15pt}
Если какой либо тэг в документе вставлен внутри другого тэга, то он наследует все его свойства, и для того, чтобы задать ему особые свойства необходимо использовать следующий синтаксис:
H3 B {color: green}
Здесь назначается зеленый цвет для текста выделенного тэгами <B> и </B>, если он является заголовком третьего уровня.
Поиск по сайту: