Инструменты для создания динамических Web-сайтов PHP 5 My

Инструменты для создания динамических Web-сайтов PHP 5, My. SQL 5, Java. Script, Ajax Каскадные таблицы стилей CSS Лекция 2 Поляруш Александр Юрьевич polyarush@yandex. ru

План курса HTML CSS My. SQL 5 PHP + My. SQL 5 Java. Script 2

3

4

<FONT size="3">Текст</FONT> <FONT style="font-size: 12 pt">Текст</FONT> <html> <HEAD > <TITLE>Пример использования стилей</TITLE> <STYLE>. text 1 { font-size: 18 pt; color: red; font-family: "Arial" } FONT { font-size: 18 pt; color: green; font-family: "Arial" } FONT. text 2 { font-size: 18 pt; color: blue; font-family: "Arial" } </STYLE> </HEAD> 5

Синтаксис CSS состоит из трех частей: селектора, свойства и значения: селектор { свойство: значение } Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение.

Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок: p { font-size: 75%} Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки: {font-family: "lucida calligraphy"} h 1 Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой: table { font-family: arial, "sans serif"; border-style: dotted }

Чтобы определения стилей было удобно читать, каждое свойство лучше писать на отдельной строке: h 2 { font-family: arial; margin-right: 20 pt; color: #BBFF 1 B } При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif: p, table, li { font-family: "sans serif"; }

Селектор класса (class) При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса. Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей: h 2. stepleft { margin-left: 10 pt} h 2. stepright { margin-right: 20 pt}

Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс: <h 1 class="stepleft"> Заголовок с внешним отступом 10 пунктов. </h 1> <h 2 class="stepright"> Заголовок с внешним отступом 20 пунктов. </h 2>

Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class. . left {margin-left: 40 pt}

В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ". left": <table class="left"> Эта таблица будет иметь внешний отступ, равный 40 пунктам. </table> <p class="left"> Этот параграф будет иметь внешний отступ, равный 40 пунктам. </p>

Способы встраивания стиля Встраивание определение стиля в тег <FONT style="font-size: 12 pt">Текст</FONT> <FONT style="font-size: 12 pt; color: red; font-family: 'Arial'"> Текст</FONT> 13

14

Встраивание определения стилей в заголовок HTML-документа <html> <HEAD > <TITLE>Пример использования стилей</TITLE> <STYLE>. text 1 { font-size: 18 pt; color: red; font-family: "Arial" } FONT { font-size: 18 pt; color: green; font-family: "Arial" } FONT. text 2 { font-size: 18 pt; color: blue; font-family: "Arial" } </STYLE> </HEAD> <BODY> <center> <FONT class="text 1">Текст1</FONT><BR>  <FONT>Текст2</FONT><BR>  <FONT class="text 2">Текст3</FONT><BR>  <P class="text 2">Текст4</P><BR>  <P class="text 1">Текст5</P><BR>  </center> </BODY> </html> 15

16

Вынесение таблицы стилей в отдельный файл Содержимое файла stile 1. css /* Так можно вставить комментарий в css-файле*/. text 1 { font-size: 12 pt; color: red; font-family: "Arial" } FONT { font-size: 12 pt; color: green; font-family: "Arial" } FONT. text 2 { font-size: 12 pt; color: blue; font-family: "Arial" } P { color: red } 17

Примеp использования файла стилей <HTML> <HEAD> <TITLE>Пример использования стилей</TITLE> <LINK rel="stylesheet" href=“stile 1. css"> </HEAD> <BODY> <FONT class="text 1">Текст1</FONT><BR> <FONT>Текст2</FONT><BR> <FONT class="text 2">Текст3</FONT><BR> <P class="text 2">Текст4</P><BR> <P class="text 1">Текст5</P><BR> </BODY> </HTML> 18

19

Приоритет применения стилей Содержимое файла style 2. css /* Так можно вставить комментарий в css-файле*/ P { color: red } 20

<HTML> <HEAD> <TITLE>Пример использования стилей</TITLE> <LINK rel="stylesheet" href=“style 2. css"> <STYLE> P { color: blue } </STYLE> </HEAD> <BODY> <P >Текст1</P><BR> <P style="color: green"><FONT color="yellow">Текст2</FONT></P><BR> <P style="color: green">Текст3</P><BR> </BODY> </HTML> 21

22

Способы задания цвета в CSS P { color: red } P { color: #F 00 } P { color: #FF 0000 } P { color: rgb(255, 0, 0) } P { color: rgb(100%, 0%) } P { color: rgba(100%, 0%, 0. 7) } 23

Форматирование шрифта в CSS Как задаётся имя шрифта? Содержимое файла stile 3. css: . text 1 { font-family: "Verdana", "Tahoma" }. text 2 { font-family: "Times New Roman" }. text 3 { font-family: "Times New Roman", "Verdana", sans-serif } 24

<HTML> <HEAD> <TITLE>Пример использования стилей</TITLE> <LINK rel="stylesheet" href="style 3. css"> <STYLE> P { color: blue } </STYLE> </HEAD> <BODY> <P class="text 1">Текст1</P><BR> <P class="text 2">Текст2</P><BR> <P class="text 3">Текст3</P><BR> <b><span style="font-family: Monotype Corsiva">История села Алферьевк<span lang="en-us">a</span> </b> </BODY> </HTML> 25

Цвет шрифта. text 1 { font-size: 12 pt; font-family: "Arial"; color: red } 27

Жирность шрифта font-weight P { font-family: "Arial"; font-style: italic; font-weight: 700 } P { font-family: "Arial"; font-style: italic; font-weight: normal } P { font-family: "Arial"; font-style: italic; font-weight: bold } 28

Размер шрифта px Размер в пикселах. % - размер в процентах от текущего значения. em Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3 em} задаст красную строку абзаца шириной в три буквы m. ex Высота буквы x в настоящем шрифте. Применяется аналогично em. cm Размер в сантиметрах. mm Размер в миллиметрах. in Размер в дюймах. Один дюйм = 2. 54 сантиметра. Pt Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2. 1). Pc Размер в пиках. (12 пунктов). 29

Расстояние между символами в словах <HTML> <HEAD> <TITLE>Пример использования стилей</TITLE> <STYLE>. text 1 { color: blue }. text 2 { letter-spacing: normal; font-style: italic; font-weight: normal }. text 3 { font-size: 18 px; color: red; letter-spacing: 5 mm } </STYLE> </HEAD> <BODY> <P class="text 1">Текст1</P><BR> <P class="text 2">Текст2</P><BR> <P class="text 3">Текст3</P><BR> </BODY> </HTML> 30

31

Расстояние между словами P { word-spacing: normal; font-style: italic; font-weight: normal } P { font-size: 12 pt; color: red; word-spacing: 5 mm } 32

Отступ первой строки P{ text-indent: 10 mm; font-style: italic; font-weight: normal } 33

Вертикальное расстояние между строками P{ line-height: normal; font-style: italic; font-weight: normal } P{ font-size: 12 pt; color: red; font-family: "Arial"; line-height: 5 mm } 34

Горизонтальное выравнивание текста <P style="text-align: center">Абзац с выравниванием по центру</P> <P style="text-align: left">Абзац с выравниванием по левому краю </P> <P style="text-align: right">Абзац с выравниванием по правому краю </P> <P style="text-align: justify">Абзац с выравниванием по ширине</P> 35

Вертикальное выравнивание текста TD { font-size: 12 pt; color: red; vertical-align: baseline } TD { font-size: 12 pt; color: red; vertical-align: middle } TD { font-size: 12 pt; color: red; vertical-align: top } TD { font-size: 12 pt; color: red; vertical-align: bottom } 36

Подчеркивание, надчеркивание и зачеркивание текста <P style="text-decoration: none">Текст</P> <P style="text-decoration: underline">Подчеркнутый текст</P> <P style="text-decoration: overline">Надчеркнутый текст</P> <P style="text-decoration: line-through">Зачеркнутый текст</P> 37

Свойства стиля оформления полей страницы Существует пять свойств стиля оформления, которые можно применять для задания полей вокруг элементов страницы. Эти свойства определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. При использовании в теге <body> они задают величину свободного пространства вокруг выводимого содержимого страницы. 38

margin-top margin-right margin-bottom margin-left npx n% auto Свойство margin задает одну и ту же ширину поля со всех сторон элемента; свойства margin-top, margin-right, margin-bottom, и margin-left задают поля индивидуально для каждой из четырех сторон. Значение auto заставляет поля вернуться к их значению ширины по умолчанию при переопределении предыдущих настроек полей. 39

Внешние отступы BODY { margin-left: 0 } BODY { margin-right: 50 } BODY { margin-top: 15 mm } BODY { margin-bottom: 20 px } 40

<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0"> <BODY style="margin-left: 0; margin-right: 0; margin-top: 0; marginbottom: 0"> BODY { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 } BODY { margin: 15 mm 5% 20 px 0 } BODY { margin: 0 } 41

Задание полей с помощью вложенной таблицы стилей <head> <title>Поля страницы</title> <style type="text/css"> body {margin: 25 px} </style> </head> 42

Задание полей с помощью внешней таблицы стилей Содержимое файла Stylesheet. css, в котором определено оформление полей для тега <body>. /* Так можно вставить комментарий в css-файле*/ body {margin: 25 px} или body {margin-top: 50 px; margin-left: 30 px; margin-right: 30 px; marginbottom: 50 px} Этот файл находится в том же каталоге Web, что и страницы, где этот стиль оформления применяются. <head> <title>Любая страница</title> <link href="Stylesheet. css" type="text/css" rel="stylesheet"/> </head> 43

Внутренние отступы TD { padding-left: 0 } TD { padding-right: 50 } TD { padding-top: 15 mm } TD { padding-bottom: 20 } TD { padding: 15 mm 50 20 0 } TD { padding: 5 px } 44

Стиль линии рамки <HTML> <HEAD> <TITLE>Тип рамки</TITLE> <STYLE> TABLE { border-left-style: dashed; border-right-style: dotted; border-top-style: solid; border-bottom-style: groove } TD { border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none; text-align: center } CAPTION { border-top-style: solid } P { border-left-style: dotted; border-right-style: dotted; border-top-style: dotted; border-bottom-style: dotted } </STYLE> </HEAD> 45

Стиль линии рамки <BODY> <TABLE align="center" width="200"> <CAPTION>Заголовок таблицы<CAPTION> <TR> <TD>1</TD> <TD>2</TD> </TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE> <P>Текст в пунктирной рамке</P> </BODY> </HTML> 46

Толщина линии рамки TABLE { border-left-width: 5 px; border-right-width: 5 px; border-top-width: 0; border-bottom-width: 10 px } TABLE { border-left-width: medium; border-right-width: medium; border-top-width: thin; border-bottom-width: thick } 47

Цвет линии рамки TABLE { border-left-color: red; border-right-color: #000080; border-topcolor: green; border-bottom-color: black } 48

Фон элемента Цвет фона BODY { background-color: green } TD { background-color: silver } TD { background-color: transparent } 49

Фоновый рисунок BODY { background-image: url(foto 1. gif) } BODY { background-image: none } 50

Режим повтора фонового рисунка BODY { background-image: url(foto 1. gif); background-repeat: repeat } BODY { background-image: url(foto 1. gif); background-repeat: repeat-x } BODY { background-image: url(foto 1. gif); background-repeat: repeat-y } BODY { background-image: url(foto 1. gif); background-repeat: no-repeat } <BODY style="background-repeat: repeat-x "> 51

Прокрутка фонового рисунка BODY { background-image: url(foto 1. gif); background-repeat: norepeat; background-attachment: scroll } BODY { background-image: url(foto 1. gif); background-repeat: norepeat; background-attachment: fixed } 52

Положение фонового рисунка BODY { background-image: url(foto 1. gif); background-repeat: norepeat; background-attachment: fixed; background-position: 50% } 53

Списки Вид маркера списка UL { list-style-type: disk } UL { list-style-type: circle } UL { list-style-type: square } OL { list-style-type: decimal } OL { list-style-type: lower-roman } OL { list-style-type: upper-roman } OL { list-style-type: lower-alpha } OL { list-style-type: upper-alpha } OL { list-style-type: none } Изображение в качестве маркера списка OL { list-style-image: url(foto 1. gif) } 54

Компактное отображение списка OL { list-style-position: outside } OL { list-style-position: inside } 55

Псевдостили гиперссылок. Отображение ссылок разными цветами <BODY link="#000000" vlink="#000080" alink="#FF 0000"> A: link { color: #000000 } A: visited { color: #000080 } A: active { color: #FF 0000 } A: link { color: red; text-decoration: underline } A: visited { color: blue; text-decoration: underline } A: active { color: green; text-decoration: none } A: hover { color: lime; text-decoration: none } A. link 1: link { color: black; text-decoration: none } A. link 1: visited { color: blue; text-decoration: none } A. link 1: active { color: red; text-decoration: underline } A. link 1: hover { color: red; text-decoration: underline } 56

<HTML> <HEAD> <TITLE>Псевдостили гиперссылок</TITLE> <STYLE> A: link { color: red; text-decoration: underline } A: visited { color: blue; text-decoration: underline } A: active { color: green; text-decoration: none } A: hover { color: lime; text-decoration: none } A. link 1: link { color: black; text-decoration: none } A. link 1: visited { color: blue; text-decoration: none } A. link 1: active { color: red; text-decoration: underline } A. link 1: hover { color: red; text-decoration: underline } </STYLE> </HEAD> <BODY> <A href="doc 1. html">Ссылка 1</A><BR> <A href="doc 2. html" class="link 1">Ссылка 2</A> </BODY> </HTML> 57

Теги <DIV> и <SPAN>. Группировка элементов страницы <HTML> <HEAD> <TITLE>Пример использования стилей</TITLE> <STYLE>. text 1 { font-size: 12 pt; color: red; font-family: "Arial" }. text 2 { font-size: 12 pt; color: green; font-family: "Arial" } </STYLE> </HEAD> <BODY> <DIV class="text 1"> <P>Абзац 1</P> <P>Абзац 2</P> </DIV> <SPAN class="text 2"> <P>Абзац 3</P> <P>Абзац 4</P> </SPAN> </BODY> </HTML> 58

Позиционирование элемента в CSS. Параметры позиционирования в CSS позволяют: определить левую, правую, верхнюю, и нижнюю позиции элемента; задать форму элемента; поместить элемент позади другого; определить, что будет происходить, когда содержимое элемента слишком большое для размещения в указанной области. 59

Для позиционирования элементов используется свойство position. Свойство position имеет четыре значения static, relative, absolute и fixed, которые определяют тип позиционирования и влияют на расположение элемента. Значение static свойства position используется по умолчанию. Любой элемент со статическим позиционированием находится в общем потоке документа. Правила для его размещения определяются боксовой моделью. По умолчанию, блочные боксы выкладываются вертикально сверху вниз в порядке появления их в разметке. Каждый бокс обычно занимает всю ширину документа и имеет разрыв строки перед и после себя.

Относительное позиционирование Элемент со значением свойства position, равным relative, сначала размещается по правилам статического позиционирования. Но затем сгенерированный бокс смещается относительно своего положения в потоке, согласно значениям свойств top, bottom, left и right. Но при этом из потока он не исключается, а продолжает занимать там свое место. То есть сдвигается со своего места он только визуально, а положение всех боксов вокруг него никак не меняется. Это означает, что смещенный бокс может перекрывать боксы других элементов, так как они по-прежнему действуют, как если бы относительно позиционированный элемент остался там, где он должен был быть перед применением позиционирования.

Свойства top, bottom, left и right top - смещение верхнего края блока относительно верхнего края контейнера bottom - смещение нижнего края блока относительно нижнего края контейнера left – смещение… right – смещение… 62

Абсолютное позиционирование Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают размещаться следующие боксы. Считается, что бокс исключается из потока. Для абсолютного позиционирования элемента свойство position должно принимать значение absolute. А для задания положения размещения блока используются значения left, right, top и bottom. Все четыре свойства можно использовать одновременно для определения расстояния от каждого края позиционируемого элемента до соответствующего края браузера или родительского блока.

Фиксированное позиционирование действует подобно абсолютному, однако элемент с фиксированным позиционированием всегда располагается только относительно окна браузера и никогда не смещается при прокручивании вебстраницы. Отметим, что Internet Explorer версии 6 и более ранних версий не поддерживает фиксированное позиционирование. 64

Элемент с большим z-index перекрывает элементы с маленьким. 65

Размещение элемента в произвольном месте окна Web-браузера <HTML> <HEAD> <TITLE>Позиционирование элементов</TITLE> <STYLE> P. abz 3 { position: absolute; top: -75 px; left: -75 px; width: 250 px; height: 250 px; overflow: hidden; z-index: 2; background-color: green } P. abz 5 { position: absolute; top: 80 px; left: 50%; width: 150 px; height: 150 px; overflow: auto; z-index: 3; background-color: silver } P. abz 7 { position: relative; top: 0 px; left: 30 px } </STYLE> </HEAD> 66

<BODY> <P>Статически позиционированный абзац1</P><BR><BR> <P style="position: absolute; top: 0 px; left: 120 px; width: 150 px; height: 150 px; overflow: scroll; z-index: 1; background-color: silver">Абсолютно позиционированный абзац2</P> <P class="abz 3">Абсолютно позиционированный наполовину выходящий за границу окна Web-браузера и перекрывающий все остальные элементы страницы абзац3 </P> <P>Статически позиционированный абзац4</P><BR><BR> <P class="abz 5">Абсолютно позиционированный абзац5, местоположение которого задано в процентах. </P> <P>Статически позиционированный абзац6</P> <P class="abz 7">Относительно <BR>позиционированный <BR>абзац7. </P> <P>Статически позиционированный абзац8</P> </BODY> </HTML> 67

68

69

Вопросы на экзамене 70