 |
1.4. CSS – таблицы стилей. Способ 1. Атрибут style. Способ 2. Таблица стилей с тегом <style>. Способ 3. Классы. Способ 4. Селекторы id и контекстные селекторы id
|
|
|
|
1. 4. CSS – таблицы стилей
Таблицы стилей предназначены в первую очередь для визуального оформления структурных элементов страницы. Структурные же элементы создают все те теги, которые рассматривались ранее. Правда некоторые теги (< FRON>, < B> и т. д. ) из рассмотренных использовались для стилевого форматирования элементов, но в версии HTML 4. 0 они считаются устаревшими и не рекомендуются для дальнейшего использования на вновь создаваемых страницах.
Каскадные таблицы стилей позволяют задать уже известным тегам авторский стиль оформления. Например, возможно всем заголовкам первого уровня придать зеленый цвет и больший размер или у всех элементов маркированного списка изменить маркер на красивое графическое изображение.
Таким образом, таблицы стилей снимают ограничения старых версий HTML на набор свойств тех или иных структурных элементов документа. Применение CSS начинается с помещения в раздел заголовка HTML-документа следующего тега.
< head>
< meta http-equiv=”Content-Style-Type” content=”text/css”>
< /head>
Существует несколько способов определения стиля элемента.
Способ 1. Атрибут style
Стиль задается непосредственно для какого-либо элемента в основном разделе документа с помощью параметра STYLE. Например:
< p style=”font-size: 20px; font-style: italic; color: blue”>
Здесь слово STYLE выступает в роли атрибута тега. Из примера видно, что значение параметра STYLE представляет собой последовательность свойств и их значений, разделенных точкой с запятой. Очередное свойство и его значение в этой последовательности разделяются двоеточием.
Способ 2. Таблица стилей с тегом < style>
Атрибут STYLE в предыдущем способе задает свойства только одного элемента, а с помощью тега < STYLE> можно задать свойства всех одноименных элементом. Контейнер < STYLE> размещается в заголовке < HEAD> < /HEAD>.
|
|
|
Таблица стилей может состоять из одного или нескольких правил, определяющих внешний вид описываемых элементов. Правило состоит из 2-х частей: селектора и описания.
Стиль для вложенных элементов P B будет использоваться браузером только тогда, когда элемент B окажется внутри элемента P. При этом свойство font-size будет унаследовано от предыдущего описания стиля тега B.
Последняя строка тега STYLE показывает, как можно одно описание свойства применить сразу к нескольким элементам, перечисленным через запятую.
Способ 3. Классы
Предыдущий способ позволяет присвоить любому элементу только один стиль. Иногда удобнее назначать для стилей имена и указывать их вместе с элементами. Такие универсальные стили называют классами.
При желании можно создать любое количество классов, каждый из которых будет иметь свой вариант форматирования для одного элемента.
Способ 4. Селекторы id и контекстные селекторы id
Этим способом можно создавать классы, связанные с нестандартными html-элементами, то есть элементами веб-разработчика.
С атрибутом id тесно связан структурный элемент < DIV> (от англ. Division – часть, раздел). Тег < DIV> не описывает базовых элементов html-документа, таких как заголовок, абзац, список, таблица и т. д. Он предназначен для описания какой-либо структуры, созданной самим дизайнером. Типичным примером такого элемента является навигационная панель имя такой структуре дает тоже разработчик через атрибут id. Таблица стилей используется для придания внешнего вида структурному элементу.
2. Разработка сайта для путеводителя по городу Дубна
2. 1. Создание страниц в Visual studio Code
Порядок выполнения работы:
|
|
|
1. Настройка программы
2. Создание сайта
3. Основные действия в программе
4. Изображения и кнопки
Настройка программы Visual studio Code.
Для создания новой страницы нужно выбрать в меню пункт «создать файл», и после названия написать «. html » (например «index. html») теперь мы можем увидеть созданную страничку в левом окне программы (рисунок 1).
Рисунок 1.
Создание сайта в Visual studio Code
Для удобства создания сайта сначала можно прописать знак, «! » который пропишет все базовые теги и команды (рисунок 2).
Рисунок 2.
Также необходимо подключить файл «css» для настройки графического изображения сайта для этого нужно в меню программы создать файл «название. css » (например «style. css») и прописать в файле «. html » после команды < title > < /title >, команду < link rel=" stylesheet" href=" css/style. css" > теперь можно работать над внешним видом сайта параллельно с работой над самим сайтом
Текст в Visual studio Code набирается при помощи клавиатуры, для этого используются команды « p, h1-h6, a, и т. п. ». Командой p пишется основной текст на сайте. Командой h1-h6 пишутся заголовки разного размера, команда a нужна, что бы прописать гиперссылки и кнопки. С помощь css м ожно прописать цвет (команда color), размер (команда font-size ), и шрифт (команда font-family ) (рисунок 3) и (рисунок 4).
Рисунок 3.
Рисунок 4.
|
|
|
