Презентация на тему Cascadingstylesheets (css)

- это средство, позволяющие задавать различные свойства HTML-тегам.

тип шрифта, цвета текста и фона для отдельных элементов

страницы (абзацев, слов, букв), оформлять красные строки, буквицы.
Изменять оформление целого сайта, состоящего из сотен файлов не прикасаясь к HTML-коду, редактируя всего лишь один css-файл.
Уменьшать количество тегов в HTML-документе, по возможности отделяя информационное наполнение HTML-файла от его внешнего представления на экране браузера.

Встроенный (inline) Внедренный (embedded) Связанный (linked)

атрибута style. Контролирует представление отдельного тега.
Задается атрибутом style.

Этот атрибут можно использовать практически в каждом теге, задавая его специфические свойства.

К этому абзацу применено стилевое определение.
Результат отображения:

помощи тегов .... Контролирует представление отдельного HTML-документа.
Можно задавать

стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа.

color: maroon;
font-family: Arial Cyr, Geneva, Helvetica, sans-serif; } -->

Пример задания стиля для заголовков

---

Это обычный текст

Это заголовок

Это снова обычный текст

Результат отображения:

color: maroon;
font-family: Arial Cyr, Geneva, Helvetica,

sans-serif;
}
-->

представление многих HTML-документов. Для ссылки на стилевой файл в

головной части HTML-документа записывают тег .

text-align: left;
color: maroon;
font-family: Arial Cyr, Geneva, Helvetica,

sans-serif;
}
В самих же HTML-файлах в разделе ... на файл style.css расположена ссылка:

описанные выше три стилевых механизма.
Для браузера самыми главными являются

встроенные стили, затем по убыванию старшинства, внедренный и связанный. Самым младшим в стилевой иерархии является стиль «по-умолчанию».

показано синим.

Это будет показано
Это будет показано синим, а синим , а это будет
показано красным.
это будет показано красным.

Это будет показано синим.

этом случае каждому определению присваивается имя, которое можно использовать

для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами.

величина;
}

color:red;
font-family:Geneva, Helvetica, sans-serif;
}

документе отдельные области, задавая для них специфические свойства.
После блока

браузер переходит на новую строку, а после блока ... -- нет.

{ font-family: Arial, sans-serif;} .letter { color: red; font-size:

200%; font-family: serif; position: relative; top: 5px;}

Разумные люди приспосабливаются к окружающему миру.

200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid

1px black; float: left; } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; float: left; position: relative; top: 40px; left: -70px; }

используя реальные координаты, отсчитываемые от левого верхнего угла окна

браузера. Такую возможность предоставляет стилевое свойство position со значением absolute. Сами координаты задаются при помощи свойств left (горизонтальная координата) и top (вертикальная координата).

charset=windows-1251">Тег DIV

top:10; left:10;
color:red;font-weight:bolder; font-size:40pt; background:aqua }
.area2 { position: absolute; top:20; left:100;
color:maroon;background:#CFB597; padding: 12pt; }
.area3 { position: absolute; top:70; left:90;
color:blue;background:#C0C0C0; padding: 12pt; }
-->

(на каком уровне) находится элемент на экране. Номер оcновного

уровня (на который выводятся обычные элементы без стилевых указаний) равен нулю. Следовательно, элементы с отрицательным z-index расположены ниже (дальше), с положительным -- выше (ближе) основного экранного слоя. Если элементы имеют одинаковый z-index, то они расположены в одном слое. В противном случае, "ближе" к нам расположен слой, имеющий больший z-index.

top:50; left:260;
height:30;

width:100; background:blue;
font-size:30; color:white; z-index:1">
Это дальше