Что такое таблицы стилей css. Основные элементы CSS. Классы в стилевых спецификациях

Оставьте комментарий 6,950

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

Основные элементы CSS

Как HTML состоит из тегов , атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.

  • Селектор . Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
  • Блок объявления стилей . Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
  • Свойство . Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
  • Значение . Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.

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

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

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

  • Универсальный . Задаёт правила всем элементам страницы, для которых не установлены другие правила.
    Код * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов.
  • Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p , h1 , ul .
    Например, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов

    .
  • Атрибута . С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.
  • Класса . Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.

Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.

CSS-код будет таким:

Step {margin-left: 15px;}

HTML-код, который привяжет элемент к правилу, будет следующим:

Текст с отступом

  • Идентификатора . Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:

#exclusive {color:orange;}

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

P i {fint-family: Century;}

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

Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):

A.step {margin-left: 15px;}

Как подключить CSS к HTML-странице?

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

Встроенные стили

Задаются в документе прямо внутри HTML-тега с помощью атрибута style . Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна - оформление тега в нём и задано.

Следующий код задаёт размер и цвет шрифта тексту внутри тега

Текст, оформленный с помощью внутреннего стиля.

Глобальные стили

Задаются тегом …

Связанные стили

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

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

Чтобы связать правила из CSS-файла с HTML-страницей, используется тег , добавленный в контейнер , и его атрибуты.

Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:

rel="stylesheet" определяет, что тег ссылается на файл таблицы стилей, href="mysyle.css" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.

Импортированные стили

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

Код ниже импортирует в документ таблицу файла any.css , которая находится в папке с редактируемым HTML-документом:

@import url(any.css);

Команда прописывается строкой ниже открывающего тега

1. Что такое каскадные таблицы стилей css?

Здравствуйте дорогие мои читатели. Я решил открыть новую часть сайта, посвященную работе с каскадными таблицами стилей css.

Итак, что же такое каскадные таблицы стилей css?

css (англ. Cascading Style Sheets — каскадные таблицы стилей ) - язык описания внешнего вида документа, написанного с использованием языка разметки.
Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.

Впервые каскадные таблицы стилей стали использовать в 90-х годах прошлого столетия. Но поначалу они не были столь популярны как сейчас, потому, что разные браузеры по разному воспринимали и выводили html странички, в которых использовались css.

Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.

Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.

Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.

2. Как создать каскадную таблицу стилей css?

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

Итак, делаем так:

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

2. Создаем простую html страничку (index.html). Как это делается можете прочитать .

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

В результате у Вас должно получиться вот что:

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

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

3. Как подключить каскадную таблицу стилей css?

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

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

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

Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".

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

Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.

Теперь давайте проверим работу таблиц стилей css.

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

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

А если Вы планируете научиться создавать профессиональные интернет магазины на движке Magento, то это легче всего сделать с помощью моего авторского видео курса .

Для чего нужны таблицы стилей?

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

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

Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации.

Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.

В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве - будь это 21" монитор или маленький черно-белый экран сотового телефона.

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

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

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

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

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

Подключение таблиц стилей
Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:

внешний файл

описание в секции заголовка

inline-описание

Начнем с самого простого, с так называемого inline-описания или описания, встроенного в тег:

Этот текст переопределен стилем

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

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

При использовании этого метода описание стилей необходимо разместить в секции заголовка:


....

Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:

Этот текст написан стилем header

Этот текст написан красным цветом

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

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

И наконец, третий способ - вынесение описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет.

Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):

Header { text-align: center; font-size: 27pt;}
.red { color: red; }
p { text-align: center; font-size: 12pt;}


....

....

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

Почему я сказал "основной"? Дело в том, что на практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей. Но об этом мы поговорим уже в следующий раз.

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

Каскадность стилей
Итак, для начала разберемся, почему стили называются каскадными. Позволь, дорогой читатель, я еще раз приведу способы внедрения стилей на страничку:

использование отдельного стилевого файла и вставка его при помощи тега

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

применения стиля как параметра в теге.

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

Например, мы определили во внешнем стилевом файле, что текст в теге

должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге

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

Для чего это нужно? О, это очень полезная вещь. И сейчас я покажу это на конкретном примере. Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль:


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

Copyright (C)
1998-2001 Cherry-Design

Сделали мы это при помощи параметр style, а он, как Вы помните, действует лишь в пределах того тега, в котором был определен. Что нам и нужно.

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

В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

Что-то


Что-то

Что-то

Тег

подобен , но только с тем отличием, что делает до и после себя отбивку (точно так же, как и

). А вот стиль текста, которым набрано основное содержимое странички, лучше всего сделать переопределением тега

А не определением отдельного класса.

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

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

Разобравшись с каскадностью, давайте поговорим о синтаксисе.

Синтаксис CSS
Описание каждого класса делается при помощи конструкции, подобной этой:

Small { font-size: 9pt; }

Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:

Small { font-size: 9pt; color: #eeeeee; text-align: center; }

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


Раз есть универсальные классы, то, вероятно, существуют и какие-то другие? Все правильно, еще бывают так называемые теговые классы:

p.small { font-size: 9pt; }

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

Этот текст будет выведен стилем small


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

p, td { font-size: 9pt; color:green;}

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

одинаковый размер и цвет текста.

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

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

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Верхняя строчка - это переопределение стандартного тега , которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.

А вот и другой пример псевдокласса - определение буквицы вначале абзаца:

p:first-letter { font-size: 200%; font-weight: bold; }

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


Применение Таблицы Стилей к документу

Встраивание Таблиц Стилей в документ
Задание стиля для отдельного фрагмента документа
Импорт Таблицы Стилей

Указание нескольких свойств одновременно
Группирование селекторов
Комментирование Таблицы Стилей
Свойства стилей
Свойства 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 является возможность отделить операцию форматирования от содержания документа. Сначала определяется, как должен выглядеть текст в том или ином месте страницы, а затем вводите сам текст. Если вы позднее решите, например, заменить цвет шрифта заголовков на синий, для этого будет достаточно поменять только стиль этих заголовков. Делать изменения в тексте нет необходимости.

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

    Связывание (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 дают возможность определять рамки, поля и свободное пространство для элементов страницы. Можно, например, заключить заголовок в рамку или изменить поля в тэге абзаца <Р> так, чтобы организовать отступ для всех абзацев текста. Для этих целей можно использовать следующие группы свойств:

        • border - используются для определения рамки, расположенной слева, справа, сверху и снизу от элемента. Можно устанавливать ширину, цвет и стиль рамки.

        • margin - используются для определения полей, расположенных слева, справа, сверху и снизу от элемента. Можно также устанавливать ширину полей.

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

        Эти свойства применяются для указания способов вывода списков. С их помощью можно изменить позицию маркера (свойство list-style-position), стиль или изображение маркера (свойства list-style-type и list-style-image).

        Свойства списков наследуются, т. е. если определено свойство в тэге

          , оно будет действительно для всех тэгов
        • контейнера 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 > и

            ) будут обладать некоторыми свойствами тэга . Точно так же тэг
          • наследует свойства тэга
              . Рассмотрим следующий код:



              Hello. This is a paragraph of text. This is emphasized

              Таблица стилей этого документа устанавливает цвет в тэге

              < P > синим, однако, цвет для тэга явно не определен (по умолчанию - это черный цвет). Здесь не о чем беспокоиться, так как этот тэг находится в родительском контейнере

              И наследует таким образом синий цвет.

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

            • : один для случая, когда он подчинен тэгу

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

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

                • только в том случае, если этот тэг является подчиненным тэгу
                    :

                    OL LI (list-style-type: decimal}

                    Для того же тэга

                  1. можно определить другой стиль, действительный только в случае подчиненности тэгу
                      :

                      UL LI {list-style-type: square}

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

                      В рекомендациях W3C таблицы стилей называются "каскадными таблицами стилей" потому, что для верстки Web - страницы можно применять не одну, а сразу несколько таблиц. При этом программа просмотра сама определяет последовательность использования таблиц и разрешает конфликты между ними по принципу каскадирования. Например, таблица стилей для страницы может быть определена не только ее автором, но и читателем, и тогда правила каскадирования решают, какая из таблиц стилей будет иметь силу.

                      Kак это работает? Каждому правилу браузер приписывает весовой коэффициент. При интерпретации каждого тэга программа просматривает все правила этого тэга и сортирует их по величине весового коэффициента. Выигрывает самое "весомое" правило.

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

                        Старшинство типов таблиц стилей в документе (по убыванию): текущее задание стиля (inline), встраивание (embedding), связывание (linking).

                      Также можно изменить весовой коэффициент правила при помощи служебного слова important. В следующем примере значение red свойства

                      color и значение sans-serif свойства font-family помечены этим служебным словом, и поэтому программа просмотра не должна их переопределять. Однако если вступают в конфликт два таких правила, противоречие решается согласно принципам, изложенным выше.

                      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

    Можно объединить несколько связанных свойств CSS в одно свойство, чтобы сэкономить время и свои усилия.

    Сравнение индивидуальных и сокращенных значений

    Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):

    div.foo { margin-top: 1em; margin-right: 1.5em; margin-bottom: 2em; margin-left: 2.5em; }

    Это правило можно записать короче:

    div.foo { margin: 1em 1.5em 2em 2.5em; }

    Задание менее четырех значений для сокращенного свойства

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

    Справочник сокращений

    Граничные сокращения для различных свойств

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

    border-left-width: 2px; border-left-style: solid; border-left-color: black;
    Сокращения для некоторых свойств полей (margin ), заполнения (padding ) и границы (border ) Все это действует таким же образом как было показано выше в разделе "Выбор между одиночным свойством и сокращенным значением".
    Сокращения для шрифта С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий код:

    font-size: 1.5em; line-height: 200%; font-weight: bold; font-style: italic; font-family: Georgia, "Times New Roman", serif

    Можно определить все это с помощью следующей строки:

    font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;
    Сокращение для фона С помощью одной строки CSS можно определить цвет фона, фоновое изображение, повторение изображения и позицию изображения. Возьмем следующий код:

    background-color: #000; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;

    Это можно представить с помощью следующего сокращения:

    background:#000 url(image.gif) no-repeat top left;
    Сокращения для списков В данном случае аналогичная история со свойствами списков позволяет задать на одной строке значения свойств для типа маркера списка, позиции и изображения. Возьмем следующий код:

    list-style-type: circle; list-style-position: inside; list-style-image: url(bullet.gif) ;

    Это эквивалентно следующему:

    list-style: circle inside url(bullet.gif);

    Применение CSS к HTML

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

    • строковые;
    • вложенные;
    • внешние таблицы стилей.

    Строковые стили

    Можно применить таблицу стилей к элементу, используя атрибут style следующим образом:

    Внутри этого атрибута перечисляются все свойства CSS и их значения.

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

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

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

    Вложенные стили

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

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

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

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

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

    Импорт таблиц стилей

    Существует и другой способ импорта внешних таблиц стилей в файлы HTML - оператор @import . Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS . Синтаксис выглядит следующим образом:

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

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

    Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам.

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

    Каждый элемент в документе HTML будет наследовать все наследуемые свойства своего предка, за исключением корневого элемента (html ), который не имеет предка.

    Каскадирование

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

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

    Важность

    Важность объявления CSS зависит от того, где оно определено. Конфликтующие объявления будут применяться в следующем порядке, более поздние будут переопределять предыдущие:

    • Таблицы стилей агента пользователя
    • Обычные объявления в таблицах стиля пользователя
    • Обычные объявления в таблицах стиля автора
    • Важные объявления в таблицах стиля автора
    • Важные объявления в таблицах стиля пользователя

    Таблица стилей агента пользователя является встроенной таблицей стилей браузера. Каждый браузер имеет свои используемые по умолчанию правила, определяющие, как выводить различные элементы HTML , если никакой стиль не определен пользователем или дизайнером страницы. Например, непосещенные ссылки будут обычно выводиться синим цветом и подчеркнутыми.

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

    Таблица стилей автора является тем, что обычно и называется " таблица стилей ". Это таблица стилей , которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).

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

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

    Специфичность

    Специфичность опеределяют как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам (такой как *, который соответствует каждому элементу в документе), в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу (такой как #nav , который соответствует только элементу с id совпадающим с nav ).

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

    Специфичность имеет четыре компоненты, которые можно обозначить как a , b , c и d . Компонента a является наиболее разграничивающим, d - наименее.

    • Компонента a определяется очень просто: это 1 для объявления атрибута style , иначе это 0 .
    • Компонента b является числом селекторов id в селекторе (тех, которые начинаются с #).
    • Компонента c является числом селекторов атрибутов , включая селекторы классов - и псевдо-классов.
    • Компонента d является числом типов элементов и псевдо-элементов в селекторе.

    После небольшого подсчета можно получить строку из этих четырех компонентов, определяющую специфичность для любого правила. Объявления CSS в атрибуте style не имеют селектора, поэтому их специфичность всегда будет 1,0,0,0 .

    В таблице приведены некоторые примеры.

    Селектор a b c d Специфичность
    h1 0 0 0 1 0,0,0,1
    .foo 0 0 1 0 0,0,1,0
    #bar 0 1 0 0 0,1,0,0
    html>head+body ul#nav *.home a:link 0 1 2 5 0,1,2,5

    Стоит отметить, что соединяющие символы (такие как > , + и



© Copyright 2024, https://qzoreteam.ru