Основы CSS
Всем доброго времени суток, с Вами на связи Денис Булыга, сегодня мы с Вами начнем изучать CSS и в этом вводном уроке я расскажу Вам что такое CSS, для чего он нам нужен при создании сайтов, его синтаксис, ну и разберем парочку примеров.
CSS это каскадные таблицы стилей, которые задают форматирование нашему с Вами HTML коду, например какого цвета должен быть у нас текст, какие отступы, шрифт, размер шрифта, расположение элементов на странице должен он иметь, и многое много другое - все это задается при помощи языка CSS
Синтаксис языка CSS довольно прост. Если взять HTML код из нашего урока и изменить в файле index.html наш код:
<html>
<head>
<title>Первая HTML страница</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Это моя первая HTML страница</h1>
</body>
</html>
Мы получим следующий результат:
Наш заголовок <h1> изменил свой цвет с черного на синий, и все благодаря CSS. Разберем, что мы здесь написали.
Мы указали внутри тега <style></style> то, что у всех наших заголовков h1, которые присутствуют на нашей странице, должен быть синий цвет текста. При этом задали свойство color: и его значение blue;
Именно таков синтаксис CSS - мы указываем какое-либо нужно нам свойство, в данном примере это цвет текста, и через двоеточие указываем его значение. При этом мы может указывать множество свойств и значений для нашего заголовка.
Однако я бы Вам советовал использовать отдельный файл стилей, в котором полностью будет отделен CSS код от HTML кода, т.к это является очень хорошим тоном при написании CSS стилей. Для этого нам необходимо создать отдельную папку под названием css, в которой мы создаем отдельный файл styles.css и для подключения этого файла нам необходимо написать следующий код:
<html>
<head>
<title>Первая HTML страница</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<h1>Это моя первая HTML страница</h1>
</body>
</html>
В самом же файле styles.css мы пишем наш код который был написан между тегов <style></style>
h1 {
color: blue;
}
Вот мы и научились с Вами создавать отдельный файл стилей а также подключили его к нашей HTML странице
В следующий раз мы начнем изучать селекторы CSS. Всего Доброго!
