Одновременно пустое поле, которое есть у заголовка было удалено. Все эти возможности полностью отсутствуют в стандартной версии HTML.

CSS и документы HTML

Каскадные таблицы стилей (CSS – Cascading Style Sheets) – мощный механизм управления представлением отдельных документов или их наборов.

 

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

 

Разберем по составу это понятие — каскадная таблица стилей:

- каскадная. Спецификация HTML разрешает использовать для одного и того же

элемента несколько стилевых правил, интерпретируемых браузером

последовательно, другими словами — каскадом;

- таблица. Формат записи стилевых правил CSS напоминает табличное

представление данных. Заголовок таблицы соответствует наименованию

элемента, класса или идентификатора стиля. В качестве ячеек и рядов

таблицы выступают стилевые свойства и их значения.

 

Вот пример:

DIV

{

font-family: Tahoma;

color: black;

font-size: 12px;

}

 

- стиль. Под стилем принято понимать приведение какого-то явления

к общему набору правил и определений. CSS — это способ дополнительного форматирования стандартных тегов HTML.

 

Версия HTML 4.01 включает следующие характеристики CSS:

гибкое использование стилевых шаблонов. Правила задания стилевых таблиц позволяют использовать такие способы определения стиля, как создание внешнего CSS-файла, использование внутреннего шаблона и импортирования таблицы стилей.

 

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

каскадность (Cascading). Возможность определения нескольких стилевых

правил (указания нескольких таблиц стилей) для одного элемента HTML.

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

 

привязанность к носителю информации. С помощью стилевых шаблонов CSS возможна ориентация создаваемого электронного документа на различные носители информационных данных: операционные системы Windows и Macintosh, телевизионные и игровые приставки, мобильные телефоны и карманные персональные компьютеры (КПК), устройства распознавания человеческой речи

 

альтернативные стили (Alternate styles). Разработчики электронных документов могут создавать несколько вариантов отображения элементов HTML с помощью различных таблиц стилей CSS.

 

 

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

 

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

Вот некоторые свойства, которые можно изменить с помощью CSS

 

 

 

 

Пример заголовка на странице

< h1> Какой-то текст заголовка< /h1>

Допустим, требуется, чтобы этот заголовок стал темно-красным, был набран определенным шрифтом курсивного начертания, подчеркнут и располагался на желтом фоне.

Есть разные варианты выполнения этого. Можно сделать все

это с помощью таблицы. Для этого поместим тег h1 в таблицу

и нагрузим ячейку массой атрибутов, таких как font и u.

 

CSS позволяет обойтись одним правилом:

 

h1 {color: maroon; font: italic 2em Times, serif;

text-decoration: underline;

background: yellow; }

Все, что можно было сделать в HTML, можно сделать в CSS. Но можно сделать и гораздо больше.

 

Вот, что можно сделать очень легко и быстро:

в качестве фона элемента h1 применим изображение, которое

повторяется в горизонтальном направлении, а вокруг самого элемента h1 добавим рамку, отстоящую от текста минимум на пять пикселей.

Для этого используется следующий код

 

h1 {color: maroon; font: italic 2em Times, serif;

text-decoration: underline;

background: yellow url (titlebg.png) repeat-x;

border: 1px solid red; margin-bottom: 0;

padding: 5px; }

Одновременно пустое поле, которое есть у заголовка было удалено. Все эти возможности полностью отсутствуют в стандартной версии HTML.

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

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

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

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

Общие положения.

 

Разберем совсем простое правило таблицы стилей

H1 {color: blue; font-size: 16pt; }

 

Любое правило каскадных таблиц стилей состоит из двух частей:

- селектора и

- объявление (или определения). Блок объявлений может состоять из одного или более объявлений. Последние отделяются друг от друга символом точки с запятой.

 

Объявления и ключевые слова

В блок объявлений (определений) входит одно или несколько объявлений. Формат

объявлений обычно такой: имя свойства, за которым следует двоеточие, затем значение и точка с запятой. После двоеточия и точки с запятой может быть произвольное количество пробелов (в частности, возможно отсутствие пробела). Практически во всех случаях значение –это или отдельное ключевое слово, или список из нескольких допустимых для данного свойства ключевых слов, разделенных пробелами.

Если указать неверное свойство или значение, будет проигнорировано все объявление целиком. Поэтому следующие два объявления не будут

выполнены:

{

brain-size: 2cm; /* неизвестное свойство */

color: ultraviolet; /* неизвестное значение */

}

 

В случаях, когда допускается указывать в качестве значения свойства более одного ключевого слова, ключевые слова обычно разделяются пробелами. Не все свойства могут принять несколько ключевых слов, но некоторые, такие как свойство font, могут.

 

Предположим, текст абзаца должен быть набран шрифтом Helvetica среднего размера. В этом случае правило должно выглядеть так:

p {font: medium Helvetica; }

 

Пробел между значениями medium и Helvetica указывает на границу очередного ключевого слова. Первое – размер шрифта, второе – имя шрифта. Благодаря пробелу браузер пользователя различает эти два ключевых слова и применяет их правильно.

Точка с запятой указывает на завершение объявления.

 

 

CSS-свойство font – это единственное место, где два ключевых слова могут быть разделены прямым слэшем (/).

Например:

h2 {font: large/150% sans-serif; }

 

Здесь слэш разделяет ключевые слова, которые задают размер шрифта и высоту строки элемента.

 

 

Связывание

позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга < LINK>, задаваемого в разделе < HEAD>:

Связывание позволяет разработчику применить одинаковый набор правил

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

 

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

Допустимы и другие расширения, но предпочтительнее все же css.

 

< head> ….

< link rel=" stylesheet" type=" text/css" href=" sheet1.css" media=" all" />

< /head>

 

Основное назначение тега – предоставить авторам HTML возможность устанавливать связь между документом, содержащим тег < link …> , и другими документами. Таблицы стилей, не являющиеся частью HTML-документа, но используемые им, называются внешними таблицами стилей (external style sheets). Это название дано потому, что такие таблицы стилей являются внешними по отношению к HTML-документу.

 

Чтобы внешняя таблица стилей была успешно загружена, тег < link> должен быть помещен внутрь элемента < head> и не может находиться внутри какого-либо другого элемента (так же как < title> ). В результате веб-браузер отыщет и загрузит таблицу стилей, после чего будет использовать любые содержащиеся в ней стили для формирования представления HTML-документа.

 

Формат внешней таблицы стилей - это просто список таких же правил, какие мы видели в предыдущих примерах. Но в данном случае правила сохраняются в отдельном файле.

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

 

h1 {color: red; }

h2 {color: maroon; background: white; }

h3 {color: white; background: black; font: medium Helvetica; }

Их сохраняют в простом текстовом файле и обычно дают расширение.css

Значения атрибута media

all для всех устройств.

aural для синтезаторов речи, средств чтения с экрана и других

аудио-представлений документа.

handheld для переносных устройств, таких как карманные компьютеры

или смартфоны.

Print задается при распечатке документа на обычном принтере, а

также при выводе в окне просмотра документа перед печатью

 

projection указывают для проекционных устройств, таких как цифровой

проектор, используемый для демонстрации слайдов,

сопровождающей чтение доклада.

Screen указывают при представлении документа в экранном устройстве,

таком как монитор компьютера. Все веб-браузеры являются

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

 

 

Таблицу стилей можно использовать не только для одного устройства,

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

таблицу стилей, как для экранного, так и для проекционного устройства:

< link rel=" stylesheet" type=" text/css" href=" visual-sheet.css"

media=" screen, projection" />

С документом может быть ассоциирована не только таблица стилей. В таких случаях в исходном представлении документа будут применяться только те теги link, атрибут rel которых имеет значение stylesheet. Таким образом, если бы вы захотели связать две таблицы стилей, basic.css и splash.css, это выглядело бы следующим образом:

 

< link rel=" stylesheet" type=" text/css" href=" basic.css" />

< link rel=" stylesheet" type=" text/css" href=" splash.css" />

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

 

Есть еще один атрибут title. Задает заголовок к таблице стилей.

Если он задан, то таблица считается предпочтительной. Если заголовок не задан, то таблица становится постоянной таблицей стилей.

 

 

Внедрение таблицы стилей

В этом случае стили задаются в стилевом блоке, ограниченном тэгами

< STYLE TYPE=" text/css" > и < /STYLE>, который должен размешаться в разделе < HEAD> документа. Вот пример:

 

< HEAD>

< STYLE TYPE=" text/css" >

<! --

В {text-transform: uppercase; }

P {background-color: lightgrey; text-align: center; }

-->

< /STYLE>

< /HEAD>

Для исключения ошибок у старых браузеров добавляются теги комментариев

<! —... — >.

 

В приведенном выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент Р) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом В (тэг < в> ) документа, будет отображаться прописными буквами, даже если он задан строчными.

Импортирование

В тэге < STYLE> можно импортировать внешнюю таблицу стилей с помощью

свойства @import таблицы стилей:

 

@import: url(mystyles.сss);

 

Фактически здесь мы имеем дело с аналогом тега < link>

Так же как и link, @import указывает веб-браузеру на необходимость загрузки таблицы стилей. Единственное и основное отличие заключается в синтаксисе и размещении команды.

@import находится в контейнере style. Должен располагаться перед всеми остальными правилами CSS, иначе она вообще не будет работать.

 

 

Рассмотрим такой пример:

< style type=" text/css" >

@import url(styles.css); /* @import идет первой */

h1 {color: gray; }

< /style> ink>.

 

В документе может быть несколько директив выражения @import, как

и тегов link. Однако, в отличие от link, все указанные в директивах

@import таблицы стилей будут загружены и использованы; с помощью

@import невозможно назначить альтернативные таблицы стилей.

 

Пример @import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

 

Как и в случае элемента link, можно ограничить применение импортируемой таблицы стилей одним или несколькими устройствами, перечислив их после URL таблицы стилей:

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

@import url(zany.css) projection, print;

Группирование

1. Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы

в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило.

 

Например, следующие правила

H1 (font-family: Arial)

Н2 {font-family: Arial}

НЗ {font-family: Arial}

 

можно сгруппировать и задать в виде одного правила со списком селекторов

H1, H2, НЗ {font-family: Arial}

 

2.Аналогично группируются объявления (определения), только в списке они разделяются точками с запятой (; ).

 

Следующие правила форматирования заголовка первого уровня

H1 {font-weight: bold}

H1{font-size: 14pt}

H1 (font-family: Arial}

можно задать в виде одного правила, сгруппировав определения:

H1 {font-weight: bold; font-size: 14pt; font-family: Arial; }

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

от правильности синтаксиса.

Предыдущий пример можно записать и так для удобства чтения:

H1 {

font-weight: bold;

font-size: 14pt;

font-family: Arial;

}

 

Вот вариант еще более компактной записи:

h1 {font: 18px Helvetica; color: purple; background: aqua; }

и его эквивалент

h1{

font: 18px Helvetica;

color: purple;

background: aqua;

}

 

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

h1 {

font: 18px Helvetica;

color: purple background: aqua;

}

Поскольку background: не является действительным значением для атрибута color, а также потому, что атрибуту color может быть присвоено только одно ключевое слово, браузер полностью проигнорирует объявление color (включая часть background: aqua). При этом, возможно, цвет текста в элементах h1 и будет фиолетовым без фона цвета морской волны, но скорее всего, вы не получите и фиолетовых элементов h1. Всем им будет назначен применяемый по умолчанию цвет (обычно черный) вообще без фона. (Объявление font: 18px Helvetica останется в силе, поскольку оно совершенно правильно завершается точкой с запятой.)

 

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

Некоторые старые браузеры неправильно отрабатывают, если последнее объявление правила не завершается точкой с запятой. Всех этих неприятностей

можно избежать заранее: всегда завершайте объявления точкой

с запятой, в каком бы месте правила они ни находились.

3.Некоторые свойства имеют собственный синтаксис группирования,

связанный с заданием значений нескольких свойств в одном.

Например, предыдущий пример при использовании свойства font запишется так:

H1 (font: bold 14pt Arial}

При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.

 

4.Возможно группировать как селекторы, так и определения (объявления)

Вот пример

h1, h2, h3, h4, h5, h6 {color: gray; background: white;

padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif; }

Можно обеспечить селекторам даже еще больше выразительности и распределить стили по элементам согласно типам информации. Конечно, придется немного потрудиться, но результат стоит того.

 

Универсальный селектор

Имеется селектор, названный универсальным селектором (universal selector) и представляемый символом звездочка (*). Этот селектор соответствует любому элементу почти так же, как подстановочный символ в маске имени файла.

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

 

* {color: red; } Это описание эквивалентно групповому селектору, в котором перечислен каждый содержащийся в документе элемент. Универсальный селектор позволяет присваивать атрибуту color каждого элемента документа значение red.

Универсальный селектор удобен, но его применение может иметь некоторые неожиданные последствия. Далее об этом скажем.

Наследование

Отношения родитель-потомок

Мощь CSS в основном базируется на родительско-дочерних отношениях

(parent–child relationship) элементов. HTML-документы строятся на основании иерархии элементов, которую можно показать в форме древовидного представления документа. В этой иерархии каждый элемент тем или иным образом вписывается в общую структуру документа. Каждый элемент является или родительским (parent), или дочерним (child) элементом другого элемента, а зачастую выполняет обе

эти роли.

 

Выбор дочерних элементов

Для этого используется символ-комбинатор селектора дочерних элементов, которым является символ «больше» (> ).

 

Пример: нужно выбрать элемент strong, при условии, что он является дочерним элементом (а не просто потомком) элемента h1.

h1 > strong {color: red; }

Это правило сделает красным элемент strong для первого из следующих

далее h1 и не сделает для второго:

< h1> Это < strong> очень< /strong> важно.< /h1>

< h1> Это < em> действительно < strong> очень< /strong>

< /em> важно.

< /h1>

 

Прочитанный справа налево селектор h1 > strong переводится как «выбираем любой элемент strong, являющийся дочерним элементом h1».

 

Выбор сестринских элементов

Чтобы выбрать элемент, расположенный на одном уровне с другим элементом и имеющий того же родителя, применяется комбинатор селектора сестринских элементов (adjacent-sibling combinator), представляемый в виде знака плюс (+).

 

Пример. Чтобы удалить верхний отступ абзаца, непосредственно следующего

за элементом h1, укажем: h1 + p {margin-top: 0; }

Этот селектор означает следующее: «выбираем любой абзац, расположенный непосредственно за элементом h1, имеющим общих родителей с элементом p».

 

 

Рассмотрим немного подробнее следующий пример

 

 

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

(В лучшем случае они являются кузинами.)

 

Важное правило:

Типы селекторов

6.1. Селекторы элементов (тегов)

Чаще всего (но не всегда!!! ), селектор – это элемент HTML.

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

 

Например: здесь задаются цвета

html {color: black; }

h1 {color: gray; }

h2 {color: silver; }

 

Следующее правило отображает без подчеркивания все ссылки (тэг < А> ) в документе:

< STYLE TYPE=" text/css" > <! -- А { text-decoration: none; } --> < /STYLE>

Селектор классов class

Множественные классы

Class может списком и слов, разделенных пробелами.

В этом случае принадлежность к классу определяется совпадением хотя бы

с одним из слов. И порядок слов в списке не имеет значения.

Это полезно для объединения стилей форматирования, которые задаются

для отдельных значений класса

Пример. Стили зададим следующие

.warning {font-weight: bold; }

.urgent {font-style: italic; }

.warning.urgent {background: silver; }

 

Тогда в документе HTML можно задать следующие классы

< p class =" urgent warning" > При работе с плутонием

Селектор идентификаторов ID

Параметр ID, как и параметр CLASS, не влияет на отображение браузером

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

 

В некотором смысле селекторы идентификаторов аналогичны селекторам классов, но есть несколько существенных отличий. Во-первых, перед селекторами идентификаторов вместо точки ставится «решетка» (#), называемая также знаком фунта, диезом. Таким образом, возможно и такое правило:

 

*#first-para {font-weight: bold; }

Здесь дополнительно использован универсальный селектор (*)

Оно устанавливает полужирный шрифт для любого элемента, атрибут id которого имеет значение first-para.

Второе отличие – вместо значений атрибута class в селекторах идентификаторов используется значение, которое задано в html странице для атрибута id.

Вот пример селектора идентификатора в действии:

 

*#lead-para {font-weight: bold; } /*задаем правило*/

…

< p id=" lead-para" > Этот параграф будет выделен полужирным

шрифтом.< /p>

< p> А этот параграф уже НЕ будет выделен полужирным шрифтом.< /p>

 

Как и в селекторах классов, в селекторе идентификатора можно опустить универсальный селектор. В предыдущем примере можно было бы

написать:

#lead-para {font-weight: bold; } Результат бы не изменился.

Вот еще пример

< style type=" text/css" > <! -- #par24 {letter-spacing: 1em; }

h1#form3 {color: red; background-color: blue} --> < /style>

< body> < p id=раг24> Разреженные слова в абзаце< /p>

< h1 id=form2> Черный шрифт< /h1> < /body>

В этом примере абзац идентифицирован именем раг24 в параметре ID, поэтому к нему применимо правило с селектором #раг24. Второе правило в

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

 

Селекторы псевдоклассов

Для целей удобного форматирования в CSS вводится понятие псевдоклассов и псевдоэлементов. Фактически это условные структуры. Их нет в HTML странице.

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

 

Селекторы атрибутов

Простой выбор атрибутов

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

 

Например, чтобы выбрать все элементы h1, имеющие атрибут Tetatr с любым значением, и сделать их текст серебряным, укажем:

h1[Tetatr] {color: silver; }

 

 

В HTML-документах можно, например, выделить все изображения, имеющие атрибут alt, отметив таким образом изображения, оформленные правильно:

img[alt] {border: 3px solid red; }

 

Аналогичным образом можно оформить только те теги < a>, в которых есть атрибут href. Это делается путем простого объединения селекторов атрибутов. Например, чтобы выделить полужирным шрифтом текст любой гиперссылки HTML, которая имеет и атрибут href, и атрибут title, можно написать:

a[href][title] {font-weight: bold; }

 

При этом полужирным шрифтом будет выделена первая ссылка следующей разметки, но не вторая или третья:

< a href=" http: //www.w3.org/" title=" W3C Home" > W3C< /a> < br />

< a href=" http: //www.webstandards.org" > Standards Info< /a> < br />

< a title=" Not a link" > dead.letter< /a>

 

Это и есть ключ для осуществления выбора того элемента, у которого в выбранном атрибуте значение содержит заданное слово. По-другому говоря, мы только по частичному совпадению значения атрибута выбрали элемент документа.

Эта конструкция селектора эквивалентна рассмотренному ранее условному обозначению классов с помощью предшествующей точки. Таким образом, записи p.warning и p[class~=" warning" ] эквивалентны.

Селекторы потомков

 

CSS и документы HTML

Каскадные таблицы стилей (CSS – Cascading Style Sheets) – мощный механизм управления представлением отдельных документов или их наборов.

 

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

 

Разберем по составу это понятие — каскадная таблица стилей:

- каскадная. Спецификация HTML разрешает использовать для одного и того же

элемента несколько стилевых правил, интерпретируемых браузером

последовательно, другими словами — каскадом;

- таблица. Формат записи стилевых правил CSS напоминает табличное

представление данных. Заголовок таблицы соответствует наименованию

элемента, класса или идентификатора стиля. В качестве ячеек и рядов

таблицы выступают стилевые свойства и их значения.

 

Вот пример:

DIV

{

font-family: Tahoma;

color: black;

font-size: 12px;

}

 

- стиль. Под стилем принято понимать приведение какого-то явления

к общему набору правил и определений. CSS — это способ дополнительного форматирования стандартных тегов HTML.

 

Версия HTML 4.01 включает следующие характеристики CSS:

гибкое использование стилевых шаблонов. Правила задания стилевых таблиц позволяют использовать такие способы определения стиля, как создание внешнего CSS-файла, использование внутреннего шаблона и импортирования таблицы стилей.

 

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

каскадность (Cascading). Возможность определения нескольких стилевых

правил (указания нескольких таблиц стилей) для одного элемента HTML.

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

 

привязанность к носителю информации. С помощью стилевых шаблонов CSS возможна ориентация создаваемого электронного документа на различные носители информационных данных: операционные системы Windows и Macintosh, телевизионные и игровые приставки, мобильные телефоны и карманные персональные компьютеры (КПК), устройства распознавания человеческой речи

 

альтернативные стили (Alternate styles). Разработчики электронных документов могут создавать несколько вариантов отображения элементов HTML с помощью различных таблиц стилей CSS.

 

 

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

 

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

Вот некоторые свойства, которые можно изменить с помощью CSS

 

 

 

 

Пример заголовка на странице

< h1> Какой-то текст заголовка< /h1>

Допустим, требуется, чтобы этот заголовок стал темно-красным, был набран определенным шрифтом курсивного начертания, подчеркнут и располагался на желтом фоне.

Есть разные варианты выполнения этого. Можно сделать все

это с помощью таблицы. Для этого поместим тег h1 в таблицу

и нагрузим ячейку массой атрибутов, таких как font и u.

 

CSS позволяет обойтись одним правилом:

 

h1 {color: maroon; font: italic 2em Times, serif;

text-decoration: underline;

background: yellow; }

Все, что можно было сделать в HTML, можно сделать в CSS. Но можно сделать и гораздо больше.

 

Вот, что можно сделать очень легко и быстро:

в качестве фона элемента h1 применим изображение, которое

повторяется в горизонтальном направлении, а вокруг самого элемента h1 добавим рамку, отстоящую от текста минимум на пять пикселей.

Для этого используется следующий код

 

h1 {color: maroon; font: italic 2em Times, serif;

text-decoration: underline;

background: yellow url (titlebg.png) repeat-x;

border: 1px solid red; margin-bottom: 0;

padding: 5px; }

Одновременно пустое поле, которое есть у заголовка было удалено. Все эти возможности полностью отсутствуют в стандартной версии HTML.

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

1234Следующая ⇒

Поделиться: