Лаб 1 (Лабораторный практикум), страница 4

Вбраузере Firefox существует консоль ошибок, которая доступна через менюИнструменты/Веб-разработка/Консоль ошибок или через нажатие комбинацииклавиш Ctrl+Shift+J.Для рассматриваемой страницы получаем сообщение, представленное нарисунке 12.Рисунок 8 Просмотр ошибок отображения браузера.Итого, по результатам проверки выявлено: В разметке страницы отсутствует закрывающий тег </p> в строке<div id="content"><p>Некоторый текст для проверки размещенияэлемента.</p></div> Нарушены таблицы стилей, поскольку отсутствует разделитель ‘;’ междуселекторами:21top: 50px;border: 1px solid black;22Часть 2.

Cascading Style Sheets (CSS)CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) —формальный язык описания внешнего вида документа, который написан сиспользованием языка разметки HTML.Подготовкой и выпуском спецификации занимается консорциум W3C http://www.w3.org/Style/CSS/Исторически CSS появился вместе с HTML4.01 для упрощенияманипулирования разметкой, поскольку именно использование стилейпозволяет осуществлять групповую замену шрифта, цвета, размера ивзаимного расположения элементов.CSS используется применительно к языкам разметки HTML и XHTML, номожет также применяться к любым XML-документам, например, к SVG илиXUL.СелекторыКлючевое понятие в CSS – селектор, которое представляет собой правило дляприменения стиля. Браузер для каждого элемента пытается применить стиль всоответствии с заданным правилом.

Стиль содержит набор свойств.Различают простые селекторы, которые будут применены к указанномуэлементу (в примере к любому заголовку h1, h2, h3):h1 { font-family: sans-serif }h2 { font-family: sans-serif }h3 { font-family: sans-serif }Группы селекторов (эквивалентно выше приведённому фрагменту):h1, h2, h3 { font-family: sans-serif }Селекторы класса:*.pastoral { color: green }/* все элементы, имеющие class=pastoral */Или.pastoral { color: green }/* все элементы, имеющие class=pastoral */А также:H1.pastoral { color: green }/* только элементы H1, имеющие class=pastoral */Селекторы идентификатора ID:h1#chapter1 { font-family: sans-serif } /* для <h1 id=”chapter1”>…</h1> */#chapter1 { font-family: sans-serif } /* для любого элемента с id=”chapter1” */23Селекторы атрибутов:h1[class] { font-family: sans-serif } /* элемент имеет class */h1[class=”fancy”] { font-family: sans-serif } /* элемент имеет class=”fancy” */*[title] { font-family: sans-serif } /* любой элемент, имеющий заголовок */Селектор потомков (устанавливает иерархию применения):tr h1 { font-family: sans-serif } /* <tr><td><h1>…</h1></td></tr>*/Псевдоклассы (особый вид динамически атрибутов, который меняются взависимости от определенных действий):a:linka:visiteda:hovera:active/*/*/*/*ссылки, которые не были посещены */посещенные ссылки */выделенная в данный момент ссылка */активные ссылки */ШрифтыПри оформлении страницы доступны следующие семейства шрифтов: Serif - шрифты с засечками.

Обычно используются при бумажной печати.Наиболее используемый шрифт – Times. Sans-serif - шрифты без засечек. Подходят для заголовков. Наиболееиспользуемые шрифты этого семейства – Arial, Helvetica, Verdana. Monospace - шрифт, обеспечивающий равную ширину символов.Используется для вывода примеров кода, поскольку внешний вид этоготекста будет соответствовать текстовой консоли. Наиболееиспользуемый шрифт – Courier. Fantasy, Cursive – декоративные и курсивные шрифты. Не рекомендуютсяк использованию, поскольку шрифты этой группы не обязательноприсутствуют на компьютере, на котором будут просматривать htmlстраницу.Выбор семейства шрифта осуществляется свойством font-family.

Примеротображения семейств стилей:<p<p<p<p<pstyle="font-family:style="font-family:style="font-family:style="font-family:style="font-family:serif">Serif: Образец текста</p>sans-serif">Sans-serif: Образец текста</p>cursive">Cursive: Образец текста</p>fantasy">Fantasy: Образец текста</p>monospace">Monospace: Образец текста</p>Результаты отображения в разных браузерах представлены на рисунках 5 и 6.24Рисунок 9 Пример отображения шрифта в Mozilla Firefox 5Рисунок 10 Пример отображения шрифта в MS Internet Explorer 9Обратите внимание на то, что семейство Fantasy не совпадает по отображению.Кроме того, различен размер шрифта при отображении по умолчанию, которыйзависит от системных настроек браузера.

Более того, для каждого семействашрифтов, различные браузеры в различных операционных системах могутиметь различные конкретные шрифты, соответствующим этим семействам.Свойство font-family может содержать перечисление шрифтов:p{font-family:"Times New Roman", Times, serif;}В этом случае браузер последовательно будет пытаться найтисоответствующий шрифт в системе. Если конкретный шрифт не будет найден25(в примере "Times New Roman", Times), то будет использован шрифт,назначенный для указанного (serif) семейства по-умолчанию.Возможно указать начертание шрифта с использованием свойства font-style.Допустимые значения:font-style: normal | italic | oblique | inheritnormal – обычное начертание, italic – курсив (имитация рукописного шрифта),oblique – наклонный шрифт (образован наклоном обычного).Размер шрифта задаётся с помощью свойства font-size.Возможные значения: Относительный размер – константы: larger и smaller. Абсолютный размер – константы xx-small, x-small, small, medium, large,x-large, xx-large. Размер в процентах от шрифта родительского элемента.

Указывается сознаком %). Размер в пикселах. Указывается с суффиксом px. Размер в специальных единицах: em (высота элемента, равная размерутекущего шрифта), ex (высота символа х), пункты (pt).Толщина шрифта регулируется при помощи свойства:font-weight: normal | bold | bolder | lighter | 100, 200 .. 900normal – обычная толщина,bold — жирный шрифт,bolder — предельно жирный шрифт,lighter — тонкий шрифт,100 — тонкий шрифт, 400 — соответствует нормальному, 700 — жирному.Пример:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#p1 {font-size: 100%}#p2 {font-size: smaller}#p3 {font-size: larger}#p4 {font-size: 12px}#p5 {font-size: 12pt}#p6 {font-size: 0.5em}#p7 {font-size: 12x}</style></head><body><p id="p1">Образец текста</p><p id="p2">Образец текста</p><p id="p3">Образец текста</p><p id="p4">Образец текста</p><p id="p5">Образец текста</p><p id="p6">Образец текста</p>26<p id="p7">Образец текста</p></body></html>ЦветСвойство color задаёт цвет шрифта.

Возможно указание по названию цвета (red,green, lime), так и указание точного его значения в системах RGB, HSL, а такжеRGBA, HSLA (добавлен канал прозрачности). Полный перечень допустимыхзначений см. http://www.w3.org/TR/css3-color/Пример:body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}Отметим, что выбор цветов, цветовой схемы является очень важным элементомсоздания дизайна сайта. Существуют определенные методики подборасовместимых цветов. Имеются бесплатные средства в Интернете, напримерhttp://colorscheme.ru/.ФонФон элементов может быть задан однородным цветом, одиночным илимозаично расположенным изображением.

Подробнее см.http://www.w3schools.com/css/css_background.aspИспользуются следующие свойства:background-color – однородный цвет константой или кодом в одной издопустимым систем цветности.Пример: div {background-color:#b0c4de;}background-image – фоновое изображение.Пример: body {background-image:url('paper.gif');}background-repeat – флаг мозаичного размножения изображения.Пример:body {background-image:url('gradient2.png');background-repeat:repeat-x;}background-attachment – указывает, будет ли изображение смещаться прискроллировании или будет оставаться на месте.Пример: background-attachment:fixed;27background-position – указывает позицию размещение изображения наустройстве отображения.28Пример:body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;}Преобразование текстаВ соответствии с http://www.w3.org/TR/css3-text/ текст может быть подвернутпреобразованию при отображении, среди которых: изменение регистра букв (capitalize | uppercase | lowercase); изменение пробелов (collapse | preserve | preserve-breaks); ограничение длины строки; формирование переносов слов; форматирование текста; выравнивание и разреживание; отступы; декорирование.Некоторые примеры использования:footer { text-wrap: avoid; /* inherits to all descendants */ }…<footer><venue>27th Internationalization and Unicode Conference</venue>• <date>April 7, 2005</date> •<place>Berlin, Germany</place></footer>В узком окне текст будет отображен как:27th Internationalization and Unicode Conference •April 7, 2005 • Berlin, GermanyЕсли окно еще больше сужено, то текст будет выглядеть:27th Internationalization and UnicodeConference • April 7, 2005 •Berlin, GermanyНо ни при каких условиях текст не будет выглядеть как:27th Internationalization and Unicode Conference • April7, 2005 • Berlin, GermanyБлочная модельБлочная модель лежит в основе модели визуализации элементов и описываетпрямоугольники, формирующиеся вокруг всех элементов в соответствии с ихиерархией в дереве элементов документа.

См. подробнее вhttp://www.w3.org/TR/CSS2/box.html29Отступы и границыВ соответствии с блочной моделью, для любого элемента имеется областьсамого элемента (content), внутренние поля (padding), рамка или граница(border), внешние границы (margin). Для каждой области может быть заданразмер. Наличие внутреннего поля позволяет сформировать рамку на заданномрасстоянии от содержимого элемента. Наличие внешнего поля позволяетустановить отступ между рядом расположенными элементами. На рисунке 7представлена схема расположения этих составных частей элемента.

Обратитевнимание на то, что рамка может иметь толщину, задаваемуюсоответствующим свойством CSS и также участвует в расчёте внешнегоразмера элемента.Внешнее прозрачное поле (Margin)Граница (Border)Отступ (Padding)Содержимое (Content)Край внешнего поляКрай границыКрай отступаКрай содержимогоРисунок 11 Блочная модель CSSВ CSS любой элемент имеет свойства width и height, которые устанавливаютразмер «содержимого» в процентах, пикселах или автоматически вычисляемые.Размер отступа задаётся свойствами 'padding-top', 'padding-right', 'paddingbottom', 'padding-left' или единственным свойством padding, которомууказывается один общий размер отступа или последовательно отступ сверху,справа, снизу, слева.div { padding: 10px }blockquote { padding-top: 0.3em }30h1 {background: white;padding: 1em 2em;}Граница представляет собой видимое обрамление элемента с указаннымначертанием, цветом и толщиной.

Граница может быть задана единственнымсвойством border или отдельно для каждой стороны блока: 'border-top', 'borderright', 'border-bottom', 'border-left'. Указываются толщина, тип начертанияграницы и цвет.h1 { border: thick solid red }#content { border-style: solid dotted }/* horiz: 'solid' vertical: 'dotted'*/h1 { border-width: thin }/* thin thin thin thin */h1 { border-width: thin thick }/* thin thick thin thick */h1 { border-width: thin thick medium }/* thin thick medium thick */h1 { border-bottom: 10px; border-color: red; }Таблица 5 Обозначение различных способов начертания границ.СтильsoliddotteddasheddoublegrooveridgeinsetoutsethiddennoneЭффектСплошная линияРяд точекРяд штриховДве сплошные линииУглубление на холстеВыступ на холстеВрезанный видРельефный видСкрытая граница, которая может быть отображена скриптомГраница никогда не будет отображенаПри расчёте размеров блока необходимо помнить про толщину границы.Внешнее прозрачное поле также может быть задано либо единственнымсвойством 'margin' с указанием одинакового размера границы для всех сторон,либо перечислением размеров по каждой из сторон.