Опубликован: 09.07.2009 | Доступ: свободный | Студентов: 703 / 227 | Оценка: 4.56 / 4.42 | Длительность: 03:00:00
ISBN: 978-5-9963-0040-2
Специальности: Преподаватель
Лекция 4:

Создание стилей для Web-проекта

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Аннотация: В уроке рассказывается что такое каскадные таблицы стилей (CSS). Даются основные понятия о стилях.

Что такое CSS

Cascading Style Sheets (каскадные таблицы стилей), сокращенно CSS, — наиболее распространенный инструмент для придания Web-страницам аккуратного и стильного вида. Принцип использования CSS прост: сначала какой-либо стиль, например стиль одной из ячеек таблицы, описывается в отдельном файле, имеющем расширение .css ; в этом стиле устанавливаются отступы слева, справа, сверху и снизу, цвет фона, размер, начертание и цвет текста, межстрочный интервал и т. п. Затем css -файл ставится в соответствие html -документу, и к рассматриваемой ячейке таблицы применяется только что созданный стиль. Такая схема удобна еще и тем, что описанный единожды стиль сразу распространяется на все html -файлы, будь их 5, 10 или 100. Поэтому, если вдруг возникнет необходимость использовать синий цвет текста вместо черного на всех 100 Web-страницах проекта, достаточно будет просто изменить одну строку в css -файле.

В CSS принято несколько видов единиц, среди которых наиболее употребляемы следующие:

  • пиксели, px ; их целесообразно использовать для задания величин отступов внутри ячеек или толщины каких-либо границ;
  • относительные единицы, em ; с их помощью удобно задавать размер основного текста Web-страницы;
  • проценты, % ; их используют для задания размера остального текста, например заголовков, пунктов меню, подрисуночных подписей и пр., а также для установки междустрочных интервалов.

Цвета в CSS, как и во всех Web-документах, задаются в формате шестнадцатеричного кода, перед которым стоит символ #, например:

#ee1515 — красный,

#a3d007 — кислотно-зеленый,

#ffffff — белый,

#000000 — черный.

Удобнее всего подбирать цвета в редакторе Adobe Photoshop, а затем переносить соответствующий шестнадцатеричный код в css -файл.

В таблице 3.1 приведены основные характеристики, которые могут понадобиться при создании стилей для Web-проекта.

Характеристики margin и padding

Рис. 3.1. Характеристики margin и padding
Таблица 3.1.
Характеристика Примеры использования
I. Оформление текста
Гарнитура шрифта, font-family
font-family: Georgia, Times New Roman
Гарнитуры указываются через запятую; если на компьютере посетителя Web-страницы не установлена первая (предпочтительная) гарнитура, то браузер использует вместо нее вторую, а не какую-либо произвольную
Размер шрифта, font-size
font-size: 0.8em 
font-size: 120%
Наклон шрифта, font-style font-style: italic (курсив)

font-style: normal (прямое начертание)

Начертание шрифта, font-weight font-weight: bold (полужирное начертание)

font-weight: normal (нормальное начертание)

Подчеркивание текста, text-decoration text-decoration: underline (подчеркнуто)

text-decoration: none (без подчеркивания)

Цвет текста, color color: #276dc5
Междустрочный интервал, line-height line-height: 150%
II. Отступы и границы
Отступ изнутри ( рис. 3.1), padding padding: 30px (отступ со всех сторон по 30 пикселей)

padding-top: 5px (отступ сверху 5 пикселей)

Отступы можно устанавливать одинаковыми для всех сторон или для каждой стороны по отдельности: top — верхняя, bottom — нижняя, left — левая, right — правая
Отступ снаружи ( рис. 3.1), margin
margin: 20px
margin-left: 10px
Граница, border
border: solid 1px #ac9d7f
Первый параметр — характер линии: solid — сплошная, dotted — пунктир; второй параметр — толщина линии; третий параметр — ее цвет
border-right: solid 4px #000000
Можно устанавливать границы с каждой из сторон по отдельности
III. Заливка фона
Цвет фона, background-color background-color: #969696
Фоновый рисунок, background-image
background-image: url(graphics/drops.jpg)
В скобках после префикса url указывается место расположения рисунка в системе папок Web-проекта
Позиция фонового рисунка, background-position background-position: top left
Повторяемость фонового рисунка, background-repeat
background-repeat: repeat-x
Возможные варианты: repeat-x — повторение по горизонтали, repeat-y — повторение по вертикали, repeat — повторение в обоих направлениях, no-repeat — без повторения
< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Тохир Рахимов
Тохир Рахимов

Я искал курс по компьютерной химии. Но в этом курсе "Гипермедиа..." ни слова по химии!