Тізімдер мен кестелер

Тізімдер мен кестелер:
WEB-парақта тізімнің көмегімен ақпаратты құрылымдау. Тізімдер типі
Кесте және

Маркированный список
(unordered list)
первый элемент
второй элемент
...
последний элемент

Тип маркеров

Нумерованный список
(ordered list)
первый элемент
второй элемент
...
последний элемент

Типы нумерации

С о д е р ж а н и е
Слайд 8
(1,1)
(1,2)
(2,1)
(2,2)
(3,1)
(3,2)
(Не) Простая таблица

Атрибуты элемента TABLE

Атрибуты элемента TR

Атрибуты элемента TD (TH)

Объединение ячеек
Столбцы объединены
Строки объединены
Обычная
ячейка, строка 2
Обычная ячейка, строка 3
Строка 4, левая ячейка
Строка 4, правая ячейка

Создаем заголовок таблицы
...
Атрибуты заголовка:
align = top|bottom|left|right
valign = top|bottom
Слайд 14
Схема отступов и объединения ячеек
width
colspan
rowspan
Слайд 15
Лабораторная работа
Использование colspan и rowspan
Слайд 16
Таблицы, вложенные друг в друга
Заголовок таблицы
...
...
...
...
Вложенные таблицы
Строки объединены
Строка I, Ячейка A
Строка I, Ячейка B
Строка II, Ячейка A
Строка II, Ячейка B
Строка III, Ячейка A
Строка III, Ячейка B
Обычная ячейка, строка 3
Вложенная таблица
Всего 2 строки
Строка 4, правая ячейка

Схема отступов и объединения ячеек
width
colspan
rowspan

Лабораторная работа
Использование colspan и rowspan

Таблицы, вложенные друг в друга

Группируем таблицу по блокам (HTML 4.0)
Может быть много tbody блоков. Но все разделы должны содержать одинаковое количество столбцов
...
...
...
...
...
...

Группируем таблицу по колонкам
...
Атрибуты colgroup:
align = center|left|right
valign

Группируем таблицу по колонкам

Домашняя работа
Объединение ячеек и вложенные таблицы

Форма

Атрибуты элемента FORM

Элементы формы
value="Пароль">
name или(и) id?
Логин
Логин

Элементы формы
ASP
JavaScript
value="yes">PHP
HTML
ASP
JavaScript
PHP
HTML

Элементы формы
ASP
JavaScript
PHP
value="html" selected>HTML
...
size="5"
size="8"
закрыт
открыт

Элементы формы
ASP
JavaScript
PHP
value="html" selected>HTML
...
size="5"
size="8"
закрыт
открыт

Элементы формы
Книги
ASP
JavaScript
PHP
HTML
<элемент tabindex="1">
<элемент

Атрибут type

Атрибут type html 5

Атрибут type html 5 поддержка

Лабораторная работа

Методы определения
CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство,

Встроенная информация о стиле (inline)
style="color:red; background:#cccccc"
Атрибут style определяет информацию о

Информация о стиле в заголовке: элемент STYLE - Метод вложения (embeding)
type="text/css">
p {
color:red;
background:#cccccc
}
Здесь применен стиль методом вложения.
Другой абзац.
селектор
selector
правило
rule

Метод связывания (linking) - Внешние таблицы стилей
p {
color:red;

Каскадирование
<br> div{color:green}<br>
...
Применен связанный стиль
Применен вложенный стиль
Применен встроенный стиль
p{color:red}
div{color:red}

Каскадирование
<br> div{color:green}<br>
...
Применен связанный стиль
Применен вложенный стиль
Применен встроенный стиль
p{color:red}
div{color:red}

Единицы измерения размеров
em - ems, высота используемого элементом шрифта
ex - x-height,

Цвет
название цвета (red, green, white...)
#00cc00 - шестнадцатиричное представление
#0c0 - сокращенное шестнадцатиричное

Селекторы типа элемента и класса
div{color:red}
div.green{color:green}
.blue{color:blue}
Обычный div
Div с классом green
Aбзац

Другие селекторы
#back{color:red}
div#back{color:black}
div b{color:green}
td td td{color:blue}
Div с id = back
Div с
контекстным
селектором
Третий уровень вложенности
id
контекстные
селекторы
элемент + id

И еще о селекторах
Соседние селекторы
b + i { color:red }
Дочерние селекторы
div

Группировка селекторов
h1{
color:red;
background:yellow
}
h2{
color:blue;
background:yellow
}
h3{
color:green;
background:yellow
}
h1,h2,h3{
background:yellow
}
h1{
color:red;
}
h2{
color:blue;
}
h3{

Псевдоклассы и псевдоэлементы
:link
:visited
:active
:hover
:focus
:first-child
a:link{color:blue}
a:visited{color:blue}
a:active{color:red}
a:hover{color:green}
input:focus{color:red}
p:first-child{color:blue}
:first-line
:first-letter
:after
:before
p:first-line{color:red}
p:first-letter{color:green}
p:after{content:”new”}
p:before{content:”Att. ”}
li::before {
content: "¶ "; /* Добавляем желаемый

Оформление текстовых элементов
font-family: семейства шрифта|тип шрифта
font-family:Arial,Geneva,Helvetica,sans-serif;
font-size: величина|%
абсолютная величина: xx-small, x-small, small,

Оформление текстовых элементов
font-style: normal|italic
font-style:italic;
font-variant: normal|small-caps
font-variant:small-caps;
font: font-style font-variant font-weigth font-size font-family

Оформление текстовых элементов
text-align: left|right|center|justify
text-align:right;
text-decoration: none|overline(|)underline(|)line-through
text-decoration:underline;
text-indent: величина|%
text-indent:10px;
text-transform: none|capitalize|uppercase|lowercase
text-transform:uppercase;

Оформление списков
list-style-type: none|circle|disc|square|decimal|lower-alpha|upper-alpha|lower-roman|upper-roman
list-style-type:square;
list-style-position: outside|inside
list-style-position:inside;
list-style: list-style-type list-style-position list-style-image
list-style:decimal inside;
list-style-image: none|url
list-style-image:url("ball.gif");

Отступы и рамки
Содержимое
элемента
top
bottom
left
right
margin
border
padding

Отступы снаружи
margin-top: auto|величина|%
margin-right: auto|величина|%
margin-bottom: auto|величина|%
margin-left: auto|величина|%
margin: margin-top margin-right margin-bottom margin-left
margin:10px 20px

Отступы изнутри
padding-top: величина|%
padding-right: величина|%
padding-bottom: величина|%
padding-left: величина|%
padding: padding-top padding-right padding-bottom padding-left
padding:10px 20px

Рамки
border-width: величина|%|(thin|medium|thick)
border-color: цвет
border-style: none|dotted|dashed|solid|double|groove|ridge|inset|
outset
border-top-(width|color|style)
border-right-(width|color|style)
border-bottom-(width|color|style)
border-left-(width|color|style)
border: border-width border-style border-color
border: 1px solid black;
border-left: 3px

Визуальные свойства
visibility: hidden|visible|inherit
visibility:hidden;
display: none|block|inline|list-item
display:block;
overflow: auto|scroll|visible|hidden
overflow:auto;
clip: auto|rect(top right bottom left)
clip:rect(10px 20px 30px

Параметры блока
width: величина|%
width: 100px;
height: величина|%
height: 100px;
float: none|left|right
float: left;
clear: none|left|right|both
clear: both;

Параметры слоя
top: auto|величина|%
top: 100px;
left: auto|величина|%
left: 100px;
position: static|absolute|relative
position: absolute;
Этот
слой позиционирован абсолютно.
Этот слой позиционирован относительно.
Здесь должен
быть слой
Фактическое
расположение
слоя
z-index: auto|величина|inherit
z-index:3;

Свойства курсора
cursor: auto
crosshair
default
pointer
move
text
wait
e-resize, ne-resize, nw-resize,
n-resize, se-resize, sw-resize,

Импорт CSS (IE)
В глобальную таблицу стилей:
@import url("/style/header.css");
H1 { font-size: 120%;}
В

Типы носителей
Все запросы начинаются с правила @media, после чего следует условие,

Media screen and print в коде
Пример. Стиль для всех цветных устройств
@media

Media screen and print в коде
@media screen {
BODY {color: navy}

Media screen and print в браузере

Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется

Практика: как выровнять колонку по центру?