... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Включение CSS в HTML (стр.1)

 

 


Возможности CSS1  ||   Возможности CSS2  ||   Включение CSS в HTML

 

Таблица стилей может быть написана не только на языке CSS, но и на каком-либо другом, например XSL. Для установки языка таблицы стилей по умолчанию используется элемент мета. Как вы помните, этот элемент задает разного рода служебную информацию и располагается в секции HEAD:

<HEAD> <МЕТА http-equiv="Content-Style-Type" content="text/ess"></HEAD>

Атрибут http-equiv="Content-Style-Type" указывает на то, что данный элемент МЕТА относится к таблице стилей, а атрибут content="text/css" показывает, что таблицы стилей будут написаны на языке CSS.

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


<HEAD>
<TITLE> Строительная фирма "Дом"</TITLE>
</HEAD>
<B0DY>
<H1 align="center"> Строительная фирма "Дом"</Н1>
<Р>Фирма "Дом" образовалась в 1998 году и с тех пор занимает лидирующее место на рынке строительства и отделочных материалов.</Р>
<Р>Фирма имеет сеть магазинов и торговых залов, расположенных в разных районах города. В них вы можете найти все для вашего дома, начиная с отделочных материалов и заканчивая мебелью и аксессуарами. </Р>
</B0DY>
</HTML>

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

<Н1 align="center" style= "color:green"> Строительная фирма "Дом"</Н1>


Атрибут style может использоваться в любом элементе HTML для задания его стиля оформления. В кавычках указывается правило CSS, описывающее, какое оформление должен иметь элемент. В данном случае задается цвет (color) и указывается конкретный цвет (green — зеленый). В качестве разделителя параметра и его значения в CSS используется двоеточие.

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

Таблица стилей, заданная внутри элемента HTML при помощи атрибута style, называется внутренней.

<Н1 style="color:green">Зеленый заголовок</Н1>


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

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

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


<STYLE type="text/css">
H1 {
color: green
   }
</STYLE>

В результате для всех элементов H1, которые встретятся в данном HTML-документе, будет применен зеленый цвет.

Замечание.

Чтобы в элементе STYLE указать, что это именно таблица стилей CSS, нужно задать атрибут type="text/ess". Если значение по умолчанию для таблиц стилей уже задано элементом мета, атрибут type в этом случае можно опустить.

 

Страницы: - 1 - | - 2 - | - 3

 

Возможности CSS1  ||   Возможности CSS2  ||   Включение CSS в HTML

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены