Главная страница
qrcode

Н., хаи, 2013 11. Введение в веб-программирование. Html-разметка


Скачать 11.83 Mb.
НазваниеН., хаи, 2013 11. Введение в веб-программирование. Html-разметка
Дата10.09.2019
Размер11.83 Mb.
Формат файлаpdf
Имя файлаВведение в веб-программирование.pdf
оригинальный pdf просмотр
ТипРеферат
#64805
страница2 из 12
Каталог
1   2   3   4   5   6   7   8   9   ...   12


Цифровой мир


Интернет является color="#ee0000" face="Verdana" size="6">
самым большим сегментом телекоммуникаций.
color:#aaffaa">
Каждый день мы пользуемся Интернетом, мобильной связью, смотрим телевизор.
Телекоммуникации делают нашу жизнь качественнее.
for i:=1 to 50 do begin x:=x+i; writeln(x); end;
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
8
2. Каскадные таблицы стилей
В данной лекции мы рассмотрим основы CSS. Полный перечень всех свойств CSS с примерами их использования
Вы изучите сами, по мере того, как они Вам понадобятся на практике при верстке веб-страниц. В этом Вам поможет любой из справочников по CSS в сети Интернет (можно порекомендовать, например, сайт http://htmlbook.ru/css
).
Каскадные таблицы стилей (Cascading Style Sheets, CSS) предназначены для облегчения оформления web-страниц.
Основное их назначение - отделение содержания веб-страниц
(HTML) от их оформления (CSS), которое может быть единым для нескольких веб-страниц, и изменения в котором легко вносить.
Рассмотрим пример (файл ex2_01.html), который поможет нам понять вышесказанное (см. рисунок 2.1).



Браузер
- программное обеспечение для просмотра веб-сайтов.

Веб-сервер
-
Веб-сервер - это сервер, принимающий
HTTPзапросы от клиентов, обычно веббраузеров, и выдающий им HTTPответы.
JavaScript
- язык сценариев для придания интерактивности веб-страницам.


Браузер
- программное обеспечение для просмотра веб-сайтов.

Веб-сервер
-
Веб-сервер - это сервер, принимающий
HTTPзапросы от клиентов, обычно веббраузеров, и выдающий им HTTPответы.
JavaScript
- язык сценариев для придания интерактивности веб-страницам.
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
9
этом параграфе: внутри тега <style> .. </style>, в атрибуте
style нужного тега, в отдельном файле с описанием стилей.
В примере на рисунке 2.2 используется первый способ.
Внутри тега <style> .. </style> описываются стили (один или несколько), которые затем используются в оформлении элементов веб-страницы. Для этого в теге, который требуется оформить в соответствии с данным стилем, в атрибуте class указывается имя стиля.
В данном примере именем стиля является “.papa” (любое слово, выбранное нами). В фигурных скобках перечисляются
свойства стиля, которые мы хотим задать, и их значения. В общем виде формат описания стиля выглядит так: имя_стиля { свойство_1 : значение; свойство_2 : значение;
}
В данном примере font-family, font-weight, font-size,
font-style, display - это свойства стиля, а Verdana, bold,
large, italic, inline - их значения.
Если имя стиля - это любое имя, придуманное нами, то для имен свойств и их значений существуют специальные имена. В данной лекции мы рассмотрим некоторые из них, а полный перечень служебных имен свойств стилей и их значений Вы можете найти самостоятельно в справочнике.
Не старайтесь сразу изучить весь справочник. Изучайте новые свойства стилей постепенно, по мере практической необходимости в них.
В данном примере font-family задает имя шрифта, font-
weight - толщину шрифта, font-size - размер шрифта, font-
style - наклонность. Смысл свойства display рассмотрим чуть позже.
Итак, в тегах <style> .. </style> мы описали стиль, который назвали “.papa”. Каким образом назначить его какому-либо тексту? Для этого чаще всего используется тег
<div> .. </div>. Тег задает прямоугольную область (блок текста), внутри которой, кроме текста, может находиться что угодно - изображения, ссылки, таблице и даже другие блоки, ограниченные тегами <div> .. </div>.
Чтобы на весь текст внутри тегов <div> .. </div> распространялся требуемый нам стиль оформления, нужно в атрибуте class тега
указать имя стиля (см. рисунок
2.2). В данном случае это выглядит так:

Стиль будет распространятся на весь текст до тех пор, пока не встретится закрывающий тег
.
Данный пример сразу показывает нам преимущества использования стилей. Во-первых, если мы захотим внести изменения в оформление страницы, то достаточно это сделать только в одном месте, а не во многих, как раньше.
Кроме того, текст веб-страницы стал более структурированным и читаемым.
Добавим в оформление зеленый фон (см. рисунок 2.3) и изменим шрифт с Verdana на Helvetica (файл ex2_03.html).
Как видим, изменения были внесены только в описание стиля .papa, а визуально проявились в трех разных местах веб-страницы.
Здесь background-color - свойство стиля, задающего цвет фона веб-страницы. В приведенном примере его значение было заданно специальным служебным словом
lightgreen (светло-зеленый).
1   2   3   4   5   6   7   8   9   ...   12

перейти в каталог файлов


связь с админом