- •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 по индексу. Пример.
6 Применение стиля при помощи id. Пример.
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
#Имя идентификатора {свойство1: значение; свойство2: значение; …}
Пример
#help {
padding: 5px; /* Поля вокруг текста */
background: #f0f0f0; /* Цвет фона */
}
<div id="help">…</div>
7 Создание селекторного класса. Особенности применения селекторного класса. Пример.
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
P.cite { /* Абзац с классом cite */
color: navy; /* Цвет текста */
margin-left: 20px; /* Отступ слева */ }
В качестве селектора используется класс, привязанный к определенному тегу (например, p.first {...})
8 Создание безселекторного класса. Особенности применения безселекторного класса. Пример.
Использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса { свойство1: значение; свойство2: значение; ... }
.term { border-bottom: 1px dashed red; /* Подчеркивание под текстом */ }
<b class="term">…</b>р
А здесь - класс, но БЕЗ тега ( .first {..})
9 Раскройте смысл использования знака > при наследовании CSS. Приведите пример.
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности.
пример:
DIV I { /* Контекстный селектор */
color: green; /* Зеленый цвет текста */
}
P > I { /* Дочерний селектор */
color: red; /* Красный цвет текста */
}
10 Раскройте смысл использования пробела при наследовании стилей css. Приведите пример
Для одного элемента можно указать несколько классов через пробел.
.red {color: #f33;}
.bold {font-size: 20px;}
<p class="red bold">жажажа</p>
выведет красную "жажу" размером 20px
11 Единицы измерения в css
Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами
em Высота шрифта текущего элемента
ex Высота символа x
px Пиксел
% Процент
Абсолютные единицы
Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом.
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)
12 Свойства text_decoration, text_align. Пример
text_decoration
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
text-decoration: [ blink | line-through | overline | underline ] | none | inherit
blinkУстанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример).
line-throughСоздает перечеркнутый текст (пример).
overlineЛиния проходит над текстом (пример).
underlineУстанавливает подчеркнутый текст (пример).
Пример
a { text-decoration: none; /* Убираем подчеркивание у ссылок */ }
text_align Определяет горизонтальное выравнивание текста в пределах элемента.
text-align: center | justify | left | right | inherit
Пример
#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; } </style>
