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

В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).

Рисунок 1

Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web

1. Определение цветов. Уроки CSS

При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors , расположенной в папке CD .

Таблица безопасных цветов для разработки дизайна сайта

Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.

Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

Таблицу безопасных цветов можно просмотреть в папке CD / colors .

2. Определение CSS

Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

• первый - средствами таблиц стилей CSS (более прогрессивный и правильный метод),
• второй - средствами атрибутов у тегов HTML .

Начнем сразу с более прогрессивного метода.

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

Назначение: позволяет автоматически изменить стиль HTML элемента на всех страницах сайта. Например, мы используем на десяти web-страницах заголовок H1, который должен быть зеленого цвета. При использовании таблиц стилей нам придется только один раз указать зеленый цвет и он применится сразу на десяти страницах.

Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

При использовании же таблицы стилей нам придется только один раз это сделать, изменив зеленый цвет заголовка на красный в самой таблице стилей, и он автоматически изменится на всех десяти web-страницах.

Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

Синтаксис CSS -элемента

селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}

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

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

Стилевых свойств со значениями может быть сколько угодно много, их последовательность значения не имеет.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Например :

h1 {font-family:Arial; font-size:14pt}

или тот же самое можно записать так:

font-family:Arial;

font-size:14pt

В этом примере:

• h1 - селектор, в данном случае HTML-элемент,
• font-family и font-size - стилевые свойства,
• Arial - значение свойства font-family,
• 14pt - значение свойства font-size.

Способы включения таблиц стилей в HTML-документ

1. Внешняя таблица стилей (связанный стиль).
2. Внедренная таблица стилей (глобальный стиль).
3. Внутренние стили.

3. Внешняя таблица стилей CSS (связанный стиль)

Определяет стиль всего сайта.

Является текстовым файлом с расширением css.

В данном примере таблица стилей написана в текстовом файле style.css.

Практическое задание 1

1. Откройте чистый документ в Notepad++ и сохраните его в папке public_html под именем style . css . Обратите внимание, чтобы в поле Тип файла было установлено All types (рисунок 2).

Рисунок 2

2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main . html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):

Рисунок 3

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

• h1 - селектор, т.е. элемент html, к которому применяется стиль;
• text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);
• color:#0000FF; - стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
• font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;
• стилевые свойства со значениями разделены между собой точкой с запятой;
• и так далее, все согласно синтаксису.

Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main . html и style . css . Для этого откройте файл main.html и между тегами < head > и head > вставьте конструкцию , как на рисунке 4.