Некоторые параметры css

Некоторые параметры шрифта font-weight: [ bold | normal | number] - жирность шрифта font-style: [normal | italic | oblique] - наклон шрифта font-size: number - размер шрифта font-family: name - гарнитура шрифта color: number - цвет шрифта background-color: number - цвет подложки background: url - текстурная подложка

Некоторые параметры абзаца text-align: [ left | right | center | justify] - выравнивание text-indent: number - отступ красной строки line-height: number - интерлиньяж letter-spacing: number - трекинг padding-left: number - отступ от текста слева padding-right: number - отступ от текста справа padding-top: number - отступ от текста сверху padding-bottom: number - отступ от текста снизу margin-left: number - отступ от границы слева margin-right: number - отступ от границы справа margin-top: number - отступ от границы сверху margin-bottom: number - отступ от границы снизу

Единицы измерения в css

В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:

• относительный размер в процентах (%)

• относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)

• абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)

• абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)

• абсолютный в пикселях (px)

Задание цвета в CSS

Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:

• при помощи названия цвета: yellow, red, green, grey,..

• шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..

• десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

Пример использования CSS

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

A:link {COLOR: #0000CC; text-decoration: none} A:visited {COLOR: black; text-decoration: none} A:active {COLOR: red; text-decoration: none} A:hover {COLOR: #6666FF; text-decoration: underline} - ссылка (link) - синий цвет (#0000CC); - посещенная ссылка (visited) - черный цвет (black); - активная ссылка (active) - красный цвет (red); - ссылка, в момент нахождения курсора мыши над ней (hover) - светло-синий (#6666FF); Используя CSS, мы может отменить или переназначить эффект для ссылок. Для этого используем свойство text-decoration, которое может иметь следующие значения: none - без оформления underline - подчеркивание overline - черта сверху line-through - перечеркивание blink - мигание

Практические задания

Задание 1

1. Создайте каталог /css/

2. Создайте в нем файл main.css

3. Подключите его ко всем страницам сайта с помощью тега <LINK>.

4. Задайте по умолчанию следующие параметры для всех страниц (переопределив, тег <body>): - цвет фона - размер шрифта - цвет шрифта - семейство шрифта (например, Arial)

5. Проверьте работоспособность на сервере.

6. В комментариях (в файле main.css) поясните эти параметры.

Задание 2

1. Задайте по умолчанию следующие параметры для всех абзацев (переопределив, тег <p> и псевдоклассы тега <p>): - выравнивание абзаца - отступ красной строки - размер и цвет первой буквы

2. Проверьте работоспособность на сервере.

3. В комментариях (в файле main.css) поясните эти параметры.

Задание 3

1. Задайте по умолчанию следующие свойства ссылок для всех страниц: - цвет и оформление ссылки - цвет и оформление посещенной ссылки - цвет и оформление активной ссылки - цвет и оформление ссылки, в момент нахождения курсора мыши над ней

2. Проверьте работоспособность на сервере.

3. В комментариях (в файле main.css) поясните эти параметры.

К сдаче лабораторной предоставляются: работающие страницы на сервере.

Цель работы: формирование умений разметки страниц с помощью блоков (DIV) и CSS.

Литература

• Спецификация каскадных таблиц стилей CSS2 (RUS)

• Основы CSS

• CSS - Cascading Style Sheets

Поясняющая информация

Для чего это нужно?

Вспомним недостатки использования таблиц:

• "Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.

• Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.

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

• Отсутствие возможности "надвинуть" один элемент на другой.

• Отсутствие возможности управлять отображением элементов (при переполнение, таблица просто увеличивается в размерах).

Эти проблемы можно решить с помощью CSS и <DIV>.

Как это делается

Тэг <DIV> - служит для группирования элементов в блок.

К сгруппированным элементам можно применить стили.

Посмотрим на примерах, как это делается:

Примеры. Выделение блока бордюром

Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div.

Прописываем стили для этого блока

Это можно использовать с разметкой следующим образом:

<div style="border-color:#FF00FF; border-style:dotted; ">

Содержимое этого элемента DIV будет заключено в прерывистую рамку.

</div>

<div style="border:15px double #008000; ">

Содержимое этого элемента DIV будет заключено в сплошную рамку шириной 15 пикселов.

</div>

<div style="border-style: outset; border-color: #FF0000">

Содержимое этого элемента DIV будет заключено в такую рамку.

</div>

<div style="border-right: 10px solid #00FF00; border-bottom: 10px solid #00FF00">

Содержимое этого элемента DIV будет заключено в такую рамку.

</div>

<div style="border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00">

Содержимое этого элемента DIV будет заключено в такую рамку.

</div>

Пример. Выделение блока цветом фона

<div style="background-color: #00FFFF">

Содержимое этого элемента DIV будет выделено таким цветом.

</div>

Пример. Позиционирование и задание размеров

<div style="background-color: #AAAAFF">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="float: left; width: 200; height: 200; background-color: #00FFFF">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="float: right; width: 200; height: 200; background-color: #FFFF00">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="width: 200; height: 200; position: relative; left: 20; background-color: #0FFD02">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="background-color: #FCC403">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

Пример. Позиционирование в 2,5 мерном измерении

Порядок наложения (перекрытия) блоков определяется атрибутом z-index.

Блок - 1

Блок - 2

Блок - 3

Блок - 4

Почти 3D

Код этого примера:

<div style="position: relative; width: 200; height: 200; z-index: 0; background-color: #FFFF00"> Блок - 1 </div>

<div style="position: relative; width: 200; height: 200; left: 100; z-index: 1; top: -100; background-color: #00FFFF"> Блок - 2 </div>

<div style="position: relative; left: 220; top: -400; width: 200; height: 200; z-index: 2; background-color: #00FF00"> Блок - 3 </div>

<div style="position: relative; width: 750; height: 20; z-index: 1; top: -580; background-color: #FE76AF"> Блок - 4 </div>

<div style="position: relative; top: -600; z-index: 3; left: 100"> Почти 3D </div>