Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • Каскадные таблицы стилей






    Лабораторная работа №1

    Проектирование главной страницы сайта с использованием CSS

    Цель работы

    Целью данной работы является ознакомление с каскадными таблицами стилей и проектирование главной страницы сайта.

    Методические указания по организации самостоятельной работы

     

    В лабораторной работе будут рассмотрены следующие вопросы:

    Элемент DIV

    Свойства блоков

    Управление цветом в CSS

    Шрифт

    Координаты и размеры

    Управление видимостью

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

    Описание стилей отображения элементов HTML-разметки носит название " Каскадные таблицы стилей". Под словом " таблицы" следует понимать набор свойств элемента разметки, который можно представить в виде строки в таблице свойств, т.е. элементы разметки — строки, а свойства — столбцы.

    " Каскадные" – так как во-первых, существует иерархия элементов разметки (дерево объектов на странице), во-вторых, свойства этих объектов могут наследоваться. В дереве объектов образуется ветвь, которая ведет к листу дерева — элементу разметки, например, элементу списка или параграфу. Его свойства определяются элементами разметки, в которые вложен элемент, и описателями стиля для данного элемента.

    Каскадные таблицы стилей (CSS) обеспечивают точное управление форматированием и компоновкой документа. Можно изменять или добавлять цвета, фон, размер шрифта и стили и даже помещать объекты на странице Web в различных местах. Существует три основных способа использования CSS:

    1. Переопределение элемента. Можно изменить способ, которым выводится любой элемент (X)HTML, определяя правило для его стилевого оформления. Если требуется, чтобы все параграфы были записаны через две строки и зеленым цветом, в CSS можно добавить следующее объявление:
    p { line-height: 2em; color: green; }

    Теперь, любой контент, заключенный в теги < p>, будет записываться через две строки зеленым цветом.

    1. Определение ID. Можно задать для элемента атрибут id для уникальной идентификации его на странице (каждый ID может использоваться на странице только однажды) - например, id=" navigation_menu". Это позволяет иметь более детальный контроль форматирования страницы, например, если вы хотите, чтобы только определенный параграф текста выводился через два интервала и зеленым цветом, задайте для него ID:
    < p id=" highlight" > Контент параграфа < /p>

    И затем примените к нему правило CSS следующим образом:

    #highlight { line-height: 2em; color: green; }

    Это позволяет применить правило CSS к параграфу на странице с атрибутом id, заданным как highlight (символ # является просто соглашением CSS для указания, что это ID).

    1. Определение класса. Классы похожи на ID, за исключением того, что на каждой странице можно иметь несколько элементов одного класса. Продолжим с тем же примером с интервалом в две строки, если требуется использовать двойной интервал и выделение цветом для двух первых параграфов на странице, то можно будет добавить к ним классы следующим образом:
    < p class=" highlight" > Контент параграфа < /p> < p class=" highlight" > Контент второго параграфа < /p>

    И затем применим к ним правило CSS следующим образом:

    .highlight { line-height: 2em; color: green; }

    highlight является в данном случае классом, а не ID - точка в начале является соглашением CSS для указания класса

     

    При использовании стилей действуют следующие правила старшинства стилей:


    сначала применяются стили браузера по умолчанию;

    • стили браузера по умолчанию переопределяются прилинкованными стилями (элемент LINK заголовка документа);
    • прилинкованные стили переопределяются описаниями стилей в элементе STYLE;
    • стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки.

    Не все атрибуты стиля могут наследоваться. Например, " набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается для каждого элемента отдельно.






    © 2023 :: MyLektsii.ru :: Мои Лекции
    Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
    Копирование текстов разрешено только с указанием индексируемой ссылки на источник.