- •Язык html. Основные понятия
- •Синтаксис html
- •Парные теги
- •Одиночные теги
- •Теги, атрибуты, значения
- •Структура html-документа
- •Вставка изображений в документ
- •Создание таблиц
- •Атрибуты таблицы
- •Сложные таблицы.
- •Нумерованные списки
- •Маркированные списки
- •Списки определений
- •Создание фреймов
- •Создание html-документа с плавающим фреймом
- •Каскадные таблицы стилей: назначение и возможности
- •Назначение каскадных таблиц стилей
- •Типы каскадных таблиц стилей
- •Создание файла сss
- •Атрибуты таблицы
- •Атрибуты тегов работы со списками
Создание html-документа с плавающим фреймом
Для создания такого фрейма используется тег <iframe>. Наличие закрывающего тега обязательно. Между ними можно вставлять любой текст для браузеров, не поддерживающих фреймы. Аттрибуты:
src="filename.html" - указывает адрес содержимого фрейма;
name="name" - присвает имя фрейму;
width="x" - ширина фрейма;
height="y" - высота фрейма;
scrolling="yes|no|auto" - наличие полос прокрутки;
frameborder="1|0|yes|no" - наличие (yes или 1) или отсутствие (no или 0) рамки вокруг фрейма;
marginwidth="x" - величина отступа содержимого фрейма от границ по горизонтали;
marginheight="y" - величина отступа по вертикали.
Каскадные таблицы стилей: назначение и возможности
Каскадные таблицы стилей (Cascade Style Sheets, CSS) – это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Допустим мы хотим, чтобы все заголовки в тексте были красного цвета. Конечно, мы можем использовать тег заголовка <h1> и определить цвет текста с помощью тега <font>
<h1><font color="red">Заголовок 1</font></h1>
Однако удобней изначально определить, что заголовок должен отображаться в браузере красным. Для этого и служат CSS.
Назначение каскадных таблиц стилей
Каскадные таблицы стилей позволяют задать единый стиль оформления разных страниц документа и быстро поменять его, путем изменения нужного определения в таблице стилей.
Типы каскадных таблиц стилей
Почему стили называются каскадными? Каскад - это иерархия применения правил и заключается он в том, что стили могут переопределяться. Приведенный ниже список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.
Если внимательно посмотреть на ниже перечисленные типы таблиц стилей, то станут очевидными различные способы применения стиля к одному и тому же документу.
Встроенный стиль (inline CSS)
Встроенный стиль определяется непосредственно в теге с использованием атрибута style. Такой подход полезен, только если стиль, единовременно применяется элементу, т.е. стиль помещается в заголовок.
Каждый тег может иметь параметр style, который определяет свойства тега. Например:
<p style="font-size:48pt; color:yellow"> Пример </p>
В данном случае текст только одного абзаца будет желтым и 48 кегля:
Такой способ задает максимальный приоритет значениям свойств тега по отношению к другим способам определения стиля.
Недостаток такого способа в трудоемкости создания и коррекции документа, целесообразно использовать только для ограниченного числа элементов.
Внутренняя или внедренная таблица стилей (Internal CSS)
Внедренный стиль управляет представлением одного документа и размещается внутри тега <style>...</style> в разделе head HTML-документа Например:
<head> ... <style type="text/css"> p { background-color : yellow; color: red; text-align : center } </style> ... </head>
В результате во всем документе будет изменен цвет фона и цвет текста и выравнивание текста в теге <p> .
Внешняя или связанная таблица стилей (External CSS)
Внешняя таблица стилей это таблица которая связана с HTML-документом при помощи тега link, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определенные в ней, в чем и заключается преимущество управления языка CSS
Такая таблица стилей находится в отдельном текстовом файле с расширением CSS (желательно, чтобы он находился в той же папке что и web-документ). Тогда таблица стилей подключается с помощью тега <link> в разделе <head>:
<link href="styles.css" rel="stylesheet" type="text/css" />
Параметр href определяем путь к файлу CSS, если таблица находится в той же папке что и web-документ, то это просто href="styles.css", где styles.css – имя файла CSS.
Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.