- •1 Применение к документу внедренных таблиц стилей. Пример
- •2 Применение к документу связанных таблиц стилей. Пример
- •3 Применение стиля на основе селекторов. Пример.
- •4 Применение стиля при помощи style. Пример
- •5 Применение стиля при помощи class. Пример.
- •6 Применение стиля при помощи id. Пример.
- •7 Создание селекторного класса. Особенности применения селекторного класса. Пример.
- •8 Создание безселекторного класса. Особенности применения безселекторного класса. Пример.
- •10 Раскройте смысл использования пробела при наследовании стилей css. Приведите пример
- •11 Единицы измерения в css
- •12 Свойства text_decoration, text_align. Пример
- •13 Свойства text_transform, text_indent. Пример
- •14 Свойства line-height, word_spacing. Пример
- •15 Свойства letter-spacing, vertical-align. Пример.
- •16 Свойства color, background_color. Пример.
- •17 Свойства background_image, background_attachment. Пример
- •18 Свойства background_repeat, background_position. Пример
- •19 Составное свойство background. Пример.
- •20 Свойства font_family, font_style. Пример.
- •21 Свойства font-variant, font-weight. Пример.
- •22 Свойства font-family, font-size. Пример.
- •23 Составное свойство font
- •24 Свойство position, виды позиционирования
- •25 Свойства left, top, height, width. Пример.
- •26 Свойства visibility, z-index. Пример
- •27 Понятие блочный и строчный элемент. Предназначение элементов div и span.
- •29 Свойство float. Пример.
- •30 Свойство clear. Пример.
- •31 Свойства line-height, vertical-align. Пример
- •32 Свойства border-width, border-color, border-style. Пример.
- •33 Составное свойство border. Пример.
- •34 Свойства margin_top, margin_right, margin_left, margin_bottom. Пример.
- •35 Составное свойство margin. Пример.
- •36 Свойства padding_top, padding_right, padding_left, padding_bottom. Пример.
- •37 Составное свойство padding. Пример
- •38 Псевдокласс :first-child. Пример.
- •39 Псевдоклассы :link, :visited. Примеры.
- •40 Псевдокласс :hover. Пример.
- •41 Псевдоклассы :activate, :focus. Примеры.
- •42 Псевдоклассы :first-line, :first-letter. Примеры.
- •43 Псевдоклассы :before, :after. Примеры
- •48 Графический формат jpeg. Особенности.
- •49 Графический формат gif. Особенности. Черезстрочная развертка.
- •50 Графический формат png. Особенности.
- •51 Способы подключения библиотеки jQuery
- •52 Предназначение и смысл jQuery.
- •54 Обработка события загрузки документа в jQuery. Пример.
- •55 Обращение к элементам html страницы при помощи селекторов из jQuery. Пример.
- •56 Обращение к элементам html страницы из jQuery с привязкой к параметрам тегов. Пример.
- •57 Обращение к элементам html страницы из jQuery по индексу. Пример.
1 Применение к документу внедренных таблиц стилей. Пример
Внедренный стиль CSS вписывается внутри тега контейнера <style></style>, Прописывается такой контейнер между тегами <head></head> в котором мы создадим сразу несколько правил для одной страницы HTML
Все ссылки не были подчеркнуты, были зеленого цвета, а при наведении на них курсора мыши меняли свой цвет и появлялась полоса подчеркивания, заголовок страницы находился по середине страницы и имел темно желтый с коричневым оттенком цвет. В итоге получиться следующая запись:
<style>
A { text-decoration: none; color: #1b6f1c; }
A:hover { text-decoration: underline; color: #e30000; }
h2 { text-align: center; color: #d28900; }
</style>
2 Применение к документу связанных таблиц стилей. Пример
Связанные Таблицы Стилей
Между тэгами <head> и </head> необходимо вставить тэг <link>, у которого указать 3 атрибута:
href - указывает месторасположение таблицы стилей;
type - тип (text/css);
rel - связь (stylesheet).
Пример: <link href="style.css" type="text/css" rel="stylesheet">
Используется для придания всем страницам сайта одного стиля.
3 Применение стиля на основе селекторов. Пример.
В качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде.
Тег { свойство1: значение; свойство2: значение; ... }
Пример
P {
text-align: justify; /* Выравнивание по ширине */
color: green; /* Зеленый цвет текста */
}
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
* { Описание правил стиля }
Пример
* {
font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */
font-size: 96%; /* Размер текста */
}
Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.
Тег1 Тег2 { ... }
Пример
P B {
font-family: Times, serif; /* Семейство шрифта */
font-weight: bold; /* Жирное начертание */
color: navy; /* Синий цвет текста */
}
4 Применение стиля при помощи style. Пример
Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.
Пример
<style type="text/css">
h1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366; }
</style>
5 Применение стиля при помощи class. Пример.
Задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
Тег.Имя класса {свойство1: значение; свойство2: значение; …}
Пример
p.cite { /* Абзац с классом cite */
color: navy; /* Синий цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid navy; /* Граница слева от текста */
padding-left: 15px; /* Расстояние от линии до текста */ }
<p class="cite"> …</p>