Каскадных таблиц стилей. Определение цветов
Для чего нужны таблицы стилей?
Каскадные таблицы стилей или 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; }
Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.
Для чего нужны таблицы стилей?
Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).
Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:
Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее:
- Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице).
- Нельзя задать фиксированные координаты положения блока на странице.
- Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.
Вторая проблема заключалась в том, что приходилось каждый раз задавать на страницах размер и цвет шрифта, свойства ячеек таблицы и т.д. Это сильно увеличивало размеры страницы, а значит, она медленнее загружается. В случае если вам захотелось изменить цвет или размер шрифта, вам пришлось бы редактировать все страницы.
Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.
С помощью CSS эти проблемы можно решить.
Способы применения CSS
Существует три способа применения таблиц стилей:
- селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
- пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
- между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
- свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
- пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
- так же код не чувствителен к регистру символов.
- body — это селектор, который представляет из себя имя тега ;
- background — свойство стиля, с помощью которого задаются параметры фона;
- #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.
- в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
- привязка к html элементу осуществляется через атрибут id , в качестве значения которого устанавливают имя стиля без знака решетки;
- значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.
- Селектор . Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
- Блок объявления стилей . Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
- Свойство . Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
- Значение . Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.
- Универсальный
. Задаёт правила всем элементам страницы, для которых не установлены другие правила.
Код * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов. - Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p
, h1
, ul
.
Например, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов . - Атрибута . С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.
- Класса . Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.
- Идентификатора . Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:
- Контекстный . В HTML одни теги часто находятся внутри других, и контекстные селекторы помогают задать правила как раз на такой случай. С помощью них, например, можно отформатировать элементы внутри нумерованных списков или курсивный текст внутри абзацев:
Внутренние таблицы стилей
(Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.
Пример HTML:
Пример CSS:
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.
Глобальные таблицы стилей
(Global Style Sheets) - определяют стиль элементов во всем документе.
Для этого используется тег
...
Недостаток этого способа в том, что правила 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 расшифровывается как «Cascading Style Sheets», что в переводе означает «Каскадные таблицы стилей». Используется для оформления веб-страниц. Если в HTML-коде находится содержимое (то, что покажет браузер), то CSS определяет его оформление (то, как браузер это покажет). Прелесть CSS в том, что с помощью одного стиля можно оформить сразу все однотипные элементы страницы или целого сайта (сразу все ссылки, абзацы, списки). CSS-стилем вы один раз определяете, как должен выглядеть тот или иной элемент, например, картинки, и они меняют свое оформление сразу во всех документах. Чтобы изменить форматирование текста по всему сайту, вам достаточно изменить CSS-код всего один раз.
Основные элементы CSS
Как HTML состоит из тегов , атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.
Свойств и значений в блоке объявления стилей может быть несколько, в таком случае они перечисляются через точку с запятой.
Типы селекторов
В зависимости от того, свойства каких элементов страницы они определяют, селекторы бывают разных типов.
Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.
CSS-код будет таким:
Step {margin-left: 15px;}
HTML-код, который привяжет элемент к правилу, будет следующим:
Текст с отступом
#exclusive {color:orange;}
P i {fint-family: Century;}
Остальные группы селекторов основаны на совмещении перечисленных типов, а также на принципе наследования, когда дочерний элемент берёт свойства родительского.
Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):
A.step {margin-left: 15px;}
Как подключить CSS к HTML-странице?
Заставить инструменты создания сайтов взаимодействовать друг с другом можно несколькими способами. По методу добавления стили делятся на следующие категории.
Встроенные стили
Задаются в документе прямо внутри HTML-тега с помощью атрибута style . Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна - оформление тега в нём и задано.
Следующий код задаёт размер и цвет шрифта тексту внутри тега
Текст, оформленный с помощью внутреннего стиля.
Глобальные стили
Задаются тегом …