Лабораторная работа. Основы динамического языка HTML
Цель. Познакомиться с CSS, способами встраивания CSS в документ.
ОСНОВНЫЕ ПОНЯТИЯ
Стили, а правильнее таблицы каскадных стилей, (Cascading Style Sheets (сокращенно CSS)) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. Применяя CSS, вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного ранее.
Можно в одном файле описать все значения для заголовков, абзацев, фона. И сохранить этот файл под любым именем, но с разрешением css. Например – mystyle.css. А в каждой страничке между тегами HEAD и /HEAD ввести строку
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystyle.css">
Создайте файл mystyle.css, где укажите фон всего документа BODY - черный, цвет каждого абзаца P – желтый, цвет заголовка H2 - красный. Откройте Блокнот, назовите файл mystyle.css и напишите в нем следующее:
BODY {background-color:black} P {color:yellow} H2 {color:red} |
Начните новую страничку (например, kaskad.html) и напишите следующее:
<HTML> <HEAD> <TITLE>Пример</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="mystyle.css"> </HEAD> <BODY> <H2>Афоризмы</H2> <P> Люди, которые читают книги, всегда будут управлять теми, кто смотрит телевизор. <P> Почему в банке всегда привязывают шариковые ручки?! <P> Если я доверяю вам свои деньги, то вы должны доверять мне хотя бы свои ручки! </BODY> </HTML> |
Просмотрите результат в браузере.
ПРАВИЛА
Можно задать стиль для каждого тега. В предыдущем примере мы задали стили для тегов BODY, H2 и P. В этом случае каждая строчка является правилом. То есть у нас три правила. Теги BODY, H2 и P в этом случае являются селекторами, а то, что заключено в фигурные скобки – называется определением. Каждое определение состоит из свойства (background-color, color и т.д.) и значения (black, yellow, red).
Можно дать не одно, а несколько определений в одном правиле! Например, для селектора H2 мы можем задать не только красный цвет, но и расположение этого заголовка по центру. А для селектора P дадим сразу три определения: желтый цвет, наклонный шрифт и выравнивание по правому краю! Откройте документ mystyle.css и внесите изменения:
BODY {background-color:#000} P {color:#FF3; text-align:right; font-style:italic} H2 {color:#F03; text-align:center} |
Сохраните изменения и просмотрите результат в браузере.
ВСТРАИВАНИЕ CSS В ДОКУМЕНТ
Запись во внешнем файле - не единственная возможность добавления стилей CSS в документ. Можно его ввести даже в самом этом документе при помощи слов STYLE=... и вместо точек записывать нужное правило:
<HTML> <HEAD> <TITLE> Афоризмы 2</TITLE> </HEAD> <BODY STYLE="background-color:#000"> <H2 STYLE="color:#F03; text-align:center">Афоризмы</H2> <P STYLE="color:#FF3; text-align:right; font-style:italic"> Люди, которые читают книги, всегда будут управлять теми, кто смотрит телевизор. <P STYLE="color:#FFF; text-align:left; font-style:italic"> Почему в банке всегда привязывают шариковые ручки?! <P STYLE="color:#FF3; text-align:right; font-style:italic"> Если я доверяю вам свои деньги, то вы должны доверять мне хотя бы свои ручки! <P STYLE="color:#FFF; text-align:left; font-style:italic"> Привет миру </BODY> </HTML> |
Сохраните изменения и просмотрите результат в браузере.
Есть еще один метод включения CSS в документ – встроенный стиль. Этот стиль записывается в заголовке страницы. Он воздействует на всю страницу! Создайте документ mystyle1.htm:
<HTML> <HEAD> <TITLE>Пример 3</TITLE> <STYLE TYPE="text/css"> BODY {background-color:#000} P {color:#FF3; text-align:right; font-style:italic} H2 {color:#F03; text-align:center} </STYLE> </HEAD> <BODY> <H2> Афоризмы </H2> <P> Люди, которые читают книги, всегда будут управлять теми, кто смотрит телевизор. <P> Почему в банке всегда привязывают шариковые ручки?! <P> Если я доверяю вам свои деньги, то вы должны доверять мне хотя бы свои ручки! </BODY> </HTML> |
Сохраните изменения и просмотрите результат в браузере.
ЕДИНИЦЫ ИЗМЕРЕНИЙ
Откройте Блокнот и напишите:
<HTML> <HEAD> <TITLE>Пример с дюймами</TITLE> <STYLE TYPE="text/css"> P {font-size:1in} H2 {font-size:2in; text-align:center} </STYLE> </HEAD> <BODY> <H2>Заголовок размером в два дюйма</H2> <P> А вот этот текст размером в один дюйм, и как утверждают одни - это и есть размер большого пальца короля Генриха VIII, другие - длина трех зерен из средней части колоска, а третьи - что это одна двенадцатая от расстояния от носа до среднего пальца вытянутой руки короля Генриха I. </P> </BODY> </HTML> |
Сохраните файл под именем ed_izm1.html и просмотрите результат в браузере.
Откройте Блокнот и напишите:
<HTML> <HEAD> <TITLE>Пример с пикселами</TITLE> <STYLE TYPE="text/css"> P {font-size:15px} H2 {font-size:20px; text-align:center} </STYLE> </HEAD> <BODY> <H2>Заголовок размером в 20 пикселов</H2> <P> А вот этот текст размером в 15 пикселов, и если попробовать изменить разрешение экрана, то можно будет читать этот текст и без бинокля. Кому как нравится </P> </BODY> </HTML> |
Сохраните файл под именем ed_izm2.html и просмотрите результат в браузере.
Итак, к абсолютным единицам можно отнести дюймы (in), миллиметры (mm) и сантиметры (cm), пункты (pt), которые равны 1/72 дюйма, пики (pc), которые равны 12 пунктам.
Что же касается относительных величин, то тут, кроме пикселов (px), можно использовать и проценты, например в стилях написать следующее: font-size:200%. И есть еще две интересные величины - em и ex. Первая величина - это ширина буквы m текущего шрифта, а вторая - высота буквы x шрифта.
Свойства шрифтов
Напишите следующий код:
<HTML> <HEAD> <TITLE>Реклама сайта</TITLE> <STYLE TYPE="text/css"> H2{ font-family:Garamond, "Times New Roman", Bodony, serif; font-size:x-large; font-style:normal; font-weight:bold; font-variant:small-caps } H4 { font-family:Arial, Verdana, Helvetica, sans-serif; font-size:30px; font-style:italic; font-weight:600; font-variant:normal } </STYLE> </HEAD> <BODY> <H2>Настоящая Правда</H2> <H4>на "www.pravda.ru"</H4> </BODY> </HTML> |
Сохраните изменения и просмотрите результат в браузере.
В CSS можно сделать и сокращенную запись, например такую:
<HTML> <HEAD> <TITLE>Титульный лист</TITLE> <STYLE TYPE="text/css"> H2{font: bold x-large normal small-caps Garamond, "Times New Roman", Bodony, serif } H4{font: italic 600 30px Arial, Verdana, Helvetica, sans-serif } </STYLE> </HEAD> <BODY> <H2> Настоящая Правда</H2> <H4>на "www. pravda.ru</H4> </BODY> </HTML> |
В обоих случая результат будет одинаков.
Итак, к свойствам шрифта font можно отнести 5 пунктов:
font-family, отвечающий за гарнитуру шрифта;
font-size, который определяет размер шрифта;
font-style, который задает стиль шрифта - обычный, наклонный или курсивом;
font-weight, отвечающий на сколько жирненьким получится шрифт;
font-variant, указывающий на вариант начертания буковок - должны ли они быть все маленькими прописными или просто нормальными
Рассмотрим подробно каждый пункт.
Font-family
Все шрифты разделены на пять семейств: семейство с засечками (serif), семейство без засечек (sans-serif), семейство шрифтов с буквами одинаковой ширины (monospace), семейство рукописных шрифтов (cursive) и семейство вычурных шрифтов (fantasy)
Семейство "serif"
К этому семейству относятся: Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit . Из кирилицы можно выделить шрифты Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst.
Напишите код:
<HTML> <HEAD> <TITLE>Семейство "serif"</TITLE> <STYLE TYPE="text/css"> P {font-family:serif} </STYLE> </HEAD> <BODY> <P> " НАСТОЯЩАЯ ПРАВДА" на www. pravda.ru </P> </BODY> </HTML> |
Сохраните изменения в файле serif.html и просмотрите результат в браузере.
Можно написать и так:
<HTML> <HEAD> <TITLE>Семейство "serif"</TITLE> <STYLE TYPE="text/css"> P{font-family:Garamond, "Times New Roman", Bodony, serif } </STYLE> </HEAD> <BODY> <P> " НАСТОЯЩАЯ ПРАВДА" на www. pravda.ru </P> </BODY> </HTML> |
Сохраните изменения и просмотрите результат в браузере.
Запись: {font-family:Garamond, "Times New Roman", Bodony, serif} для браузера будет означать - напишите всё шрифтом "Garamond", а если его нет, то "Times New Roman" или Bodony.
Семейство "sans-serif"
К этому семейству относятся такие шрифты как Arial, Verdana, Helvetica, Tahoma, Futura.
Семейство "cursive".
Примером этого семейства служат шрифты "Caflish Script", "Zapf-Chancery"
Семейство "monospace"
К этому семейству относятся шрифты "Courier New", Prestige, Everson Mono.
Семейство "fantasy"
К этому семейству относятся шрифты "Alpha Geometrique", "Western"
Font-size
Размер можно задавать с помощью ключевых слов: xx-small; x-small; small; medium; large; x-large и xx-large. xx-small - самый мелкий шрифт, а xx-large - самый крупный.
Шрифт можно задавать и в пунктах (pt), и в пикселях (px), и в дюймах (in), и в миллиметрах (mm), сантиметрах (cm), пиках (pc) и просто в процентах (%)! С помощью слов smaller или larger можно уменьшить или увеличить отдельные слова по сравнению с основным, родительским текстом.
Font-style
Это свойство отвечает за стиль шрифта, и указывает, каким ему быть - прямым normal, наклонным oblique или курсивным italic.
Font-weight
Это свойство определяет толщину шрифта (насыщенность начертания). Можно написать просто:
<HTML> <HEAD> <TITLE>Полужирный шрифт</TITLE> <STYLE TYPE="text/css"> P {font-weight:bold} </STYLE> </HEAD> <BODY> <P> "НАСТОЯЩАЯ ПРАВДА" на www.pravda.ru </P> </BODY> </HTML> |
Кроме bold можно написать и bolder (толще) и lighter (тоньше). Можно указать насыщенность не только словами, но и числами от 100 до 900! Не все числа можно использовать, а только кратные 100. А число 400 равно bold. В вышеприведенном примере можно написать P {font-weight:400}
Font-variant
small-caps - маленькие буквы пишутся как заглавные, но оставаясь при этом маленькими.