Что такое CSS

18 июля, 201818 июля, 2018 Vertex Academy зачем нужен CSS,основы CSS,что такое CSS

Данная статья написана командой Vertex Academy.
Это одна из статей из нашего Самоучителя по HTML&CSS.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы поговорим о том, что же такое CSS.

Что такое CSS?

Если посмотреть на любую вакансию front-end разработчика, в требованиях вакансии Вы всегда увидите, что необходимо знать:

HTML, CSS, JavaScript

Таким образом HTML, CSS и JavaScript - это основа веб-разработки, это как фундамент дома. Сначала необходимо выучить HTML, CSS и JavaScript и потом можно переходить к изучению других технологий, которые необходимы для работы front-end разработчика.

Что такое HTML Вы уже знаете из предыдущих статей нашего Cамоучителя по HTML&CSS.

HTML расшифровывается как HypertText Markup Language - "язык гипертекстовой разметки". С помощью HTML-тегов мы размечаем, набрасываем структуру страницы, то есть ЧТО будет на странице:

Заголовки (с помощью тега <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
Параграфы (c помощью <p>)
Списки (c помощью <ul> или <ol>)
Картинки (с помощью <img>)
и т.д.

Однако HTML не позволяет нам стилизовать страницу. Например, мы не можем с помощью HTML сделать так, чтобы:

Заголовки были красного цвета
Параграфы были зеленого цвета
Списки отображались шрифтом Helvetica, причем размер шрифта был 18px и синим цветом
и т.д.

Так вот стилизовать страницу нам позволяет CSS. CSS расшифровывается как Cascading Style Sheets - "каскадные таблицы стилей". Главное слово, на которое нужно обратить внимание - это слово "стиль".

CSS позволяет нам "оформить, стилизовать" нашу страницу - например:

задать шрифт для текста (Arial, Helvetica, Times New Roman и т.д.)
задать размер шрифта (12px, 14px, 16px и т.д.)
задать цвет текста (желтый, голубой, сиреневый, зеленый, темно-зеленый и т.д.)
задать цвет фона страницы (желтый, белый, голубой и т.д.)
и т.д.

Если сравнивать с рисованием, с помощью HTML мы только намечаем каркас будущей страницы:

А с помощью CSS мы "разукрашиваем", заполняем наш каркас:

Таким образом:

HTML говорит ЧТО изображается на странице
CSS отвечает за то КАК это будет отображаться

Как выглядит CSS код

Давайте вспомним базовую структуру HTML-документа. Как Вы помните, у нас есть два основных тега - тег <head> и тег <body>:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Это моя страница</title>
    </head>
    <body>
        <p> Привет!</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Это моя страница</title>

</head>

<body>

<p> Привет!</p>

</body>

</html>

А что если мы хотим сделать так, чтоб:

фон страницы был зеленого цвета
все тексты были написаны размером шрифта 10px.

Как мы можем это сделать? Для этого нам необходимо написать в CSS данные строчки кода:

body{
    background-color: green;
    font-size: 10px;
}

body{

background-color: green;

font-size: 10px;

}

Если перевести с английского, тут написано:

тело {

цвет-фона: зеленый;

размер-шрифта: 10px;

}

То есть мы прописали, что хотим, чтоб:

фон странички был зеленого цвета
размер шрифта текста был 10px

Как видите все очень просто! Как слышится так и пишется 🙂 Разве что на английском. Конечно, и у CSS тоже есть свои особенности и "подводные камни" - но о них Вы узнаете чуть позже.

В данной статьей мы дали Вам общее понимание что такое CSS. В следующей статье мы покажем как подключить CSS к HTML и покажем как это работает на практических примерах.

И напоследок немного общих фактов о CSS

Первая версия CSS была разработана в 1994 году.

Существует несколько версий CSS:

CSS1
CSS2
CSS3

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

Тем не менее, все еще существует огромное количество сайтов, которые до сих пор работают на CSS2, или даже CSS1! 🙂

На этом все. Надеемся, Вам понравилась эта статья и Вы теперь имеете общее представление о том, что такое CSS. Читайте дальше! Или приходите к нам учиться на курсы по front-end. Детальнее смотрите здесь - у нас на сайте.