- •Оглавление
- •Введение Информация о курсе
- •Тенденции веба
- •Переход в веб
- •Введение в html Что такое html?
- •Элементы
- •Атрибуты
- •Базовая структура документа
- •Стандарт xhtml 1.0 Strict
- •Введение в css
- •Правила, свойства, значения
- •Простые селекторы
- •Универсальный селектор
- •Селектор по типу элемента
- •Селектор по id
- •Селектор по class
- •Подключение таблицы стилей к веб-документу
- •Элемент style
- •Атрибут style
- •Работа с цветом
- •Свойство color
- •Миф о «безопасных» цветах
- •Свойство background
- •Background-color — цвет фона
- •Background-image — фоновое изображение
- •Background-repeat — режим повторения изображения
- •Background-attachment — режим прокрутки (прикрепления) изображения
- •Background-position — положение изображения
- •Свойства border-top, border-right, border-bottom, border-left
- •Свойства border-width, border-color, border-style — параметры рамки
- •Собирательное свойство border — рамка
- •Элементы html Области элементов
- •Некоторые текстовые элементы
- •Заголовки
- •Элемент p — абзац
- •Элемент address — адресные данные
- •Атрибут title
- •Оформление гиперссылок
- •Псевдоклассы гиперссылок
- •Элементы dt и dd — главная и подчиненная части списка определений
- •Оформление списков
- •Элемент img — изображение
- •Атрибут src — адрес изображения
- •Атрибут alt — альтернативное описание
- •Атрибут style — оформление изображения
- •Атрибуты colspan и rowspan — объединение ячеек
- •Семантическая верстка и микроформаты
- •Оформление страниц при помощи css Оформление текста
- •Свойство font-family — гарнитура шрифта
- •Семейства шрифтов
- •Свойство font-size — кегль шрифта
- •Свойство font-style — управление наклоном
- •Свойство font-weight — насыщенность шрифта
- •Свойство font — управление шрифтом
- •Свойство text-transform — преобразование регистра
- •Свойство line-height — высота строки
- •Свойство vertical-align — вертикальное выравнивание
- •Вертикальное выравнивание для строчных элементов
- •Вертикальное выравнивание для ячеек таблиц
- •Область элемента
- •Свойство text-indent — управление абзацным отступом
- •Свойство padding — внутренний отступ
- •Свойство margin – внешний отступ
- •Верстка Что такое верстка?
- •С кем взаимодействует верстальщик?
- •Как создается веб-страница?
- •Процесс верстки
- •Пример верстки
- •Глава 6. Введение в JavaScript
- •Что такое JavaScript?
- •Типы данных
- •Переменные
- •Операторы
- •Инструкции
- •Конструкторы
- •Прототипы
- •Возможности расширения
- •Экземпляры и классы
- •Общие методы класса Object
- •Интеграция html и JavaScript
- •Элемент script
- •Интеграция в данные
- •Глава 7. Клиентский JavaScript Формы в html
- •Элемент form — собственно форма
- •Обработчики событий
- •Обработчики событий как атрибуты
- •Обработка событий без внедрения кода через атрибуты
- •Таймеры
- •Объект Location
- •Объект History
- •Объект Window
-
Введение в css
Таблицы стилей
Язык CSS применяется для оформления веб-документов. Он позволяет управлять их внешним видом с помощью размеров, шрифтов, цветов, рамок и других свойств, регулировать расположение различных элементов и создавать другие визуальные эффекты.
Профессиональный стиль веб-программирования предлагает помещать в файлы HTML все содержимое веб-страниц, а в файлы CSS — все инструкции по оформлению этих страниц: такой подход позволяет упростить разработку и сопровождение. Законченный код CSS называется таблицей стилей. Хотя точный перевод слова “sheet” звучит как «лист», термин «таблица стилей» употребляется довольно часто, поскольку он уже устоялся в профессиональной практике.
Таблица стилей и файл CSS не всегда обозначают одно и то же. Таблица стилей может строиться из нескольких CSS-файлов. Также стили могут внедряться непосредственно в веб-документ или создаваться динамически.
Правила, свойства, значения
Таблица стилей строится из правил. Правило задает оформление для некоторого элемента, набора элементов или других компонентов веб-документа. В листинге 2.1 приводится пример таблицы стилей.
Листинг 2.1. Пример таблицы стилей
p {
color: #f88;
background: #eee;
}
a {
text-decoration: none;
}
В данном листинге таблица состоит из двух правил. Правило начинается с селектора, обозначающего компонент, на который действует данное правило. В примере первое правило применяется ко всем абзацам (p), а второе — к гиперссылкам (a).
После селектора располагается блок объявлений, который начинается с левой фигурной скобки и заканчивается правой. Внутри блока содержатся объявления, каждое из которых отвечает за отдельный аспект оформления. Первое правило изменяет цвет шрифта и цвет фона в абзацах. Второе правило убирает подчеркивание у гиперссылок. Объявление состоит из названия свойства и значения, между которыми стоит двоеточие.
Объявления отделяются друг от друга точкой с запятой. После последнего объявления в блоке точка с запятой не обязательна, но профессиональный стиль веб-программирования рекомендует ее ставить.
Простые селекторы
В CSS существует более 20 различных селекторов, но простыми являются всего четыре. Остальные селекторы представляют собой либо различные специальные комбинации или расширения простых селекторов.
Универсальный селектор
Универсальный селектор (universal selector) обозначается символом звездочки: *. Объявления данного селектора управляют оформлением любых элементов. Например, это правило окружает каждый элемент веб-документа рамкой:
* {
border: 1px solid #ccc;
}
Этот селектор очень полезен для задания начальных значений. Например, можно удалить отступы сразу всех элементов. Многие элементы отображаются с внешними (margin) или внутренними отступами (padding) и очень часто требуется изменить размер этих отступов или вовсе их удалить. Задавать специальные правила для каждого элемента слишком долго и здесь очень выручает универсальный селектор.
Во многих таблицах стилей можно найти правило, которое удаляет отступы у всех элементов. Кроме того, его также часто добавляют в шаблоны таблиц стилей для различных сред веб-разработки. Чаще всего оно выглядит следующим образом:
* {
margin: 0;
padding: 0;
}