 |
Практическое занятие №11 посвящено изучению и использованию стилей
|
|
|
|
Как уже упоминалось в первом занятии оформление HTML-документа и его элементов рекомендуется описывать с помощью таблицы стилей. Для этого необходимо познакомиться со свойствами стилей и их значениями, представленными в таблице 16.
Таблице 16. Свойства стилей.
| Свойство | Значение | Описание | Категория | Наследование |
| background-attachment | Fixed scroll | Фиксирует изображение Прокручивает изображение | background | Нет |
| background-color | Табл. 17 | Цвет фона элемента | background | Нет |
| Background-image | URL | Изображение для фона | background | Нет |
| Background-position | x y | Позиция для фонового изображения | background | Нет |
| Background-repeat | repeat repeat-x repeat-y no-repeat | Размножение фонового изображения на элемент: по горизонтали и вертикали; по горизонтали; по вертикали; не размножает. | background | Нет |
| Border-bottom-width | Табл. 18 | Ширина рамки снизу от элемента | border | Нет |
| Border-left-width | Табл. 18 | То же, слева | border | Нет |
| Border-top-width | Табл. 18 | То же, сверху | border | Нет |
| Border-right-width | Табл. 18 | То же, справа | border | Нет |
| Border-color | Табл. 17 | Цвет рамки | border | Нет |
| Border-style | Табл. 19 | Стиль рамки: задаётся стиль рамки со всех сторон. Одно значение, если стиль со всех сторон одинаковый | border | Нет |
| clear | both Left Right none | Запрет плавающих элементов: с обеих сторон, слева, справа, отмена запрета | Нет | |
| color | Табл. 17 | Да | ||
| float | Left Right none | Положение элемента при условии обтекания его другими элементами: слева, справа, без обтекания | Нет | |
| font-family | Список гарнитур | Определяет список гарнитур шрифта. Можно использовать конкретные названия гарнитур или обобщённые (табл. 21), которые ставят в конце списка. Названия из двух и более слов заключают в кавычки. | font | Да |
| font -size | значение | Размер шрифта может быть задан в пунктах (pt), сантиметрах (cm), дюймах (in), пикселах (px) или значением из табл. 22 | font | Да |
| font -style | Normal Oblique italic | Определяет стиль шрифта: нормальный, наклонный, курсив | font | Да |
| font -variant | Normal Small-caps | Прописные буквы маленького размера: нормальные, маленькие | Да | |
| font -weight | Normal Bold Bolder Lighter 100 - 900 | Определяет жирность шрифта: нормальный, полужирный, жирный, нежирный. Может быть задана числом. | font | Да |
| height | значение | Высота области, отводимой под элемент | Нет | |
| letter-spacing | Normal число | Расстояние между символами в строке. Может быть присвоено любое значение размера (1px) или нормальное. | Да | |
| line-height | Normal значение | Определяет расстояние между базовыми линиями строк текста. Может быть присвоено любое значение размера (1px) или нормальное. | Да | |
| list-style-image | URL | Изображение для маркера списка | list-style | Да |
| list-style -position | Inside outside | Относительная позиция для маркера: текст при переводе строки начинается под маркером; текст при переводе строки начинается под текстом предыдущей строки | list-style | Да |
| list-style -type | Табл. 20 | Определяет тип маркера | list-style | Да |
| margin-left | значение | Поле слева от элемента | margin | Нет |
| margin-right | значение | То же, справа | margin | Нет |
| margin-top | значение | То же, сверху | margin | Нет |
| margin-bottom | значение | То же, снизу | margin | Нет |
| padding-left | значение | Свободное пространство между рамкой и содержимым элемента слева | padding | Нет |
| padding -right | значение | То же, справа | padding | Нет |
| padding -top | значение | То же, сверху | padding | Нет |
| padding -bottom | значение | То же, снизу | padding | Нет |
| text-align | Left Right Center justify | Определяет способ выравнивания текста элемента: слева, справа, по центру, по ширине | Да | |
| text-decoration | Underline Line-through Overline Blink none | Используется для: подчёркивания текста, зачёркивания текста, линия над строкой, мерцание текста, отключён режим | Нет | |
| text-indent | число | Указывает отступ в первой строке элемента | Да | |
| text-transform | Capitalizeuuppercase Lowercase none | Указывает, как трансформировать текст: делает первую буку каждого слова прописной; делает все буквы текста прописными; делает все буквы текста сточными; отсутсвует трансформация | Да | |
| vertical-align | Табл. 23 | Регулирует вертикальное расположение текста внутри элемента. | Нет | |
| white-space | Normal Pre nowrap | Определяет, как браузер будет относиться к свободному пространству внутри элемента: сжимает, не сжимает (PRE), перевод строки только по тегу BR | Да | |
| width | значение | Ширина области, отводимой под элемент | Нет | |
| word-spacing | Normal число | Расстояние между словами текста. Может быть присвоено любое значение размера (1px) или нормальное. | Да |
|
|
|
|
|
|
Таблица 17. Стандартные цвета.
| Цвет | Шестнадцатеричный код цвета |
| Black (чёрный) | #000000 |
| Maroon (тёмно-бордовый) | #800000 |
| Green (зелёный) | #008000 |
| Olive (оливковый) | #808000 |
| Navy (тёмно-синий) | #000080 |
| Purple (фиолетовый) | #800080 |
| Teal (чирок) | #008080 |
| Gray (серый) | #808080 |
| Silver (серебряный) | #C0C0C0 |
| Red (красный) | #FF0000 |
| Lime (известь) | #00FF00 |
| Yellow (жёлтый) | #FFFF00 |
| Blue (синий) | #0000FF |
| Fuchsia (фуксия) | #FF00FF |
| Aqua (аква) | #00FFFF |
| White (белый) | #FFFFFF |
Таблица 18. Значение для ширины рамки.
| Значение | Описание |
| Thin | Узкая |
| Medium | Средняя |
| Thick | Широкая |
| length | Определяет точную ширину рамки в пунктах (pt), сантиметрах (cm), дюймах (in), пикселах (px) |
Таблица 19. Значения для стиля рамки.
| Значение | Описание |
| None | Рамка отсутствует |
| Dotted | Точечная линия |
| Dashed | Штриховая линия |
| Solid | Обычная линия |
| Double | Двойная линия |
| Groove | Трёхмерная вдавленная линия цвета, определённого свойством color |
| Ridge | Трёхмерная выпуклая линия цвета, определённого свойством color |
| Inset | Трёхмерная линия цвета, определённого свойством color |
| outset | Трёхмерная линия цвета, определённого свойством color |
Таблица 20. Значение для типа маркера списка.
| Значение | Вид маркера |
| Disk | Диск |
| Circle | Окружность |
| Square | Квадрат |
| Decimal | Арабские цифры (1, 2, 3, …) |
| Lower-roman | Маленькие римские цифры (I, ii, iii, iv, …) |
| Upper-roman | Большие римские цифры (I, II, III, IV, …) |
| Lower-alpha | Строчные буквы (a, b, …) |
| Upper-alpha | Прописные буквы (A, B,..) |
| none | Маркер отсутствует |
Таблица 21. Обобщённые имена гарнитур шрифта.
| Обобщённое название | Пример |
| Serif | Times New Roman |
| Sans-serif | Arial |
| Cursive | Script |
| Fantasy | Comic |
| monospace | Courier New |
|
|
|
Таблица 22. Значения для размера шрифта.
| Значение | Описание |
| xx-small | На 50% меньше размера x-small |
| x-small | На 50% меньше размера small |
| small | На 50% меньше размера medium |
| Medium | Шрифт среднего размера (10pt) |
| Large | На 50% больше размера medium |
| x-large | На 50% больше размера large |
| xx-large | На 50% больше размера x-large |
| larger | На 50% больше размера родительского элемента |
| smaller | На 50% меньше размера родительского элемента |
Таблица 22. Значения для выравнивания текста по вертикали.
| Значение | Описание |
| Baseline | Выравнивает базовую линию элемента по базовой линии родительского элемента |
| Middle | Выравнивает середину элемента по середине родительского элемента |
| Sub | Опускает элемент на подстрочый уровень |
| Super | Поднимает элемент на надстрочый уровень |
| Text-top | Выравнивает вершину элемента по верху текста родительского элемента |
| Text-bottom | Выравнивает низ элемента по низу текста родительского элемента |
| Top | Выравнивает верх элемента по самому высокому элементу строки |
| bottom | Выравнивает низ элемента по самому низкому элементу строки |
Можно группировать свойства border, background, font, margin, list, padding.
Примеры группировок:
· Border: thin dotted black
· Background: white repeat-x fixed top left
· Font: bold normal 12pt times, serif
· List-style: square inside
· Margin:.5cm 1cm.5cm 1cm
· Padding:.25cm.25cm.25cm.25cm
Упражнение 11.1. Во все HTML-файлы, созданные для реализации поставленной в теме задачи, включите описание стилей для элементов, используемых в теле файла.
СОДЕРЖАНИЕ
Практическое задание на создание Web-страниц.. 1
Цель создания Web-страницы и решаемые задачи. 1
Требования к содержанию сайта. 1
Требования к использованию элементов языка HTML.. 2
Темы для практических заданий. 2
Проектирование логической структуры Web-сайта. 3
Практическое занятие №1 посвящено изучению структуры Web-документа. 3
Практическое занятие №2 посвящено изучению структуры внутри документа. 7
Практическое занятие №3 посвящено изучению и использованию списков. 11
Практическое занятие №4 посвящено изучению и использованию тэгов ссылки и изображения 13
Практическое занятие №5 посвящено изучению и использованию таблиц. 15
|
|
|
Практическое занятие №6 посвящено изучению и использованию кадров (фреймов) 18
Практическое занятие №7 посвящено изучению и использованию форм.. 20
Практическое занятие №8 посвящено изучению и использованию объектов. 23
Практическое занятие №9 посвящено изучению и использованию бегущей строки. 24
Практическое занятие №10 посвящено изучению и использованию скриптов. 25
Практическое занятие №11 посвящено изучению и использованию стилей. 30
|
|
|
