HTML, Excel, Word, SEOОсновы CSS ⇒ Что такое CSS?

Основы CSS

Учебник CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Более полно и подробно каскадные стили CSS3 рассмотрены в разделе "Основы CSS3".


 
Сабмит сайта в каталоги

Что такое CSS?


Очень многие начинающие вебмастера не могут разобраться, что такое CSS и с чем его "едят". В этом разделе своего сайта я постараюсь максимально подробно "разжевать" и на примерах показать, как правильно работать с листами стилей. Сразу сделаю существенную оговорку - будут рассматриваться внешние листы стилей (впрочем, внешний лист стилей от внутреннего не сильно отличается).


CSS (Cascading Style Sheets - каскадные таблицы стилей) - мощное и удобное средство форматирования сайта. Бегло таблицы стилей уже рассматривались в ветке "HTML" - урок 23 (внутренний лист стилей) и урок 24 (внешний лист стилей).


Основная цель каскадных таблиц стилей - разделить содержимое веб-страницы (написанной, например, на HTML) и форматирование (представление) документа (CSS). Т.е., в коде html-страницы находится информация, которую видит пользователь, загрузив эту страницу в свой браузер. А вот то, в каком виде он видит эту информацию на своем экране - за это "отвечает" файл каскадной таблицы стилей.

Скорее всего, вы уже знаете, что файл стандартной html-страницы имеет название, скажем, index.html
Где:

index - имя файла;
html - расширение файла.


Именно расширение файла "говорит" браузеру ЧТО это за файл и как он с ним должен работать.


Файл каскадного листа стилей, обычно, имеет название style.css


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


Как правило, один файл листа стилей "обслуживает" весь сайт. Располагается он в корневом каталоге сайта (там, где и главная страница сайта). Для подключения листа стилей в коде html-страницы должен быть прописан МЕТА-тег следующего содержания:

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

Имя файла каскадного листа стилей и путь к нему указывается в атрибуте href. Будьте внимательны: следите за правильным путем к листу стилей (на разных страницах он может быть разным)! Можно использовать абсолютный путь:

---
<link rel="stylesheet" href="http://mysite.ru/style.css" type="text/css">
---

Но, имейте ввиду, что при такой записи файл не будет работать без подключения к Интернету (в локальном режиме).


Собственно вся "прелесть" использования внешнего листа стилей заключается в том, что вся информация о форматировании ВСЕГО сайта находится в одном файле! Нетрудно догадаться, что, поменяв пару-тройку строчек в файле style.css, ВЕСЬ сайт мгновенно преображается, реагируя на изменения. Понимаете теперь, какой это мощный и гибкий инструмент "причесывания" вашего сайта?!



В начало страницы



В начало страницы