Главная->Уроки по css->Что такое CSS, основы css

Что такое CSS, основы css

19 Нояб 2019г. в 13:25

Как вы помните HTML - это язык разметки, но его создатели так хотели улучшить жизнь сайтостроителей, что добавляли в него элементы и параметры, отвечающие за внешний вид страницы: теги font, b, i, bgcolor и так далее.

Но на какой-то момент код страниц стал таким громоздким и нечитабельным, что стало ясно - этот путь ведет "в никуда". Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS). В совокупности HTML и CSS позволяют творить чудеса и в этом вы скоро убедитесь.

Что такое CSS

CSS (Cascading Style Sheets) - каскадные таблицы стилей.

Стиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги h1) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.

Пример

h1 {
color:red;
font-size:24px;
}

Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей.

Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.
Преимущества CSS
CSS позволяет значительно сократить размер кода и сделать его читабельным.

CSS позволяет задавать такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок.

CSS позволяет легко изменять внешний вид страниц. Представьте, вы сделали сайт из 50 страниц, на которых все заголовки синего цвета. Через какое-то время, вы захотели поменять синий цвет на зеленый. Вам придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте. С CSS вам придется сделать это лишь один раз, в таблице стилей.

С CSS связана так называемая блочная верстка сайта.