Универсальный селектор
Универсальный селектор позволяет установить общие параметры форматирования для всех документа. * { font-size: 12pt; font-family: Arial; }
5.1. (X)HTML-теги. Любой (X)HTML-теги могут быть использованы в качестве селектора. Таким образом возможно указывать параметры форматирования конкретного тега. Но при этом следует учитывать специфику тега. Например, тег <br /> не содержит текст, следовательно, к нему невозможно применить правила для установки шрифта или цвета. Синтаксис: тег { свойство1: значение1; свойство2: значение2; … свойствоN: значениеN; } Пример: CSS: * { font-family: Arial; color: blue; } h1, h2, h3, h4, h5, h6 { font-family: Times New Roman; color: red; align: center; text-align: center; } strong { color: green; } HTML: … <body> Просто текст <h1>Заголовок первого уровня</h1> <p>Текст <strong>абзаца</strong></p> </body> Свойства, установленные для тегов наследуются. Например, если установить для тега body шрифт Arial и синий цвет, то этот стиль будет применен и для всех тегов, которые находятся внутри тега body. Передача свойств вложенным элементам продолжается до тех пор, пока это свойство не будет переопределено. При создании страниц часто приходится вкладывать одни теги внутрь других. CSS позволяет устанавливать форматирование для тега, который вложенный в другой тег: <тег1> <тег2>Текст</тег2> </тег1> Для того, что бы установить форматирование для тега2, который вложен в тег1 следует применять такую конструкцию: тег1 тег2 { свойство1: значение1; свойство2: значение2; … } Примеры. HTML: <body> <p> <h1> <strong>Текст1</strong> </h1> </p> <h1> <strong>Текст2</strong> </h1> </body> CSS: body { color: blue; } p h1 strong { color: red; } Классы, определяемые пользователем Классы применяются, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. Синтаксис: Тег.Имя класса { свойство1: значение; свойство2: значение; ... } Имя класса выбирается произвольно. Для того, чтобы применить описанный класс к тегу, следует добавить к соответствующему тегу параметр class=”Имя класса”. Синтаксис: <тег class=”Имя класса”>…</тег> Пример. CSS позволяет определять классы, которые можно применять к любому тегу (X)HTML. Синтаксис описания такого класса: .Имя класса { свойство1: значение; свойство2: значение; ... } Пример.
5.3. Идентификаторы, определяемые пользователем Идентификатор (ID-селектор) определяет уникальное имя элемента, которое используется для установки оформления этого элемента. Каждый идентификатор может встречаться на странице только один раз. Синтаксис: #идентификатор { свойство1: значение1; свойство2: значение2; … } Единицы измерения размеров. Различают относительные и абсолютные единицы измерения размеров.
Пример. Перечень основных свойств Цвет и фон Background Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Background-attachment Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Аргументы fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым.
Background-color Устанавливает фоновый цвет элемента.
Background-image Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.
Background-position Задает начальное положение фонового изображения, установленного с помощью параметра background-image. background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]
Background-repeat Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Аргументы no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу). repeat Фоновое изображение повторяется по горизонтали и вертикали. repeat-x Фоновый рисунок повторяется только по горизонтали repeat-y Фоновый рисунок повторяется только по вертикали Color Определяет цвет текста элемента.
Opacity Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. В качестве аргумента выступает число из диапазона [0.0; 1.0]. Границы Border Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Border-bottom Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Border-bottom-color Устанавливает цвет границы внизу элемента.
Border-bottom-style Устанавливает стиль границы внизу элемента.
Border-bottom-width Задает толщину границы внизу элемента.
Border-color Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.
Border-left Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Border-left-color Задает цвет границы слева от элемента.
Border-left-style Устанавливает стиль границы слева от элемента.
Border-left-width Задает толщину границы слева от элемента.
Border-right Параметр позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Border-right-color Задает цвет границы справа от элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.
Border-right-style Устанавливает стиль границы справа от элемента.
Border-right-width Устанавливает толщину границы справа от элемента.
Border-style Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Border-top Одновременно задает толщину, стиль и цвет границы сверху элемента.
Border-top-color Задает цвет границы сверху элемента.
Border-top-style Устанавливает стиль границы сверху элемента.
Border-top-width Устанавливает толщину границы сверху элемента.
Border-width Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.
Шрифт Font Универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
Font-family Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой.
Font-size Определяет размер шрифта элемента, который может быть установлен несколькими способами. Font-style Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Аргументы normal Обычное начертание текста. italic Курсивное начертание. Font-weight Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Также допустимо использование ключевых слов. Синтаксис font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900. Текст Letter-spacing Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут. letter-spacing: значение | normal Line-height Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. line-height: normal | множитель | значение | проценты Text-align Определяет горизонтальное выравнивание текста в пределах элемента. text-align: center | justify | left | right
Text-decoration Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел. Аргументы blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример). line-through Создает перечеркнутый текст (пример). overline Линия проходит над текстом (пример). underline Устанавливает подчеркнутый текст (пример). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. Text-indent Устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается.
Vertical-align Выравнивает элемент по вертикали относительно своего родителя или окружающего текста. vertical-align: baseline | bottom | middle | top Word-spacing Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно. word-spacing: значение | normal Списки list-style Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.
list-style-image Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.
list-style-position Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом.
list-style-type Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).
Форматирование Clear Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
Clip Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник.
Display Многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.
Float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Height Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG. Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Max-height Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height.
Max-width Устанавливает максимальную ширину элемента.
Min-height Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height.
Min-width Задает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
Overflow Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Visibility Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.
Width Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Позиционирование Bottom Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
Left Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.
Position Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Right Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.
Top Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.
Z-index Управляет размещением элементов по z-оси, что позволяет накладывать элементы друг на друга.
Отступы margin Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.
margin-bottom Устанавливает величину отступа от нижнего края элемента.
margin-left Устанавливает величину отступа от левого края элемента.
margin-right Задает величину отступа от правого края элемента.
margin-top Устанавливает величину отступа от верхнего края элемента.
Поля Padding Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Padding-bottom Устанавливает значение поля от нижнего края содержимого элемента.
Padding-left Устанавливает значение поля от левого края содержимого элемента.
Padding-right Задает значение поля от правого края содержимого элемента.
Padding-top Задает величину поля от верхнего края содержимого элемента.
Таблицы Border-collapse Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.
Border-spacing Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.
Caption-side Определяет положение заголовка таблицы, который задается с помощью тега CAPTION, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.
Empty-cells Параметр задает отображение границ и фона в ячейке, если в ней нет видимого содержания. При одновременном добавлении к таблице параметра border-collapse со значением collapse, атрибут empty-cells игнорируется.
Table-layout Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
Псевдоклассы Active Псевдокласс active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. Hover Определяет стиль элемента при наведении на него курсора мыши. Link Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление. Visited Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление.
Популярное: Генезис конфликтологии как науки в древней Греции: Для уяснения предыстории конфликтологии существенное значение имеет обращение к античной... Модели организации как закрытой, открытой, частично открытой системы: Закрытая система имеет жесткие фиксированные границы, ее действия относительно независимы... Как выбрать специалиста по управлению гостиницей: Понятно, что управление гостиницей невозможно без специальных знаний. Соответственно, важна квалификация... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (268)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |