Лабораторная работа№1,2
.pdfo MARGINWIDHT и MARGINHEIGHT - параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки
o NORESIZE - параметр, указывающий на то, что размер рамки-фрейма никогда не будет меняться.
<NOFRAMES> |
|
|
|
|
<BODY> |
|
|
|
|
...Здесь |
располагается |
текст |
без |
фреймов |
<BODY>
</NOFRAMES>
21
ЛАБОРАТОРНАЯ РАБОТА № 2 ТЕХНОЛОГИЯ CSS
Задание к лабораторной работе №2
Создать небольшой тематический сайт по одной из тем, связанных с историей техники и технологий или фирм. Сайт должен содержать заголовки, абзацы, списки и таблицы, имеющие стилевое оформление посредством CSS при этом использовать три способа определения каскадных таблиц стилей: связанные, вложенные, встроенные. Продемонстрировать действие приоритетов при применении различных способов определения CSS.
1.История авиации (воздухоплавания).
2.История автомобилестроения (автомобиля).
3.История атомной (ядерной) бомбы, ядерного оружия, ядерных
испытаний.
4.История атомной (ядерной) энергетики.
5.История Apple.
6.История Apple macintosh.
7.История баз данных.
8.История биотехнологии.
9.История биологического оружия.
10.История Boeing боинг(боинга).
11.История вертолетостроения (вертолета).
12.История вычислительной (компьютерной) техники.
13.История вооружений (военной техники).
14.История железнодорожного танспорта.
15.История информатики.
16.История интернета (возникновения интернета).
17.История IBM.
18.История IBM PC.
19.История Intel.
20.История космонавтики.
21.История кораблестроения (кораблей).
22.История лазера.
23.История майкрософт (microsoft).
24.История microsoft ofice.
25.История мотоциклов (мотоцикла).
26.История микропроцессоров (микросхем).
27.История нанотехнологий (нанотехнологии).
28.История ПВО (противовоздушной обороны).
29.История подводных лодок.
30.История программирования (программного обеспечения).
31.История программирования (языков программирования).
32.История ракетной техники (ракетостроения).
33.История самолетостроения (самолетов).
34.История танков.
35.История ускорителей.
36.История электротехники.
37.История электроники.
22
CSS (Cascading Style Sheets - каскадные таблицы стилей) это технология, расширяющая возможности стилевого оформления Webстраниц, по сравнению со стандартными средствами HTML. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания. Атрибуты дескрипторов HTML заменяются свойствами CSS, которые позволяют установить цвет фона и текста, границы, шрифт и другие параметры практически для любого дескриптора CSS. Существуют так же специфические свойства CSS, применимые, например, к таблицам и спискам. Применение CSS настоятельно рекомендуется в стандарте HTML, начиная с версии 4.0. Ряд атрибутов дескрипторов HTML, таких как ALIGN, не рекомендуются к использованию.
Методы определения таблицы стилей в документе HTML:
a.Связывание(linking)- Внешние таблицы стилей
b.Вложение(embeding)- Информация о стиле в заголовке: элемент
STYLE
c.Встраивание(inline) - Атрибут style
d.Импорт(import) - @import url(file_css.css)
Inline-стиль (атрибут STYLE)
Для любого дескриптора HTML может быть указан атрибут STYLE, которому присваивается перечень свойств CSS, заключенный в кавычки. Для каждого свойства после двоеточия указывается одно или несколько значений, разделенных пробелами. Пары свойство: значение разделяются точкой с запятой. Inline-стиль рекомендуется использовать, если данное стилевое оформление используется только один раз и в одном единственном документе, правда следует учитывать, что не все браузеры корректно отображают применение inline-стиля.
23
Вложенная таблица стилей (дескриптор STYLE)
Вложенная таблица стилей применяется если заданный в ней стиль встречается только в одном HTML документе, но несколько раз. Для создания внедренной таблицы стилей используется дескриптор <STYLE>...</STYLE>, помещенный в заголовочном разделе HTML
страницы <HEAD>...</HEAD>. Внутри контейнера <STYLE>...</STYLE>
перечисляются ключевые слова стилизуемых дескрипторов. После каждого ключевого слова в фигурных скобках, через точку с запятой указываются пары свойство: значение. Стилизованный таким образом дескриптор называется селектором. Селекторы используются для форматирования документа в разделе <BODY>...</BODY>
24
Связывание и импортирование стилевой таблицы
Если мы хотим использовать единое стилевое оформление для нескольких HTML документов, целесообразно поместить стилевую таблицу в отдельный файл, а затем воспользоваться механизмом связывания или импортирования. На основе предыдущего примера рассмотрим эти механизмы, создав для стилевой таблицы файл
mystyle.css.
Связывание
25
Импортирование
Селекторы класса
Предположим нам нужно два типа абзацев, каждый из которых имеет свое собственное стилевое оформление. В этом случае мы создаем два вида селекторов: P.first и P.second. Мы создаем два класса для одного дескриптора <P>: first и second (имена классов любые).
26
Селектор по id
Данный селектор применяется если необходимо выделить один единственный элемент, уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:
htmlчасть:
<h1 id="firstheader"> Первый заголовок на странице </h1> css - часть:
#firstheader {
color: red; // задает красный цвет текста font-weight: bold; // шрифт станет жирным text-align: center; // центрирование
}
Групповые селекторы
Групповые селекторы – это когда вместо одного имени тега будет использоваться несколько. К примеру, вы хотите, чтоб почти весь текст на вашей страничке был одним цветом - заголовок и сам текст, вот для этого и существуют групповые селекторы.
Заходим в наш файл стилей и прописываем новый селектор:
p, h1{ color:#ваш цвет;
}
Семейство шрифтов
Семейство шрифтов текста задается с помощью свойства font-family. Свойство font-family должно содержать несколько имен шрифтов, как
"резервные" системы. Если браузер не поддерживает первый шрифт, он пытается использовать следующий шрифт и т.д.
Начните со шрифта, который вы хотите установить, и закончите с общей семьей шрифтов, чтобы браузеры могли выбрать аналогичный шрифт в общей семье, если нет других доступных шрифтов.
Примечание: Если имя шрифта содержит более чем одно слово, оно должно быть в кавычках, как font-family: 'Times New Roman'. Более одного семейства шрифтов указываются в списке разделенном запятыми:
27
Стиль шрифта
Свойство font-style в основном используется, например, для указания текста курсивом, имеет три значения:
font-style: normal|italic|obligue
∙normal - текст отображается нормально
∙italic - текст отображается курсивом
∙oblique - текст "наклонный" (oblique очень похож на курсив, но менее поддерживается)
Размер шрифта
Свойство font-size устанавливает размер текста в формате:
font-size: абсолютный размер | относительный размер | значение | % | inherit Возможность управлять размером текста играет важную роль в веб-дизайне.
Однако, вы не должны использовать корректировку размера шрифта, чтобы параграфы выглядели как заголовки или заголовки выглядели как параграфы.
Важно!
Как правило, по умолчанию для большинства браузеров
1em = 12pt = 16px = 100% = medium
Eдиницы «px» и «pt», не лучшим образом подходят для веб-документов, т.к не масштабируются, что заставляет нас использовать «em» и "%", которые масштабирутся, а значит лучше подходят для мобильных приложений.
Выравнивание текста
Свойсто text-align отвечает за выравнивание текста по горизонтали. Текст можно выравнивать по центру (center), по правому/левому (right/left) краю или по ширине. Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах).
Различные маркеры списка элементов
Тип маркера пункта списка указывается со свойством list-style-type
28
Кроме того, можно определить свой собственный маркер списка, сделать это можно так:
ul { list-style-image: url(images/book.gif); }
Свойства цвета и фона
Древние реликты (HTML)
Для начала взглянем на фон с точки зрения HTML. Точка зрения, надо сказать, не самая лучшая, но будем соблюдать хронологию. Итак, для работы с фоном у нас имеется два атрибута:
1.bgcolor - задает фоновый цвет элемента. Присутствует у элементов
BODY, TABLE, TR, TH и TD. В спецификации HTML 4.01 помечен как нежелательный для использования;
2.background - задает фоновое изображение для элемента. Согласно спецификации HTML 4.01 присутствует только у элемента BODY и помечен как нежелательный для использования, однако браузеры поддерживают данный атрибут для элементов TABLE и TD.
Естественно, набор крайне ограничен и морально устарел.
Альтернатива новой эры - CSS
Присвоение элементам цветовых и фоновых значений помогают создать зрелищную WEB-страницу. В CSS можно использовать множество свойств, которые придадут вашей странице требуемую привлекательность.
color - Определяет цвет текста
Значение:
∙любое соответствующее стандарту значение цвета.
∙inherit - применяется значение родительского элемента.
p{color:red}
p{color:rgb(255,0,0)}
p{color:#ff0000}
background-color- Определяет цвет фона.
Значение:
∙любое соответствующее стандарту значение цвета.
∙transparent - фон элемента делается прозрачным (по умолчанию).
∙inherit - применяется значение родительского элемента.
body{
background-color: black;
29
}
background-image - Определяет фоновое изображение элемента.
Значение:
∙none - фоновое изображение не устанавливается.
∙любое соответствующее стандарту значение URL фонового изображение.
∙inherit - применяется значение родительского элемента.
h1{
background-image: url(pictures.gif);
}
background-attachment: - Устанавливает прокрутку
При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано.
Значение:
∙scroll - фон прокручивается вместе с содержимым;
∙fixed - фон строго зафиксирован.
div{
background-image: url(pictures.gif); background-attachment: fixed ;
}
opasity: - Установка полупрозрачного фона
Задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может.
Результат применения данного свойства Вы можете наблюдать на этой странице.
div{
border-radius:20px; /* Закругленные уголки */
background-color:white; /* Цвет фона */ opacity: 0.9; /* Полупрозрачный фон */
}
background-position: - задает местоположение фонового изображения.
В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали. Величина смещения может быть указана как с помощью пикселей
(px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:right top;
background-position:center center;).
body
{
background-image:url('spider2.gif');
background-repeat:no-repeat; background-position:40px 60px;
}
30