Время на прочтение: 3 минут(ы) Чтобы прочесть данную статью, нужно знать язык гипертекстовой разметки HTML. CSS (Cascading Style Sheets) — это язык таблиц стилей, который используется для оформления веб-страниц. Стиль состоит из селектора и объявления. Селектором могут быть названия HTML элементов, классы и идентификаторы. Классы записываются в виде символа “.” и названия класса. У HTML элементов названия классов прописываются в атрибуте …
Цвет в CSS
Время на прочтение: 3 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Цвет может задаваться определёнными английскими названиями или в шестнадцатеричном виде. Пример Если обычно используемая цифра в десятичном исчислении находится в диапазоне от 0 до 9 и всего 10 цифр, то цифра в шестнадцатеричном исчислении может иметь значения: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, …
Оформление фона в CSS
Время на прочтение: 3 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Пример 1 В таблице стилей с помощью свойства “background-color” задаётся синий цвет фона текста. Пример 2 В таблице стилей свойство “background-image” задаёт фоновое изображение из файла “cat.jpg”. При этом изображение повторяется по горизонтали и по вертикали. Чтобы изменить режим повторения используется свойство “background-repeat”: Значение background-repeat Результат no-repeat …
Рамка в CSS
Время на прочтение: 3 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Пример 1 В таблице стилей свойство “border-style” задаёт сплошной стиль рамки вокруг элемента “div”. “border-color” устанавливает синий цвет рамки. border-width указывает на большую ширину рамки. Значение border-style Результат none Нет рамки dotted dashed solid double groove ridge inset outset Ширина рамки может указываться в пикселах. Например, “border-width: …
Позиционирование элементов в CSS
Время на прочтение: 2 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Пример 1 Свойство “background-color” задаёт первому HTML элементу “div” красный цвет, а второму – зелёный. Значение “absolute” свойства “position” указывает, что координаты второго элемента задаются относительно веб-страницы. Также можно указать значение “fixed”, что будет определять координаты относительно экрана. При прокрутке веб-страницы позиция элемента не изменится. А также …
Начертание текста в CSS
Время на прочтение: 3 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Шрифт – это структура, описывающая начертания каждого символа для написания текста. Пример 1 В таблице стилей свойство “font-family” задаёт название шрифта. Также в этом свойстве можно указать семейства шрифтов. Некоторые из семейств: Семейство Результат serif sans-serif monospace cursive fantasy Свойство “font-weight” задаёт толщину очертаний символов – жирность …
Отображение элементов в CSS
Время на прочтение: 2 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Блочные, встроенные и невидимые элементы HTML. Блочный элемент занимает всю строку, встроенный – ограничен своим содержимым, а невидимый вообще не отображается и не занимает места. Пример 1 Значение “block” свойства “display” отображает встроенный HTML элемент “b” как блочный. Значение “inline” свойства “display” отображает блочные элементы “ul” и …
Отступы в CSS
Время на прочтение: 2 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Пример 1 Свойство “border” задаёт внешнему прямоугольнику красную рамку, а внутреннему – зелёную. Свойство “margin” задаёт отступ 20 пикселов от рамки внутреннего прямоугольника до внешнего. Свойство “padding” задаёт отступ 40 пикселов от содержимого внутреннего прямоугольника до его рамки. У “margin” и “padding” может быть от 1 до …
Переполнение в CSS
Время на прочтение: < 1 минуты Чтобы прочесть данную статью, нужно знать основы CSS. Пример Значение “auto” свойства “overflow” задаёт горизонтальную полосу прокрутки у красного прямоугольника, так как в него по горизонтали не помещается зелёный, а по вертикали полоса прокрутки не создаётся, так как по вертикали зелёный прямоугольник помещаётся в красный. Значение по умолчанию “visible” свойства “overflow” полностью показывает не помещающийся …
Оформление ссылок и форм в CSS
Время на прочтение: 2 минут(ы) Чтобы прочесть данную статью, нужно знать основы CSS. Пример 1 Значение “block” свойства “display” отображает ссылки как блочные элементы – занимающие отдельные строки. Свойство “width” задаёт ссылкам ширину в 100 пикселов. Значение “none” свойства “text-decoration” убирает подчёркивание у ссылок. Свойство “border” задаёт зелёную рамку у ссылок, а “padding” задаёт отступ в 10 пикселов между текстом …
