- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 10. Карта сайта. 41
- •Тема 11. Таблицы стилей. 45
- •Введение.
- •Тема 1. СтруктураHtml-документов.
- •1.1. Границы документа.
- •1.2. Заголовок документа.
- •1.3. Тело документа.
- •Тема 2. ФорматированиеHtml-документов.
- •2.4. Предварительно отформатированный текст.
- •Тема 3. Форматирование текстаHtml-документов.
- •3.1. Логическое форматирование.
- •3.2. Физическое форматирование.
- •Тема 4. Использование графики вHtml-документах.
- •4.1. Выбор формата графического файла.
- •4.2. Вставка изображения в документ.
- •Тема 5. Ссылки вHtml-документах.
- •5.1. Гипертекст и гипермедиа.
- •5.2. Создание ссылок на документы и файлы.
- •5.3. Ссылки внутри документа.
- •Тема 6. Списки в html-документах.
- •6.6. Дополнительные возможности форматирования списков.
- •Тема 7. Таблицы вHtml-документах.
- •7.1. Основы построения таблиц.
- •7.2. Создание сложной таблицы.
- •7.3. Альтернативные способы представления табличных данных.
- •Тема 8. Кадры (фреймы) вHtml-документах.
- •8.1.Основы создания кадров.
- •8.2. Модификация внешнего вида кадров.
- •8.3. Организация ссылок в кадрах.
- •Тема 9. Формы вHtml-документах.
- •9.1. Что такое формы.
- •9.1.1. Типы управляющих элементов
- •9.2. Работа с формами.
- •9.3. Разработка форм.
- •9.3.1. Элемент input.
- •9.3.2. ЭлементButton.
- •9.3.3. Элементы select, optgroup и option
- •9.3.4. Заранее выбранные варианты
- •9.3.5. ЭлементTextarea
- •9.3.6. Метки.
- •9.3.6.1. Элемент label.
- •9.3.7. Переход фокуса на элемент.
- •9.3.7.1.Переход с помощью клавиши Tab.
- •9.3.7.2. Клавиши доступа.
- •9.3.8.Отправка формы.
- •9.3.8.1. Метод отправки формы.
- •9.3.8.2. Успешные управляющие элементы.
- •9.3.9.Обработка данных формы.
- •Тема 10. Карта сайта.
- •Тема 11. Таблицы стилей.
- •11.1. Псевдоклассы и псевдоэлементы:
- •11.2. Краткое описание языка css.
- •11.3. Некоторые хитрости управления стилями.
- •Приложение 1.Цвета.
11.1. Псевдоклассы и псевдоэлементы:
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль.
Синтаксис: селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }
Список псевдоклассов и псевдоэлементов :
Псеводоклассы ссылок - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. active (активная ссылка)
visited (посещенный ранее URL)
hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в NN).
Псевдоэлементы первой строки. Может быть использован с block-level элементами (p, h1 и т.д.).Изменяет стиль первой строки этих элементов.
Псевдоэлементы первой буквы. Влияет не на всю строку, а только на первый символ.
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все ссылки будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
11.2. Краткое описание языка css.
Свойства шрифта
font-family
это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя ПРИМЕР:font-family:Arial Black URL('arialblack.ttf')
font-style (normal, italic) Стиль элемента. Курсивный или обычный ПРИМЕР:font-style:italic
font-variant (normal-нормальный, small-caps-заменяет все строчные буквы на заглавные)Варианты отображения шрифта. Нетскейп не поддерживает это свойство ПРИМЕР:font-variant:small-caps
font-weight (normal-нормальный, bold-жирный, bolder-очень жирный, lighter-тонкий, 100-900-точная установка)Выделение (жирность) элемента ПРИМЕР:font-weight:bold
font-size (XX%, XXpt, XXpx)Размер шрифта ПРИМЕР:font-size:30pt
font (family, style, variant, weight, size) Объединяет все вышеизложенные свойства. ПРИМЕР:font: italic bolder Arial 12pt
Свойства текста.
text-decoration (none, underline-подчеркнутый, overline-надчеркнутый, line-through-перечеркнутый, blink-мигающий)Стиль текста ПРИМЕР:text-decoration:line-through
letter-spacing (XX-число)Расстояние между буквами ПРИМЕР:letter-spacing:100
vertical-align (baseline, sub, super, top-text, top, middle, bottom, bottom-text, процент) Расположение элементов по отношению к другим элементам стоящих в одном ряду. ПРИМЕР:vertical-align:top-text
text-transform (Capitalize-каждое слово начинается с большой буквы, UPPERCASE - каждая буква текста становится заглавной, lowercase - каждая буква текста становится маленькой. ПРИМЕР:text-transform:Capitalize
text-align (left, right, center, justify)Выравнивание текста. ПРИМЕР:text-align:right
text-indent (ед.длины или процент)Отступ текста. ПРИМЕР:text-indent:30 em
line-height (ед.длины или процент) Отступ сверху. ПРИМЕР:line-height:100%
Свойства цвета.
color (#RRGGBB). Цвет элемента ПРИМЕР: color # f00000
backgroung-color (#RRGGBB) Цвет фона элемента ПРИМЕР:background-color:#f00000
background-image (URL)Фоновое изображение ПРИМЕР:background-image:URL("img.gif")
background-repeat (repeat - размножает фоновое изображение во всех направлениях, repeat-x - размножает фоновое изображение горизонтально, repeat-y - размножает фоновое изображение вертикально, no-repeat - не повторяющиеся изображение)Повтор фонового изображения ПРИМЕР:background-repeat:no-repeat
background-attachment (scroll-скроллинг фонового изображения вместе с документом, fixed-фиксация фонового изображения)Режим прокрутки фонового изображения. ПРИМЕР:background-attachment:fixed
background-position (%от ширины+%от высоты; top, middle, bottom; left, center, right; расстояние от левого края+расстояние от верхнего края)Положение фонового изображения ПРИМЕР:background-position:50%0%
background (color, image, position, attachment, repeat)Объединяет все вышеизложенные свойства. ПРИМЕР:background:no-repeat black fixed 50%0%
Свойства границ.
margin-top (длина, процент, auto) Отступ сверху ПРИМЕР:margin-top:100
margin-right (длина, процент, auto) Отступ справа ПРИМЕР:margin-right:100%
margin-bottom (длина, процент, auto) Отступ снизу ПРИМЕР:margin-bottom:100em
margin-left (длина, процент, auto) Отступ слева ПРИМЕР:margin-left:100pt
margin (top, right, left, bottom) Объединяет все вышеизложенные свойства. ПРИМЕР:background:100pt
padding-top (длина, процент) Отступ от верхней границы ПРИМЕР:padding-top:100pt
padding-right (длина, процент) Отступ от правой границы ПРИМЕР:padding-right:100%
padding-bottom (длина, процент) Отступ от нижней границы ПРИМЕР:padding-bottom:100em
padding-left (длина, процент) Отступ от левой границы ПРИМЕР:padding-top:100
padding (left, right, top, bottom) Объединяет все вышеизложенные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единый отступ для всех сторон, если два - то задаются различные отступы для прилежащих сторон, а если четыре - то задаются индивидуальные отступы для всех сторон.
ПРИМЕР:padding:100px
border-top-width (длина, thin, medium, thick) толщина верхней границы ПРИМЕР:border-top-width:100pt
border-right-width (длина, thin, medium, thick) толщина правой границы ПРИМЕР:border-right-width:thick
border-bottom-width (длина, thin, medium, thick) толщина нижней границы ПРИМЕР:border-bottom-width:100em
border-left-width (длина, thin, medium, thick) толщина левой границы ПРИМЕР:border-left-width:medium
border-width (top-width, right-width, left-width, bottom-width) Объединяет все вышеизложенные свойства. Можно задать несколько значений одновременно (до четырех) для разных границ. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон ПРИМЕР:border-width: 15pt
border-color (цвет) Цвет рамки. ПРИМЕР:border-color:green
border-style Стиль рамки. Можно задать несколько значений одновременно (до четырех) для разных границ. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре - то задаются индивидуальные стили для всех сторон
ПРИМЕР:border-style: dotted groove
border-top (width, style, color) Объединяет все вышеизложенные свойства для верхней границы. ПРИМЕР:border-top: 100em red groove
border-right (width, style, color) Объединяет все вышеизложенные свойства для правой границы. ПРИМЕР:border-right: 5pt magenta solid
border-left (width, style, color) Объединяет все вышеизложенные свойства для левой границы. ПРИМЕР:border-left: 15pc coral inset
border-bottom (width, style, color) Объединяет все вышеизложенные свойства для левой границы. ПРИМЕР:border-bottom: 30 orange outset
border (width, style, color) Объединяет все вышеизложенные свойства. ПРИМЕР:border: thik black double
width (длина, процент) Ширина элемента ПРИМЕР:width:10%
height (длина, процент) Высота элемента ПРИМЕР:height:100pt
float (left, right) Расположение элемента ПРИМЕР: float:right
clear (left, right, both) Расположение других элементов вокруг данного ПРИМЕР:clear:both
Классификация.
display (none-не отображается, block-разбивает строку до и после элемента, inline-не разбивает строку , list-item-разбивает линию строку до и после элемента + добавляет маркер как у элементов списка)Определяет, как будет отображаться элемент списка ПРИМЕР:display:none
white-space (normal - "сжимает" несколько подряд идущих пробелов в один, pre - допускает отображение несколькольких подряд идущих пробелов, nowrap - не допускает перенос строки без тега <BR>) Определяет, как будут отображаться пробелы между элементами ПРИМЕР:white-space:nowrap
list-style-type (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha) определяет вид маркера элемента списка. ПРИМЕР:list-style-type:lower-alpha
list-style-image (URL) задает вид маркера элемента списка в виде картинки ПРИМЕР: list-style-image:URL (cool.gif)
list-style-position (inside, outside) Определяет положение маркера в зависимости от элемента списка ПРИМЕР:list-style-position:inside
list-style (type, position, image) Объединяет все вышеизложенные свойства. ПРИМЕР:list-style:inside