Введение в каскадные таблицы стилей

Введение в каскадные таблицы стилей

Практическая работа №3

Цель:

Изучить подключение таблиц стилей к документу;

Изучить внедрение классов в css.

Классы являются главными селекторами CSS, потому что дают фактически неограниченную возможность по применению стилей к тем либо другим HTML-элементам. Селектор класса всегда начинается с точки (.) после которой без пробела записывается имя класса. Общий синтаксис последующий:

.имя Введение в каскадные таблицы стилей_класса { свойство: значение; свойство: значение; ... }

Имя класса — это случайное слово, которое вы придумываете сами, но есть ограничение, оно может состоять только из знаков латинского алфавита (a-z, A-Z), цифр (0-9), знаков дефиса (-) и подчеркивания (_). При этом имя класса не может начинаться с числа либо дефиса, за которым следует цифра Введение в каскадные таблицы стилей. К примеру, классы .block-1, .-block3, .kartinkiBlock, ._7Block_vnizu — правильные, а .1-block, .-7block — нет.

Задание:

  1. Сделайте документ Index. html с внедрением текстового файлаКаскадные таблицы стилей.
  2. Сохраните html страничку и поглядите ее в браузере.
  3. Сделайте cssфайл style.css
  4. В файле style.css напиши стиль для селектора тега body, в каком Введение в каскадные таблицы стилей укажите цвет текста, размер букв и заглавие шрифта:

  5. Включите подготовительный просмотр и поглядите как смотрится стиль всего документа. Чтоб html документ делал эти стили нужно в html-файле подключить css файл:
  6. Сохраните конфигурации. Поглядите html-файл в браузере. Направьте внимание на шрифт.
  7. В css файле сделайте шрифт абзаца, в Введение в каскадные таблицы стилей каком установите разраженный интервал текста меж знаками:

  8. Сохраните css файл. Обновите html файл в браузере.
  9. Для того что бы один из абзацев сделать курсивом и подчеркнутым нужно сделать класс:


и подключите его ко второму абзацу

  1. Сохраните. Поглядите что вышло.
  2. Сделать класс для форматирования третьего абзаца со последующими качествами:
  3. Подключите стиль к третьему абзацу (используя атрибут class).
  4. Сделайте класс .rich для отображения 5-ого абзаца, содержащий последующие характеристики текста:
  5. Сделайте класс .perenos и воспретите в нем перенос слов в границах 1-го абзаца (white-space).

  6. Для того что бы выделать слова в границах 1-го абзаца можно использовать тег (он позволяет добавлять форматирование к хоть какому текстовому элементу). Создаем класс, содержащий большие красноватые буковкы:
    и указываем новый класс в теге Введение в каскадные таблицы стилей

  1. Сделайте класс последующими качествами:
  2. Добавьте еще пару абзацев и назначьте им характеристики этого класса.
  3. Сделайте свои 2-3 класса стилей текста, (каждый стиль должен включать по 3-4 характеристики форматирования текста) и быть присоединенным к Введение в каскадные таблицы стилей абзацам либо заголовкам первого, второго и третьего уровней.

Таблица: Характеристики текста

Свойство (вероятные значения) Предназначение характеристики
font-family (Arial | Times New Roman | Courier | Tahoma) заглавие шрифта
font-weight (normal | bold | lighter) насыщенность шрифта (ширина букв)
font-size (small | large | medium | 120% | 14px) размер шрифта
font-style (normal | italic) стиль шрифта (обычно Введение в каскадные таблицы стилей курсив)
font-stretch (normal | width | condensed | expanded) растянутое начертание шрифта
text-indent (число px | %) отступ первой строчки, при отрицательном значении выступ
text-align (left | center | right | justify) горизонтальное выравнивание
line-height (normal | …px | …% | …em) высота строчки (междустрочный интервал)
vertical-align (sub | sup | top | middle | bottom) вертикальное выравнивание текста в контейнере Введение в каскадные таблицы стилей
word-spacing (… px| normal) расстояние меж словами
letter-spacing (… px| normal) расстояние меж знаками
text-transform (uppercase | lowercase | capitalize | none) регистр букв
text-decoration (none | underline | overline | line-through) оформление текста
text-shadow (цвет длин длина длина) тень к тексту
white-space (normal | nowrap | pre)
  • normal-игнорировать Введение в каскадные таблицы стилей и автоматом переносить строчки
  • pre-сохранить пробелы и переносы строк
  • nowrap-игнорировать пробелы и запретить перенос строк
color цвет


vvedenie-prinyato-na-zasedanii-kolpnyanskogo-rajonnogo-soveta-narodnih-deputatov.html
vvedenie-programma-itogovoj-gosudarstvennoj-attestacii-vipusknikov-na-sootvetstvie-trebovaniyam-gosudarstvennogo.html
vvedenie-programma-uchebnoj-praktiki-dlya-studentov-2-kursa-napravleniya-080700-biznes-informatika-podgotovki-bakalavrov.html