Основы CSS. Базовый синтаксис.
Этот урок будет посвящен основам CSS, а именно базовому синтаксису. Изучая HTML вы должны были заметить, что почти для каждого тега есть свои атрибуты и для записи значений этих атрибутов используются свои правила написания (синтаксис). Так вот в CSS с давнего времени существуют свои правила написания и синтаксис отличается от HTML, но в нём нет ничего сложного. Общий (базовый) синтаксис такой:
Селектор { свойство1: значение; свойство2: значение; ... свойство(n): значение;}
Селекторами могут быть идентификаторы, классы и теги. С тегами вы уже знакомы, а вот с классами и идентификаторами вам ещё предстоит познакомиться в следующих уроках. Что удобно в синтаксисе CSS, это то что если вы перенесете какое-нибудь свойство со значением на другую строчку это не повлияет на отображение HTML документа в браузере. Поэтому вы можете выбрать для себя наиболее удобную форму записи не беспокоясь за вывод того или иного элемента в окне браузера. В качестве небольшого примера хочу вам показать две основные формы записи.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Заголовки</title>
<style type="text/css">
h1 { color: #333366; font-weight: normal; }
p {
color: red;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Этот текст красного цвета с нижней линией черного цвета,
толщиной один пиксель</p>
</body>
</html>
В результате вы должны получить следующее:
Давайте рассмотрим данный пример подробнее. В качестве селекторов, как вы уже наверное догадались, здесь выступают теги h1 и p. В первом варианте значения свойств h1 я записал в одну строчку, а во втором разбил значения тега p на две строчки. Плюс первого варианта в том что код CSS занимает меньше места, а значит сайт будет грузится быстрее, а плюс второго варианта в том что править такой код будет намного легче, чем в первом варианте. В какой форме записывать код в таблицу стилей CSS решать вам.
Комментарии в CSS
А что делать если код очень большой, и разработчик не может найти нужный ему селектор отвечающий за определенный элемент на страничке сайта. Для этого в CSS, да впрочем как и во многих языках придумали комментарии.
Комментарии — это как заметки (памятка). Поставить комментарий можно, где угодно. Он не отображается на странице браузера. Но стоит помнить, что комментарии нужны только вам и разработчикам сайтов, а также они увеличивают размер файла, поэтому перед тем как выложить файл на хостинг их обычно убирают. Форма добавления комментария следующая:/* … */. Ну и в качестве примера воспользуемся предыдущим примером:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Заголовки</title>
<style type="text/css">
/* Стили текста */
h1 { color: #333366; font-weight: normal; }
p {
color: red; /* Цвет текста */
border-bottom: 1px solid black; /* Значения нижней линии
текста */
}
</style>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Этот текст красного цвета с нижней линией черного цвета,
толщиной один пиксель</p>
</body>
</html>
Вот и подошёл к концу этот урок. Надеюсь он вам понравился. В следующем уроке вы познакомитесь со значениями стилевых свойств.