- •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 по индексу. Пример.
38 Псевдокласс :first-child. Пример.
Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
элемент:first-child { ... }
. <html>
<head>
<style type="text/css">
p:first-child {color:blue}
</style>
</head>
<body>
<p>Это параграф.</p>
<p>Это параграф.</p>
</body>
</html>
В приведенном выше примере, только первый параграф окрасится в синий цвет, поскольку в пределах родительского элемента (body) он встречается первым.
39 Псевдоклассы :link, :visited. Примеры.
Псевдокласс :link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.
a:link { ... }
Вы можете изменять стиль посещенной, непосещенной, активной ссылки и ссылки, над которой находится курсор мыши
Псевдокласс :visited применяется к ссылкам, уже посещённые пользователем, и задаёт для них стилевое оформление.
a:visited { ... }
Общий пример
a:link { color: #0000d0; /* Цвет ссылок */ }
a:visited { color: #900060; /* Цвет посещенных ссылок */ }
40 Псевдокласс :hover. Пример.
Псевдокласс :hover Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Псевдокласс :hover часто используется вместе с другими псевдоклассами :active, :link и :visited, предназначенными для задания стиля ссылкам. Причем, важен порядок описания псевдоклассов. Стилевое правило для :hover должно идти после стилевых правил для :link и :visited, чтобы псевдоклассы не перекрывали друг друга.
элемент:hover { ... }
a:hover {
background: #786b59; /* Цвет фона под ссылкой */
color: #ffe; /* Цвет ссылки */ }
41 Псевдоклассы :activate, :focus. Примеры.
Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:active { ... }
<style>
a:active { color: #f00; /* Цвет активной ссылки */ }
</style>
Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
элемент:focus { ... }
<style>
#enter .form-text:focus {
background: #ffe; /* Цвет фона */
border: 1px solid #29B0D9; /* Параметры рамки */
}
</style>
42 Псевдоклассы :first-line, :first-letter. Примеры.
Псевдоэлемент :first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
элемент:first-line { ... }
<style>
p:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
font-weight: bold; /* Жирное начертание */
}
</style>
Псевдоэлемент :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
элемент:first-letter { ... }
<style>
P:first-letter {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
} </style>