Файл: Основы программирования на языке HTML ( Основные сведения о языке программирования ).pdf
Добавлен: 01.04.2023
Просмотров: 57
Скачиваний: 2
Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.
Горизонтальная линия. Используя тег <HR>, вы можете разделить текст горизонтальной чертой.
Формат тега:
<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center NOSHADE>
Параметры тега::
Толщина линии в пикселях.:
Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.
- Добавление стилей в документ
6.1 Что такое CSS?
На начальных этапах развития сети интернет содержание и внешний вид страниц прописывались только в HTML. Но в последствии для работы над внешним видом страниц появился отдельный язык – CSS (расшифровывается как «каскадные таблицы стилей»). Необходимость в наличии отдельного инструмента для оформления документов возникла из-за того, что при совмещении оформления и наполнения сайта в одном инструменте теряется гибкость: код становится перегруженным, для того, чтобы что-то поменять в оформлении нужно править содержимое. Нет возможности переключаться между разными версиями оформления страницы, особенно если есть потребность поменять его кардинально, т.к. придётся переписывать очень много HTML-элементов. Именно поэтому было принято решение отказаться от размещения элементов оформления внутри атрибутов в HTML документе и разделить: разметка и содержимое страницы – это то, что относится к HTML, а всё что занимается стилями – относится к технологии CSS. Проще говоря: задача HTML – показать, какие элементы будут на странице, задача CSS – показать, как эти элементы будут на странице выглядеть. Слово «каскадные» в аббревиатуре CSS означает многоуровневые. Это значит, что одному и тому же элементу на странице может быть назначено сразу несколько стилей из разных источников. Какой именно стиль будет применён к элементу, решают правила приоритета.
Слово таблица в аббревиатуре означает, что CSS представляет собой набор стилей и их значений, которые можно свести в таблицу.
6.2. Работа с CSS
Документ CSS, так же, как и документ HTML представляет собой текстовый файл, для работы с которым можно использовать стандартные текстовые редакторы, но удобнее этим заниматься в продвинутых редакторах кода, таких, как Notepad++, PhpStorm, Atom или Stylyzer – специальный инструмент для работы с CSS.
Существует три основных способа подключения стилей CSS к телу документа HTML:
- Атрибут Style – используется в элементах HTML для придания элементу стиля <p style="color:red; font-family:impact”>Абзац</p>
На данном примере мы покрасили посредством атрибута style Абзац в красный цвет и поменяли ему шрифт на “impact”. - Элемент Style – как правило его располагают внутри тега <head>. Использует CSS- селекторы для придания выбранным элементам документа HTML стиля:
<head>
<title> CSS</title>
<style>
P{ style="color:red; font-family:impact”}
</style>
</head>
В данном примере мы применили аналогичные стили CSS ко всем абзацам страницы. - Подключение стилей CSS с внешнего CSS-файла.
Для начала создаётся текстовый документ, например style.css, в нем так же укажем стили, как из предыдущего примера:
P{ style="color:red; font-family:impact”}
и сохраняем данный документ.
Теперь остаётся в теле главного документа подключить этот внешний CSS-файл внутри HTML-документа. Подключение производится с помощью элемента <link> с атрибутом rel=”stylesheet”. В элементе линк так же используется атрибут href с ссылкой на файл, который хотим подключить. В нашем случае документ HTML находится в той же папке, что и style.css, поэтому путь будет выглядеть так: href=”style.css”. Также в элементе link указывается атрибут type=”text/css”, который говорит о том, что подключается файл со стилями оформления CSS.
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
6.3 Синтаксис CSS
Синтаксис CSS - это просто набор селекторов, свойств и их значений.
Исключение, когда нам могут не понадобиться селекторы - это тогда, когда мы с вами указываем стили CSS с помощью атрибута style.
CSS-правило состоит из селектора и перечня свойств и их значений:
селектор {
свойство: значение;
свойство: значение;
}
В CSS, как и в HTML присутствуют комментарии, для них используются символы /* и */. Вот пример CSS-правила из первой главы:
Список CSS-правил нельзя вкладывать друг в друга. Возможно, в новых версиях языка эту возможность добавят.
Заключение
В наше время существует множество программ для создания web-сайтов, но не одна из них не может сделать этого самостоятельно, обязательно нужен пользователь, который, будет управлять этой программой. И какой программой не пользуйся, без знания языка программирования HTML у пользователя ничего не получиться.