Каскадные таблицы стилей CSS - просто

Технология CSS — используется для оформления HTML страниц. Все, оформление страницы: цвета, положение элементов — это все задается в CSS. Также CSS называют каскадными таблицами стилей.

Как подключить CSS файл

Для подключения используется тег link. Посмотрите пример подключения файла css:

<link rel="stylesheet" href="style.css">

1	<link rel="stylesheet" href="style.css">

В данном примере мы подключаем файл style.css типа stylesheet. Сам файл style.css — это обычный файл, в котором мы будем прописывать стили различных элементов. Подключение таблицы стилей осуществляется внутри тега head.

С помощью CSS можно задать оформление для любых элементов заключенных в теге body. Если вы хотите задать оформление всем элементам заключенным в тег нужно написать следующий синтаксис

p {

}

p {

}

Т.е. для описания стилей элемента мы должны указать только название этого элемента без угловых скобок. Затем в фигурных скобках мы указываем стили и их значение.

Рассмотрим пример:

p {
  background: pink;
  width: 250px;
  height: 40px;
}

p {

background: pink;

width: 250px;

height: 40px;

}

See the Pen CSS Основы by Alex (@Asmodey) on CodePen.

Здесь мы прописали стили для всех элементов p (параграфов). Давайте рассмотрим их подробнее:

background — задает цвет фона. Цвет можно задавать именем, кодом.
width — ширина блока. Здесь задана в пикселях. Обратите внимание, что надпись 250px выполнена слитно. Если единицы измерения написать отдельно от числа — то это вызовет ошибку CSS
height — высота элемента.

Довольно просто? Да! Стиль задается в формате свойство: значение. Конец строки обозначается точкой с запятой.

Возникает вопрос, а если мы хотим создать элемент параграфа, который будет отличаться по оформлению от других параграфов? Для этого нужно присвоить элементу имя. Здесь возможны два пути:

Присвоить элементу уникальное имя, которое не будет повторяться в рамках страницы и будет однозначно характеризовать данный элемент. Такое имя называется идентификатор. Как задать идентификатор:



1
Второй способ добавить к элементу класс. К данному классу могут принадлежать и другие элементы.



1

Как задать оформление элементу с id и class? Давайте рассмотрим пример:

#one {
  background: red;
  width: 300px;
  height: 40px;
}
.two {
  background: blue;
  width: 100px;
  height: 50px;
}

#one {

background: red;

width: 300px;

height: 40px;

}

.two {

background: blue;

width: 100px;

height: 50px;

}

See the Pen id&class by Alex (@Asmodey) on CodePen.

Как видите, чтобы обратиться к элементу который имеет id нужно в CSS перед именем идентификатора поставить знак #. Для задания стилей классу элементов поставьте перед именем класса точку. Обратите внимание #one и .two пишутся слитно.

Как записываются селекторы

h2 -стили описанные далее, применятся для всех заголовков второго уровня
p — стили применятся для всех параграфов
.one — стили применятся для всех элементов имеющих класс one
#four — стиль применим для элемента с id=four.
p.one — стиль применится для параграфов имеющих класс one
h2#five — стиль применится только к заголовку второго уровня с id равным five

Посмотреть примеры оформления текста с помощью CSS можно в следующем уроке.

CSS — мощное средство для описания правил оформления, позволяет не только задавать статичное оформление, но и анимировать html элементы страницы. Пример анимации можно посмотреть здесь.