Введение в CSS

CSS — один из самых важных инструментов в дизайне и украшении внешнего вида веб-сайта. Мы научим вас основам и тому, как использовать CSS

CSS может изменить внешний вид HTML

CSS — это язык, который мы используем для оформления веб-страницы.

Что такое CSS?

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

Демонстрация CSS — одна HTML-страница — несколько стилей!

Здесь мы покажем одну HTML-страницу, отображаемую с четырьмя разными таблицами стилей. Щелкните ссылки «Таблица стилей 1», «Таблица стилей 2», «Таблица стилей 3», «Таблица стилей 4» ниже, чтобы просмотреть различные стили:

Зачем использовать CSS?

CSS используется для определения стилей ваших веб-страниц, включая дизайн, макет и варианты отображения для разных устройств и размеров экрана.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS решил большую проблему

HTML НИКОГДА не предназначался для содержания тегов для форматирования веб-страницы!

HTML был создан для описания содержимого веб-страницы, например:

<h1>Это заголовок</h1>

<p>Это абзац.</p>

Когда в спецификацию HTML 3.2 были добавлены такие теги, как <font>, и атрибуты цвета, для веб-разработчиков начался настоящий кошмар. Разработка крупных веб-сайтов, где информация о шрифтах и цветах добавлялась к каждой отдельной странице, стала долгим и дорогостоящим процессом.

Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.

CSS удалил форматирование стилей со страницы HTML!

CSS экономит много работы!

Определения стилей обычно сохраняются во внешних файлах .css.

С помощью внешнего файла таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

Синтаксис CSS

Правило CSS состоит из селектора и блока объявлений.
Введение в CSS

Селектор указывает на HTML-элемент, который вы хотите стилизовать.

Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.

Каждое объявление включает имя свойства CSS и значение, разделенные двоеточием.

Несколько объявлений CSS разделяются точкой с запятой, а блоки объявлений заключаются в фигурные скобки.

p {
  color: red;
  text-align: center;
}

Объяснение примера

p — это селектор в CSS (он указывает на HTML-элемент, стиль которого вы хотите изменить: <p>).
color — это свойство, а red — это значение свойства
text-align — это свойство, а center — это значение свойства