Основы 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 во многом аналогичен синтаксису HTML, но имеет ряд отличий.

В общем виде обычный формат определения стиля CSS записывается следующим образом:


<CSS selector> {
	<style attribute 1>: <value 1>;
	<style attribute 2>: <value 2>;
	...
	<style attribute n>: <value n>
}

ПРИМЕР:

P {
	font-family: "Arial";
	font-size: 12px;
	color: Black
}

Основные правила создания стиля CSS:

Начинающий веб-мастер должен понять, что атрибуты html-тегов и атрибуты стилей CSS - это не одно и то же.

В примере мы произвели неявную привязку стиля - когда браузер прочитает наш стиль, он автоматически его применит ко всем абзацам html-страниц, которые оформлены тегом <P>. Текст, заключенный в тег <P>, будет отображен шрифтом Arial, черного цвета, размером 12 пикселей.

Прием, который мы рассмотрели, назыается стилем переопределения тега, т.к. в качестве селектора CSS указан один из html-тегов. Обратите внимание, что в CSS-коде селектор P не заключается в скобки (< >)! Селектор не чувствителен к регистру.

Комментарии CSS

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

Аналогичная возможность существует и в CSS.

Для того, чтобы закомментировать отдельную строку CSS-кода, в самом ее начале помещают символ наклонной косой черты или слэша ( / )

ПРИМЕР:

/ Simple reset 
.tbl {
	margin: 0;
	padding: 0;
}

Для того, чтобы создать многострочный комментарий, используют комбинацию символов /* и */, между которыми помещается комментарий:

ПРИМЕР:

/*
 Color, typography and basic layout
 (Shared for all devices and clients)
 Colors:
 - #F0E1C8 -> light cream (background)
 - #000000 -> Dark brown (body text, rules)
 - #42628F -> Dark blue (link text)
 - #7b96bc -> Medium-light blue (navigation and footer background)
 */
body {
	background: #F0E1C8;
	color: #000000;
	font: Georgia
}
a, a:visited {
	color: Blue;
}

TOP ↑