Чтобы сразу перейти к примерам, жми кнопку "Примеры" на навигационной панели вверху-слева.
CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декорирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.
Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы.
CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля.
Правила построения CSS.
Правило CSS имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила до знака «{», определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них. Селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}.
Каскадные таблицы стилей. Подключение. Элемент "link".
it-css-link
Зарегистрируйте домен (выделенное имя) у любого хостинг-провайдера для идентификации. Арендуйте виртуальный хостинг (сервер) для хранения файлов и постоянного подключения к сети Интернет. Привяжите домен к хостингу и создайте "сайт" через панель управления хостинг-провайдера следуя его инструкциям.
Откройте текстовый редактор (среду разработки). Создайте
файл-index.html и сохраните его.
Если описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>. Откройте файл - index.html, в нем создайте шаблон html формата и сохраните его:
Разместите файл-index.html на хостинге в нужной директории через панель управления хостинг-провайдера следуя его инструкциям. В этой же директории создайте папку "style". В папке "style" создайте файл style.css, в нем создайте шаблон css формата и сохраните его:
p {
color: red;
}
В панели управления хостинг-провайдера (как правило раздел "сайты") найдите созданный "сайт" и кликните на него. Браузер откроет ваш HTML документ с текстом красного цвета:"Текст красный".
Если вы увидели это на экране монитора, вы все сделали правильно.
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"Универсальный селектор - текст зеленый." и "Текст импорта - параграф красный.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Подключение. Элемент "style".
it-css-style
Если стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в элемент <head>. В этом случае использовать хостинг нет необходимости. Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
Если стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента. В этом случае использовать хостинг нет необходимости. Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом зеленого цвета:"Заголовок - текст зеленый." и "Параграф - текст зеленый.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Селектор тегов.
it-css-selektor-teg
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Селектор тегов.</title>
<style>
p {
color: green;
}
</style>
</head>
<body>
<h1>Заголовок - текст черный.</h1>
<p>Параграф - текст зеленый.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"Заголовок - текст черный." и "Параграф - текст зеленый.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Селектор классов.
it-css-selektor-klas
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селектор классов.</title>
<style>
/* для всех элементов, имеющих в атрибуте class "b" */
.b {
background-color: yellow;
}
</style>
</head>
<body>
<p>Параграф - текст черный.</>
<p class="b">Параграф - текст черный, фон желтый.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"Параграф - текст черный." и "Параграф - текст черный, фон желтый.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Комбинатор потомков (пробел) соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Селектор потомков (пробел).</h2>
<p>Селектор потомков соответствует всем элементам, которые являются потомками "div" элемента.</p>
<div>
<p>Параграф 1 в "div" - желтый фон.</p>
<section><p>Параграф 2 в "div" - желтый фон.</p></section>
</div>
<p>Параграф 3 не в "div" - белый фон.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"Параграф 1 в <div> - желтый фон. Параграф 2 в <div> - желтый фон. Параграф 3 не в <div> - белый фон.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Комбинатор дочерних элементов (>).
it-css-selektor-doch
Комбинатор дочерних элементов (>) соединяет два селектора так, что будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS Селектор дочерних элементов.</h1>
<h2>Выбрать все элементы p непосредственных детей элемента div.</h2>
<div>
<p>Параграф 1 в div-дочерний (желтый фон).</p>
<p>Параграф 2 в div-дочерний (желтый фон).</p>
<span><p>Параграф 3 в div- не дочерний, а потомок.</p></span>
</div>
<p>Параграф 4. не в div.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"CSS Селектор дочерних элементов.
Выбрать все элементы p непосредственных детей элемента div. Параграф 1 в div-дочерний (желтый фон). Параграф 2 в div-дочерний (желтый фон). Параграф 3 в div- не дочерний, а потомок. Параграф 4. не в div.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Комбинатор соседних родственных элементов (+).
it-css-selektor-sos
Комбинатор соседних родственных элементов (+) соединяет два селектора так, что будет выбран только тот элемент, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS Соседний селектор брат.</h1>
<h2>Выбрать все элементы p, которые размещаются сразу после элемента div.</h2>
<div>
<p>Параграф 1 в div.</p>
<p>Параграф 2 в div.</p>
</div>
<p>Параграф 4. не в div-соседний-желтый фон.</p>
<p>Параграф 5. не в div.-не соседний.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"CSS Соседний селектор брат.
Выбрать все элементы p, которые размещаются сразу после элемента div. Параграф 1 в div. Параграф 2 в div. Параграф 4. не в div-соседний-желтый фон. Параграф 5. не в div.-не соседний.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Комбинатор общих родственных элементов (~).
it-css-selektor-obsch
Комбинатор общих родственных элементов (~) соединяет два селектора так, что будут выбраны родственные элементы, даже если они не являются непосредственными соседями.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS Комбинатор общих родственных элементов.</h1>
<h2>Выбрать все элементы (p), которые являются братьями и сестрами элемента (p) в (div).</h2>
<p>Элемент (p) не в (div). Не выбирается-общий родственник, но объявлен раньше (div).</p>
<div>
<code>Элемент (code) в (div).</code>
<p>Элемент (p) в (div).</p>
</div>
<p>Элемент (p) не в (div). Выбирается-родственник элемента (p) в (div)-желтый фон.</p>
<code>Элемент (code) в (div). Не выбирается-не родственник элемента (p) в (div).</code>
<p>Элемент (p) не в (div). Выбирается-родственник элемента (p) в (div)-желтый фон.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом:"CSS Комбинатор общих родственных элементов. Выбрать все элементы (p), которые являются братьями и сестрами элемента (p) в (div). Элемент (p) не в (div). Не выбирается-общий родственник, но объявлен раньше (div). Элемент (code) в (div). Элемент (p) в (div). Элемент (p) не в (div). Выбирается-родственник элемента (p) в (div)-желтый фон. Элемент (code) в (div). Не выбирается-не родственник элемента (p) в (div).
Элемент (p) не в (div). Выбирается-родственник элемента (p) в (div)-желтый фон.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Группа элементов.
it-css-selektor-grup
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>CSS Группа элементов.</h1>
<h2>Выбирать все HTML элементы с одинаковым стилем.</h2>
<p>Чтобы минимизировать код.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом краснго цвета выравненым по центру:"CSS Группа элементов. Выбирать все HTML элементы с одинаковым стилем. Чтобы минимизировать код.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Цвет фона.
it-css-cvet-fon
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом на прозрачно-зеленом фоне: "Opacity-непрозрачность 0.3. Opacity-непрозрачность 1.0 (default-по умолчанию).".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Штрихованные границы.
it-css-gran-shtr
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.dotted {
border-style: dotted;
}
</style>
</head>
<body>
<p class="dotted">Штрихованные границы (dotted - 1. с точкой, с точками; 2. отмеченный или намеченный точками; 3. пунктирный;).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом в штрихованных границах: "Штрихованные границы (dotted - 1. с точкой, с точками; 2. отмеченный или намеченный точками; 3. пунктирный;).".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Пунктирные границы.
it-css-gran-punk
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом в пунктирных границах: "Пунктирные границы (dashed-пунктирный).".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Сплошные границы.
it-css-gran-splo
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом в сплошных границах: "Сплошные границы (solid 1. сплошной; 2. трехмерный, пространственный).".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Двойные границы.
it-css-gran-dvoy
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом в желобных границах: "Границы желобом (groove - желобок; паз;)."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Границы коньком.
it-css-gran-kon.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом в начальных границах:"Границы начальные (outset 1. начало, начальный этап; 2. заголовок на полях страницы.)."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Границ нет.
it-css-gran-net
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом в смешанных границах:"Границы смешаны."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Выравнивание текста справа.
it-css-tekst-viir-prav
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-align: right;
}
</style>
</head>
<body>
<p>По правому краю (right-правый, вправо), (align-выстраивать в линию; выравнивать строки).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом выравненым:"По правому краю (right-правый, вправо), (align-выстраивать в линию; выравнивать строки)."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Выравнивание текста по центру.
it-css-tekst-viir-centr
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>Выравнивание текста по центру (center 1. центр; 2. центрировать, выравнивать по центру), (align-выстраивать в линию; выравнивать строки).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом выравненным:"Выравнивание текста по центру (center 1. центр; 2. центрировать, выравнивать по центру), (align-выстраивать в линию; выравнивать строки)."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Выравнивание текста по ширине.
it-css-tekst-viir-shir
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-align: justify;
}
</style>
</head>
<body>
<p>Выравнивание текста по ширине (justify 1. выравнивание, выключка;), (align-выстраивать в линию; выравнивать строки).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом выравненным:"Выравнивание текста по ширине (justify 1. выравнивание, выключка;), (align-выстраивать в линию; выравнивать строки)."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Выравнивание текста по левому краю.
it-css-tekst-viir-levo
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-align: left;
}
</style>
</head>
<body>
<p>Выравнивание текста по левому краю (left 1. слева, на лево;), (align-выстраивать в линию; выравнивать строки).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом выравненным:"Выравнивание текста по левому краю (left 1. слева, на лево;), (align-выстраивать в линию; выравнивать строки)."
Если вы увидели это на экране монитора, вы все сделали правильно.
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с зачеркнутым текстом:"Cвойство CSS text-decoration позволяет устанавливать подчеркивание, зачеркивание, мигание текста (Значение line-through - Зачеркивание текста)."
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Отступ вправо.
it-css-tekst-otst-prav
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>Отступ вправо в начале первой строки абзаца устанавливается с помощью свойства text-indent: (Значение 50px - отступ на пятьдесят пикселей.).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с отступом текста:"Отступ вправо в начале первой строки абзаца устанавливается с помощью свойства text-indent: (Значение 50px - отступ на пятьдесят пикселей.). Indent (англ.)- отступ, смещение вправо, втяжка."
Если вы увидели это на экране монитора, вы все сделали правильно.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
letter-spacing: 3px;
}
</style>
</head>
<body>
<p>"Свойство: letter-spacing используется, чтобы указать пространство между символами в тексте. Значение: 3px; - интервал на три пикселя. Англ.: Letter 1. буква; 2. письмо; Spacing (междустрочный) интервал; установка интервала; расположение, ширина промежутков между линиями.".</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с интервалом в тексте:"Свойство: letter-spacing используется, чтобы указать пространство между символами в тексте. Значение: 3px; - интервал на три пикселя. Англ.: Letter 1. буква; 2. письмо; Spacing (междустрочный) интервал; установка интервала; расположение, ширина промежутков между линиями.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Межстрочный интервал.
it-css-stro-mezh
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
line-height: 3px;
}
</style>
</head>
<body>
<p>"Свойство line-height устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. Значение: 30px; - интервал на тридцать пикселей.".</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с интервалом в строках:"Свойство line-height устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. Значение: 30px; - интервал на тридцать пикселей.". Англ.: line 1. линия, строка; черта; height 1. высота; 2. максимум; наивысшая точка.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Текст. Направление.
it-css-tekst-napr
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
/*direction: ltr; комментарий отключает свойство*/
direction: rtl;
}
</style>
</head>
<body>
<p>"Свойство direction применяется для изменения направления текста. Значение: ltr устанавливает направление слева направо, rtl задает направление справа налево." Англ.: direction-направление; left to right-слева направо(ltr), right to left-справа налево(rtl).</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с направлением текста:"Свойство direction применяется для изменения направления текста. Значение: ltr устанавливает направление слева направо, rtl задает направление справа налево." Англ.: direction-направление; left to right-слева направо(ltr), right to left-справа налево(rtl).
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Интервал между словами.
it-css-interval
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
word-spacing: 30px;
}
</style>
</head>
<body>
<p>"Свойство CSS word-spacing устанавливает расстояние между словами. Значение: 30px; - интервал на тридцать пикселей." Англ.: word 1. слово; space 1. пробел, пропуск; интервал.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с расстоянием между словами:"Свойство CSS word-spacing устанавливает расстояние между словами. Значение: 30px; - интервал на тридцать пикселей." Англ.: word 1. слово; space 1. пробел, пропуск; интервал.
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Тень для текста.
it-css-tekst-ten.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
text-shadow: 1px 2px 3px yellow;
}
</style>
</head>
<body>
<p>С помощью свойства text-shadow задаётся тень текста. Значение: 1px; - смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево. 2px – смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх. 3px – радиус размытия тени. По умолчанию размытие устанавливается 0 пикселей, что делает тень четкой и неразмытой. Yellow – цвет тени. Если он не указан, то цвет тени устанавливается такой же, как у текста, к которому применяется стиль." Англ.: shadow-тень; yellow-желтый.</p>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом с желтой тенью.
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Фон. Цвет.
it-css-fon-cvet
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с текстом на желтом фоне тела и фонами элементов: Заголовок-красный. Параграф-голубой.
Если вы увидели это на экране монитора, вы все сделали правильно.
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоками желтого фона по степени прозрачности: Степень прозрачности элемента определяется значением от 0 до 1, где 0 – полностью прозрачный, а 1 – полностью непрозрачный.
Если вы увидели это на экране монитора, вы все сделали правильно.
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div { background: rgb(0, 128, 0); }
div.one { background: rgba(0, 128, 0, 0.5); }
div.two { background: rgba(0, 128, 0, 0.2); }
</style>
</head>
<body>
<div>
<h1>R (красный), G (зеленый), B (синий).</h1>
</div>
<div class="one">
<h1>R (красный), G (зеленый), B (синий). A (Степень=0.5).</h1>
</div>
<div class="two">
<h1>R (красный), G (зеленый), B (синий). A (Степень=0.2).</h1>
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоками зеленого фона по степени прозрачности: значения цвета RGBA задается в следующем порядке: R (красный), G (зеленый), B (синий) в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Альфа-канал — это число от 0 (полностью прозрачное) до 1 (полностью непрозрачное).
Если вы увидели это на экране монитора, вы все сделали правильно.
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоками зеленого фона по степени прозрачности: значения цвета задается в следующем порядке: Hue — тон. Saturation — насыщенность. Lightness — осветленность. Тон — это значение цвета на цветовом круге в градусах. Красный цвет соответствует значениям 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300°. Насыщенность — это интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% соответствует полному отсутствию насыщенности (тусклый серый), а 100% — это чистый и яркий цвет. Осветленность задает яркость цвета и указывается в процентах от 0% до 100%. Малые величины делают цвет темнее, а высокие светлее. Крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Если вы увидели это на экране монитора, вы все сделали правильно.
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоками зеленого фона по степени прозрачности: значения цвета задается в следующем порядке: Англ. - hex (hexadecimal - шестнадцатиричный). #rrggbb (по два: red, green, blue = 00-ff или 0-255). Крайние значения #000000 и #ffffff соответствуют чёрному и белому цвету.
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внешние.
it-css-element-pole-vnesh
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 200px;
margin-left: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внешние поля элемента div: по 100px сверху и снизу, по 200px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внешние поля элемента div: по 100px - сверху и снизу, по 200px - справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная". Англ.: margin 1. поле (страницы).
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внешние. Коротко.
it-css-element-pole-vnesh-korot
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
margin: 100px 100px 100px 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внешние поля элемента div: по 100px сверху и снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и значения.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внешние поля элемента div: по 100px - сверху и снизу, по 100px - справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная". Англ.: margin 1. поле (страницы).
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внешние. Три значения.
it-css-element-pole-vnesh-tri-zn
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
margin: 50px 100px 60px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внешние поля элемента div: 50px сверху и 60px снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и три значения.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внешние поля элемента div: 50px сверху и 60px снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная.". Англ.: margin 1. поле (страницы).
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внешние. Два значения.
it-css-element-pole-vnesh-dva-zn
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
margin: 50px 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внешние поля элемента div: по 50px сверху и снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и два значения.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внешние поля элемента div: по 50px сверху и снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная.". Англ.: margin 1. поле (страницы).
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внешние. Одно значение.
it-css-element-pole-vnesh-odno-zn
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
margin: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внешние поля элемента div: по 50px со всех сторон, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и одно значение.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внешние поля элемента div: по 50px со всех сторон, цвет блока светло-зеленый, граница блока 1px сплошная черная.". Англ.: margin 1. поле (страницы).
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внутренние.
it-css-element-pole-vnutr
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
padding-top: 100px;
padding-bottom: 100px;
padding-right: 200px;
padding-left: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внутренние поля элемента div: по 100px сверху и снизу, по 200px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внутренние поля элемента div: по 100px - сверху и снизу, по 200px - справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внутренние. Коротко.
it-css-element-pole-vnutr-korot
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
padding: 100px 100px 100px 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внутренние поля элемента div: по 100px сверху и снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и значения.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внутренние поля элемента div: по 100px - сверху и снизу, по 100px - справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внутренние. Три значения.
it-css-element-pole-vnutr-tri-zn
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
padding: 50px 100px 60px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внутренние поля элемента div: 50px сверху и 60px снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и три значения.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внутренние поля элемента div: 50px сверху и 60px снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внутренние. Два значения.
it-css-element-pole-vnutr-dva-zn
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
padding: 50px 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внутренние поля элемента div: по 50px сверху и снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и два значения.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внутренние поля элемента div: по 50px сверху и снизу, по 100px справа и слева, цвет блока светло-зеленый, граница блока 1px сплошная черная.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Каскадные таблицы стилей. Поля элемента. Внутренние. Одно значение.
it-css-element-pole-vnutr-odno-zn
Создайте в папке "Рабочий стол" и откройте файл - index.html. В нем создайте шаблон html формата и сохраните его:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 1px solid black;
padding: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
Внутренние поля элемента div: по 50px со всех сторон, цвет блока светло-зеленый, граница блока 1px сплошная черная. Короткая запись свойства и одно значение.
</div>
</body>
</html>
В папке "Рабочий стол" кликните на файл - index.html. Браузер откроет ваш HTML документ с блоком и текстом: "Внутренние поля элемента div: по 50px со всех сторон, цвет блока светло-зеленый, граница блока 1px сплошная черная.".
Если вы увидели это на экране монитора, вы все сделали правильно.
Есть совет? Остались вопросы? Нужна помощь? Свяжитесь с администратором сайта.
