|
Я искал курс по компьютерной химии. Но в этом курсе "Гипермедиа..." ни слова по химии! |
Опубликован: 09.07.2009 | Доступ: свободный | Студентов: 707 / 230 | Оценка: 4.56 / 4.42 | Длительность: 03:00:00
ISBN: 978-5-9963-0040-2
Специальности: Преподаватель
Теги:
Лекция 4:
Создание стилей для Web-проекта
Аннотация: В уроке рассказывается что такое каскадные таблицы стилей (CSS). Даются основные понятия о стилях.
Ключевые слова: цвет фона, цвет текста, интервал, файл, css, 'font-style', 'font-weight', 'text-decoration', underline, 'padding-top', 'background-color', 'background-position', меню, пункт, корневой каталог, закрывающий тег, тег, слово, главная страница, внешний отступ, значение, очередь, ссылка, указатель, словосочетание, синтаксис, атрибут, градиентная заливка, курсор, поле, размер шрифта, пробел
Что такое 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-проекта.
| Характеристика | Примеры использования |
|---|---|
| I. Оформление текста | |
| Гарнитура шрифта, font-family |
font-family: Georgia, Times New Roman |
| Размер шрифта, font-size |
font-size: 0.8em font-size: 120% |
| Наклон шрифта, font-style | font-style: italic (курсив) |
| Начертание шрифта, font-weight | font-weight: bold (полужирное начертание) |
| Подчеркивание текста, text-decoration | text-decoration: underline (подчеркнуто) |
| Цвет текста, color | color: #276dc5 |
| Междустрочный интервал, line-height | line-height: 150% |
| II. Отступы и границы | |
| Отступ изнутри ( рис. 3.1), padding | padding: 30px (отступ со всех сторон по 30 пикселей) Отступы можно устанавливать одинаковыми для всех сторон или для каждой стороны по отдельности: top — верхняя, bottom — нижняя, left — левая, right — правая |
| Отступ снаружи ( рис. 3.1), margin |
margin: 20px margin-left: 10px |
| Граница, border |
border: solid 1px #ac9d7f border-right: solid 4px #000000 |
| III. Заливка фона | |
| Цвет фона, background-color | background-color: #969696 |
| Фоновый рисунок, background-image |
background-image: url(graphics/drops.jpg) |
| Позиция фонового рисунка, background-position | background-position: top left |
| Повторяемость фонового рисунка, background-repeat |
background-repeat: repeat-x |
Тохир Рахимов