IV Таблицы стилей CSS

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

Каскадные таблицы стилей (Cascading Style Sheets, CSS) или просто таблицы стилей — это набор правил, описывающих форматирование текста и других элементов Web-страниц и хранящихся отдельно от него. Одно такое правило, описывающее форматирование какого-либо фрагмента или целой группы фрагментов страницы, называется стилем.

Таблицы стилей часто хранятся в отдельных файлах с расширением css (внешние таблицы стилей), но могут быть сохранены и в файле самой Web-страницы (внутренние таблицы стилей). Очевидно, что таблицы стилей, используемые всеми страницами сайта, лучше всего хранить в отдельном файле, т. е. делать внешними. Если же какие-то стили используются только в одной конкретной странице, их стоит сохранить во внутренней таблице стилей, прямо в файле использующей их Web-страницы.

Для создания новой таблицы стилей необходимо вызвать на рабочую область панели с дополнительными функциями.

1. 
   Раскрываем панель дополнительных возможностей справа;
   
2. 
   Раскрываем панель CSS, щелчком по кнопке с изображением треугольника;
   
3. 
   Для создания нового стиля нажимаем на кнопку Новое CSS Правило (New CSS Style)
   

Откроется диалоговое окно Новое CSS правило.

Находящаяся в нем группа переключателей Тип селектора задает тип вновь создаваемого стиля:

• 
  переключатель Класс позволяет создать новый стилевой класс. Если мы его включим, то в комбинированном списке Имя сможем ввести имя создаваемого стилевого класса;
  
• 
  переключатель Тэг позволяет создать стиль переопределения тега. Выбрав этот переключатель, в раскрывающемся списке Тэг мы сможем отыскать нужный тег;
  
• 
  переключатель Дополнительно позволяет создать более сложные стили.
  

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

• 
  если выбран верхний переключатель, стиль будет сохранен во внешней таблице стилей. Имя файла этой таблицы стилей выбирается в расположенном правее раскрывающемся списке. Если же внешняя таблица стилей пока не существует, следует выбрать пункт (Новый файл списка стилей), и Dreamweaver сам ее создаст. В последнем случае после нажатия кнопки ОК на экране появится диалоговое окно сохранения файла, где мы сможем ввести имя файла создаваемой таблицы стилей;
  
• 
  если выбран переключатель Только в этом документе, стиль будет помещен во внутреннюю таблицу стилей этой Web-страницы.
  

4. 
   В открывшемся диалоговом окне Новое CSS правило вносим название стиля. Пусть это будет ".text". Обратите внимание, что название обязательно должно начинаться с точки (.) и пишется латинскими буквами. Выберите Тип селектора: Класс; активируйте Выбор в: (Новый файл списка стилей). Нажмите ОК;
   
5. 
   В открывшемся окне, сначала в разделе Тип определяем параметры текста: используемый шрифт, его размер в пикселях или типографских пунктах, цвет и др.
   

6. 
   После этого переходим в раздел Блок. Здесь из списка Выравнивание текста выбираем значение отбивки текста - по левому краю, по правому, по центру или форматированный. В заключение щелкаем по кнопке "ОК".
   
7. 
   Название стиля появилось в списке. Теперь ставим курсор в тот абзац, к которому мы хотим применить данный стиль, и щелкаем по названию стиля. Текст стал таким, каким мы хотели его видеть. Или в контекстном меню (ПКМ) выберите CSS стили и название.
   
8. 
   Аналогично создайте другие стили(например, создайте стиль для заголовков)