- •Оглавление
- •Введение Информация о курсе
- •Тенденции веба
- •Переход в веб
- •Введение в 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
Атрибут style
В отличие от элемента style атрибут применяется к конкретному элементу, а не к веб-документу в целом. Значением атрибута style является одно или несколько объявлений, разделенных точкой с запятой, например:
<img src=”…” style=”width: 800px; height: 600px;” />
Атрибут style также не рекомендуется использовать повсеместно, но он может быть полезен для указания размеров изображений или других внедренных объектов. Если не использовать атрибут style в таких случаях, то будет необходимо задавать атрибуты id, а это излишне усложнит код таблицы стилей.
Работа с цветом
Для задания цвета в CSS используется распространенная модель RGB (также доступна и RGBA). Для каждой цветовой компоненты отводится по одному байту. Это позволяет получить более 16 миллионов различных оттенков — больше, чем может различить человеческий глаз.
Свойство color
Управлять цветом текста позволяет свойство color. Его значения можно задавать в различных форматах.
-
Полный шестнадцатеричный код. Он состоит из символа # и следующих за ним 6 шестнадцатеричных цифр. Регистра букв значения не имеет. Например, так задается красный цвет:
color: #ff0000;
-
Сокращенный шестнадцатеричный код. Применяется, когда обе цифры для каждой компоненты оказываются одинаковыми. Тогда вместо шести цифр используются три, например:
#88ffdd можно сократить до #8fd
-
Функционал rgb(). Значение цвета указывается через параметры функционала. Можно указывать значения числами от 0 до 255, либо в процентах. Например, так можно задать зеленый цвет:
color: rgb(0, 255, 0);
color: rgb(0%, 100%, 0%);
-
Константы. Для наиболее простых цветов существуют словесные константы, например: red, black, purple и т. д. Всего их насчитывается 17.
Миф о «безопасных» цветах
Идея «безопасных» цветов («веб-цветов») появилась много лет назад. Считалось, что использование безопасных цветов гарантирует правильное отображение цветовой схемы на любом мониторе. Но на практике никакой разницы между «безопасными» и «небезопасными» цветами нет.
Безопасный цвет записывается в виде сокращенного шестнадцатеричного кода, цифры которого могут принимать только одно из 6 значений: 0, 3, 6, 9, c, f. В результате можно подсчитать, что всего таких цветов 216.
Многие источники до сих пор рекомендуют использовать на веб-страницах только безопасные цвета. Это лишь подчеркивает некомпетентность этих источников. Запомните, никаких «безопасных» и «небезопасных» цветов давно уже нет.
Свойство background
Свойство background управляет оформлением фона. Это свойство собирательное и состоит из пяти частных свойств, которые рассматриваются далее в этом разделе.
Background-color — цвет фона
Свойство background-color управляет цветом фона элемента. Оно принимает такие же значения, как и свойство color. Например, четыре этих объявления задают одинаковый черный цвет фона:
background-color: #000;
background-color: #000000;
background-color: rgb(0, 0, 0);
background-color: black;
По умолчанию это свойство имеет значение transparent (прозрачный). Обычно явно задавать этот цвет нет необходимости, поскольку цвет фона не наследуется.