Знакомство с CSS

А этот урок — вовсе и не урок, а сплошной креативчик!!! Бери в руку мышь, начнем создавать!!!

-Что будем создавать???

СТИЛЬ

Отныне, за красоту и всякие плюшечки на нашем сайте будет отвечать отдельный документ под названием style.css

-Зачем???

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

-Так себе сравнение.

-Начнем с того, что создадим HTML-документ «привет.html» с вот таким кодом:

<h1>Приветик!!!</h1>
<p>Салют!!!</p>
<li>Здравствуй!!!</li>

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

Приветик!!!

Салют!!!

• Здравствуй!!!

а теперь в голове сайта напишем ссылку на документ style.css, в котором будет храниться информация о стиле заголовков <h1>, абзацев <p> и списков <li>

Делается это с помощью добавления в HTML вот такой строчки:

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

Теперь, также как и для создания HTML, создаем текстовый документ и переименовываем его в style.css Должен получиться документ с изображением шестеренки. Открываем его и пишем туда вот это код:

h1 {color: blue}
p {color: red}
li {color: green}

Теперь у тебя два документа: «привет.html» и «style.css», важно чтобы оба документа находились в одной папке. Если файл стиля лежит в другой, то в ссылке надо будет указать путь к файлу, но об этом позже.

Давай откроем «привет.html». Если все сделано правильно, то все ПРИВЕТЫ окрасятся в разные цвета. УРАААААА!!!!