Как говорилось выше, блочные элементы могут содержать только блочные или только строчные элементы. В случае смешанного контента, когда блочный элемент одновременно содержит текстовое содержимое и другой блочный элемент, алгоритм визуального форматирования добавляет дополнительную обёртку для текстового содержимого — так называемый анонимный бокс. Поскольку такой контейнер не имеет названия, то к нему нельзя применить CSS-стили для оформления. Анонимные боксы наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.
Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display, такие как inline и inline-table делают элементы строчными. Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding, но если для элемента задан фон, он будет распространяться на верхний и нижний padding, заходя на соседние строки текста.
Ширина и высота строчного элемента зависит только от его содержимого, задать размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.
Для того чтобы верхние и нижние поля и отступы работали для строчного элемента, нужно использовать конструкцию {display: inline-block}. Элемент останется встроенным, но к нему можно будет полноценно применить поля, отступы, задать ширину и высоту.
Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент <a>, который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.
Анонимные строчные боксы
Любой текст, содержащийся непосредственно внутри блочного элемента и не внутри строчного элемента, рассматривается как анонимный строчный элемент. Также как и анонимные блочные боксы они наследуют свойства родительского блока, а не наследуемые свойства принимают первоначальное значение.
12 Статические Web технологии. Основы технологии CSS
Таблицы стилей (stylesheets) представляют собой абстракцию, в которой стиль документа определяется отдельно от его содержания. Основная цель каскадных таблиц стилей - разделить содержимое веб-страницы (написанной, например, на HTML) и форматирование (представление) документа (CSS). Т.е., в коде html-страницы находится информация, которую видит пользователь, загрузив эту страницу в свой браузер. А вот то, в каком виде он видит эту информацию на своем экране - за это "отвечает" файл каскадной таблицы стилей.
Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения. Каждое правило начинается с селектора (по-русски – указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило. В блоке объявлений мы устанавливаем правила оформления выбранных нами элементов, переопределяя их свойства – размеры, цвет, бордюры, поля, положение на экране и т.д.
Три основных вида селекторов:
· HTML селекторы- в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <h1> селектором будет h1, и так далее strong {font-weight: normal; color: red;}
· Селекторы класса -Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:.myClass { font: bold 10pt verdana; } (меняем шрифт для всех тегов с классом myClass)
· ID селекторы (или идентификаторы)– это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа: #myObj{ margin: 1em; } (изменяем поля для элемента, у которого id=”myObj”); span#today { margin: 1em; } (изменяем поля для элемента span, у которого id=”today”)
13,14- фото
15 Статические Web технологии. CSS свойства таблиц
Свойства таблиц
Display
Создание таблиц и элементов таблиц. Значения:
· table — таблица (аналог элемента TABLE);
· table-caption — заголовок таблицы (аналог элемента CAPTION);
· table-column — колонка таблицы (аналог элемента COL);
· table-column-group — группа колонок (аналог элемента COLGROUP);
· table-row — строка таблицы (аналог элемента TR);
· table-row-group — группа строк (аналог элемента TBODY);
· table-header-group — группа строк в начале таблицы (аналог элемента THEAD);
· table-footer-group — группа строк в конце таблицы (аналог элемента TFOOT);
· table-cell — ячейка таблицы (аналог элемента TD);
Row-span
Количество строк, которые должна занять ячейка.
Column-span
Количество столбцов, которые должна занять ячейка.
Border-collapse
Способ прорисовки рамки. Значения:
· separate — стиль броузеров (трехмерная рамка);
· collapse — стиль текстовых редакторов (плоская рамка).
Border
Характеристика рамки. Значение свойства состоит из трех элементов: толщина, тип, цвет. Возможные типы:
· dotted — рамка из точек;
· dashed — пунктирная рамка;
· solid — сплошная рамка;
· double — двойная рамка;
· groove — двугранная рамка;
· ridge — такая же, как groove, но светлая и темная грани расположены иначе;
· inset — одна грань, наклоненная внутрь;
· outset — такая же, как inset, но свет падает по-другому.
Примеры:
TABLE { border: 1px solid blue; } <TABLE style=«border-collapse: collapse; border: solid green; »><TD style=«border: double»>
Vertical-align
Способ (степень) вертикального выравнивания. Значения:
· процентное;
· top — по верхнему краю;
· middle — по центру;
· bottom — по нижнему краю;
· baseline — по первой строке текста в ячейке.
Table-layout
Алгоритм форматирования таблицы. Значения:
· auto — стандартный;
· fixed — ускоренный
16 Статические Web технологии. Классы и идентификаторы в CSS.
Классы и идентификаторы CSS - в прошлый раз мы с Вами рассмотрели варианты определения стилей и соответствующий этим определениям стилей, правила их написания - синтаксис CSS. В этом уроке, мы с Вами поговорим о классах и идентификаторах CSS.
Для наглядности, рассмотрим простой пример. Давайте создадим новый файл index.html, с обязательными тегами и выведем на экран простой текстовый блок параграфом:
< p > Классы и идентификаторы CSS </ p >
Стили определим во внешнем файле с именем style.css, котрый пока оставим пустым. В файле index.html тегом link, укажем путь к файлу стилей.
В результате мы получим два файла с именами style.css и index.html. Файл style.css вначале будет пустым, а файл index.html будет иметь вот такой код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Классы и идентификаторы CSS </title>
<linkhref="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p> Классы и идентификаторы CSS </p>
</body>
</html>
Если открыть файл index.html, то браузер отобразит строку - " Классы и идентификаторы CSS ”:
Теперь в таблице стилей style.css, определим цвет содержимого тега P, добавив строку - p {color: Green;}
Обновим страницу браузера, мы видим, что код сработал и цвет текста в окне, стал зеленым:
Предположим, что следующий тег P, должен содержать текст - красного цвета.
Что здесь можно сделать, ведь мы в таблице стилей уже задали для тега P зелёный цвет?
Чтобы решить проблему, мы прибегнем к понятию – классы CSS.
В нашем примере, добавим в таблицу стилей ещё одну строку, чтобы содержимое файла style.css стало следующим:
p {color: Green;}
p.red {color: Red;} (Добавляем новый класс для тега P, и указываем для него свои стили).
В файл index.html добавим вот эту строку: <p class="red"> Классы и идентификаторы CSS </p>
в результате, содержимое файла index.html, станет вот таким:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Классы и идентификаторы CSS </title>
<linkhref="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p> Классы и идентификаторы CSS </p>
<p class="red"> Классы и идентификаторы CSS </p>
</body>
</html>
Обновим окно браузера:
Как видите, с помощью тега параграф, мы вывели строку с другими стилями. Это стало возможным, благодоря созданию нового класса .red для тега P. Итак, чтобы создать классы для одного и того же тега, достаточно в таблице стилей, через точку добавить имя нового класса и описать его стили. При обращении к классу, в теле html документа указывается его имя.
Теперь перейдем к идентификаторам CSS.
Из рассмотренных выше примеров, мы видим, что селекторы привязаны к конкретным тегам.
При использовании идентификаторов CSS, такая привязка отсутствует.
В таблице стилей идентификаторы обозначаются значком лестница или решётка - #, в дальнейшем идентификатор можно использовать с любым элементом текста, то есть у идентификатора CSS, нет привязки к конкретному тегу.
Для вызова идентификатора используется атрибут ID.
Рассмотрим ещё один пример.
Добавим в нашу таблицу стилей строку с идентификатором #color_blue. Файл стилей file.css при этом будет содержать следующий код:
p {color: Green;}
p.red {color: Red;}
#color_blue {color:Blue;}
Для вызова идентификатора #color_blue, в файле index.html добавим следующую строку: <p id="color_blue" Классы и идентификаторы CSS </p>
То есть файл index.html, будет содержать следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Классы и идентификаторы CSS </title>
<linkhref="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Классы и идентификаторы CSS</p>
<p class="red"> Классы и идентификаторы CSS </p>
<p id="color_blue" Классы и идентификаторы CSS </p>
</body>
</html>
Если мы обновим страницу браузера, то увидим строку текста голубого цвета, в соответствии с работой идентификатора #color_blue
Ну что же, различные варианты синтаксиса CSS стилей, мы рассмотрели в третьем уроке данного курса. В этом уроке, мы рассмотрели примеры создания в таблицах стилей классов и идентификаторов CSS.
В следующем уроке мы рассмотрим работу html тега DIV.
17 Статические Web технологии. Селекторы CSS
Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simpleselector), составному селектору (compoundselector), сложному селектору (complexselector) или списку селекторов.
Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
| span[title].className p.className1.className2#someId:hover |
Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.
Список селекторов — это селекторы, перечисленные через запятую.
+фото
18 Динамические Web технологии. Основы технологии JavaScript
Возможности JavaScript
● Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
● Реагировать на действия посетителя, обрабатывать клики мыши, перемещение курсора, нажатие на клавиатуру и т.п.
● Посылать запросы на сервер и загружать данные без перезагрузки страницы(эта технология называется "AJAX").
● Получать и устанавливать cookie, запрашивать данные, выводить сообщения.
Ограничения JavaScript
● не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы.
● не имеет прямого доступа к операционной системе.
● JavaScript, работающий в одной вкладке, почти не может общаться с другими вкладками и окнами.
Структура сценария
● Сценарием JavaScript считается фрагмент кода, расположенный между дескрипторами: Текст HTML-документа Текст HTML-документа
● Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом:
<scriptsrc="/my/script.js"></script>
19 Динамические Web технологии. JavaScript, глобальные и локальные переменные. Типы данных
· Переменная в языке JavaScript объявляется с помощью ключевого слова var и может хранить данные любых типов.
var selected = "first item";
rating = 512.5;