2.2Каскадная таблица стилей css

Каскадные
(многоуровневые) таблицы стилей
  cascading
style sheets (CSS)
 —
это мощный стандарт на основе текстового
формата, определяющий представление
данных в браузере. Если
формат HTML предоставляет информацию о
составе документа, то таблицы стилей
сообщают, как он должен выглядеть. Таким
образом, каскадные таблицы стилей дают
возможность хранить содержимое отдельно
от его представления.
Стиль
включает все типы элементов дизайна:
шрифт, фон, текст, цвета ссылок, поля и
расположение объектов на странице.
CSS
разрабатывались так, чтобы обеспечить
больший уровень контроля над размещением
текста и графики. Каскадные таблицы
стилей обеспечивают должный уровень
единства оформления, организации и
контроля во время разработки узла,
который является недостижимым с помощью
одного только HTML.[15]

CSS
предполагает 3 типа таблиц стилей —
встроенные, внедренные (внутренние) и
связанные (внешние).

Впервые
идея форматирования HTML-документов
с помощью CSS
была рекомендована Консорциумом
W3C
в
1996 году. Эта рекомендация, которая была
обновлена в 1998 году, используется
Web-разработчиками,
и по сей день.

Что
значит слово «каскадный»?
Термин
«каскадный» означает, что в одной
странице HTML
могут использоваться разные стили.
Браузер, поддерживающий таблицы стилей,
будет следовать их порядку (как по
каскаду), интерпретируя информацию
стилей. Это означает, что вы можете
использовать все три типа стилей, и
браузер будет интерпретировать сначала
связанные, затем внедренные и, наконец,
встроенные стили. Даже если ко всему
узлу будут применены образцы стилей,
можно будет управлять отдельными
аспектами страниц с помощью внедренных
стилей, а отдельными областями внутри
этих страниц — с помощью встроенных
стилей.
Другой аспект каскадирования
— наследование
(
inheritance). Наследование
означает, что если не указано иное, то
конкретный стиль будет унаследован
другими элементами страницы HTML.
Например, если вы примените определенный
цвет текста в теге <р>,
то все теги внутри этого абзаца наследуют
этот цвет, если не оговорено иное.  

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

Существует
три метода для применения таблицы стилей
к документу HTML:

  • Встроенный
    (Inline).
     Этот
    метод позволяет взять любой тег HTML и
    добавить к нему стиль. Использование
    встроенного метода предоставляет
    максимальный контроль над всеми
    свойствами Web-страницы. Предположим,
    вы хотите задать внешний вид отдельного
    абзаца. Вы можете просто добавить
    атрибут style к тегу абзаца, и броузер
    отобразит этот абзац с помощью параметров
    стиля, добавленного в код.

  • Внедренный
    (Embedded)
     Внедрение
    позволяет контролировать всю страницу
    HTML. При использовании тега <style>,
    помещенного внутри раздела <head>
    страницы HTML, в код вставляются
    детализированные атрибуты стиля,
    которые будут применяться ко всей
    странице.

  • Связанный
    (Linked или External)
    Связанная
    таблица стилей — мощный инструмент,
    который позволяет создавать образцы
    стилей (master
    styles)
    ,
    которые можно затем применять ко всему
    узлу. Основной документ таблицы стилей
    (расширение .css) создается Web-дизайнером.
    Этот документ содержит стили, которые
    будут едиными для всего Web-узла (неважно,
    содержит одну страницу или тысячи
    страниц). Любая страница, связанная с
    этим документом, будет использовать
    указанные стили.

Таблицы
стилей строятся в соответствии с
определенным порядком (синтаксисом), в
противном случае они не могут нормально
работать.
Синтаксис
всех методов, используемых для применения
стилей к документа HTML, практически
одинаков. Таблицы стилей составляются
из определенных частей. Эти части
включают следующие элементы:

  • Указатель
    (Selector).
     Указатель
    является элементом, к которому будут
    применяться назначаемые вами атрибуты.
    Это может быть просто тег типа
    заголовка (H1) или
    абзаца (Р).
    Таблицы стилей позволяют использовать
    различные объекты, включая классы,
    которые будут кратко обсуждаться далее.

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

  • Значение
    (Value).
     Значения
    определяют свойства. Предположим, что
    у вас есть заголовок первого
    уровня H1(указатель)
    и вы включаете свойство type
    family 
    (семейство
    шрифта). Шрифт, который на самом деле
    будет применен к указанному фрагменту,
    задается значением этого свойства.

  • Описание
    (Declaration).
     Свойства
    и значения объединяются, образуя
    описание.

  • Строка
    (Rule).
     Указатель
    и описание образуют строку

Итак,
каскадная таблица стилей — это набор
правил форматирования тегов HTML. Например,
для того, чтобы цвет фона Web-страницы
сделать черным, необходимо объявить
следующее правило форматирования:

body{background:black}

В
данном случае объявлено правило
форматирования тега body,
а именно — свойству стиля background
присвоено
значение black (черный).
В результате применения этого правила
цвет фона всего документа изменится на
черный.

Свойства
CSS должны находиться в фигурных
скобках.
Для каждого тега HTML можно
указать не одно, а несколько свойств
стиля.

Изменим
с помощью CSS не только цвет фона
Web-страницы, но и цвет шрифта (на белый).

body{background:black;color:white}

Формат
самого правила не имеет значения, главное
— правило должно читаться удобно и легко.
Например, вышеприведенное правило можно
записать и так:

body{

background:black;

color:white}

Одно
и то же правило стиля можно применить
сразу к нескольким различным тегам
HTML-страницы. Например:

body,td,h1{

background:black;

color:white}

Встроенный
стиль применяется к любому тегу HTML с
помощью атрибута style следующим
образом:

<P
style=»font: 12pt Courier New»> The text in this line
will

display
as 12 point text using the Courier New font.

</P>

Или:

<p
style=»font: 12pt Arial»>

The
text in this line will display as 18 point text using the

Arial
font.

</p>

Посмотрим
на результат:

The
text in this line will display as 12 point text using the Courier New
font.

The
text in this line will display as 18 point text using the Arial font.

Можно
добавлять встроенный стиль в любой тег
HTML, в котором эта операция будет иметь
смысл. Среди таких тегов можно назвать
абзацы, заголовки, горизонтальные линии,
якоря и ячейки таблиц. Ко всем этим
элементам логично применять встроенные
стили.
Существуют
два тега, которые помогают применять
встроенные стили к разделам страницы.
Это теги <div>
(division — раздел)
 и <span>
(промежуток)
.
Эти
теги определяют диапазон текста, так
что все, находящееся между ними, будет
оформлено с помощью нужного стиля.
Единственное различие
между <div> и <span> состоит
в том, что <div> создает
принудительный разрыв строки
,a <span> -нет. Следовательно,нужно
использовать <span> для
изменения стиля любой части текста,
меньшей абзаца.

Вот
пример работы тега <div>:

<div
style=»font-family: Garamond; font-size: 18 pt;>»AII of
the

text
within this section is 18 point Garamond.

AII
of the text within this section is 18 point Garamond.

и
тега <span>:

<span
style=»color:#ff3300;»> This text appears in the color
red,

with
no line break after the closing span tag </span> and the rest
of

the
text.

Далее
рассмотрим, как создать и подключить
каскадную
таблицу стилей к самой простой html
страничке.

1. Создаем
папку, в которой будут наша html страница,
и каскадная таблица стилей. Пусть, папка
будет называться «css»

2. Создаем
простую html страничку (index.html).

3. Теперь
создаем простой текстовый документ
(аналогично созданию html странички),
только называем его style.css.

В
результате получится документ показанный
на рисунке 2.1 :

Рисунок
2.1

Все,
файл который будет содержать в себе
стили css готов.

Теперь
давайте подключим созданную таблицу
стилей к файлу index.html.

Итак,
для того что бы подключить таблицу
стилей к html страничке, необходимо в
файле index.html в теге <head> прописать
тег:

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

Здесь,
в атрибуте href=»style.css» прописан
путь к самому файлу со стилями css. В этом
случае файл css и index.html находится в одной
папке.

Например,
если наш файл index.html будет иметь такой
код, рисунок 2.2:

Рисунок
2.2

Если
же все будет сделано и сохранено
правильно, то в браузере Вы увидите
следующее, рисунок 2.3:

Рисунок
2.3

Добавить комментарий

*
*

Required fields are marked *