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

Основы CSS

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

Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры

Популярный клуб Вулкан Россия приглашает поучаствовать в новом турнире  

Что такое 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, ВЕСЬ сайт мгновенно преображается, реагируя на изменения. Понимаете теперь, какой это мощный и гибкий инструмент "причесывания" вашего сайта?!



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



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