В этой статье мы поговорим о языке стилизации css 3.
Само написание кода довольно таки отличается от HTML 5 и сам по себе по сложнее. Он отвечает за расположение любого элемента на сайте и как он выглядет.
Сам код состоит из селектора-это идентификационный элемент который находиться в написании кода html, это может быть почти любой тег или название класса или id который вы можете присвоить к тегу. Свойство-это команда на определенную манипуляцию, например *background*. Т.е. мы говорим браузеру что будем работать с цветом. И заключитеьное это значение свойства, например *background: red;*. Слово red дает команду окрасить в красный цвет. Спросите зачем все это, сейчас попробую обьяснить, допустим вы написали на html страницу сайта полную тегами такими как div, span,header, footer и т.д. все теги перечислять не стоит думаю вы уже с ними знакомы.
Теперь дилема, у вас в html штук 20 тегов div, 10 тегов span и много прочего и у каждого элемента должна быть своя стилизация. Все просто, каждому элементу можно присвоить класс или id и код ваш примерно будет выглядеть так <div class="название"></div> или <span id="название"></span>. Слово *название* и является селектором, оно пишется произвольно на ваше усмотрение НО желательно чтобы соответствовали тематике. Допустим у вы создаете блок меню, соответственно вы даете имя селектору *menu* или блок где будут писаться новости то имя даем *news*. Чтобы не заморачиваться, определяете тематику определенного блока и с помощью переводчика получаем слово на латинице и присваиваете ему имя. Название пишите латинскими символами не потому что кирилицей нельзя, просто так как бы принято и другие верстальщики глянув на ваш код могут долго смеяться. Нельзя допускать чтобы имена классов или id повторялись они должны быть индивидуальны. Можно так сделать <div class="edition"></div> <div id="edition"></div> , т.е. если class и id присваивают одно и тоже имя то такое допускается .
Когда начинаете писать стили для определенного блока вы браузеру обьявляете сначало имя селектора, если это class то пишете .edition, если это id то перед словом ставите не точку как в class а уже решетку и должно у вас выглядеть так #edition. Поэтому если вы используете одно имя для class и id в css ваши стили не перепутаются и не применяться к другому блоку. Если вы прописываете стили для тегов то пишете просто его название без дополнительных символов. Например
body {
background: red;
}
Обратите внимание, фигурные скобки поставленны не по ошибке, после обьявления селектора открываются фигурные скобки, между ними находиться свойство и его значение после скобки закрываются и со следущей строки начинаете стилизовать следущий блок находящийся в вашем html коде. После написания свойства не забываем ставить двоеточие, тем самым обьявив что будем записывать значение этому свойству. А после значения ставим ; точку с запятой давая знать что свойство со значением закончены. Примерная стилизация одного блока показанна на картинке выше, это просто вырезан один кусочек стилей из когдато сверстаного мной макета. Теперь мы пока поверхостно разобрались как создаются стили, осталось дело за малым, привязать наши стили к html файлу чтобы они работали. Для начала создайте папку и поместите ваш пустой каркас сохраненный в html формате
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Вот он, затем также открываете текстовый редактор и создаете новый файл формата css, к примеру style.css. В этом файле уже будет храниться стилизация вашего сайта. Два файла формата html и css в одной папке, потом в этой же папке можете создать еще одну папку с названием images там будут храниться ваши медиа материалы: картинки, видео или gif
Вернемся к привязки стилей, в вверху вашего каркаса html перед закрывающим тегом </head> пишете ссылку на ваши стили так
<link rel="stylesheet" type="text/css" href="style.css">
у вас должно будет выглядеть так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
В атрибуте href="" а именно в кавычках пишеться адрес ваших стилей, если вы все положили в одну папку как я писал выше то можно прсто написать имя и формат файла, браузер его найдет. Ну а если стили находятся в другом месте то придется прописывать полный адрес к вашему файлу например href="C:\Users\олег\Desktop\maket\style.css" так что лучше держать в одной папке.
Вот мы теперь подключили наши стили, теперь бы взять проверить работают они или нет. Делаем следущее, сохраняем наш html файл с прописанной ссылкой на стили а в стилях пишем
body{
background: red;
}
и сохраняем ваши стили. Затем запускаем index.html через браузер, окно браузера будет как и прежде пустым но не как раньше белым а примет окрас красного цвета. Что свидетельствует о том что ваши стили привязались к html файлу и фунционируют. Теперь мы можем в html коде разместить элементы а в css коде стилизовать по своему усмотрению, в следущей статье мы уже будем создавать простенький блок, примерно такой
В котором будет находиться заголовок, картинка, текст и ссылка.