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

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

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

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

Синтаксис 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; }

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

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

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

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

Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете . А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.

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

Добавление стилей или как подключить CSS к HTML документу

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

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

Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».

Так примерно будет выглядеть строчка подключения стилей CSS в html коде:

...
.css"/>
...

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

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

...

...

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

3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style , который включает в себя в качестве параметров набор CSS свойств:

Абзац с серым фоном и красным текстом

Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Селектор {
Свойство: Значение;
Свойство: Значение;
...
Свойство: Значение
}

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

• селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
• пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
• между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
• свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
• пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
• так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

• body — это селектор, который представляет из себя имя тега ;
• background — свойство стиля, с помощью которого задаются параметры фона;
• #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега , потому что в качестве селектора указано имя тега без символов < и >.

Рассмотрим еще пример:

h1 {
font-size: 24px;
color: green;
}

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

зеленым цветом и задаст ему размер шрифта 24 пикселя.

В качестве селектора тега, кроме имени тега, можно указывать класс :

Yellowtext {color:yellow}

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

В этом абзаце оранжевый текст

В примере мы привязали к тегу

Css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

Cursivtext {font-style: italic}

желтый текст курсивом

В этом примере к тегу

Мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор , который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

• в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
• привязка к html элементу осуществляется через атрибут id , в качестве значения которого устанавливают имя стиля без знака решетки;
• значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

#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:

Этот заголовок отображается красным цветом

обычный текст, красный текст

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

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

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

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

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

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

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

Внедренный (Embedded) Внедрение позволяет контролировать всю страницу HTML. При использовании тега