- •Основные тэги HTML
- •Тэги физического форматирования текста
- •Тэги логического форматирования текста
- •Специальные символы HTML
- •Названия и коды цветов для HTML
- •Создание гиперссылок
- •Протокол://Домен/Путь/Файл#Метка
- •Создание фреймовой структуры
- •Каскадные таблицы стилей CSS
- •Способы определения стилей
- •Применение правил таблицы стилей:
- •Определение правил
- •Свойства для таблиц стилей
Создание фреймовой структуры
1. <FRAMESET> </FRAMESET> - делит экран на области для вывода информации (фреймы).
<FRAMESET rows = "*,2*"> - делит экран на две области по вертикали в пропорции 1:2 по высоте.
<FRAMESET cols = "*,2*"> - делит экран на две области по горизонтали в пропорции 1:2 по ширине.
<FRAMESET cols = "20,*,30> - делит экран на три области по вертикали, первая область высотой 20 пикселей, третья – 30 пикселей, вторая занимает весь остальной экран.
<FRAMESET rows = "25%,50%,25%"> - делит экран на три области по горизонтали, ширина каждой области задаётся в процентах от высоты экрана.
2.<FRAME> </FRAME> - определяет свойства фрейма Параметры тэга <FRAME>:
src – название HTML-документа, отображаемого в данном фрейме (URI-адрес),
name – имя фрейма (name="A", где "A" – имя фрейма, данное пользователем; также существуют стандартные имена фреймов:
name="_blank" – отображает документ в новом окне,
name="_self" - отображает документ в том же окне, в котором находится текущий документ,
name="_parent" – отображает документ в родительском окне, при этом речь идёт о структуре с вложенными фреймами, т.е. о иерархической структуре фреймов, name="_top" – отображение документа в наивысшем в иерархии окне фрейма, если такого нет, то в текущем окне фрейма,
frameborder – показ или сокрытие границ фрейма (frameborder=1 – отображает границу, frameborder=0 – прячет границу),
noresize – запрет на изменение размеров фрейма пользователем с помощью мыши, по умолчанию изменять размеры мышью можно,
scrolling – показ полос прокрутки (scrolling=yes – полосы прокрутки показываются всегда, scrolling=no – полосы прокрутки никогда не включаются, scrolling=auto полосы прокрутки включаются, когда информация не умещается в окне фрейма),
marginheight – расстояние между содержимым фрейма и верхней (нижней) границей (marginheight=n, где n – расстояние в пикселях),
marginwidth – расстояние между содержимым фрейма и левым (правым) краем (marginwidth=n, где n – расстояние в пикселях).
3.<NOFRAMES> </NOFRAMES> - тэг содержит описание информации, отображаемой браузером, если он не поддерживает фреймы. Этот текст игнорируется браузерами, способными работать с фреймами.
Каскадные таблицы стилей CSS
CSS (Cascading Style Sheets) – эффективное средство автоматизации стилевого оформления HTML-документов (цвет, шрифт, отступы, интервалы, размеры элементов и т.д.). Стиль – это набор значений атрибутов, определяющих оформление электронного документа, его представление на экране. Применение стилей для оформления Webстраниц позволяет осуществить единообразное оформление однотипных элементов текста, упрощает изменение внешнего вида документа в целом и отдельных его элементов.
Определение стиля может быть:
Собственным для каждого элемента документа, например, абзаца, заголовка; Локальным для всего документа; Глобальным (внешним) для нескольких документов.
Стиль задаётся с помощью таблицы стилей. Любая таблица стилей состоит из набора правил. Правило состоит из двух частей: селектора и определения:
4
p { color:red } ,
где p – селектор, а текст в скобках { } – определение.
Способы определения стилей
Собственный стиль для конкретного элемента документа определяется атрибутом style этого элемента и называется встраивание таблицы стилей:
<p style="font-size:12pt; color:black">Текст абзаца</p>
Локальное определение стиля задаётся тэгом style, который помещается в тэг head, и действует в пределах этого документа. В тэг style помещаются правила таблицы стилей. Такое определение стиля называется внедрение таблицы стилей:
<head>
........
<style type="text/css">
/ * Здесь можно вставлять такой комментарий! Вложенные комментарии не допускаются. * /
body{ |
background-color:grey; |
|
|
|
font-size:14pt } |
/* Первое правило*/ |
|
h1{ |
background-color:white; |
|
|
|
color:blue |
} |
/* Второе правило*/ |
</style>
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Локальное определение стиля также можно выполнить с помощью команды @import, которая позволяет импортировать элементы стиля из внешнего файла *.css (импорт таблицы стилей), команда помещается в тэг style раньше других правил таблицы стилей. Внешний файл *.css содержит набор правил таблицы стилей:
my.css :
body{ |
background-color:grey; font-size:14pt |
} |
|
p{ |
font-size:11pt; font-face:Arial |
} |
|
my.htm:
<head> |
|
........ |
|
<style type="text/css"> |
|
@import url(my.css) ; |
/* импорт таблицы стилей */ |
h1{background-color:white; color:blue} |
/* внедрённое правило */ |
</style> |
|
Можно импортировать несколько таблиц в одном документе. |
|
Глобальное (внешнее) определение стиля помещается в отдельный файл *.css, который
содержит набор правил таблицы стилей и подключается тэгом link в тэге head нескольких документов, которые должны иметь общие правила оформления, такой способ задания стиля называется связывание:
<head>
......
<link rel="stylesheet" type="text/css" href="my.css"> </head>
5
Применение правил таблицы стилей:
<html>
<head>
.......
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию
(чёрный)</p> </body> </html>
Приоритеты таблиц стилей, начиная с наивысшего: встроенная, внедрённая, импортированная, связанная, по умолчанию (настройки браузера).
Виды селекторов Селектор типа элемента – переопределяет атрибуты любого тэга:
h2 { color:blue }
p {font-size:16pt }
Применение:
<h2>Заголовок</h2> <p>Абзац</p>
Селектор класса – позволяет для одного и того же тэга определить несколько вариантов оформления:
h2.red {color:red } h2.green {color:green }
Применение:
<h2 class="red">Это красный заголовок</h2> <h2 class="green">А это зелёный заголовок</h2>
Также селектор класса позволяет создать стиль, который можно применить для различных тэгов:
.style1 {color:blue; font-size:22pt}
.style2 {color:lime; background-color:grey}
Применение:
<p class="style1">Большие синие буквы, фон – по умолчанию</p>
<p class="style2">Зелёные буквы, фон – серый, размер букв - по умолчанию</p> <h1 class="style1">Заголовок - большие синие буквы, фон – по умолчанию</h1>
<h1 class="style2">Заголовок - зелёные буквы, фон – серый, размер букв - по умолчанию</h1>
Имя класса чувствительно к регистру символов!
Определение правил
Определение правила состоит из одного или нескольких элементов, представляющих собой свойство (атрибут) и его значения, разделённых двоеточием (color:blue). При некорректном задании свойства или значения соответствующая пара игнорируется.
Величины, обозначающие размеры элементов, могут задаваться: в абсолютных единицах:
in – дюймы;
cm – сантиметры; mm – миллиметры;
pt – пункты (пойнты) 1 пункт = 1/72 дюйма, или 0,35 мм; pc – пики, 1 пика = 12 пунктам.
в относительных единицах:
em – высота элемента базового шрифта;
6
px – количество пикселей данного устройства; x – высота буквы x
% - процент по отношению к опорному значению.
Свойства для таблиц стилей
font-family – виды шрифтов и их приоритеты, значения – "Arial", "Courier" (названия шрифтов), serif , cursive(группа шрифтов с засечками)
<body style="font-family:'Times New Roman',serif">
или
body {font-family: "Times New Roman", serif)
font-style – определяет начертание букв (normal – нормальное, italic - курсив, oblique – наклонное)
font-weight – определяет жирность шрифта, значения: 100, 200, ... 900.
font-size – размер шрифта, font-size:16pt – размер в пунктах, font-size:160% – размер в процентах, font-size:1.2em – размер в пропорции к базовому размеру шрифта в данном элементе
color – цвет символов, значения – названия цветов (red, grey) или 16-ричный код
(#00FF0D).
background-color – цвет фона, значения – названия цветов (red, grey) или 16-ричный код
(#00FF0D)
text-align – выравнивание текста, значения: left, right, center, justify (выравнивание по ширине).
text-decoration – оформление текста, значения: underline - подчёркивание, overline -
надчёркивание, line-through - зачёркивание, blink - мерцание
text-shadow – тень текста, при оформлении тени задаются четыре значения - отступ тени от текста по горизонтали, по вертикали, радиус размытия тени и цвет тени, например:
h2 {text-shadow: -3px -3px 5px grey}
text-indent – отступ первой строки элемента уровня блока, например, абзаца p {text-indent: 20pt)
background-image – фоновый рисунок – background-image:url(stars.gif)
background-repeat – повторяемость фонового рисунка, значения: repeat, repeat-x, repeat-y, no-repeat.
margin-top, margin-left, margin-bottom, margin-right - поля документа, задаются в пикселях,
процентах и т.д. Границы (обрамление):
border-color – цвет границы.
border-width – толщина границы (thin, medium, thick или числовое значение).
border-style – тип линии (none – нет линии, solid - сплошная, dotted - пунктир, dashed -
штриховая, double - двойная, groove - углублённая, ridge - выпуклая, inset - утопленная, outset - выпуклая)
7