Программирование для детей
CSS кодирует внешний вид HTML-элементов. CSS-стили можно прописывать разными способами. Можно прямо внутри тега:
А можно в отдельном файле стилей (файл.css), который присоединен к HTML-файлу строкой файл .css»>
Тогда в теге прописывается только класс:
class font-weight: normal;»> pumpurum » > Текст на красном фоне
Самые популярные CSS-свойства:
color — цвет текста.
Возможные значения: red, orange, yellow, green, blue и многие другие.
Пример использования: color: blue;
display — способ отображения.
Возможные значения: none (не отображать), block (как блочный элемент) и некоторые другие.
Пример использования: display: none;
width — ширина элемента. По-умолчанию в px (pixel, точка экрана).
Возможные значения: 100px, 200, 5px и другие.
Пример использования: width: 1000;
height — высота элемента.
Возможные значения: 100px, 200, 5px и другие.
Пример использования: height: 30;
background — цвет фона.
Возможные значения: red, orange, yellow, green, blue и многие другие.
Пример использования: background: gray;
position — способ позиционирования. По-умолчанию элементы выстраиваются сверху вниз, слева направо (static). То есть, позиция элемента зависит от того, куда его вставили и какие элементы расположены перед ним. Использование значения absolute позволяет точно указывать позицию элемента с помощью свойств top и left.
Возможные значения: static, absolute, relative, fixed.
Пример использования: position: absolute;
top — расположение элемента относительно верха страницы. Работает только со значением position: absolute (или position: relative — тогда позиционирует относительно того места, куда вставлен элемент и зависит от предыдущих элементов).
Возможные значения: 100px, 200, 5% и другие.
Пример использования: top: 100;
left — расположение элемента относительно левого края страницы. Работает аналогично свойству top.
Возможные значения: 100px, 200, 5px и другие.
Пример использования: left: 30;
Основные CSS-свойства
Урок №3
Основные CSS-свойства
Схема CSS-кода выглядит следующим образом:
В этом уроке мы рассмотрим основные CSS-свойства. Для вашего удобства, я разложил их по категориям:
CSS-свойства влияющие на цвет и фон
color: — CSS-свойство влияющее на цвет текста : заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства color :
color: green; — текст должен быть зелёного цвета, в качестве значения задано имя цвета,
color: #008800; — текст должен быть зелёного цвета, в качестве значения задан шестнадцатеричный код в RGB-формате.
background-color: — CSS-свойство влияющее на цвет фона заголовка, абзаца, ссылки и т.д.
В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства background-color :
background-color: blue; — фон должен быть синего цвета,
background-color: #0000ff; — фон должен быть синего цвета.
background-image: — CSS-свойство устанавливающее изображение, в качестве фона фона заголовка, абзаца, ссылки и т.д. Его значением выступает URL (адрес) изображения.
Примеры кода с использованием CSS-свойства background-image :
background-image: url(http://имя домена.ru/kartinka.jpg); — фоном должно стать изображение, находящееся по адресу http://имя домена.ru/kartinka.jpg
CSS-свойства влияющие на шрифт
font-size: — CSS-свойство влияющее на размер шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства font-size :
font-size: 17px; — размер шрифта должен быть 17 пикселей,
font-size: 20pt; — размер шрифта должен быть 20 пунктов.
font-family: — CSS-свойство устанавливающее имя шрифта для заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя шрифта: Arial , Courier , Impact , Garamond , Georgia , Helvetica , Tahoma , Times (установлен по-умочанию), Verdana и т.д.
Примеры кода с использованием CSS-свойства font-family :
font-family: Arial; — имя шрифта должно быть Arial,
font-family: Impact; — имя шрифта должно Impact.
font-style: — CSS-свойство влияющее на начертание (стиль) шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: normal , oblique .
Примеры кода с использованием CSS-свойства font-style :
font-style: normal; — нормальное начертание шифта,
font-style: oblique; — наклонное начертание шифта.
font-weight: — CSS-свойство влияющее на толщину шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступет: normal , bold .
Примеры кода с использованием CSS-свойства font-weight :
font-weight: normal; — нормальное начертание шифта,
font-weight: bold; — жирное начертание шифта.
CSS-свойства влияющие на текст
text-align: — CSS-свойство влияющее на выравнивание текста в заголовке, абзаце и других блочных элементах. В качестве его значения выступает: left , center , right , justify .
Примеры кода с использованием CSS-свойства text-align :
text-align: left; — выравнивание текста по левому краю (установлен по-умолчанию),
text-align: center; — выравнивание текста по центру,
text-align: right; — выравнивание текста по правому краю,
text-align: justify; — равномерное выравнивание текста по левому и правому краям.
text-indent: — CSS-свойство влияющее на отступ первой строки (красная строка) текста в закаловке, абзаце и других блочных элементах. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
text-indent: 20px; — отступ первой строки равен 20 пикселям,
text-indent: 15pt; — отступ первой строки равен 15 пунктам.
line-height: — CSS-свойство влияющее на расстояние между строками текста (интерлиньяж) заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: множитель, пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
line-height: 35px; — расстояние между строками равно 35 пикселей,
line-height: 1.5; — расстояние между строками равно 1.5 по множителю (аналогичен 150%).
letter-spacing: — CSS-свойство влияющее на расстояние между символами в словах заголовка, абзаца ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства letter-spacing :
letter-spacing: 3px; — расстояние между символами в словах, равно 3 пикселя,
letter-spacing: 5pt; — расстояние между символами в словах, равно 5 пунктов.
word-spacing: — CSS-свойство влияющее на расстояние между словами в тексте заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства word-spacing :
word-spacing: 10px; — расстояние между словами, равно 10 пикселей,
word-spacing: 7pt; — расстояние между словами, равно 7 пунктов.
text-transform: — CSS-свойство влияющее на вид букв в тексте, делая их прописными или строчными. В качестве его значения выступает: capitalize , lowercase , uppercase .
Примеры кода с использованием CSS-свойства text-transform :
text-transform: capitalize; — первая буква каждого слова начинается с верхнего регистра,
text-transform: uppercase; — все буквы в тексте записываются в верхнем регистре,
text-transform: lowercase; — все буквы в тексте записываются в нижнем регистре.
text-shadow: — CSS-свойство создающее тень текста.
В качестве его значения выступает: цвет ось-x ось-y радиус .
Пример кода с использованием CSS-свойства text-shadow:
text-shadow: green 3px 2px 2px; — тень будет зелёного цвета, со сдвигом в лево на 3 пикселя, со сдвигом вниз на 2 пикселя, радиус (разброс тени) будет составлять 5 пикселей.
CSS-свойства влияющие на границу (обводку)
border-color: — CSS-свойство влияющее на цвет границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или его шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства border-color :
border-color: green; — зелёный цвет обводки,
border-color: #008800; — зелёный цвет обводки, задан в шестнадцатеричном коде RGB-формата.
border-width: — CSS-свойство влияющее на толщину границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px).
Примеры кода с использованием CSS-свойства border-width :
border-width: 1px; — толщина обводки равна 1 пикселю,
border-width: 3px; — толщина обводки равна 3 пикселям.
border-style: — CSS-свойство влияющее на стиль границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: solid , dashed , dotted , double .
Примеры кода с использованием CSS-свойства border-style :
border-style: solid; — обводка как сплошная линия,
border-style: dashed; — обводка в виде отрезков,
border-style: dotted; — обводка в виде точек,
border-style: double; — обводка в виде двойной сплошной линии.
CSS-свойства влияющие на внешние и внутренние отступы
margin: — CSS-свойство влияющее на отступ между краем фона одного блочного элемента (заголовки, абзацы и т.д.) и краем фона другого блочного элемента. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства margin :
margin: 15px; — отступ равен 15 пикселям,
margin: 12pt; — отступ равен 12 пунктам.
padding: — CSS-свойство влияющее на отступ между краем фона элемента и его содержимым (текстом, изображением). В качестве его значения выступаюет единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства padding :
padding: 5px; — отступ равен 5 пикселям,
padding: 3pt; — отступ равен 3 пунктам.