Статья 1. Что такое каскадные таблицы стилей css? Как создать каскадную таблицу стилей css? Как подключить каскадную таблицу стилей css?

css (англ. Cascading Style Sheets — каскадные таблицы стилей) - язык описания внешнего вида документа, написанного с использованием языка разметки.
Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.

Впервые каскадные таблицы стилей стали использовать в 90-х годах прошлого столетия. Но поначалу они не были столь популярны как сейчас, потому, что разные браузеры по разному воспринимали и выводили html странички, в которых использовались css.

Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.

Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.

Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.

2. Как создать каскадную таблицу стилей css?

В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.

Итак, делаем так:

1. Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей.
Пусть, моя папка будет называться "css"

2. Создаем простую html страничку (index.html). Как это делается можете прочитать здесь.

3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.

В результате у Вас должно получиться вот что:

Все, файл который будет содержать в себе стили css готов.

Теперь давайт подключим созданную стаблицу стилей к файлу index.html.

3. Как подключить каскадную таблицу стилей css?

Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге <head> прописать тег:

<link href="style.css" rel="stylesheet" type="text/css">

Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.

Например, если наш файл index.html будет иметь такой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изучаем каскадные таблицы стилей css</title>
<meta name="description" content="Каскадные таблицы стилей">
<meta name="keywords" content="стили, таблицы, css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<h2>Страничка для изучения каскадных таблиц стилей css.</h2>
</body>
</html>

Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".

Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:

Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.

Теперь давайте проверим работу таблиц стилей css.

Итак, начнем с самого простого, и зададим тегу <body> новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.

Для того, что бы установить фоновое изображение, его нужно разметить в папке с нашими файлами.

Скачайте архив bg.zip, разархивируйте его и поместите файл bg.jpg в папку css.
У Вас должно быть так:

Теперь, что бы установить стиль для тега <body> html документа, в таблице стилей нужно записать следующее:

body {
background-image:url(bg.jpg);
background-color:#f6f6f6;
margin-top:0px;
margin-bottom:0px;
font-family:Verdana;
font-size:12px;
color:#000066;
}

Здесь:

body {...} - задание стилей css для тега <body>

background-image:url(bg.jpg); - фоновое изображение, где в параметре url(...jpg) указывается полный путь к изображению, которое будет фоновым

background-color:#f6f6f6; - фон тела документа (тега <body>). Этот атрибут включается в тех случаях, если в браузере посетителя отключены изображения

margin-top:0px; - расстояние от тела документа до верхней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 px.

margin-bottom:0px; - расстояние от тела документа до нижней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 пикселей

font-family:Verdana; - установка шрифта для документа по умолчанию

font-size:12px; - размер шрифта документа 12 пикселей

color:#000000; - цвет текста. В этом случае таблицы стилей css задают цвет шрифта - темно синий.

После того, как Вы сохраните файл style.css, в браузере Вы увидите следующее:

На этом мы закончим данную статью. Здесь я показал как подключаются таблицы стилей css к html файлам и мы уже установили стили для некоторых объектов.

Встретимся в следующей статье.

Если же Вы хотите боле подробно и быстро изучить каскадные таблицы css, html, и вообще научиться создавать сайты с помощью видео уроков, посетите мой сайт "Твой сайт, создание и раскрутка".

А если Вы планируете научиться создавать профессиональные интернет магазины на движке Magento, то это легче всего сделать с помощью моего авторского видео курса "Magento. Профессиональный интернет магазин за один день".