Лекция 3. Каскадные таблицы стилей

3.1. Синтаксис CSS

Определение. Таблицы стилей (или каскадные таблицы стилей, CSS) – это описание правил, задающих параметры представления отдельных элементов на языке HTML

CSS появились одновременно с HTML 4.0 (Dynamic HTML). Сам термин «каскадные таблицы стилей» был предложен в 1994 году. Все объявления CSS называются селекторами, записываются в фигурных скобках.

Примеры использования синтаксиса.

1. Для того чтобы все заголовки первого уровня (h1) были зеленого цвета с размером шрифта 15 пикселей, надо записать

h1 {color: green; size: 15px;}

Свойства разделяются точкой с запятой

2. Одно свойство можно присвоить нескольким тэгам

h1, h2, h3 {color: green; size: 15px;}

3. Свойство наследования. Если по h3 текст должен быть зеленым, то и между em он тоже будет желтым.

<h3> Часть 4.<em>Очень большая</em> и хорошая</h3>

4. Контекстные селекторы. Если необходимо, чтобы текст между тегами em, которые между h3, был зеленым, а в других случаях каким-то другим, то надо задать

h3 em {color:green}

5. Использование классов.

Определили h1:

h1 {color: green; size: 15px;}

Чтобы некоторые заголовки были красными, необходимо задать

h2.red {color:red}

Использование:

<h2>Это красный заголовок</h2>

Замечание. В таблице стилей можно указать просто без указания родительского тэга:

.red {color:red}

6. Можно использовать маску * для задания всех селекторов

7. Еще один символ маски >. Задает свойства для определенных подэлементов

         ol>li {color:green}

8. Для определения элемента в DHTML используется id. Поэтому можно задавать свойства через идентификаторы

#cont {color:yellow}

И когда встретится идентификатор cont, то текст этого элемента будет желтым.

9. Для создания прямоугольной области используется тег <div>.

10. Для создания строчной области используется тег <span>.

11. Использование псевдоклассов. Динамические псевдо-классы: :hover, :active, и :focus.

Пример использования псевдо-классов. Указав следующие описание стилей:

a:hover { background: yellow }

получим, что при наведении курсора на ссылку, область под ней станет желтой.

3.2. Размещение каскадных таблиц

3.2.1. Cвойства можно определять непосредственно с тегом. Например, вставка следующего тега сделает текст красным на синем фоне

<span style=»color:red; background:blue; font: bold 1.8em Arial «>красный на синем</span>

3.2.2. Таблицу можно разместить между тегами <style> и </style>. Например,

<head>

<style>

a { color: #33ADDB;

         background-color: inherit;}

a:hover {    color: #575757;

         background-color: inherit;}

h1 {   font: bold 1.8em Arial, Sans-Serif;

         letter-spacing: -1px;

         margin: 0;

         padding: 0;}

h1 a { text-decoration: none;}

</style>

</head>

И теперь гиперссылки и заголовки первого уровня будет определяться в соответствии с указанными правилами.

3.2.3. Таблицу стилей можно разместить в отдельном файле. А подключение затем выполняется так:

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

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru