Основы каскадных таблиц стилей компьютерная сущность.
Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Таким образом, каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики. Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками, и по сей день.
Что значит слово "каскадный"? Термин "каскадный" означает, что в одной странице HTML могут использоваться разные стили. Браузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей. Это означает, что вы можете использовать все три типа стилей, и браузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц - с помощью встроенных стилей. Другой аспект каскадирования - наследование (inheritance ). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге <р> , то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.
Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.
Существует три метода для применения таблицы стилей к документу HTML:
- селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
- пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
- между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
- свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
- пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
- так же код не чувствителен к регистру символов.
- body — это селектор, который представляет из себя имя тега ;
- background — свойство стиля, с помощью которого задаются параметры фона;
- #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.
- в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
- привязка к html элементу осуществляется через атрибут id , в качестве значения которого устанавливают имя стиля без знака решетки;
- значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.
- первый - средствами таблиц стилей CSS (более прогрессивный и правильный метод),
- второй - средствами атрибутов у тегов HTML .
- h1 - селектор, в данном случае HTML-элемент,
- font-family и font-size - стилевые свойства,
- Arial - значение свойства font-family,
- 14pt - значение свойства font-size.
- Внешняя таблица стилей (связанный стиль).
- Внедренная таблица стилей (глобальный стиль).
- Внутренние стили.
- h1 - селектор, т.е. элемент html, к которому применяется стиль;
- text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);
- color:#0000FF; - стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
- font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;
- стилевые свойства со значениями разделены между собой точкой с запятой;
- и так далее, все согласно синтаксису.
- Используя справочник Sprav_CSS.doc, оформите стилями заголовок < h 3> в файле main.html. Свойства стилей на выбор.
- Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.
- Для списка «Площади домов» в качестве маркера примените изображение spisok_1.gif из папки html_css_2 . Остальные параметры по желанию.
- В качестве фона web-страницы примените через стили изображение fon9.jpg из папки html_css_2 .
- С использованием стилей сделайте шрифт абзацев полужирным.
- для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег
;
- для списка «Категории проектов» используйте нумерованный список
- ;
- для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список
4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif ). Результат должен совпасть с рисунком 19.
Рисунок 19
5. Для этого меню сделаем отдельную таблицу стилей под именем style _ menu . css . Установите связку между файлом menu . html и таблицей стилей style _ menu . css , вставив запись между тегами
и в файле menu . html .6. Создайте чистый документ и сохраните его под именем style _ menu .css в своей папке.
7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue . Т.е. код будет выглядеть следующим образом (рисунок 20):
Рисунок 20
8. В файле style _ menu . css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):
Рисунок 21
9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown . Т.е. код будет выглядеть следующим образом (рисунок 22):
Рисунок 22
10. В файле style _ menu . css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):
Рисунок 23
11. И добавим еще цвет фона файлу menu.html (рисунок 24)
Рисунок 24
12. В результате получим следующую web-страницу (рисунок 25)
Рисунок 25
В результате выполнения этого урока CSS, у Вас должны быть созданы следующие файлы:
- style
.
css
- style _ menu . css
- ploshady
.
html
- menu
.
html
Применение Таблицы Стилей к документу
Встраивание Таблиц Стилей в документ
Задание стиля для отдельного фрагмента документа
Импорт Таблицы Стилей
Указание нескольких свойств одновременно
Группирование селекторов
Комментирование Таблицы Стилей
Свойства стилей
Свойства background
Обрамление элементов
Свойства списков
Свойства текста
Группирование свойств для упрощения определения стиля
Наследование свойств
Применение контекстных селекторов
Почему Таблицы Стилей называются каскаднымиТаблицы стилей предусмотрены рекомендациями W3C и являются стандартным инструментом форматирования Web - страниц, использующим подходы, характерные для настольных издательских систем. Программа Microsoft Internet Explorer 3.0 стала первым браузером, поддерживающим таблицы стилей. Браузер Netscape Navigator поддерживает таблицы стилей, начиная с версии 4.0В2 (Beta 2), доступной с февраля 1997 года.
Подробные сведения о рекомендациях W3C можно получить по адресу: http://www.w3.org/pub/WWW/TR/WD-cssl.html . В стандарте W3C используется термин "каскадные таблицы стилей уровня 1" ("cascading style sheets level 1, CSSI").
Для начала необходимо пояснить, что имеется в виду под названием “таблиц стилей”. Большинство современных текстовых редакторов позволяют пользователю определять стиль, который будет использоваться для форматирования документа. В частности, можно выбрать стиль абзаца с одинарным межстрочным интервалом, шрифтом Courier и левым полем в один дюйм. Этот стиль форматирования может быть в дальнейшем применен к любому числу абзацев этого и других документов. Таблицы стилей НТ
ML действуют точно таким же образом. Ниже приведен краткий список основных функций:Изменение расстояний между строками, словами и отдельными символами.
Установка левого, правого, верхнего и нижнего полей элемента (блока текста контейнера HTML).
Установка отступа элемента.
Изменение размера, стиля и других атрибутов шрифта элемента.
Установка рамки вокруг элемента.
Включение фонового изображения и фонового цвета в элемент.
Большим преимуществом таблиц стилей HTML является возможность отделить операцию форматирования от содержания документа. Сначала определяется, как должен выглядеть текст в том или ином месте страницы, а затем вводите сам текст. Если вы позднее решите, например, заменить цвет шрифта заголовков на синий, для этого будет достаточно поменять только стиль этих заголовков. Делать изменения в тексте нет необходимости.
Существует четыре метода применения таблицы стилей к документу:
-
border - используются для определения рамки, расположенной слева, справа, сверху и снизу от элемента. Можно устанавливать ширину, цвет и стиль рамки.
-
margin - используются для определения полей, расположенных слева, справа, сверху и снизу от элемента. Можно также устанавливать ширину полей.
-
padding - применяются для того, чтобы указать свободное пространство между рамкой и содержимым элемента.
-
контейнера UL
.
Свойства дают вам полный контроль того, как программа просмотра выводит текст. С их помощью можно управлять цветом, размером, шрифтом, межстрочным интервалом и т, д. Ниже будут подробно описаны все свойства текста.
Многие из описанных выше свойств могут группироваться друг с другом. Так, вместо правила
H1 (font-weight: bold; font-style: normal; font-size: 12pt; font-family: serif)
можно записать более краткую формулировку:
H1 (font: bold normal 12pt serif}
Таблицы стилей HTML позволяют группировать свойства border, background, font, list, margin и padding. Рассмотрим каждую из групп в отдельности.
Группа свойств border
Группировать свойства border можно пятью различными способами. Можно определить свойства для отдельной стороны рамки, используя
border-top, border-right, border-bottom И border-left, либо определить всю рамку сразу при помощи border.С каждым из этих свойств можно указать ширину, стиль и цвет рамки, например:
b order-top: thin dotted black
Группа свойств background
В группе свойств background можно указать значения для color, image, repeat, attachment и position, например:
background: white URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left
Группа свойств font
Группе font можно дать значения weight, style, size и family, например:
font: bold normal 12pt times, serif
Группа свойств list
Свойства группируются при помощи свойства list-style. Возможно указание изображения для маркера, типа и позиции маркера, например:
list-style: square URL(http://www.myserver.com/images/marker.gif) inside
Группа свойств margin
Группе margin можно определить ширину для каждого из полей top, right, bottom и left, например:
margin: .5in 1in .5in 1in
Если будет указано только одно значение, программа просмотра сделает ширину других полей такой же. Если не указать одно или два значения, поля с неуказанным значением будут такой же ширины, как противоположные поля. Например, если опустить последнее значение (left), ширина левых полей будет равна ширине правых полей, т. е. 1 дюйму.
Группа свойств padding
В Группе padding можно указать значения для top, right, bottom и left, например:
padding: .25in .25in .25in .25in
Если будет указано только одно значение, программа просмотра назначит отсутствующим значениям такую же величину. Если не указать одно или два значения, свободные пространства с неуказанными значениями будут такой же ширины, как и им противоположные. Например, если опустить последнее значение (left), свободное пространство между левой стороной рамки и содержимым элемента будет таким же, как и пространство с правой стороны.
В HTML подчиненные тэги наследуют некоторые свойства родительских тэгов. Например, все тэги контейнера
(< P > и-
) будут обладать некоторыми
свойствами тэга
. Точно так
же тэг
-
наследует свойства
тэга
-
. Рассмотрим следующий
код:
- : один для случая, когда он подчинен тэгу
-
только в том случае, если этот тэг является
подчиненным тэгу
-
:
-
можно определить другой стиль, действительный
только в случае подчиненности тэгу
-
:
UL LI {list-style-type: square}
Необходимо заметить, что список селекторов не разделен запятыми. В противном случае всем тэгам списка будет приписан один и тот же стиль.
В рекомендациях W3C таблицы стилей называются "каскадными таблицами стилей" потому, что для верстки Web - страницы можно применять не одну, а сразу несколько таблиц. При этом программа просмотра сама определяет последовательность использования таблиц и разрешает конфликты между ними по принципу каскадирования. Например, таблица стилей для страницы может быть определена не только ее автором, но и читателем, и тогда правила каскадирования решают, какая из таблиц стилей будет иметь силу.
Kак это работает? Каждому правилу браузер приписывает весовой коэффициент. При интерпретации каждого тэга программа просматривает все правила этого тэга и сортирует их по величине весового коэффициента. Выигрывает самое "весомое" правило.
Существуют следующие общие принципы разрешения конфликтов между таблицами стилей:
Старшинство типов таблиц стилей в документе (по убыванию): текущее задание стиля (inline), встраивание (embedding), связывание (linking).
Также можно изменить весовой коэффициент правила при помощи служебного слова important. В следующем примере значение red свойства
OL LI (list-style-type: decimal}
Для того же тэга
-
можно определить другой стиль, действительный
только в случае подчиненности тэгу
Hello. This is a paragraph of text. This is emphasized
Таблица стилей этого документа устанавливает цвет в тэге
< P > синим, однако, цвет для тэга явно не определен (по умолчанию - это черный цвет). Здесь не о чем беспокоиться, так как этот тэг находится в родительском контейнереИ наследует таким образом синий цвет.
Иногда возникает необходимость определения двух (и более) стилей для одного тэга. Например, может понадобиться указание двух стилей для тэга
-
, и второй, когда он подчинен тэгу
-
. Это возможно сделать с
помощью контекстных селекторов.
Контекстный селектор определяет точную последовательность тэгов, для которых будет применен тот или иной стиль. Другими словами, можно указать, что какой-то стиль должен применяться, например, в тэге
H1 (color: red ! important font-weight: bold font-family: sans-serif ! important}
Классом называется определение нескольких стилей одного элемента, каждый из которых может использоваться в нужном месте страницы. Например, можно определить три вариации стиля заголовка H1 . Определение вариаций похоже на указание стиля, только к названию тэга добавляется произвольное имя класса, отделенное точкой:
H1 blue (color: blue} H1 .red (color: red} H1 .black (color: black}
Теперь, включая в документ тэг
, можно указать в нем конкретный стиль при помощи атрибута CLASS :
Red Heading
-
наследует свойства
тэга
Связывание (Linking) - можно связать HTML - документ с таблицей стилей, хранящейся в отдельном файле.
Встраивание (Embedding) - можно встроить таблицу стилей в HTML - документ с помощью контейнера
Тэг
Как было указано ранее, таблицы стилей хранятся в текстовых файлах, удобных для редактирования. Их нетрудно создавать вручную, однако существуют специальные редакторы таблиц стилей, например, популярная программа Мicrosoft FrontPage.
Таблицы стилей позволяют определять стиль для одного или нескольких тэгов. Например, можно создать таблицу стилей, определяющую стили для тэгов
,
,
И . Каждое определение называется правилом (rulе). Правило содержит селектор (тэг HTML), за которым следует декларация (определение стиля). Селектор является связующим звеном между определением и тэгом. Ниже приведен пример правила, указывающего стиль для каждого из тэгов заголовка
:
H1 (color: blue}
Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и присваиваемое ему значение, разделенные двоеточием. В HTML включены десятки свойств (font-size, font-style, color, margin-right и т. д.), о которых будет рассказано ниже. Каждое свойство может принимать несколько значений, одно из которых приписывается ему по умолчанию.
В предыдущем примере было указано лишь одно свойство color. Однако ничто не мешает определить целый ряд свойств в одном тэге, отделив их друг от друга точкой с запятой:
HI {color: blue; font-size: 12pt; text-line: center}
В этом примере программа просмотра выведет каждый заголовок первого уровня синим шрифтом размером 12 пунктов и выровняет их по центру окна. Для всех прочих свойств будут использоваться значения по умолчанию (например, свойству font-style будет присвоено значение normal).
Если необходимо определить один и тот же стиль для нескольких тэгов, можно перечислить их в отдельном списке:
Р (font-size: 12pt}
UL {font-size: 12pt}
LI {font-size: 12pt}HTML позволяет сделать то же самое и в более компактном виде - в одной строке:
Р, UL, LI (font-size: 12pt}
Запятая здесь является обязательным элементом. Если она опущена, смысл правила изменится (см. раздел " " ниже в этой главе).
По мере усложнения таблицы стилей, скорее всего, понадобится включить в нее дополнительные сведения о назначении того или иного правила. Комментарии располагаются между символами /* и */ и игнорируются программами просмотра, например:
BODY {margin-left: lin} /* Отступ на 1 дюйм */
H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */
Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */HTML позволяет определить широкий спектр свойств таблиц стилей. Имена свойств состоят из одного, а чаще - из двух или трех слов, разделенных дефисом. В сложных названиях первое слово обычно представляет категорию и одновременно является сокращенным вариантом (shorthand) имени свойства (см. раздел " ").
В таблице приведен обзор свойств таблиц стилей HTML.. В колонке "Категория" показано, может ли то или иное свойство объединяться в группу с другими свойствами. В третьей колонке приведены сведения о том, наследуется или нет свойство подчиненными тэгами (о наследовании свойств см. раздел " ").
Наследование
Таблицы стилей HTML позволяют украшать фон элемента страницы цветом или изображением. Необходимо заметить, что здесь и далее речь пойдет об использовании свойств не для всей страницы, а для отдельного элемента. Например, если определяется фон для тэга
-
,
то это фон будет только у тэгов
-
всей страницы:
U L {background-image: URL(http://www.myserver.com/images/watermark.gif)}
Рекомендации W3C дают возможность определять рамки, поля и свободное пространство для элементов страницы. Можно, например, заключить заголовок в рамку или изменить поля в тэге абзаца <Р> так, чтобы организовать отступ для всех абзацев текста. Для этих целей можно использовать следующие группы свойств:
Эти свойства применяются для указания способов вывода списков. С их помощью можно изменить позицию маркера (свойство list-style-position), стиль или изображение маркера (свойства list-style-type и list-style-image).
Свойства списков наследуются, т. е. если определено свойство в тэге
-
,
оно будет действительно для всех тэгов
- style
.
css
Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
Внедренный
(Embedded)
Внедрение
позволяет контролировать всю страницу
HTML. При использовании тега
...
Недостаток этого способа в том, что правила CSS глобальных стилей применяются только к той веб-странице, в которой они прописаны.
3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style , который включает в себя в качестве параметров набор CSS свойств:
Абзац с серым фоном и красным текстом
Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.
Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.
Селектор {
Свойство: Значение;
Свойство: Значение;
...
Свойство: Значение
}
Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):
Чтобы было понятней рассмотрим несколько примеров.
Разберем данное CSS правило:
В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега , потому что в качестве селектора указано имя тега без символов < и >.
Рассмотрим еще пример:
h1 {
font-size: 24px;
color: green;
}
Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги
зеленым цветом и задаст ему размер шрифта 24 пикселя.
В качестве селектора тега, кроме имени тега, можно указывать класс :
Yellowtext {color:yellow}
Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут class и его значение будет равно имени стилевого класса без точки :
В этом абзаце оранжевый текст
В примере мы привязали к тегу
Css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.
В качестве значения атрибута clsss можно задавать несколько имен стилевых классов, разделив их пробелами. В этом случае действие стилевых классов сложится:
Cursivtext {font-style: italic}
желтый текст курсивом
В этом примере к тегу
Мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.
Кроме классов в качестве селектора правила css можно использовать идентификатор , который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:
Рассмотрим пример для ясности:
#textcenter{text-align: center;}
Текст по центру
К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.
Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:
h1.redtext, p strong {color: red}
В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:
Этот заголовок отображается красным цветом
обычный текст, красный текст
В нашем курсе мы рассмотрим уроки CSS - т.е. уроки технологии, одной из самой важной при верстке веб-страниц.
В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).
Рисунок 1
Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web
1. Определение цветов. Уроки CSS
При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.
В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors , расположенной в папке CD .
|
Цвет |
Цвет |
||
|
Black (черный) |
Silver (серебряный) |
||
|
Maroon (темно-бордовый) |
Red (красный) |
||
|
Green (зеленый) |
Lime (известь) |
||
|
Olive (оливковый) |
Yellow (желтый) |
||
|
Navy (темно-синий) |
Blue (синий) |
||
|
Purple (фиолетовый) |
Fuchia (фуксия) |
||
|
Teal (темно-зеленый) |
|||
|
Gray (серый) |
White (белый) |
Таблица безопасных цветов для разработки дизайна сайта
Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.
Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.
Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.
Таблицу безопасных цветов можно просмотреть в папке CD / colors .
2. Определение CSS
Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:
Начнем сразу с более прогрессивного метода.
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
В этом примере:
Способы включения таблиц стилей в HTML-документ
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-элемента, о котором мы говорили выше в этом уроке.
Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main . html и style . css . Для этого откройте файл main.html и между тегами < head > и head > вставьте конструкцию , как на рисунке 4.
Рисунок 4
3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.
Рисунок 5
В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник Sprav_CSS.doc .
4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле style . css h 2 (рисунок 6).
Рисунок 6
5. Проверьте результат в браузере, он должен совпадать с рисунком 7.
Рисунок 7
6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле style . css сделаем следующую запись для селектора p (рисунок 8).
Рисунок 8
7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора body добавим запись (рисунок 9)
Рисунок 9
8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.
Рисунок 10
Думаю из данного урока CSS, принцип использования внешней таблицы стилей понятен. Для того, чтобы легко и красочно оформлять свои web -странички, надо по справочнику изучать стилевые свойства и их значения и пробовать на практике. Чем больше Вы помните таких свойств и значений без обращения к справочнику, тем выше Ваш профессионализм.
Исследовательские задания
Примерный результат на рисунке 11.
Рисунок 11
4. Классы в стилевых спецификациях
В нашем уроке CSS мы рассмотрим классы в стилевых спецификациях применяются в том случае, если необходимо определить несколько разновидностей стиля одного элемента. При определении класса к нужному тегу добавляется произвольное уникальное имя класса, отделяемое точкой.
Например, у нас в тексте есть несколько заголовков h 1 и нам необходимо, чтобы они были разного цвета. Тогда разделить стили надо следующим образом
h1.golub{color:blue}
h1.krasn{color:red}
h1.zelen{color:green}
После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.
Теперь при использовании тега < h 1> в документе необходимо установить атрибут class , чтобы указать, какой именно стиль нужно применить:
< h 1 class =" golub "> Это голубой заголовок h 1>
< h 1 class =" krasn "> Это красный заголовок h 1>
< h 1 class =" zelen "> Это зеленый заголовок h 1>
Практическое задание 2
1. Откройте файл shablon . html . Сохраните его под новым именем ploshady . html в папке public_html .
2. Напишите между тегами
3. В содержимое
скопируйте текст из файла Площади домов.txt из папки html _ ccs _2 .4. Стили будем писать в том же файлеstyle . css , который у нас создан в предыдущем уроке. Поэтому в файле ploshady . html установите связку с этой таблицей стилей, вставив между тегами
и (рисунок 12)
Рисунок 12
5. Отформатируйте заголовки тегом
и присвойте каждому заголовку свой класс (рисунок 13).
Рисунок 13
Ваш файл ploshady . html сейчас должен выглядеть следующим образом (рисунок 14).
Рисунок 14
6. В таблице стилей style . css создайте следующую запись (рисунок 15)
Рисунок 15
7. Проверьте web-страницу в браузере. Результат на рисунке 16.
Рисунок 16
8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):
Рисунок 17
Практическое задание 3
Под каждый заголовком в файле ploshady . html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:
Рисунок 18
5. ID-стиль для специфического элемента
Уроки CSS включают изучение так называемых id-стилей.
Любому элементу можно присвоить идентификаторid , а затем поставить в соответствие этому элементу какой-либо стиль, используя id .
Например:
Запись в файле таблиц стилей будет следующая
# test { color :#00 ffff }
Теперь можно поставить этот стиль в соответствие любому элементу в документе html:
...
...
В этом примере слово test - имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.
Практическое задание 4
Сделаем заготовку для будущего меню нашего сайта.
1. Откройте файл shablon . html и сохраните его под новым именем menu . html в папке public_html.
2. В содержимое страницы файла menu . html внесите текст из файла menu . txt из папкиhtml _ css _2 .
3. Средствами html-тегов отформатируйте файл следующим образом: