HTML, Excel, Word, SEOОсновы CSS3 ⇒ Таблицы 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 хранятся в отдельном файле, который имеет расширение .css (например, style.css).

ПРИМЕР 1:

body {
	background: #FFFFFF;
	color: #000000;
	font: serif
}
a {
	color: Blue
}
p {
  margin: 0.95em 0.15em;
  font: serif;
  text-indent: 0.5em;
  text-align: justify
}

Для того, чтобы "привязать" таблицу CSS к конкретной html-странице, используют метатег LINK, который встраивается в секцию HEAD html-страницы:

ПРИМЕР 2:

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

Адрес файла таблицы стилей style.css прописан в атрибуте HREF. Веб-мастер должен следить, чтобы путь к файлу таблицы стилей был прописан правильно для каждой конкретной html-страницы. Чтобы не было путаницы, рекомендуется указывать абсолютный адрес, например href="http://my-site.com/style.css". Остальные атрибуты тега LINK не изменяются.

При необходимости, можно к html-странице, привязывать несколько таблиц CSS:

ПРИМЕР 3:

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

Главное преимущество внешних таблиц стилей состоит в том, что они привязываются ко всем html-страницам веб-сайта. Таким образом, веб-мастер, изменяя файл таблицы CSS, сразу меняет вид всех страниц сайта.

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

Внутренняя таблица стилей

Внутренние таблицы CSS встраиваются непосредственно в html-код веб-страницы. Селекторы таблицы встраиваются в парный тег STYLE, который помещается в секцию HEAD.

ПРИМЕР 4:

<HEAD>
...
<STYLE>
body {
	background: #FFFFFF;
	color: #000000;
	font: serif
}
a {
	color: Blue
}
p {
  margin: 0.95em 0.15em;
  font: serif;
  text-indent: 0.5em;
  text-align: justify
}
</STYLE>
...
</HEAD>

Главное преимущество внутренних таблиц стилей состоит в том, что они встроены в тело html-страницы, поэтому, никогда не "потеряются".

Недостатки внутренних таблиц CSS:

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

ПРИМЕР 5:

<HEAD>
...
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style-2.css" type="text/css">
<link rel="stylesheet" href="style-3.css" type="text/css">
<STYLE>
body {
	background: #FFFFFF;
	color: #000000;
	font: serif
}
a {
	color: Blue
}
p {
  margin: 0.95em 0.15em;
  font: serif;
  text-indent: 0.5em;
  text-align: justify
}
</STYLE>
...
</HEAD>


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



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