2. Самостоятельная работа и содержание отчета
Название, цель лабораторной работы.
Назначение каскадных таблиц стилей, способы описания.
Способы подключения стилей к web-страницам.
Для чего предназначены классы и идентификаторы, способы описания.
Откройте блокнот, скопируйте в него текст стиля из файла five.html расположенный между <Style> и </Style>. Сохраните файл под названием Style.css, расширение css - обязательно. Теперь для использования стилевого файла удалите из файла five.html описания стиля вместе с тегами <Style> и </Style>. На место удалённого описания внесите строку:
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
Сохраните документ и проверьте результат, если ничего не изменилось, значит Вы всё сделали правильно, а именно, описание перенесли в стилевой файл и указали на него ссылку в своей Web – странице.
6. Создайте новый Web-документ и в тегах <Style> и </Style> опишите классы тега <P>:
<Style>
p.big {font-size:50;
font-style:italic;
background-color:teal;
text-align:center;}
p.small {font-size:20;
font-style:underline;
background-color:olive;
text-align:right;}
</Style>
в тегах <body> укажите использование этих классов:
<P class="big"> этот абзац большой</P>
<P class="small"> этот абзац маленький</P>
сохраните и документ и проверьте результат.
7. Отредактировать оформление своей домашней страницы с использованием CSS.
Лабораторная работа № 8 Свойства элементов
Цель: изучить правила записи селекторов, элементы и возможные их свойства в коде CSS
Результат обучения: Студент должен научиться использовать свойства блоков текста, цветовое оформление, полей для форматирования текста.
Ход работы
Позиционирование элементов
Каскадные таблицы стилей позволяют разместить (позиционировать) любой элемент (изображение, бегущую строку, текст и т.д.) в любом месте страницы. Для этого внутри любого тега (абзац, рисунок, список и т.д.) можно задать одно из двух значений параметра POSITION, который и определяет позицию элемента. Этими значениями являются ABSOLUTE и RELATIVE.
При присваивании значения RELATIVE браузер позиционирует элемент относительно того положения, в котором элемент находится.
При присваивании значения ABSOLUTE браузер позиционирует элемент относительно родительского контейнера.
Откройте «Блокнот» и внесите теги Html-документа. Вставьте текст абзаца:
<P>
Изучаем Html
</P>
сохраните документ под именем poz.html и проверьте результат.
Теперь, попробуем разместить эту строку в нижнем правом углу страницы. Для этого создадим класс без родителя:
<style>
.pos { position:absolute; left:400; top:300;}
</style>
Обратите внимание, что перед именем класса стоит точка-это указывает на то, что этот класс можно использовать с любым элементом. Left:400, top:300 - указывают на то, что элемент нужно спустить вниз на 300 точек и сдвинуть влево на 400 точек (в качестве значений можно использовать отрицательные числа). А параметр position:absolute задает позиционирование относительно верхнего левого угла Web-страницы.
Теперь опишем использование этого класса для тега <p>:
<p class="pos">Изучаем Html</p>
сохраните документ и проверьте результат. Аналогично можно разместить любой объект.
Задание: подберите значения left и top так, чтобы строка расположилась точно в нижнем правом углу страницы.
Теперь проверим, как работает значение RELATIVE. Для этого добавим в описание стилей два класса без родителя:
.pos1 { position:absolute; left:20; top:30 ;}
.pos2 { position:relative; left:20; top:30 ;}
создадим заголовки:
<h1>Судьба</h1>
<h2>Частица</h2>
<h3>Момент</h3>
<h4>Шанс</h4>
заголовок 1 позиционируем через класс .pos1, а заголовок 4 позиционируем через класс .pos2:
<h1 class="pos1">Судьба</h1>
<h2>заголовок 2</h2>
<h3>заголовок 3</h3>
<h4 class="pos2">Шанс</h4> сохраните документ и проверьте результат.
Задание: разместите заголовки так, чтобы они частично закрывали друг друга. Добавьте рисунки и расположите их в различных местах web-страницы посредством позиционирования.
Свойства шрифта
Свойства шрифта могут описывать элементы, содержащие текст. Среди них можно перечислить такие, как A, B, BODY, CAPTION, DD, DL, DT, EM, H1-H6, I, LI, P, SMALL, STRIKE, STRONG, TD, TH, U и некоторые другие. Данные элементы могут включать в себя в качестве описаний свойства параметры:
Font-size - задаёт размер шрифта.
Font-family- задаёт имя шрифта или семейства шрифтов.
Font-style- задаёт стиль начертания.
Font-weight- задаёт толщину символов.
Font-variant – определяет регистр записи символов.
Font-size
Значение этого свойства может быть указано как в абсолютных, так и в относительных величинах. Под абсолютными величинами подразумеваются:
точки – (pt)
сантиметры – (cm)
миллиметры – (mm)
пикселы – (px)
дюймы – (in)
пикасы (pc) 1pc = 12pt
Относительные величины – размер шрифта в процентах от высоты символов, принятой по умолчанию.
Величина размера шрифта может задаваться со знаком "-". Например, синтаксис: -566pt
Значения по умолчанию:
Large – крупный.
x – Large - крупнее
xx-Large – самый крупный
Small – маленький
x-Small – меньше
xx-Small – самый маленький.
Smaller – чуть меньше относительно базового значения
Larger - чуть больше относительно базового значения
Например, создадим в Блокноте Html-документ с таблицей:
-
Таблица размеров
размер
значение
размер
значение
Large
Крупный
Small
Маленький
x-Large
Крупнее
x-Small
Меньше
xx-Large
Самый крупный
xx-Small
Самый маленький
Для этого, внесите следующие теги:
<table border="2">
<tr>
<td colSpan="4" align="center"> таблица размеров</td>
</tr>
<tr>
<td> размер</td> <td> значение</td><td> размер</td> <td> значение</td> </tr>
<tr>
<td>Large</td> <td style="font-size:Large">Крупный</td><td>Small</td>
<td style="font-size:Small"> Маленький</td> </tr>
<tr>
<td>x-Large</td><td style="font-size: x-Large">Крупнее</td><td>x-Small</td>
<td style="font-size: x-Small"> Меньше</td> </tr>
<tr>
<td>xx-Large</td> <td style="font-size:xx-Large" >Самый крупный</td>
<td>xx-Small</td> <td style="font-size:xx-Small"> Самый маленький</td> </tr>
</table>
сохраните документ и проверьте результат.
Задание: добавьте в таблицу ещё одну строку и укажите в ней пропущенные размеры.
Font-family
Данный параметр имеет следующий синтаксис: { Font-family:шрифт1, шрифт2, шрифт3,…}
например: Р .f { Font-family:”Arial”, “Сourier New”, Monospase}
Весь текст будет написан шрифтом, указанным в данном параметре. Причем, если первого шрифта не окажется, то текст будет записан следующим шрифтом, который указан в параметрe Font-family и т.д. Если Вы не уверены, что требуемый шрифт установлен в системе посетителей сайта, то поместите данный шрифт на сервер в формате TTF без использования архиваторов и укажите URL к этому файлу:
P {font-family: Arial Black URL('…\fonts\arialblack.ttf');}
Задание: внесите в web-страницу три заголовка написанный разными шрифтами (правильное написание имен шрифтов смотрите в меню Правка - шрифт).
Font-style
Возможные значения:
Italic – написание наклонным шрифтом;
Normal – обычное стандартное написание;
Font-weight
Возможные значения:
Bold –полужирное начертание;
Bolder –более жирное начертание;
Lighter – тонкий шрифт;
Normal – стандартное написание.
Font-variant
Возможные значения:
Normal – стандартное написание;
Small-caps – заглавное написание.
Учтите, что свойство Font-variant поддерживается только IЕxplorer.
Задание: проверьте работу рассмотренных параметров.
Свойства текста
Для работы с текстом и абзацами предназначены следующие параметры:
Line-height – задаёт межстрочный интервал в пикселах, сантиметрах, миллиметрах или в процентах от интервала по умолчанию. Например: P { Line-height:30px;}
Text-decoration – управляет эффектами отображения и может принимать значения:
Underline – подчёркивание;
Overline – надчеркнутый (не поддерживается в Navigator-e);
Line-through – перечеркнутый;
Blink – мигающий (не поддерживается в IE)
None –никакие действия не производятся.
Text-transform – задает трансформацию текстового блока, поддерживается только в IE, может иметь значения:
capitalize – каждое слово начинается с заглавной буквы;
LowerCase - все буквы в строчные;
UpperCase - все буквы в прописные;
None –никакие действия не производятся.
Например: P { Text- transform: LowerCase;}
Text-align – выравнивание текстового блока относительно границ рабочего окна браузера или ячейки таблицы. Применяются совместно с блоковыми элементами: P, H1-H6, TD, TR и др. Возможные значения: left, center, right, justify (по ширине).
Text-indent – указывает на отступ в “красной строке” - в сантиметрах, миллиметрах, пикселях или в процентах.
Letter-spacing – устанавливает расстояние между символами текста в пикселях, сантиметрах или миллиметрах. Только для браузера IE.
Vertical-align – определяет вертикальное выравнивание текста в ячейках таблиц или графических изображений в текстовом блоке. Только для IE. Принимает значения:
Top, bottom, middle, baseline, top-text, bottom-text.
Задание: проверить работу рассмотренных параметров для заголовков различной величины.
Свойства границ
Среди свойств, доступных для описания, можно выделить свойство margin - для указания ширины полей, которые отделяют один элемент от другого. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов. Значения отступов задаются в пикселях, сантиметрах или миллиметрах:
Margin - left – поле между элементом и его соседями слева;
Margin-right – правое поле;
Margin-top – верхнее поле;
Margin-bottom – нижнее поле.
Margin: N – отступ будет установлен один для всех сторон;
Margin: top right bottom left – общий параметр для указания внешних границ элемента Web-страницы, т.е. одной командой описываем все границы, через пробел (причём, указанный порядок следования полей обязателен).
Для практикума, создайте Web-страницу, сохраните под именем Text.html, добавьте каскадную таблицу стилей:
<Style>
.one {position: absolute; left:100; top:50;}
.two {position: absolute; left:200; top:50;}
</style>
теперь в теле документа между тегами <body> вставьте строки
<P class="one">Если солнце плодит червей в дохлом псе – это божество, лобзающее падаль</P>
<P class="two">Не верь, что солнце ясно, что звезды - рай огней, что правда лгать не властна, не верь любви моей.</P>
Сохраните документ и просмотрите результат. Теперь в классе .two добавьте:
мargin-top:100
Сохраните документ и сравните результат.
Задание: расположите на Web-странице пять рисунков так, чтобы расстояние между ними не превышало 5 точек, 10 точек, в порядке указанном на рисунке:
Кроме создания внешних границ имеется возможность устанавливать величины внутренних отступов для объекта - например, для ячейки таблицы можно указать какое расстояние от линий таблицы до содержимого таблицы. Для этого используются свойства:
padding-left – определяет левое внутреннее поле элемента
padding-right – определяет правое внутреннее поле элемента
padding-bottom – определяет нижнее внутреннее поле элемента
padding-top – определяет верхнее внутреннее поле элемента
padding: top right bottom left – общий параметр для задания внутренних полей одной командой.
Например, .five {padding:10 20 30 40;}
Для практикума, вставьте в HTML-документ описание класса:
.try {padding-left:10; padding-top:10; padding-right:10; padding-bottom :20}
в тело документа добавьте описание таблицы:
<table border="1">
<tr>
<TD class="try"><img src="имя_файла.jpg" width="230" height="200"> </TD>
</tr>
</table>
сохраните документ и проверьте результат.
Задание: поместить в Web-страницу таблицу из одной строки в две ячейки – одну заполнить рисунком, а другую текстом. Задать различные внутренние отступы.
Элемент Web-страницы можно поместить в рамку без использования таблиц, для этого следует использовать параметр border, который имеет следующий синтаксис:
border: color style width
В том случае, если необходимо указать какие-либо значения рамки для одной из сторон элемента, можно использовать параметры:
Border-top-width –установка ширины верхней границы рамки
Border-left-width – установка ширины левой границы рамки
Border-right-width – установка ширины правой границы рамки
Border-bottom-width – установка ширины нижней границы рамки
Border-width – установка ширины всех границ рамки одновременно
Все перечисленные параметры работают только в том случае, если указан стиль рамки, т.е. определено значение параметра border-style:
none –запрещает рисование границ;
dotted –точечная граница;
dashed –штрихованная линия;
solid –сплошная линия;
double –двойная сплошная линия;
groove –трёхмерная вдавленная линия;
ridge – трёхмерная выпуклая линия;
inset – трёхмерная выпуклая ступенчатая линия;
outset – трёхмерная вдавленная ступенчатая линия;
border-color –определяет цвет линии. Можно использовать как стандартные имена цветов, так и шестнадцатеричные значения.
Для практикума рассмотренных выше параметров выполните следующие действия:
вставьте в таблицу стилей следующее описание:
p { Border-top-width:5;
Border-left-width:10;
Border-right-width:15;
Border-bottom-width :20;
border-style:double;
border-color:Red;
font-size:xx-large;
padding: 20;}
в тело документа вставьте строки:
<P>Все, что видим мы, - видимость только одна.
Далеко от поверхности мира до дна.</P>
<P>Полагай несущественным явное в мире,
Ибо тайная сущность вещей – не видна.</P>
сохраните документ и проверьте результат.
Задание: обрамите, вставленные ранее в Web-страницу рисунки рамками различных стилей, цветов и
ширины.
Свойства цвета и фона
Для определения цветового оформления используются три параметра:
Color – определяет цвет любого элемента CSS. Например, SMALL {color: red;}
Background-image :URL(имя файла с картинкой) – устанавливает фоновый рисунок всего документа или ячейки таблицы. При использовании значения none - фоновое изображение отсутствует.
Например, BODY{background-image URL(picture.gif);}
Background-Color – устанавливает цвет фона.
Background-repeat – определяет параметры повторения (копирования) фонового изображения в разных направлениях видимой части документа. Может принимать значения:
no- repeat – не повторять изображение;
repeat – повторять во всех направлениях;
repeat-x – только по горизонтали;
repeat-y – только по вертикали.
Background-position – позволяет зафиксировать положение фонового изображения при использовании свойств repeat-x, repeat-y. Может принимать значения:
top – позиционирование по верхней границе экрана;
middle – по центру экрана;
bottom – по нижней границе;
left – по левой границе;
right – по правой границе;
center - по центру.
Можно, также, указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселях, миллиметрах или сантиметрах.
Например,
BODY {background-position: 30cm 0cm;}
TD {background-position: middle;}
Background-attachment – устанавливает правила скроллинга фонового изображения. Может принимать значения:
scroll – фоновое изображение двигается вместе с содержимым страницы при прокрутке документа;
fixed – изображение фиксируется на экране.
Например, BODY {Background-attachment: fixed;}
Установка полей документа
Для установки левого и правого поля документа необходимо использовать такие параметры, как margin-Left и margin-Rigth. Например:
<style type=”text/css”>
body {margin-Left: 10%; margin-Rigth:10%;}
</style>
т.е. в Web-странице установлены левое и правое поля в размере 10% от размеров окна.
Точно также можно создавать отступы для заголовков и других элементов.
Задание: установите поля страницы, отступы для заголовков в размере 5%.
Для создания интервалов между элементами необходимо использовать такие параметры, как margin-bottom и margin-top, которые контролируют нижний и верхний отступы соответственно. Например, чтобы отделить все абзацы от остального текста, необходимо в таблице стилей поместить следующую строку:
P {margin-top:5; margin-bottom:3;}
Если же нужно отделить только некоторые абзацы можно воспользоваться классами или идентификаторами, например:
P .absac { margin-top:5; margin-bottom:3;}
Тогда в теге абзаца, для которого нужно установить отступ, нужно прописать класс:
<P class=”absac”> отделяемый абзац</P>
Другим вариантом визуального разделения в документе является создание абзацного отступа (красная строка). Для этого используют параметр text-indent, например:
P {text-indent:20;}
Данная строка указывает, что в абзаце задан отступ в 20 пикселей для первой строки.
Задание: создать сайт, в нем расположить текст, скопированный из любого текстового документа и установить для него все свойства абзаца.
Содержание отчета
Название лабораторной работы, цель.
Выпишите теги описания свойств элементов, назначение, приемы использования на примерах.
Приложите к отчету распечатки полученных HTML-документов.